/* AI-TARS Z30 theme. Semantic status colors intentionally remain unchanged. */
:root {
  color-scheme: light;
  --z30-50: #fafafa;
  --z30-100: #f5f5f5;
  --z30-200: #e5e5e5;
  --z30-300: #d4d4d4;
  --z30-400: #a3a3a3;
  --z30-500: #737373;
  --z30-600: #525252;
  --z30-700: #404040;
  --z30-800: #262626;
  --z30-900: #171717;
  --z30-950: #0a0a0a;
  --z30-page-dark: #050505;
  --z30-text-dark: #ededed;
}

html.dark {
  color-scheme: dark;
}

html,
body,
#app {
  background-color: var(--z30-50);
  color: var(--z30-900);
}

.dark,
.dark body,
.dark #app {
  background-color: var(--z30-page-dark);
  color: var(--z30-text-dark);
}

/* The authenticated layout uses a hard-coded teal/cyan mesh outside the primary palette. */
.bg-mesh-gradient {
  background-image: none !important;
}

/* Neutral page surfaces, borders, and text. */
:is(.bg-gray-50, .bg-slate-50) {
  background-color: var(--z30-50) !important;
}

:is(.bg-gray-100, .bg-slate-100) {
  background-color: var(--z30-100) !important;
}

.bg-white {
  background-color: #fff !important;
}

:is(.text-gray-900, .text-slate-900) {
  color: var(--z30-900) !important;
}

:is(.text-gray-700, .text-slate-700) {
  color: var(--z30-700) !important;
}

:is(.border-gray-100, .border-slate-100) {
  border-color: var(--z30-100) !important;
}

:is(.border-gray-200, .border-slate-200) {
  border-color: var(--z30-200) !important;
}

:is(.border-gray-300, .border-slate-300) {
  border-color: var(--z30-300) !important;
}

.dark :is(.dark\:bg-black, .dark\:bg-gray-950, .dark\:bg-slate-950) {
  background-color: var(--z30-page-dark) !important;
}

.dark :is(.dark\:bg-gray-900, .dark\:bg-slate-900) {
  background-color: var(--z30-950) !important;
}

.dark :is(.dark\:bg-gray-800, .dark\:bg-slate-800) {
  background-color: var(--z30-900) !important;
}

.dark :is(.dark\:bg-gray-700, .dark\:bg-slate-700) {
  background-color: var(--z30-800) !important;
}

.dark :is(.dark\:bg-gray-800\/80, .dark\:bg-slate-800\/50) {
  background-color: rgb(23 23 23 / 0.8) !important;
}

.dark :is(.dark\:bg-gray-900\/30, .dark\:bg-slate-900\/30) {
  background-color: rgb(10 10 10 / 0.3) !important;
}

.dark :is(.dark\:text-white, .dark\:text-gray-100, .dark\:text-slate-100) {
  color: var(--z30-text-dark) !important;
}

.dark :is(.dark\:text-gray-300, .dark\:text-slate-300) {
  color: var(--z30-300) !important;
}

.dark :is(.dark\:text-gray-400, .dark\:text-slate-400) {
  color: var(--z30-400) !important;
}

.dark :is(.dark\:border-gray-800, .dark\:border-slate-800) {
  border-color: var(--z30-800) !important;
}

.dark :is(.dark\:border-gray-700, .dark\:border-slate-700) {
  border-color: var(--z30-700) !important;
}

.dark :is(.dark\:border-gray-600, .dark\:border-slate-600) {
  border-color: var(--z30-600) !important;
}

/* sub2api uses a separate dark-* palette for most dark-mode surfaces. */
.bg-dark-700 {
  background-color: var(--z30-800) !important;
}

.border-dark-600 {
  border-color: var(--z30-700) !important;
}

.border-dark-700\/50 {
  border-color: rgb(38 38 38 / 0.5) !important;
}

.dark :is(.dark\:bg-dark-500, .dark\:hover\:bg-dark-500:hover) { background-color: var(--z30-600) !important; }
.dark :is(.dark\:bg-dark-600, .dark\:hover\:bg-dark-600:hover) { background-color: var(--z30-700) !important; }
.dark :is(.dark\:bg-dark-700, .dark\:hover\:bg-dark-700:hover) { background-color: var(--z30-800) !important; }
.dark :is(.dark\:bg-dark-800, .dark\:\!bg-dark-800, .dark\:hover\:bg-dark-800:hover, .dark\:focus\:bg-dark-800:focus, .dark\:enabled\:hover\:bg-dark-800:hover:enabled) { background-color: var(--z30-900) !important; }
.dark :is(.dark\:bg-dark-900, .dark\:focus\:bg-dark-900:focus) { background-color: var(--z30-950) !important; }
.dark .dark\:bg-dark-950 { background-color: var(--z30-page-dark) !important; }
.dark .dark\:bg-dark-600\/70 { background-color: rgb(64 64 64 / 0.7) !important; }
.dark .dark\:bg-dark-700\/20 { background-color: rgb(38 38 38 / 0.2) !important; }
.dark :is(.dark\:bg-dark-700\/30, .dark\:hover\:bg-dark-700\/30:hover) { background-color: rgb(38 38 38 / 0.3) !important; }
.dark :is(.dark\:bg-dark-700\/40, .dark\:hover\:bg-dark-700\/40:hover) { background-color: rgb(38 38 38 / 0.4) !important; }
.dark :is(.dark\:bg-dark-700\/50, .dark\:hover\:bg-dark-700\/50:hover) { background-color: rgb(38 38 38 / 0.5) !important; }
.dark :is(.dark\:bg-dark-700\/60, .dark\:hover\:bg-dark-700\/60:hover) { background-color: rgb(38 38 38 / 0.6) !important; }
.dark .dark\:bg-dark-700\/70 { background-color: rgb(38 38 38 / 0.7) !important; }
.dark .dark\:bg-dark-700\/95 { background-color: rgb(38 38 38 / 0.95) !important; }
.dark .dark\:bg-dark-800\/30 { background-color: rgb(23 23 23 / 0.3) !important; }
.dark :is(.dark\:bg-dark-800\/40, .dark\:hover\:bg-dark-800\/40:hover) { background-color: rgb(23 23 23 / 0.4) !important; }
.dark :is(.dark\:bg-dark-800\/50, .dark\:hover\:bg-dark-800\/50:hover) { background-color: rgb(23 23 23 / 0.5) !important; }
.dark .dark\:hover\:bg-dark-800\/55:hover { background-color: rgb(23 23 23 / 0.55) !important; }
.dark :is(.dark\:bg-dark-800\/60, .dark\:hover\:bg-dark-800\/60:hover) { background-color: rgb(23 23 23 / 0.6) !important; }
.dark :is(.dark\:bg-dark-800\/70, .dark\:hover\:bg-dark-800\/70:hover) { background-color: rgb(23 23 23 / 0.7) !important; }
.dark .dark\:bg-dark-800\/80 { background-color: rgb(23 23 23 / 0.8) !important; }
.dark :is(.dark\:supports-\[backdrop-filter\]\:bg-dark-800\/95) { background-color: rgb(23 23 23 / 0.95) !important; }
.dark .dark\:bg-dark-900\/20 { background-color: rgb(10 10 10 / 0.2) !important; }
.dark .dark\:bg-dark-900\/30 { background-color: rgb(10 10 10 / 0.3) !important; }
.dark .dark\:bg-dark-900\/40 { background-color: rgb(10 10 10 / 0.4) !important; }
.dark .dark\:bg-dark-900\/50 { background-color: rgb(10 10 10 / 0.5) !important; }
.dark .dark\:bg-dark-900\/60 { background-color: rgb(10 10 10 / 0.6) !important; }
.dark .dark\:bg-dark-900\/70 { background-color: rgb(10 10 10 / 0.7) !important; }
.dark .dark\:bg-dark-900\/90 { background-color: rgb(10 10 10 / 0.9) !important; }
.dark .dark\:bg-dark-900\/95 { background-color: rgb(10 10 10 / 0.95) !important; }
.dark .dark\:bg-dark-950\/60 { background-color: rgb(5 5 5 / 0.6) !important; }

.dark :is(.dark\:border-dark-400, .dark\:hover\:border-dark-400:hover) { border-color: var(--z30-400) !important; }
.dark :is(.dark\:border-dark-500, .dark\:hover\:border-dark-500:hover) { border-color: var(--z30-500) !important; }
.dark :is(.dark\:border-dark-600, .dark\:hover\:border-dark-600:hover) { border-color: var(--z30-700) !important; }
.dark :is(.dark\:border-dark-700, .dark\:md\:border-dark-700) { border-color: var(--z30-800) !important; }
.dark .dark\:border-dark-800 { border-color: var(--z30-900) !important; }
.dark .dark\:border-dark-600\/60 { border-color: rgb(64 64 64 / 0.6) !important; }
.dark .dark\:border-dark-700\/50 { border-color: rgb(38 38 38 / 0.5) !important; }
.dark .dark\:border-dark-700\/60 { border-color: rgb(38 38 38 / 0.6) !important; }
.dark .dark\:border-dark-700\/70 { border-color: rgb(38 38 38 / 0.7) !important; }
.dark .dark\:border-dark-700\/80 { border-color: rgb(38 38 38 / 0.8) !important; }
.dark .dark\:border-dark-800\/50 { border-color: rgb(23 23 23 / 0.5) !important; }
.dark .dark\:border-b-dark-600 { border-bottom-color: var(--z30-700) !important; }
.dark .dark\:border-b-dark-700\/60 { border-bottom-color: rgb(38 38 38 / 0.6) !important; }
.dark .dark\:border-t-dark-600 { border-top-color: var(--z30-700) !important; }
.dark .dark\:divide-dark-600 > :not([hidden]) ~ :not([hidden]) { border-color: var(--z30-700) !important; }
.dark .dark\:divide-dark-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--z30-800) !important; }
.dark .dark\:divide-dark-700\/60 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(38 38 38 / 0.6) !important; }
.dark .dark\:divide-dark-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--z30-900) !important; }

.dark .dark\:text-dark-100 { color: var(--z30-100) !important; }
.dark :is(.dark\:text-dark-200, .dark\:hover\:text-dark-200:hover) { color: var(--z30-200) !important; }
.dark :is(.dark\:text-dark-300, .dark\:hover\:text-dark-300:hover) { color: var(--z30-300) !important; }
.dark :is(.dark\:text-dark-400, .dark\:hover\:text-dark-400:hover) { color: var(--z30-400) !important; }
.dark .dark\:text-dark-500 { color: var(--z30-500) !important; }
.dark .dark\:text-dark-600 { color: var(--z30-600) !important; }
.dark .dark\:text-dark-700 { color: var(--z30-700) !important; }
.dark .dark\:text-dark-800 { color: var(--z30-800) !important; }
.dark .dark\:placeholder\:text-dark-400::placeholder { color: var(--z30-400) !important; }
.dark .dark\:placeholder\:text-dark-500::placeholder { color: var(--z30-500) !important; }
.dark .dark\:decoration-dark-500 { text-decoration-color: var(--z30-500) !important; }

.dark .dark\:ring-dark-600 { --tw-ring-color: var(--z30-700) !important; }
.dark .dark\:ring-dark-700 { --tw-ring-color: var(--z30-800) !important; }
.dark .dark\:focus\:ring-offset-dark-800:focus { --tw-ring-offset-color: var(--z30-900) !important; }
.dark .dark\:focus-visible\:ring-offset-dark-900:focus-visible { --tw-ring-offset-color: var(--z30-950) !important; }

.dark .dark\:from-dark-700 { --tw-gradient-from: var(--z30-800) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(38 38 38 / 0) var(--tw-gradient-to-position) !important; }
.dark .dark\:from-dark-900 { --tw-gradient-from: var(--z30-950) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(10 10 10 / 0) var(--tw-gradient-to-position) !important; }
.dark .dark\:from-dark-950 { --tw-gradient-from: var(--z30-page-dark) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(5 5 5 / 0) var(--tw-gradient-to-position) !important; }
.dark .dark\:via-dark-900 { --tw-gradient-to: rgb(10 10 10 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--z30-950) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.dark .dark\:to-dark-600 { --tw-gradient-to: var(--z30-700) var(--tw-gradient-to-position) !important; }
.dark .dark\:to-dark-700 { --tw-gradient-to: var(--z30-800) var(--tw-gradient-to-position) !important; }
.dark .dark\:to-dark-800 { --tw-gradient-to: var(--z30-900) var(--tw-gradient-to-position) !important; }
.dark .dark\:to-dark-950 { --tw-gradient-to: var(--z30-page-dark) var(--tw-gradient-to-position) !important; }

/* Primary backgrounds. */
:is(.bg-primary-50, .hover\:bg-primary-50:hover, .group:hover .group-hover\:bg-primary-50) {
  background-color: var(--z30-50) !important;
}

:is(.bg-primary-100, .hover\:bg-primary-100:hover) {
  background-color: var(--z30-100) !important;
}

:is(.hover\:bg-primary-200:hover) {
  background-color: var(--z30-200) !important;
}

:is(.bg-primary-400, .dark .dark\:bg-primary-400) {
  background-color: var(--z30-400) !important;
}

:is(.bg-primary-500, .dark .dark\:hover\:bg-primary-500:hover, .peer:checked ~ .peer-checked\:bg-primary-500) {
  background-color: var(--z30-500) !important;
}

:is(.bg-primary-600, .hover\:bg-primary-600:hover, .dark .dark\:bg-primary-600, .peer:checked ~ .peer-checked\:bg-primary-600) {
  background-color: var(--z30-600) !important;
}

.hover\:bg-primary-700:hover {
  background-color: var(--z30-700) !important;
}

.dark :is(.dark\:hover\:bg-primary-800:hover) {
  background-color: var(--z30-800) !important;
}

.dark .dark\:bg-primary-950 {
  background-color: var(--z30-950) !important;
}

:is(.bg-primary-50\/40) { background-color: rgb(250 250 250 / 0.4) !important; }
:is(.bg-primary-50\/50, .hover\:bg-primary-50\/50:hover) { background-color: rgb(250 250 250 / 0.5) !important; }
:is(.bg-primary-50\/60) { background-color: rgb(250 250 250 / 0.6) !important; }
:is(.bg-primary-50\/70) { background-color: rgb(250 250 250 / 0.7) !important; }
:is(.bg-primary-50\/80) { background-color: rgb(250 250 250 / 0.8) !important; }
.bg-primary-200\/50 { background-color: rgb(229 229 229 / 0.5) !important; }
.bg-primary-300\/10 { background-color: rgb(212 212 212 / 0.1) !important; }
:is(.bg-primary-400\/10, .dark .dark\:bg-primary-400\/10) { background-color: rgb(163 163 163 / 0.1) !important; }
.bg-primary-400\/20 { background-color: rgb(163 163 163 / 0.2) !important; }
:is(.bg-primary-500\/10, .dark .dark\:bg-primary-500\/10, .dark .dark\:group-hover\:bg-primary-500\/10:hover) { background-color: rgb(115 115 115 / 0.1) !important; }
:is(.bg-primary-500\/15, .dark .dark\:bg-primary-500\/15) { background-color: rgb(115 115 115 / 0.15) !important; }
.bg-primary-900\/10 { background-color: rgb(23 23 23 / 0.1) !important; }
.dark .dark\:bg-primary-800\/40 { background-color: rgb(38 38 38 / 0.4) !important; }
.dark :is(.dark\:bg-primary-900\/10) { background-color: rgb(23 23 23 / 0.1) !important; }
.dark :is(.dark\:bg-primary-900\/20, .dark\:hover\:bg-primary-900\/20:hover) { background-color: rgb(23 23 23 / 0.2) !important; }
.dark .dark\:bg-primary-900\/25 { background-color: rgb(23 23 23 / 0.25) !important; }
.dark :is(.dark\:bg-primary-900\/30, .dark\:hover\:bg-primary-900\/30:hover) { background-color: rgb(23 23 23 / 0.3) !important; }
.dark .dark\:bg-primary-900\/40 { background-color: rgb(23 23 23 / 0.4) !important; }
.dark .dark\:hover\:bg-primary-900\/50:hover { background-color: rgb(23 23 23 / 0.5) !important; }
.dark .dark\:bg-primary-950\/20 { background-color: rgb(10 10 10 / 0.2) !important; }
.dark .dark\:bg-primary-950\/40 { background-color: rgb(10 10 10 / 0.4) !important; }

/* Primary text. */
.text-primary-100 { color: var(--z30-100) !important; }
.text-primary-200 { color: var(--z30-200) !important; }
.text-primary-300 { color: var(--z30-300) !important; }
:is(.text-primary-400) { color: var(--z30-400) !important; }
:is(.text-primary-500, .hover\:text-primary-500:hover, .group:hover .group-hover\:text-primary-500) { color: var(--z30-500) !important; }
:is(.text-primary-600, .hover\:text-primary-600:hover, .focus\:text-primary-600:focus, .group:hover .group-hover\:text-primary-600) { color: var(--z30-600) !important; }
:is(.text-primary-700, .hover\:text-primary-700:hover, .group:hover .group-hover\:text-primary-700) { color: var(--z30-700) !important; }
:is(.text-primary-800, .hover\:text-primary-800:hover) { color: var(--z30-800) !important; }
.text-primary-900 { color: var(--z30-900) !important; }
.text-primary-600\/90 { color: rgb(82 82 82 / 0.9) !important; }
.dark :is(.dark\:text-primary-100) { color: var(--z30-100) !important; }
.dark :is(.dark\:text-primary-200, .dark\:hover\:text-primary-200:hover, .dark\:group-hover\:text-primary-200:hover) { color: var(--z30-200) !important; }
.dark :is(.dark\:text-primary-300, .dark\:hover\:text-primary-300:hover, .dark\:group-hover\:text-primary-300:hover) { color: var(--z30-300) !important; }
.dark :is(.dark\:text-primary-400, .dark\:hover\:text-primary-400:hover, .dark\:focus\:text-primary-400:focus) { color: var(--z30-400) !important; }
.dark .dark\:text-primary-200\/80 { color: rgb(229 229 229 / 0.8) !important; }
.dark .dark\:text-primary-400\/90 { color: rgb(163 163 163 / 0.9) !important; }
.dark .dark\:text-primary-700 { color: var(--z30-700) !important; }
.dark .dark\:text-primary-800 { color: var(--z30-800) !important; }

/* Primary borders. */
:is(.border-primary-100) { border-color: var(--z30-100) !important; }
:is(.border-primary-200, .hover\:border-primary-200:hover) { border-color: var(--z30-200) !important; }
:is(.border-primary-300, .hover\:border-primary-300:hover, .focus\:border-primary-300:focus, .focus-within\:border-primary-300:focus-within) { border-color: var(--z30-300) !important; }
:is(.border-primary-400, .hover\:border-primary-400:hover, .focus\:border-primary-400:focus) { border-color: var(--z30-400) !important; }
:is(.border-primary-500, .hover\:border-primary-500:hover, .focus\:border-primary-500:focus, .focus-within\:border-primary-500:focus-within, .peer:checked ~ .peer-checked\:border-primary-500) { border-color: var(--z30-500) !important; }
.border-primary-600 { border-color: var(--z30-600) !important; }
.border-primary-100\/80 { border-color: rgb(245 245 245 / 0.8) !important; }
.border-primary-200\/80 { border-color: rgb(229 229 229 / 0.8) !important; }
.border-primary-600\/25 { border-color: rgb(82 82 82 / 0.25) !important; }
.border-t-primary-600 { border-top-color: var(--z30-600) !important; }
.hover\:border-l-primary-500:hover { border-left-color: var(--z30-500) !important; }
.dark :is(.dark\:border-primary-400, .dark\:hover\:border-primary-400:hover, .dark\:border-t-primary-400) { border-color: var(--z30-400) !important; }
.dark :is(.dark\:border-primary-500, .dark\:hover\:border-primary-500:hover, .dark\:focus\:border-primary-500:focus, .peer:checked ~ .peer-checked\:dark\:border-primary-500) { border-color: var(--z30-500) !important; }
.dark :is(.dark\:border-primary-600, .dark\:focus\:border-primary-600:focus) { border-color: var(--z30-600) !important; }
.dark :is(.dark\:border-primary-700, .dark\:hover\:border-primary-700:hover, .dark\:focus-within\:border-primary-700:focus-within) { border-color: var(--z30-700) !important; }
.dark :is(.dark\:border-primary-800, .dark\:hover\:border-primary-800:hover) { border-color: var(--z30-800) !important; }
.dark .dark\:border-primary-400\/25 { border-color: rgb(163 163 163 / 0.25) !important; }
.dark .dark\:border-primary-400\/30 { border-color: rgb(163 163 163 / 0.3) !important; }
.dark .dark\:border-primary-500\/20 { border-color: rgb(115 115 115 / 0.2) !important; }
.dark .dark\:hover\:border-primary-500\/30:hover { border-color: rgb(115 115 115 / 0.3) !important; }
.dark .dark\:border-primary-700\/50 { border-color: rgb(64 64 64 / 0.5) !important; }
.dark .dark\:border-primary-800\/50 { border-color: rgb(38 38 38 / 0.5) !important; }
.dark .dark\:border-primary-900\/40 { border-color: rgb(23 23 23 / 0.4) !important; }
.dark .dark\:border-primary-900\/50 { border-color: rgb(23 23 23 / 0.5) !important; }

/* Primary rings and focus states. */
:is(.ring-primary-100, .group:hover .group-hover\:ring-primary-100, .focus\:ring-primary-100:focus) { --tw-ring-color: var(--z30-100) !important; }
.focus\:ring-primary-300:focus { --tw-ring-color: var(--z30-300) !important; }
.focus\:ring-primary-400:focus { --tw-ring-color: var(--z30-400) !important; }
:is(.focus\:ring-primary-500:focus, .focus-within\:ring-primary-500:focus-within, .focus-visible\:ring-primary-500:focus-visible) { --tw-ring-color: var(--z30-500) !important; }
.ring-primary-200\/80 { --tw-ring-color: rgb(229 229 229 / 0.8) !important; }
.ring-primary-500\/20 { --tw-ring-color: rgb(115 115 115 / 0.2) !important; }
.ring-primary-500\/40 { --tw-ring-color: rgb(115 115 115 / 0.4) !important; }
.focus\:ring-primary-500\/20:focus { --tw-ring-color: rgb(115 115 115 / 0.2) !important; }
:is(.focus\:ring-primary-500\/30:focus, .focus-visible\:ring-primary-500\/30:focus-visible) { --tw-ring-color: rgb(115 115 115 / 0.3) !important; }
.focus\:ring-primary-500\/40:focus { --tw-ring-color: rgb(115 115 115 / 0.4) !important; }
.peer:focus ~ .peer-focus\:ring-primary-300 { --tw-ring-color: var(--z30-300) !important; }
.dark :is(.dark\:focus\:ring-primary-600:focus) { --tw-ring-color: var(--z30-600) !important; }
.dark :is(.dark\:ring-primary-700\/50) { --tw-ring-color: rgb(64 64 64 / 0.5) !important; }
.dark :is(.dark\:ring-primary-900, .dark\:focus\:ring-primary-900\/40:focus, .dark\:ring-primary-900\/40) { --tw-ring-color: rgb(23 23 23 / 0.4) !important; }
.dark :is(.dark\:ring-primary-500\/20, .dark\:group-hover\:ring-primary-500\/20:hover) { --tw-ring-color: rgb(115 115 115 / 0.2) !important; }
.dark .peer:focus ~ .dark\:peer-focus\:ring-primary-800 { --tw-ring-color: var(--z30-800) !important; }

/* Primary gradients and shadows. */
:is(.from-primary-400) { --tw-gradient-from: var(--z30-400) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(163 163 163 / 0) var(--tw-gradient-to-position) !important; }
:is(.from-primary-50) { --tw-gradient-from: var(--z30-50) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position) !important; }
:is(.from-primary-500) { --tw-gradient-from: var(--z30-500) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(115 115 115 / 0) var(--tw-gradient-to-position) !important; }
:is(.from-primary-600, .hover\:from-primary-600:hover) { --tw-gradient-from: var(--z30-600) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(82 82 82 / 0) var(--tw-gradient-to-position) !important; }
.to-primary-100 { --tw-gradient-to: var(--z30-100) var(--tw-gradient-to-position) !important; }
.to-primary-500 { --tw-gradient-to: var(--z30-500) var(--tw-gradient-to-position) !important; }
.to-primary-600 { --tw-gradient-to: var(--z30-600) var(--tw-gradient-to-position) !important; }
.hover\:to-primary-700:hover { --tw-gradient-to: var(--z30-700) var(--tw-gradient-to-position) !important; }
.via-primary-50\/30 { --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), rgb(250 250 250 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.dark .dark\:from-primary-900\/20 { --tw-gradient-from: rgb(23 23 23 / 0.2) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position) !important; }
.dark .dark\:from-primary-900\/30 { --tw-gradient-from: rgb(23 23 23 / 0.3) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position) !important; }
.dark .dark\:from-primary-950\/40 { --tw-gradient-from: rgb(10 10 10 / 0.4) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(10 10 10 / 0) var(--tw-gradient-to-position) !important; }
.dark .dark\:to-primary-800\/20 { --tw-gradient-to: rgb(38 38 38 / 0.2) var(--tw-gradient-to-position) !important; }
:is(.shadow-primary-500\/20, .dark .dark\:shadow-primary-500\/20) { --tw-shadow-color: rgb(115 115 115 / 0.2) !important; }
.shadow-primary-500\/25 { --tw-shadow-color: rgb(115 115 115 / 0.25) !important; }
:is(.shadow-primary-500\/30, .hover\:shadow-primary-500\/30:hover) { --tw-shadow-color: rgb(115 115 115 / 0.3) !important; }
.shadow-primary-600\/20 { --tw-shadow-color: rgb(82 82 82 / 0.2) !important; }
.hover\:shadow-primary-500\/10:hover { --tw-shadow-color: rgb(115 115 115 / 0.1) !important; }

/* Selection, badges, stats, and primary actions. */
.selection\:bg-primary-100::selection { background-color: var(--z30-100) !important; }
.selection\:bg-primary-100::-moz-selection { background-color: var(--z30-100) !important; }
.selection\:text-primary-900::selection { color: var(--z30-900) !important; }
.selection\:text-primary-900::-moz-selection { color: var(--z30-900) !important; }
.dark .dark\:selection\:bg-primary-900\/60::selection { background-color: rgb(23 23 23 / 0.6) !important; }
.dark .dark\:selection\:bg-primary-900\/60::-moz-selection { background-color: rgb(23 23 23 / 0.6) !important; }
.dark .dark\:selection\:text-primary-100::selection { color: var(--z30-100) !important; }
.dark .dark\:selection\:text-primary-100::-moz-selection { color: var(--z30-100) !important; }

.btn-primary {
  background-image: linear-gradient(to right, var(--z30-900), var(--z30-800)) !important;
  color: var(--z30-50) !important;
  box-shadow: 0 4px 12px rgb(23 23 23 / 0.2) !important;
}

.btn-primary:hover {
  background-image: linear-gradient(to right, var(--z30-800), var(--z30-700)) !important;
  box-shadow: 0 8px 18px rgb(23 23 23 / 0.25) !important;
}

.dark .btn-primary {
  background-image: linear-gradient(to right, var(--z30-text-dark), var(--z30-300)) !important;
  color: var(--z30-950) !important;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.35) !important;
}

.dark .btn-primary:hover {
  background-image: linear-gradient(to right, #fff, var(--z30-200)) !important;
}

:is(.badge-primary, .stat-icon-primary) {
  background-color: var(--z30-100) !important;
  color: var(--z30-700) !important;
}

.dark :is(.badge-primary, .stat-icon-primary) {
  background-color: rgb(64 64 64 / 0.6) !important;
  color: var(--z30-200) !important;
}

/* Restore the original sub2api teal balance and account identity colors. */
header .group.bg-primary-50 {
  background-color: #f0fdfa !important;
}

header .group.bg-primary-50 > svg.text-primary-600 {
  color: #0d9488 !important;
}

header .group.bg-primary-50 > span.text-primary-700,
header .dropdown .text-primary-600 {
  color: #0f766e !important;
}

.dark header .group.bg-primary-50 {
  background-color: rgb(19 78 74 / 0.2) !important;
}

.dark header .group.bg-primary-50 > svg.text-primary-600,
.dark header .dropdown .dark\:text-primary-400 {
  color: #2dd4bf !important;
}

.dark header .group.bg-primary-50 > span.text-primary-700 {
  color: #5eead4 !important;
}

header .from-primary-500.to-primary-600.rounded-xl {
  --tw-gradient-from: #14b8a6 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position) !important;
}