:root {
  --app-canvas: #f0f2f5;
  --app-canvas-subtle: #f7f8fb;
  --app-surface: #ffffff;
  --app-surface-muted: #f7f8fa;
  --app-surface-raised: #ffffff;
  --app-text: #1c1e21;
  --app-text-muted: #606770;
  --app-text-subtle: #65676b;
  --app-border: #dddfe2;
  --app-border-soft: #e4e6eb;
  --app-border-subtle: #eef0f3;
  --app-border-strong: #ccd0d5;
  --app-link: #1d4ed8;
  --app-link-hover: #1e40af;
  --app-accent-soft: #e7f3ff;
  --app-info-soft: #eff6ff;
  --app-info-border: #bfdbfe;
  --app-warning-soft: #fff7ed;
  --app-warning-border: #fed7aa;
  --app-warning-text: #7a4b00;
  --app-sticky-surface: rgba(240, 242, 245, 0.94);
  --app-shadow: rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --app-canvas: #18191a;
  --app-canvas-subtle: #202122;
  --app-surface: #242526;
  --app-surface-muted: #2d2f31;
  --app-surface-raised: #303133;
  --app-text: #f0f2f5;
  --app-text-muted: #b0b3b8;
  --app-text-subtle: #c1c4c9;
  --app-border: #3e4042;
  --app-border-soft: #343638;
  --app-border-subtle: #303234;
  --app-border-strong: #5b5d61;
  --app-link: #7ab5ff;
  --app-link-hover: #a8ceff;
  --app-accent-soft: #233b57;
  --app-info-soft: #202f45;
  --app-info-border: #365f8d;
  --app-warning-soft: #3d2d1f;
  --app-warning-border: #78522c;
  --app-warning-text: #f7c873;
  --app-sticky-surface: rgba(24, 25, 26, 0.94);
  --app-shadow: rgba(0, 0, 0, 0.32);

  /* Lexxy publishes its UI palette as variables, so its toolbar and popovers
     can follow the application theme without overriding editor internals. */
  --lexxy-color-ink: #f0f2f5;
  --lexxy-color-ink-medium: #b0b3b8;
  --lexxy-color-ink-light: #8d9096;
  --lexxy-color-ink-lighter: #3e4042;
  --lexxy-color-ink-lightest: #2d2f31;
  --lexxy-color-ink-inverted: #18191a;
  --lexxy-color-canvas: #242526;
  --lexxy-color-text: #f0f2f5;
  --lexxy-color-text-subtle: #b0b3b8;
  --lexxy-color-link: #7ab5ff;
  --lexxy-color-selected: #233b57;
  --lexxy-color-selected-hover: #2e4d70;
  --lexxy-color-code-bg: #2d2f31;
  --lexxy-color-table-header-bg: #2d2f31;
  --lexxy-color-table-cell-border: #3e4042;
  --lexxy-color-table-cell-selected: #233b57;
  --lexxy-color-table-cell-selected-bg: #233b57;
}

html,
body {
  background-color: var(--app-canvas);
}

body {
  color: var(--app-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: var(--app-surface-muted);
  color: var(--app-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.theme-toggle:hover {
  background: var(--app-border-soft);
}

.theme-toggle:active {
  transform: scale(0.94);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.theme-toggle-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.theme-toggle-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle-sun {
  display: block;
}

.theme-toggle-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
}

.theme-toggle-floating .theme-toggle {
  border: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-surface) 88%, transparent);
  box-shadow: 0 6px 20px var(--app-shadow);
  backdrop-filter: blur(12px);
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .dropdown-content {
  border-color: var(--app-border) !important;
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--app-text-muted);
  opacity: 0.8;
}

html[data-theme="dark"] select option {
  background: var(--app-surface);
  color: var(--app-text);
}

html[data-theme="dark"] .ts-control,
html[data-theme="dark"] .ts-dropdown,
html[data-theme="dark"] .ts-dropdown .active {
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] .ts-dropdown .option:hover,
html[data-theme="dark"] .ts-dropdown .active {
  background: var(--app-surface-muted) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/50,
html[data-theme="dark"] .bg-white\/55,
html[data-theme="dark"] .bg-white\/60,
html[data-theme="dark"] .bg-white\/65,
html[data-theme="dark"] .bg-white\/70,
html[data-theme="dark"] .bg-white\/75,
html[data-theme="dark"] .bg-white\/80,
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .from-white {
  background-color: var(--app-surface) !important;
  --tw-gradient-from: var(--app-surface) !important;
}

html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-slate-200 {
  background-color: var(--app-surface-muted) !important;
}

html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-slate-900 {
  color: var(--app-text) !important;
}

html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-slate-600 {
  color: var(--app-text-subtle) !important;
}

html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-slate-300 {
  color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-gray-400,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-white\/70,
html[data-theme="dark"] .border-white\/80 {
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .divide-gray-200 > :not(:last-child) {
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .ring-slate-200,
html[data-theme="dark"] .ring-slate-200\/80,
html[data-theme="dark"] .ring-white\/30,
html[data-theme="dark"] .ring-white\/70,
html[data-theme="dark"] .ring-white\/80 {
  --tw-ring-color: var(--app-border) !important;
}

html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="dark"] .hover\:bg-white:hover {
  background-color: var(--app-surface-raised) !important;
}

html[data-theme="dark"] .disabled\:bg-slate-300:disabled {
  background-color: var(--app-border-soft) !important;
}

html[data-theme="dark"] .disabled\:text-slate-500:disabled {
  color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .from-slate-50,
html[data-theme="dark"] .via-slate-50,
html[data-theme="dark"] .from-sky-100,
html[data-theme="dark"] .via-sky-50,
html[data-theme="dark"] .via-indigo-50 {
  --tw-gradient-from: var(--app-canvas-subtle) !important;
  --tw-gradient-via: var(--app-surface-muted) !important;
}

html[data-theme="dark"] .to-white {
  --tw-gradient-to: var(--app-canvas) !important;
}

html[data-theme="dark"] .to-blue-50\/40,
html[data-theme="dark"] .to-violet-100 {
  --tw-gradient-to: var(--app-canvas-subtle) !important;
}

html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-rose-50 {
  background-color: color-mix(in srgb, var(--color-error) 16%, var(--app-surface)) !important;
}

html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .bg-yellow-50 {
  background-color: color-mix(in srgb, var(--color-warning) 16%, var(--app-surface)) !important;
}

html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-emerald-100 {
  background-color: color-mix(in srgb, var(--color-success) 14%, var(--app-surface)) !important;
}

html[data-theme="dark"] .bg-sky-50 {
  background-color: color-mix(in srgb, var(--color-info) 14%, var(--app-surface)) !important;
}

html[data-theme="dark"] .text-red-500,
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-rose-500,
html[data-theme="dark"] .text-rose-600,
html[data-theme="dark"] .text-rose-700 {
  color: #ff9aab !important;
}

html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-900 {
  color: #f7c873 !important;
}

html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-emerald-700 {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-sky-600,
html[data-theme="dark"] .text-sky-700,
html[data-theme="dark"] .text-indigo-600 {
  color: #8fc4ff !important;
}

html[data-theme="dark"] trix-editor,
html[data-theme="dark"] trix-toolbar .trix-button-group,
html[data-theme="dark"] trix-toolbar .trix-dialog,
html[data-theme="dark"] trix-toolbar .trix-input--dialog,
html[data-theme="dark"] .lexxy-content {
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] trix-toolbar .trix-button {
  border-color: var(--app-border) !important;
  color: var(--app-text-subtle);
  filter: invert(1);
}

html[data-theme="dark"] trix-toolbar .trix-button.trix-active {
  background: var(--app-accent-soft) !important;
}

html[data-theme="dark"] .trix-content pre {
  background: var(--app-surface-muted);
}

html[data-theme="dark"] .trix-content blockquote,
html[data-theme="dark"] .trix-content .attachment--file {
  border-color: var(--app-border);
  color: var(--app-text);
}

html[data-theme="dark"] .fact-export-header {
  background: linear-gradient(135deg, var(--app-surface-muted), var(--app-info-soft));
}

html[data-theme="dark"] .fact-export-eyebrow {
  color: #8fc4ff;
}

html[data-theme="dark"] .beiyihu-homepage {
  background: #151827 !important;
  color: #e5e7ff !important;
}

html[data-theme="dark"] .beiyihu-homepage > :first-child {
  border-color: #343854 !important;
  background: linear-gradient(135deg, #1c2940 0%, #282344 54%, #382f1d 100%) !important;
}

html[data-theme="dark"] .beiyihu-homepage [class~="bg-[#fff8df]"],
html[data-theme="dark"] .beiyihu-homepage [class~="bg-[#f6f2ff]"],
html[data-theme="dark"] .beiyihu-homepage [class~="bg-[#d8efff]"] {
  background: #292b3e !important;
}

html[data-theme="dark"] .beiyihu-homepage [class~="text-[#1e2858]"],
html[data-theme="dark"] .beiyihu-homepage [class~="text-[#20275f]"],
html[data-theme="dark"] .beiyihu-homepage [class~="text-[#2b2f75]"] {
  color: #eff0ff !important;
}

html[data-theme="dark"] .beiyihu-homepage [class~="text-[#48587c]"],
html[data-theme="dark"] .beiyihu-homepage [class~="text-[#526288]"],
html[data-theme="dark"] .beiyihu-homepage [class~="text-[#536084]"] {
  color: #b8bfdc !important;
}

html[data-theme="dark"] .beiyihu-homepage [class~="text-[#5d4bc1]"] {
  color: #b9adff !important;
}

html[data-theme="dark"] .beiyihu-homepage [class~="text-[#7c5a12]"],
html[data-theme="dark"] .beiyihu-homepage [class~="text-[#9b7420]"] {
  color: #e6c66f !important;
}

html[data-theme="dark"] .youyi-homepage {
  background: #14221f !important;
  color: #e3eee9 !important;
}

html[data-theme="dark"] .youyi-homepage > :first-child > :first-child {
  background: linear-gradient(135deg, #1e3832, #3a3322) !important;
}

html[data-theme="dark"] .youyi-homepage [class~="bg-[#eff8f3]"],
html[data-theme="dark"] .youyi-homepage [class~="bg-[#dbeee5]"] {
  background: #233a34 !important;
}

html[data-theme="dark"] .youyi-homepage [class~="text-[#183d34]"],
html[data-theme="dark"] .youyi-homepage [class~="text-[#243b34]"] {
  color: #eef8f4 !important;
}

html[data-theme="dark"] .youyi-homepage [class~="text-[#3f5f55]"],
html[data-theme="dark"] .youyi-homepage [class~="text-[#46685d]"] {
  color: #acc8be !important;
}

html[data-theme="dark"] .youyi-homepage [class~="text-[#8a6324]"] {
  color: #ddb96f !important;
}

html[data-theme="dark"] img:not(.facebook-brand-logo) {
  color-scheme: only light;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .theme-toggle {
    transition: none;
  }
}

@media (max-width: 767px) {
  .theme-toggle {
    display: none;
  }
}

@media (min-width: 768px) {
  html[data-theme="dark"] .md\:border-gray-100 {
    border-color: var(--app-border) !important;
  }
}