:root {
  --page: #ffffff;
  --page-rgb: 255 255 255;
  --surface: #ffffff;
  --surface-rgb: 255 255 255;
  --surface-muted: #f5f6f7;
  --surface-muted-rgb: 245 246 247;
  --surface-hover: #eeeeee;
  --content: #1a1a1a;
  --content-rgb: 26 26 26;
  --content-secondary: #666666;
  --content-secondary-rgb: 102 102 102;
  --content-muted: #737373;
  --line: #e5e5e5;
  --line-rgb: 229 229 229;
  --control-line: #737373;
  --focus: #2563eb;
  --veil: rgba(255,255,255,.94);
  --shadow: 0 8px 32px rgba(0,0,0,.16);
  --accent-red: #dc2626;
  --accent-blue: #2563eb;
  --accent-green: #15803d;
  --accent-amber: #b45309;
  --accent-purple: #7c3aed;
  --accent-pink: #db2777;
  color-scheme: light;
}
:root.dark {
  --page: #151618;
  --page-rgb: 21 22 24;
  --surface: #141414;
  --surface-rgb: 20 20 20;
  --surface-muted: #1e1e1e;
  --surface-muted-rgb: 30 30 30;
  --surface-hover: #262626;
  --content: #e5e5e5;
  --content-rgb: 229 229 229;
  --content-secondary: #a3a3a3;
  --content-secondary-rgb: 163 163 163;
  --content-muted: #a3a3a3;
  --line: #303030;
  --line-rgb: 48 48 48;
  --control-line: #737373;
  --focus: #60a5fa;
  --veil: rgba(21,22,24,.96);
  --shadow: 0 8px 32px rgba(0,0,0,.55);
  --accent-red: #fca5a5;
  --accent-blue: #93c5fd;
  --accent-green: #86efac;
  --accent-amber: #fcd34d;
  --accent-purple: #c4b5fd;
  --accent-pink: #f9a8d4;
  color-scheme: dark;
}
html, body { background-color: var(--page); color: var(--content); }
body.theme-platform { background-color: var(--platform-background, var(--page)); }
.dark body.theme-platform { background-color: var(--page); }
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark textarea, .dark select { background-color: var(--surface); color: var(--content); border-color: var(--control-line); }
.dark input::placeholder, .dark textarea::placeholder { color: var(--content-muted); }
:where(button, a, summary, input, textarea, select):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.dark :where(button, a, summary, input, textarea, select):focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 3px; }
/* Text fields indicate focus on their existing border, without an outer outline/ring. */
:root :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):not([type="file"]), textarea):focus {
  outline: none !important;
  outline-offset: 0;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  box-shadow: var(--tw-shadow, 0 0 #0000) !important;
  border-color: var(--focus) !important;
}
.theme-switcher { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 6px; color: #6b7280; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.theme-switcher:hover { color: #374151; }
.dark .theme-switcher { color: #cbd5e1; }
.dark .theme-switcher:hover { color: #f1f5f9; }
.theme-switcher:focus:not(:focus-visible) { outline: none; }
@media (max-width: 767px) {
  .mobile-nav-controls > .theme-switcher { width: 32px; }
}
.theme-switcher svg { width: 20px; height: 20px; }
.theme-switcher .theme-icon-dark, .dark .theme-switcher .theme-icon-light { display: none; }
.dark .theme-switcher .theme-icon-dark { display: block; }
.theme-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-top: 1px solid var(--line); color: var(--content); }
.theme-inline > span { font-size: 12px; color: var(--content-secondary); }
.theme-standalone { position: relative; display: flex; justify-content: flex-end; max-width: 1200px; margin: 0 auto; padding: 12px 20px 0; z-index: 60; }
.theme-code { background: #fff !important; color: #1a1a1a !important; padding: 8px; border-radius: 6px; }
.theme-dialog-overlay { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.65); }
.theme-dialog { width: 100%; max-width: 420px; max-height: 85vh; overflow: auto; padding: 24px; background: var(--surface); color: var(--content); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.theme-dialog h2 { margin: 0 0 12px; font-size: 20px; color: var(--content); }
.theme-dialog p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; color: var(--content-secondary); }
.theme-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.theme-dialog button { padding: 10px 18px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: var(--surface-muted); color: var(--content); }
.theme-dialog button[data-confirm] { background: var(--button-blue, #2563eb); color: #fff; border-color: var(--button-blue, #2563eb); }
@media (prefers-reduced-motion: reduce) { .theme-switcher *, .theme-dialog * { transition: none; } }

/* Inline styles and DOM-created dialogs retain their light fallback colors. */
:root.dark {
  --theme-surface: var(--surface);
  --theme-muted-bg: var(--surface-muted);
  --theme-text: var(--content);
  --theme-muted: var(--content-secondary);
  --theme-border: var(--line);
  --theme-red-text: var(--accent-red);
  --theme-amber-text: var(--accent-amber);
  --theme-green-text: var(--accent-green);
  --theme-blue-text: var(--accent-blue);
  --theme-purple-text: var(--accent-purple);
  --theme-pink-text: var(--accent-pink);
}

img[data-theme-code], .kuku-reward-qr-image { background: #fff !important; padding: 8px; border-radius: 8px; }

.theme-static-control { position: fixed; top: 12px; right: 12px; z-index: 11000; }
@media (min-width: 768px) {
  .theme-static-inline { position: static; }
  [data-theme-language-controls] { right: 12px; align-items: center; }
}
.dark .kuku-reward-dialog, .dark .kuku-ios-promo-card { border-color: var(--line); }
.dark .kuku-reward-resource-links { background: var(--surface); }
.dark .kuku-reward-title { -webkit-text-fill-color: var(--accent-amber); }

:root.dark {
  --theme-red-bg: #301416;
  --theme-green-bg: #102a1a;
  --theme-amber-bg: #2d2210;
  --theme-blue-bg: #101f35;
  --theme-purple-bg: #22162f;
}

/* Shared muted action colors: only filled controls change, never text headings or cards. */
:root.dark {
  --button-content: #f5f5f5;
  --button-blue: #1d4ed8;
  --button-blue-hover: #1e40af;
  --button-cyan: #0e7490;
  --button-cyan-hover: #155e75;
  --button-sky: #0369a1;
  --button-sky-hover: #075985;
  --button-green: #15803d;
  --button-green-hover: #166534;
  --button-emerald: #047857;
  --button-emerald-hover: #065f46;
  --button-red: #b91c1c;
  --button-red-hover: #991b1b;
  --button-pink: #be185d;
  --button-pink-hover: #9d174d;
  --button-purple: #7e22ce;
  --button-purple-hover: #6b21a8;
  --button-violet: #6d28d9;
  --button-violet-hover: #5b21b6;
  --button-indigo: #4338ca;
  --button-indigo-hover: #3730a3;
  --button-orange: #c2410c;
  --button-orange-hover: #9a3412;
  --button-amber: #b45309;
  --button-amber-hover: #92400e;
  --button-yellow: #a16207;
  --button-yellow-hover: #854d0e;
  --preview-veil: rgba(0, 0, 0, .26);
  --hellotik-primary: var(--button-red);
  --hellotik-primary-hover: var(--button-red-hover);
}
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-blue-400"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"]) { background-color: var(--button-blue) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-blue-400"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-blue-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-blue-400"], [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-blue-700"]) { --tw-gradient-from: var(--button-blue) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-blue-400"], [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-blue-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-blue-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-blue-400"], [class~="to-blue-500"], [class~="to-blue-600"], [class~="to-blue-700"]) { --tw-gradient-to: var(--button-blue) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-blue-400"], [class~="to-blue-500"], [class~="to-blue-600"], [class~="to-blue-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-blue-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-cyan-400"], [class~="bg-cyan-500"], [class~="bg-cyan-600"], [class~="bg-cyan-700"]) { background-color: var(--button-cyan) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-cyan-400"], [class~="bg-cyan-500"], [class~="bg-cyan-600"], [class~="bg-cyan-700"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-cyan-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-cyan-400"], [class~="from-cyan-500"], [class~="from-cyan-600"], [class~="from-cyan-700"]) { --tw-gradient-from: var(--button-cyan) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-cyan-400"], [class~="from-cyan-500"], [class~="from-cyan-600"], [class~="from-cyan-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-cyan-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-cyan-400"], [class~="to-cyan-500"], [class~="to-cyan-600"], [class~="to-cyan-700"]) { --tw-gradient-to: var(--button-cyan) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-cyan-400"], [class~="to-cyan-500"], [class~="to-cyan-600"], [class~="to-cyan-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-cyan-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-sky-400"], [class~="bg-sky-500"], [class~="bg-sky-600"], [class~="bg-sky-700"], [class~="bg-[#00a1d6]"], [class~="bg-[#0ea5e9]"]) { background-color: var(--button-sky) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-sky-400"], [class~="bg-sky-500"], [class~="bg-sky-600"], [class~="bg-sky-700"], [class~="bg-[#00a1d6]"], [class~="bg-[#0ea5e9]"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-sky-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-sky-400"], [class~="from-sky-500"], [class~="from-sky-600"], [class~="from-sky-700"], [class~="from-[#00a1d6]"], [class~="from-[#0ea5e9]"]) { --tw-gradient-from: var(--button-sky) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-sky-400"], [class~="from-sky-500"], [class~="from-sky-600"], [class~="from-sky-700"], [class~="from-[#00a1d6]"], [class~="from-[#0ea5e9]"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-sky-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-sky-400"], [class~="to-sky-500"], [class~="to-sky-600"], [class~="to-sky-700"], [class~="to-[#00a1d6]"], [class~="to-[#0ea5e9]"]) { --tw-gradient-to: var(--button-sky) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-sky-400"], [class~="to-sky-500"], [class~="to-sky-600"], [class~="to-sky-700"], [class~="to-[#00a1d6]"], [class~="to-[#0ea5e9]"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-sky-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-green-400"], [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-700"], [class~="bg-[#07C160]"], [class~="bg-[#06ae56]"]) { background-color: var(--button-green) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-green-400"], [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-700"], [class~="bg-[#07C160]"], [class~="bg-[#06ae56]"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-green-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-green-400"], [class~="from-green-500"], [class~="from-green-600"], [class~="from-green-700"], [class~="from-[#07C160]"], [class~="from-[#06ae56]"]) { --tw-gradient-from: var(--button-green) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-green-400"], [class~="from-green-500"], [class~="from-green-600"], [class~="from-green-700"], [class~="from-[#07C160]"], [class~="from-[#06ae56]"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-green-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-green-400"], [class~="to-green-500"], [class~="to-green-600"], [class~="to-green-700"], [class~="to-[#07C160]"], [class~="to-[#06ae56]"]) { --tw-gradient-to: var(--button-green) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-green-400"], [class~="to-green-500"], [class~="to-green-600"], [class~="to-green-700"], [class~="to-[#07C160]"], [class~="to-[#06ae56]"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-green-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-emerald-400"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-emerald-700"]) { background-color: var(--button-emerald) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-emerald-400"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-emerald-700"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-emerald-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-emerald-400"], [class~="from-emerald-500"], [class~="from-emerald-600"], [class~="from-emerald-700"]) { --tw-gradient-from: var(--button-emerald) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-emerald-400"], [class~="from-emerald-500"], [class~="from-emerald-600"], [class~="from-emerald-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-emerald-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-emerald-400"], [class~="to-emerald-500"], [class~="to-emerald-600"], [class~="to-emerald-700"]) { --tw-gradient-to: var(--button-emerald) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-emerald-400"], [class~="to-emerald-500"], [class~="to-emerald-600"], [class~="to-emerald-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-emerald-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-red-400"], [class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-red-700"]) { background-color: var(--button-red) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-red-400"], [class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-red-700"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-red-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-red-400"], [class~="from-red-500"], [class~="from-red-600"], [class~="from-red-700"]) { --tw-gradient-from: var(--button-red) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-red-400"], [class~="from-red-500"], [class~="from-red-600"], [class~="from-red-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-red-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-red-400"], [class~="to-red-500"], [class~="to-red-600"], [class~="to-red-700"]) { --tw-gradient-to: var(--button-red) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-red-400"], [class~="to-red-500"], [class~="to-red-600"], [class~="to-red-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-red-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-pink-400"], [class~="bg-pink-500"], [class~="bg-pink-600"], [class~="bg-pink-700"]) { background-color: var(--button-pink) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-pink-400"], [class~="bg-pink-500"], [class~="bg-pink-600"], [class~="bg-pink-700"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-pink-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-pink-400"], [class~="from-pink-500"], [class~="from-pink-600"], [class~="from-pink-700"]) { --tw-gradient-from: var(--button-pink) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-pink-400"], [class~="from-pink-500"], [class~="from-pink-600"], [class~="from-pink-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-pink-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-pink-400"], [class~="to-pink-500"], [class~="to-pink-600"], [class~="to-pink-700"]) { --tw-gradient-to: var(--button-pink) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-pink-400"], [class~="to-pink-500"], [class~="to-pink-600"], [class~="to-pink-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-pink-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-purple-400"], [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-700"]) { background-color: var(--button-purple) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-purple-400"], [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-700"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-purple-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-purple-400"], [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-purple-700"]) { --tw-gradient-from: var(--button-purple) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-purple-400"], [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-purple-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-purple-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-purple-400"], [class~="to-purple-500"], [class~="to-purple-600"], [class~="to-purple-700"]) { --tw-gradient-to: var(--button-purple) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-purple-400"], [class~="to-purple-500"], [class~="to-purple-600"], [class~="to-purple-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-purple-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-violet-400"], [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"], [class~="bg-[#855be8]"], [class~="bg-[#7b42d9]"]) { background-color: var(--button-violet) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-violet-400"], [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"], [class~="bg-[#855be8]"], [class~="bg-[#7b42d9]"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-violet-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-violet-400"], [class~="from-violet-500"], [class~="from-violet-600"], [class~="from-violet-700"], [class~="from-[#855be8]"], [class~="from-[#7b42d9]"]) { --tw-gradient-from: var(--button-violet) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-violet-400"], [class~="from-violet-500"], [class~="from-violet-600"], [class~="from-violet-700"], [class~="from-[#855be8]"], [class~="from-[#7b42d9]"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-violet-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-violet-400"], [class~="to-violet-500"], [class~="to-violet-600"], [class~="to-violet-700"], [class~="to-[#855be8]"], [class~="to-[#7b42d9]"]) { --tw-gradient-to: var(--button-violet) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-violet-400"], [class~="to-violet-500"], [class~="to-violet-600"], [class~="to-violet-700"], [class~="to-[#855be8]"], [class~="to-[#7b42d9]"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-violet-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-indigo-400"], [class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"]) { background-color: var(--button-indigo) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-indigo-400"], [class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-indigo-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-indigo-400"], [class~="from-indigo-500"], [class~="from-indigo-600"], [class~="from-indigo-700"]) { --tw-gradient-from: var(--button-indigo) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-indigo-400"], [class~="from-indigo-500"], [class~="from-indigo-600"], [class~="from-indigo-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-indigo-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-indigo-400"], [class~="to-indigo-500"], [class~="to-indigo-600"], [class~="to-indigo-700"]) { --tw-gradient-to: var(--button-indigo) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-indigo-400"], [class~="to-indigo-500"], [class~="to-indigo-600"], [class~="to-indigo-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-indigo-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-orange-400"], [class~="bg-orange-500"], [class~="bg-orange-600"], [class~="bg-orange-700"], [class~="bg-[#FF4906]"], [class~="bg-[#FF4906]/90"], [class~="bg-[#FF4906]/80"], [class~="bg-[#ff8200]"]) { background-color: var(--button-orange) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-orange-400"], [class~="bg-orange-500"], [class~="bg-orange-600"], [class~="bg-orange-700"], [class~="bg-[#FF4906]"], [class~="bg-[#FF4906]/90"], [class~="bg-[#FF4906]/80"], [class~="bg-[#ff8200]"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-orange-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-orange-400"], [class~="from-orange-500"], [class~="from-orange-600"], [class~="from-orange-700"], [class~="from-[#FF4906]"], [class~="from-[#FF4906]/90"], [class~="from-[#FF4906]/80"], [class~="from-[#ff8200]"]) { --tw-gradient-from: var(--button-orange) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-orange-400"], [class~="from-orange-500"], [class~="from-orange-600"], [class~="from-orange-700"], [class~="from-[#FF4906]"], [class~="from-[#FF4906]/90"], [class~="from-[#FF4906]/80"], [class~="from-[#ff8200]"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-orange-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-orange-400"], [class~="to-orange-500"], [class~="to-orange-600"], [class~="to-orange-700"], [class~="to-[#FF4906]"], [class~="to-[#FF4906]/90"], [class~="to-[#FF4906]/80"], [class~="to-[#ff8200]"]) { --tw-gradient-to: var(--button-orange) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-orange-400"], [class~="to-orange-500"], [class~="to-orange-600"], [class~="to-orange-700"], [class~="to-[#FF4906]"], [class~="to-[#FF4906]/90"], [class~="to-[#FF4906]/80"], [class~="to-[#ff8200]"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-orange-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-amber-400"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-amber-700"], [class~="bg-[#ffb86c]"]) { background-color: var(--button-amber) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-amber-400"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-amber-700"], [class~="bg-[#ffb86c]"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-amber-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-amber-600"], [class~="from-amber-700"], [class~="from-[#ffb86c]"]) { --tw-gradient-from: var(--button-amber) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-amber-600"], [class~="from-amber-700"], [class~="from-[#ffb86c]"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-amber-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-amber-400"], [class~="to-amber-500"], [class~="to-amber-600"], [class~="to-amber-700"], [class~="to-[#ffb86c]"]) { --tw-gradient-to: var(--button-amber) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-amber-400"], [class~="to-amber-500"], [class~="to-amber-600"], [class~="to-amber-700"], [class~="to-[#ffb86c]"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-amber-hover) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-yellow-400"], [class~="bg-yellow-500"], [class~="bg-yellow-600"], [class~="bg-yellow-700"]) { background-color: var(--button-yellow) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="bg-yellow-400"], [class~="bg-yellow-500"], [class~="bg-yellow-600"], [class~="bg-yellow-700"]):hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-yellow-hover) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-yellow-400"], [class~="from-yellow-500"], [class~="from-yellow-600"], [class~="from-yellow-700"]) { --tw-gradient-from: var(--button-yellow) var(--tw-gradient-from-position) !important; color: var(--button-content) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="from-yellow-400"], [class~="from-yellow-500"], [class~="from-yellow-600"], [class~="from-yellow-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-from: var(--button-yellow-hover) var(--tw-gradient-from-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-yellow-400"], [class~="to-yellow-500"], [class~="to-yellow-600"], [class~="to-yellow-700"]) { --tw-gradient-to: var(--button-yellow) var(--tw-gradient-to-position) !important; }
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="to-yellow-400"], [class~="to-yellow-500"], [class~="to-yellow-600"], [class~="to-yellow-700"]):hover:not(:disabled):not([aria-disabled="true"]) { --tw-gradient-to: var(--button-yellow-hover) var(--tw-gradient-to-position) !important; }

/* Hover brightening must not undo the muted palette. */
.dark :where(button, a, [role="button"], input[type="submit"], input[type="button"]):not([class~="bg-clip-text"]):is([class~="hover:brightness-110"], [class~="hover:brightness-125"]) { --tw-brightness: brightness(1) !important; }
.dark :where(button, a, [role="button"])[class~="hover:opacity-90"]:hover:not(:disabled):not([aria-disabled="true"]) { opacity: 1 !important; }

/* Mask only the media rectangle; sibling actions and native media events stay usable. */
.theme-media-preview { position: relative; isolation: isolate; overflow: hidden; border-radius: inherit; }
.theme-media-preview > :is(img, video) { display: block; }
.dark .theme-media-preview::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: var(--preview-veil); pointer-events: none; }