/* 全站 Claymorphism 浅色主题：只管理 UI 外壳配色，不接管画布、图片和用户设计内容。 */
:root {
  --background: #fbfbff;
  --foreground: #1a1b25;
  --card: #fbfbff;
  --card-foreground: #1a1b25;
  --popover: #ffffff;
  --popover-foreground: #1a1b25;
  --primary: #846feb;
  --primary-foreground: #ffffff;
  --secondary: #f0effd;
  --secondary-foreground: #3b3464;
  --muted: #f1f1f8;
  --muted-foreground: #63637e;
  --accent: #f0effd;
  --accent-foreground: #4b36cc;
  --destructive: #eb4f4f;
  --destructive-foreground: #ffffff;
  --border: #e2e2f2;
  --input: #d0d0eb;
  --ring: #846feb;
  --chart-1: #846feb;
  --chart-2: #b5a9f2;
  --chart-3: #3b3464;
  --chart-4: #d5d0f7;
  --chart-5: #6a57d1;
  --sidebar: #f8f8ff;
  --sidebar-foreground: #3f3f52;
  --sidebar-primary: #846feb;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f0effd;
  --sidebar-accent-foreground: #4b36cc;
  --sidebar-border: #ebebf5;
  --sidebar-ring: #846feb;
  --shadow-color: #000000;
  --shadow-2xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
  --shadow-xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
  --shadow-sm: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow-md: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
  --shadow-lg: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
  --shadow-xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
  --shadow-2xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.13);

  --bm-theme-meta: #846feb;
  --bm-page-bg: var(--background);
  --bm-text: var(--foreground);
  --bm-text-strong: var(--foreground);
  --bm-text-muted: var(--muted-foreground);
  --bm-text-soft: #77768d;
  --bm-surface: var(--card);
  --bm-surface-raised: var(--popover);
  --bm-surface-muted: var(--muted);
  --bm-surface-subtle: var(--secondary);
  --bm-surface-hover: var(--accent);
  --bm-border: var(--border);
  --bm-border-strong: var(--input);
  --bm-input-bg: var(--popover);
  --bm-input-border: var(--input);
  --bm-focus-ring: var(--ring);
  --bm-primary: var(--primary);
  --bm-primary-hover: #6a57d1;
  --bm-primary-soft: #eeeafd;
  --bm-primary-foreground: var(--primary-foreground);
  --bm-accent: var(--accent);
  --bm-accent-foreground: var(--accent-foreground);
  --bm-danger: var(--destructive);
  --bm-danger-soft: #fff0f0;
  --bm-danger-foreground: var(--destructive-foreground);
  --bm-success: #2f9b6d;
  --bm-success-soft: #edf9f2;
  --bm-success-foreground: #176243;
  --bm-warning: #d49a1f;
  --bm-warning-soft: #fff7df;
  --bm-warning-foreground: #805400;
  --bm-info: var(--primary);
  --bm-info-soft: var(--bm-primary-soft);
  --bm-info-foreground: var(--accent-foreground);
  --bm-overlay: hsl(248 22% 16% / 0.42);
  --bm-shadow-sm: var(--shadow-sm);
  --bm-shadow: var(--shadow);
  --bm-shadow-md: var(--shadow-md);
  --bm-shadow-lg: var(--shadow-lg);
  --bm-shadow-xl: var(--shadow-xl);
}

@supports (color: oklch(0.6217 0.1799 287.7754)) {
  :root {
    --background: oklch(0.9892 0.0053 286.3028);
    --foreground: oklch(0.2257 0.0194 280.2492);
    --card: oklch(0.9892 0.0053 286.3028);
    --card-foreground: oklch(0.2257 0.0194 280.2492);
    --popover: oklch(1.0000 0 0);
    --popover-foreground: oklch(0.2257 0.0194 280.2492);
    --primary: oklch(0.6217 0.1799 287.7754);
    --primary-foreground: oklch(1.0000 0 0);
    --secondary: oklch(0.9570 0.0187 289.3286);
    --secondary-foreground: oklch(0.3569 0.0813 288.2584);
    --muted: oklch(0.9601 0.0093 286.2229);
    --muted-foreground: oklch(0.5100 0.0425 284.7922);
    --accent: oklch(0.9570 0.0187 289.3286);
    --accent-foreground: oklch(0.4619 0.2173 279.9839);
    --destructive: oklch(0.6430 0.1925 24.3201);
    --destructive-foreground: oklch(1.0000 0 0);
    --border: oklch(0.9175 0.0216 285.9662);
    --input: oklch(0.8660 0.0371 285.5991);
    --ring: oklch(0.6217 0.1799 287.7754);
    --chart-1: oklch(0.6217 0.1799 287.7754);
    --chart-2: oklch(0.7716 0.1036 291.3083);
    --chart-3: oklch(0.3569 0.0813 288.2584);
    --chart-4: oklch(0.8740 0.0537 291.1256);
    --chart-5: oklch(0.5413 0.1805 285.7967);
    --sidebar: oklch(0.9811 0.0093 286.2277);
    --sidebar-foreground: oklch(0.3755 0.0323 284.7377);
    --sidebar-primary: oklch(0.6217 0.1799 287.7754);
    --sidebar-primary-foreground: oklch(1.0000 0 0);
    --sidebar-accent: oklch(0.9570 0.0187 289.3286);
    --sidebar-accent-foreground: oklch(0.4619 0.2173 279.9839);
    --sidebar-border: oklch(0.9430 0.0134 286.1402);
    --sidebar-ring: oklch(0.6217 0.1799 287.7754);
    --bm-success: oklch(0.6100 0.1180 154.0000);
    --bm-success-soft: oklch(0.9600 0.0300 154.0000);
    --bm-success-foreground: oklch(0.3000 0.0800 154.0000);
    --bm-warning: oklch(0.7350 0.1350 78.0000);
    --bm-warning-soft: oklch(0.9700 0.0420 86.0000);
    --bm-warning-foreground: oklch(0.4100 0.0900 72.0000);
  }
}

@supports (color: color-mix(in oklch, white, black)) {
  :root {
    --bm-text-soft: color-mix(in oklch, var(--muted-foreground) 72%, white);
    --bm-primary-hover: color-mix(in oklch, var(--primary) 86%, var(--foreground));
    --bm-primary-soft: color-mix(in oklch, var(--primary) 14%, white);
    --bm-danger-soft: color-mix(in oklch, var(--destructive) 13%, white);
  }
}

html {
  background: var(--bm-page-bg);
  color: var(--bm-text);
}

body {
  background-color: var(--bm-page-bg);
  color: var(--bm-text);
}

::selection {
  background: rgba(132, 111, 235, 0.24);
  background: color-mix(in oklch, var(--primary) 24%, white);
  color: var(--foreground);
}

:focus-visible {
  outline-color: var(--bm-focus-ring);
}

:where(a) {
  text-underline-offset: 3px;
}

:where(hr) {
  border-color: var(--bm-border);
}

:where(input:not([type="color"]), textarea, select) {
  background-color: var(--bm-input-bg);
  color: var(--bm-text);
  border-color: var(--bm-input-border);
}

:where(input:not([type="color"]), textarea, select)::placeholder {
  color: var(--bm-text-soft);
}

:where(input:not([type="color"]), textarea, select):focus,
:where(input:not([type="color"]), textarea, select):focus-visible {
  border-color: var(--bm-focus-ring);
  box-shadow: 0 0 0 3px rgba(132, 111, 235, 0.18);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 18%, transparent);
}

:where(button):focus-visible,
:where(a):focus-visible,
:where([role="button"]):focus-visible {
  outline: 2px solid var(--bm-focus-ring);
  outline-offset: 2px;
}

/* Tailwind 旧色兼容层：只覆盖常见 UI utility，真实色板和内联素材颜色不受影响。 */
:where(.bg-white, .bg-white\/80, .bg-white\/90, .bg-white\/95, .bg-white\/100) {
  background-color: var(--bm-surface-raised) !important;
}

:where(.bg-gray-50, .bg-slate-50, .bg-zinc-50, .bg-neutral-50) {
  background-color: var(--bm-page-bg) !important;
}

:where(.bg-gray-100, .bg-slate-100, .bg-zinc-100, .bg-neutral-100) {
  background-color: var(--bm-surface-muted) !important;
}

:where(.bg-gray-200, .bg-slate-200, .bg-zinc-200, .bg-neutral-200) {
  background-color: var(--bm-surface-subtle) !important;
}

:where(.bg-blue-50, .bg-indigo-50, .bg-purple-50, .bg-violet-50) {
  background-color: var(--bm-primary-soft) !important;
}

:where(.bg-blue-100, .bg-indigo-100, .bg-purple-100, .bg-violet-100) {
  background-color: #eeeafd !important;
  background-color: color-mix(in oklch, var(--primary) 16%, white) !important;
}

:where(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-violet-500, .bg-violet-600, .bg-violet-700) {
  background-color: var(--bm-primary) !important;
  color: var(--bm-primary-foreground) !important;
}

:where(.hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover, .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover, .hover\:bg-purple-600:hover, .hover\:bg-purple-700:hover, .hover\:bg-violet-600:hover, .hover\:bg-violet-700:hover) {
  background-color: var(--bm-primary-hover) !important;
  color: var(--bm-primary-foreground) !important;
}

:where(.hover\:bg-gray-50:hover, .hover\:bg-slate-50:hover, .hover\:bg-zinc-50:hover, .hover\:bg-neutral-50:hover, .hover\:bg-white:hover) {
  background-color: var(--bm-surface-hover) !important;
}

:where(.hover\:bg-gray-100:hover, .hover\:bg-slate-100:hover, .hover\:bg-zinc-100:hover, .hover\:bg-neutral-100:hover) {
  background-color: var(--bm-accent) !important;
}

:where(.text-gray-950, .text-gray-900, .text-gray-800, .text-slate-950, .text-slate-900, .text-slate-800, .text-zinc-950, .text-zinc-900, .text-zinc-800, .text-neutral-950, .text-neutral-900, .text-neutral-800) {
  color: var(--bm-text) !important;
}

:where(.text-gray-700, .text-gray-600, .text-slate-700, .text-slate-600, .text-zinc-700, .text-zinc-600, .text-neutral-700, .text-neutral-600) {
  color: var(--bm-secondary-text, var(--secondary-foreground)) !important;
}

:where(.text-gray-500, .text-gray-400, .text-slate-500, .text-slate-400, .text-zinc-500, .text-zinc-400, .text-neutral-500, .text-neutral-400) {
  color: var(--bm-text-muted) !important;
}

:where(.text-blue-500, .text-blue-600, .text-blue-700, .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-purple-500, .text-purple-600, .text-purple-700, .text-violet-500, .text-violet-600, .text-violet-700) {
  color: var(--bm-primary) !important;
}

:where(.hover\:text-gray-900:hover, .hover\:text-gray-800:hover, .hover\:text-slate-900:hover, .hover\:text-zinc-950:hover, .hover\:text-zinc-900:hover) {
  color: var(--bm-text) !important;
}

:where(.hover\:text-blue-600:hover, .hover\:text-blue-700:hover, .hover\:text-indigo-600:hover, .hover\:text-purple-600:hover, .hover\:text-purple-700:hover, .hover\:text-violet-600:hover) {
  color: var(--bm-primary-hover) !important;
}

:where(.border-gray-50, .border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200, .border-zinc-100, .border-zinc-200, .border-neutral-100, .border-neutral-200, .border-white\/10, .border-white\/15, .border-white\/20) {
  border-color: var(--bm-border) !important;
}

:where(.border-gray-300, .border-slate-300, .border-zinc-300, .border-neutral-300) {
  border-color: var(--bm-border-strong) !important;
}

:where(.border-blue-200, .border-blue-300, .border-blue-500, .border-blue-600, .border-indigo-200, .border-indigo-300, .border-indigo-500, .border-purple-200, .border-purple-300, .border-purple-500, .border-violet-200, .border-violet-300, .border-violet-500) {
  border-color: var(--bm-focus-ring) !important;
}

:where(.hover\:border-gray-300:hover, .hover\:border-zinc-300:hover, .hover\:border-slate-300:hover, .hover\:border-neutral-300:hover) {
  border-color: var(--bm-border-strong) !important;
}

:where(.ring-blue-500, .ring-blue-600, .ring-indigo-500, .ring-purple-500, .focus\:ring-blue-500:focus, .focus\:ring-blue-600:focus, .focus-visible\:ring-blue-500:focus-visible, .focus-visible\:ring-purple-500:focus-visible) {
  --tw-ring-color: var(--bm-focus-ring) !important;
}

:where(.shadow-sm) {
  box-shadow: var(--bm-shadow-sm) !important;
}

:where(.shadow, .shadow-md) {
  box-shadow: var(--bm-shadow-md) !important;
}

:where(.shadow-lg, .shadow-xl, .shadow-2xl) {
  box-shadow: var(--bm-shadow-lg) !important;
}

:where(.from-blue-500, .from-blue-600, .from-indigo-500, .from-indigo-600, .from-purple-500, .from-purple-600, .from-violet-500, .from-violet-600) {
  --tw-gradient-from: var(--bm-primary) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(132, 111, 235, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-to: color-mix(in oklch, var(--primary) 0%, transparent) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

:where(.via-blue-500, .via-indigo-500, .via-purple-500, .via-violet-500) {
  --tw-gradient-to: rgba(132, 111, 235, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-to: color-mix(in oklch, var(--primary) 0%, transparent) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--bm-primary) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

:where(.to-blue-500, .to-blue-600, .to-indigo-500, .to-indigo-600, .to-purple-500, .to-purple-600, .to-violet-500, .to-violet-600) {
  --tw-gradient-to: #8f7df0 var(--tw-gradient-to-position) !important;
  --tw-gradient-to: color-mix(in oklch, var(--primary) 72%, var(--chart-2)) var(--tw-gradient-to-position) !important;
}

/* 语义状态：危险/成功/警告保留各自语义。 */
:where(.bg-red-50) {
  background-color: var(--bm-danger-soft) !important;
}

:where(.bg-red-100, .bg-rose-100) {
  background-color: #fdecec !important;
  background-color: color-mix(in oklch, var(--destructive) 18%, white) !important;
}

:where(.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600) {
  background-color: var(--bm-danger) !important;
  color: var(--bm-danger-foreground) !important;
}

:where(.text-red-500, .text-red-600, .text-red-700, .text-rose-500, .text-rose-600, .text-rose-700) {
  color: var(--bm-danger) !important;
}

:where(.border-red-200, .border-red-300, .border-red-500, .border-rose-200, .border-rose-300) {
  border-color: #f3abab !important;
  border-color: color-mix(in oklch, var(--destructive) 42%, white) !important;
}

:where(.bg-green-50, .bg-emerald-50) {
  background-color: var(--bm-success-soft) !important;
}

:where(.bg-green-100, .bg-emerald-100) {
  background-color: #e8f6ee !important;
  background-color: color-mix(in oklch, var(--bm-success) 18%, white) !important;
}

:where(.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600) {
  background-color: var(--bm-success) !important;
  color: white !important;
}

:where(.text-green-500, .text-green-600, .text-green-700, .text-emerald-500, .text-emerald-600, .text-emerald-700) {
  color: var(--bm-success-foreground) !important;
}

:where(.border-green-200, .border-green-300, .border-emerald-200, .border-emerald-300) {
  border-color: #a8d8c1 !important;
  border-color: color-mix(in oklch, var(--bm-success) 38%, white) !important;
}

:where(.bg-yellow-50, .bg-amber-50, .bg-orange-50) {
  background-color: var(--bm-warning-soft) !important;
}

:where(.bg-yellow-100, .bg-amber-100, .bg-orange-100) {
  background-color: #fbf0d2 !important;
  background-color: color-mix(in oklch, var(--bm-warning) 18%, white) !important;
}

:where(.bg-yellow-500, .bg-amber-500, .bg-orange-500, .bg-orange-600) {
  background-color: var(--bm-warning) !important;
  color: var(--bm-warning-foreground) !important;
}

:where(.text-yellow-600, .text-yellow-700, .text-amber-600, .text-amber-700, .text-orange-600, .text-orange-700) {
  color: var(--bm-warning-foreground) !important;
}

:where(.border-yellow-200, .border-yellow-300, .border-amber-200, .border-amber-300, .border-orange-200, .border-orange-300) {
  border-color: #ead097 !important;
  border-color: color-mix(in oklch, var(--bm-warning) 38%, white) !important;
}

/* 常见组件壳层。 */
:where(
  .card,
  .profile-card,
  .frame-card,
  .pricing-card,
  .bm-plan-card,
  .info-nav-card,
  .info-content-card,
  .pb-template-card,
  .pb-guide article,
  .payment-status-card,
  .checkout-form,
  .modal,
  .modal-content,
  .mobile-safe-modal,
  .design-pay-panel,
  [role="dialog"],
  [data-radix-popper-content-wrapper]
) {
  background-color: var(--bm-surface-raised);
  color: var(--bm-text);
  border-color: var(--bm-border);
}

:where(
  .nav-sidebar,
  .materials-panel,
  .layers-panel,
  .admin-sidebar,
  .sidebar,
  .bm-sidebar,
  .info-nav,
  .pb-topbar
) {
  background-color: var(--sidebar);
  color: var(--sidebar-foreground);
  border-color: var(--sidebar-border);
}

:where(
  .btn-primary,
  .primary-btn,
  .bm-primary-btn,
  .design-pay-btn-membership,
  .pb-primary-link,
  .pricing-primary-button
) {
  background-color: var(--bm-primary);
  color: var(--bm-primary-foreground);
  border-color: var(--bm-primary);
}

:where(
  .btn-primary:hover,
  .primary-btn:hover,
  .bm-primary-btn:hover,
  .design-pay-btn-membership:hover,
  .pb-primary-link:hover,
  .pricing-primary-button:hover
) {
  background-color: var(--bm-primary-hover);
  border-color: var(--bm-primary-hover);
}

:where(
  .btn-secondary,
  .secondary-btn,
  .bm-secondary-btn,
  .pb-secondary-link
) {
  background-color: var(--bm-surface-subtle);
  color: var(--secondary-foreground);
  border-color: var(--bm-border);
}

:where(
  .btn-secondary:hover,
  .secondary-btn:hover,
  .bm-secondary-btn:hover,
  .pb-secondary-link:hover
) {
  background-color: var(--bm-surface-hover);
  color: var(--accent-foreground);
}

:where(
  .chip,
  .tag,
  .badge,
  .pb-chip,
  .pb-tag-row span,
  .pricing-billing-pill,
  .info-nav-item,
  .grid-chip
) {
  background-color: var(--bm-surface-subtle);
  color: var(--secondary-foreground);
  border-color: var(--bm-border);
}

:where(
  .chip:hover,
  .tag:hover,
  .pb-chip:hover,
  .info-nav-item:hover,
  .grid-chip:hover
) {
  background-color: var(--bm-surface-hover);
  color: var(--accent-foreground);
}

:where(
  .active,
  .selected,
  .is-active,
  .tab-active,
  .payment-option.selected
) {
  border-color: var(--bm-focus-ring);
}

:where(
  .modal-overlay,
  .mobile-text-editor-modal__backdrop,
  .design-pay-backdrop
) {
  background-color: var(--bm-overlay);
}

:where(
  .toast,
  .crop-tool__feedback-toast,
  .notification,
  .alert
) {
  background-color: var(--bm-surface-raised);
  color: var(--bm-text);
  border-color: var(--bm-border);
  box-shadow: var(--bm-shadow-lg);
}

:where(.status-success, .payment-success) {
  background-color: var(--bm-success-soft);
  color: var(--bm-success-foreground);
  border-color: #aedfc8;
  border-color: color-mix(in oklch, var(--bm-success) 36%, white);
}

:where(.status-warning, .payment-pending) {
  background-color: var(--bm-warning-soft);
  color: var(--bm-warning-foreground);
  border-color: #ebd49e;
  border-color: color-mix(in oklch, var(--bm-warning) 36%, white);
}

:where(.status-danger, .status-error, .payment-failed) {
  background-color: var(--bm-danger-soft);
  color: var(--bm-danger);
  border-color: #f4b2b2;
  border-color: color-mix(in oklch, var(--destructive) 36%, white);
}

:where(table) {
  color: var(--bm-text);
}

:where(th) {
  color: var(--bm-text-muted);
  background-color: var(--bm-surface-muted);
  border-color: var(--bm-border);
}

:where(td) {
  border-color: var(--bm-border);
}

*::-webkit-scrollbar-track {
  background: var(--bm-surface-muted);
}

*::-webkit-scrollbar-thumb {
  background: #c9c7ec;
  background: color-mix(in oklch, var(--input) 78%, var(--primary));
}

/* 页面级外壳兼容：覆盖后加载页面 CSS 中的旧蓝/灰外壳，不覆盖图片和画布内容。 */
:where(
  body.pc-page,
  body.pb-page,
  body.ai-agent-page,
  .info-page,
  .info-main,
  .invite-shell,
  .pc-shell,
  .ai-agent-shell
) {
  background: var(--bm-page-bg) !important;
  color: var(--bm-text) !important;
}

:where(
  header,
  .pc-topbar,
  .pb-topbar,
  .info-page header,
  .ai-agent-sidebar__header,
  .ai-agent-sidebar__footer,
  .top-nav,
  .navbar,
  .main-header,
  .topbar
) {
  background: #f8f7ff !important;
  background: color-mix(in oklch, var(--popover) 88%, var(--secondary)) !important;
  color: var(--bm-text) !important;
  border-color: var(--bm-border) !important;
}

:where(
  .pricing-billing-pill,
  .bm-order-loading,
  .bm-plan-card,
  .pc-section-card,
  .pc-filter-card,
  .pc-map-card,
  .pc-map-frame,
  .pc-chart,
  .pc-submit-panel,
  .pc-empty-state,
  .pc-stat-card,
  .pc-success-card,
  .info-nav-card,
  .info-content,
  .info-hero-media,
  .info-copy-chip,
  .pb-template-card,
  .pb-guide,
  .pb-guide article,
  .pb-detail-section,
  .pb-hero-media,
  .pb-detail-media,
  .pb-layout-preview,
  .invite-panel,
  .invite-status,
  .checkout-form,
  .order-summary-card,
  .payment-status-card,
  .profile-card,
  .work-card,
  .admin-info,
  .materials-panel,
  .properties-panel,
  .layers-panel,
  .toolbar,
  .modal-content,
  .save-status-btn
) {
  background: var(--bm-surface-raised) !important;
  color: var(--bm-text) !important;
  border-color: var(--bm-border) !important;
  box-shadow: var(--bm-shadow) !important;
}

:where(
  .pc-filter-panel--hero,
  .pc-chart-skeleton,
  .pb-template-media,
  .pb-layout-preview,
  .info-callout,
  .info-copy-control,
  .mobile-tool-panel,
  .mobile-text-editor-modal__dialog,
  .mobile-bottom-bar,
  .layer-context-menu,
  .font-dropdown,
  .font-selector-panel
) {
  background: var(--bm-surface-muted) !important;
  color: var(--bm-text) !important;
  border-color: var(--bm-border) !important;
}

:where(
  .pricing-kicker,
  .pb-eyebrow,
  .pb-section-kicker,
  .pb-template-meta,
  .pc-brand-kicker,
  .info-meta,
  .info-nav-eyebrow,
  .invite-kicker,
  .ai-agent-brand__sub,
  .ai-agent-status-note
) {
  color: var(--bm-primary) !important;
}

:where(
  .bm-plan-title,
  .pc-brand,
  .pc-filter-label,
  .pc-section-title,
  .pb-brand,
  .pb-hero h1,
  .pb-section-head h2,
  .pb-guide h2,
  .info-title,
  .info-section h3,
  .invite-panel h1,
  .ai-agent-brand__title,
  .ai-agent-message__author,
  .modal-title
) {
  color: var(--bm-text) !important;
}

:where(
  .bm-plan-description,
  .bm-plan-footnote,
  .pc-chart-footnote,
  .pc-filter-hint,
  .pc-empty-state,
  .pb-hero-lead,
  .pb-section-head p,
  .pb-guide p,
  .pb-hero-media figcaption,
  .pb-layout-preview figcaption,
  .info-lead,
  .info-section p,
  .info-list,
  .info-nav-foot,
  .invite-copy,
  .invite-rule,
  .ai-agent-message__author,
  .ai-agent-bubble,
  .ai-agent-help-text
) {
  color: var(--bm-text-muted) !important;
}

:where(
  .bm-plan-ribbon,
  .bm-plan-action.is-primary,
  .bm-plan-button-primary,
  .pricing-primary-button,
  .pc-submit-button,
  .pc-success-share-button,
  .pb-primary-link,
  .invite-primary,
  .ai-agent-send-button,
  .ai-agent-primary-button,
  .payment-button,
  .coupon-button
) {
  background: var(--bm-primary) !important;
  color: var(--bm-primary-foreground) !important;
  border-color: var(--bm-primary) !important;
  box-shadow: var(--bm-shadow-md) !important;
}

:where(
  .bm-plan-action.is-primary:hover,
  .bm-plan-button-primary:hover,
  .pricing-primary-button:hover,
  .pc-submit-button:hover,
  .pc-success-share-button:hover,
  .pb-primary-link:hover,
  .invite-primary:hover,
  .ai-agent-send-button:hover,
  .ai-agent-primary-button:hover,
  .payment-button:hover,
  .coupon-button:hover
) {
  background: var(--bm-primary-hover) !important;
  border-color: var(--bm-primary-hover) !important;
}

:where(
  .bm-plan-action,
  .pc-filter-select,
  .pc-secondary-link,
  .pb-secondary-link,
  .invite-secondary,
  .ai-agent-panel-toggle,
  .ai-agent-new-message-button,
  .ai-agent-zoom-action,
  .ai-agent-zoom-toggle,
  .mobile-text-editor-modal__button--ghost,
  .payment-option
) {
  background: var(--bm-surface-subtle) !important;
  color: var(--secondary-foreground) !important;
  border-color: var(--bm-border) !important;
}

:where(
  .bm-plan-action:hover,
  .pc-secondary-link:hover,
  .pb-secondary-link:hover,
  .invite-secondary:hover,
  .ai-agent-panel-toggle:hover,
  .ai-agent-new-message-button:hover,
  .ai-agent-zoom-action:hover,
  .ai-agent-zoom-toggle:hover,
  .mobile-text-editor-modal__button--ghost:hover,
  .payment-option:hover
) {
  background: var(--bm-surface-hover) !important;
  color: var(--accent-foreground) !important;
}

:where(
  .bm-plan-card.is-highlighted,
  .payment-option.selected,
  .pc-filter-select:focus,
  .mobile-text-editor-modal__input:focus,
  .ai-agent-composer__input:focus-within
) {
  border-color: var(--bm-focus-ring) !important;
  box-shadow: 0 0 0 3px rgba(132, 111, 235, 0.16), var(--bm-shadow-md) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 16%, transparent), var(--bm-shadow-md) !important;
}

:where(.bm-plan-card:not(.is-highlighted)) {
  border-color: #e5e7eb !important;
  box-shadow: var(--bm-shadow) !important;
}

:where(
  .pb-chip,
  .pb-tag-row span,
  .info-nav-item,
  .info-copy-button,
  .pc-chip,
  .pc-map-corner-label,
  .invite-icon,
  .ai-agent-chip
) {
  background: var(--bm-surface-subtle) !important;
  color: var(--secondary-foreground) !important;
  border-color: var(--bm-border) !important;
}

:where(.info-nav-item.is-active) {
  color: var(--bm-primary) !important;
}

.info-nav-item::before {
  background: var(--bm-primary) !important;
}

:where(.info-content a, .pb-template-card a, .pb-topnav a, .pc-brand, .modal-link) {
  color: var(--bm-primary) !important;
}

:where(.pc-glow, .ai-agent-generation-placeholder__glow) {
  background: rgba(132, 111, 235, 0.18) !important;
  background: color-mix(in oklch, var(--primary) 18%, transparent) !important;
}

:where(.payment-success, .success) {
  background: var(--bm-success-soft) !important;
  color: var(--bm-success-foreground) !important;
  border-color: #a8d8c1 !important;
  border-color: color-mix(in oklch, var(--bm-success) 38%, white) !important;
}

:where(.payment-pending, .warning, .info) {
  background: var(--bm-warning-soft) !important;
  color: var(--bm-warning-foreground) !important;
  border-color: #ead097 !important;
  border-color: color-mix(in oklch, var(--bm-warning) 38%, white) !important;
}

:where(.payment-failed, .error, .is-error) {
  background: var(--bm-danger-soft) !important;
  color: var(--bm-danger) !important;
  border-color: #f3abab !important;
  border-color: color-mix(in oklch, var(--destructive) 38%, white) !important;
}

/* 设计器外壳：只管普通 DOM 面板，不覆盖 canvas 和 Fabric 内容。 */
:where(
  .design-app,
  .main-content,
  .workspace,
  .editor-shell,
  .nav-sidebar,
  .materials-panel,
  .layers-panel,
  .properties-panel,
  .params-panel,
  .toolbar,
  .top-toolbar,
  .side-panel,
  .mobile-panel,
  .mobile-toolbar,
  .mobile-drawer,
  .mobile-text-editor-modal__dialog
) {
  background: var(--bm-surface-raised) !important;
  color: var(--bm-text) !important;
  border-color: var(--bm-border) !important;
}

:where(
  .tool-btn,
  .toolbar-btn,
  .nav-item,
  .sidebar-btn,
  .panel-tab,
  .grid-chip,
  .layer-item,
  .context-menu-item,
  .mobile-tool-button
) {
  color: var(--bm-text) !important;
  border-color: var(--bm-border) !important;
}

:where(
  .tool-btn:hover,
  .toolbar-btn:hover,
  .nav-item:hover,
  .sidebar-btn:hover,
  .panel-tab:hover,
  .grid-chip:hover,
  .layer-item:hover,
  .context-menu-item:hover,
  .mobile-tool-button:hover
) {
  background: var(--bm-surface-hover) !important;
  color: var(--accent-foreground) !important;
}

:where(
  .tool-btn.active,
  .toolbar-btn.active,
  .nav-item.active,
  .sidebar-btn.active,
  .panel-tab.active,
  .grid-chip.active,
  .layer-item.active,
  .mobile-tool-button.is-active
) {
  background: var(--bm-primary-soft) !important;
  color: var(--bm-primary) !important;
  border-color: var(--bm-focus-ring) !important;
}