/*
 * VIP-only visual theme for vip.cjyyswq.com.
 * Served by Nginx outside the application image so sub2api upgrades keep it.
 */
:root {
  --vip-ink: #16091f;
  --vip-royal: #27105f;
  --vip-indigo: #183181;
  --vip-violet: #7227d6;
  --vip-amethyst: #9638ea;
  --vip-gold: #d49b39;
  --vip-gold-soft: #f5d58a;
  --vip-cream: #fff8ec;
  --vip-lavender: #f5f0ff;
  --vip-border: rgba(212, 155, 57, 0.34);
  --vip-shadow: rgba(39, 16, 95, 0.18);
}

html,
body {
  background:
    linear-gradient(135deg, var(--vip-cream) 0%, var(--vip-lavender) 42%, #edf4ff 100%) !important;
  color: #201633 !important;
}

.dark body,
body:is(.dark *) {
  background:
    linear-gradient(135deg, #100717 0%, #1d0d3e 48%, #081944 100%) !important;
  color: #f8edd8 !important;
}

::selection {
  background-color: rgba(212, 155, 57, 0.28) !important;
  color: var(--vip-royal) !important;
}

.navigation-progress-bar {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--vip-gold-soft) 18%,
    var(--vip-violet) 52%,
    var(--vip-gold) 82%,
    transparent 100%
  ) !important;
}

img[src="/logo.png"],
img[src$="/logo.png"] {
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(39, 16, 95, 0.16));
}

.btn-primary,
button[type="submit"].btn,
button[type="submit"].btn-primary {
  color: #fffaf0 !important;
  border: 1px solid rgba(245, 213, 138, 0.52) !important;
  background-image: linear-gradient(
    135deg,
    var(--vip-gold) 0%,
    var(--vip-violet) 46%,
    var(--vip-indigo) 100%
  ) !important;
  box-shadow:
    0 10px 22px rgba(39, 16, 95, 0.2),
    0 0 0 1px rgba(245, 213, 138, 0.18) inset !important;
}

.btn-primary:hover,
button[type="submit"].btn:hover,
button[type="submit"].btn-primary:hover {
  background-image: linear-gradient(
    135deg,
    #e8b95f 0%,
    var(--vip-amethyst) 44%,
    #10276f 100%
  ) !important;
  box-shadow:
    0 14px 30px rgba(39, 16, 95, 0.25),
    0 0 0 1px rgba(245, 213, 138, 0.25) inset !important;
}

.btn:focus,
.btn-primary:focus,
.input:focus,
input:focus,
select:focus,
textarea:focus {
  --tw-ring-color: rgba(212, 155, 57, 0.5) !important;
  border-color: rgba(212, 155, 57, 0.72) !important;
}

.btn-secondary {
  color: var(--vip-royal) !important;
  border-color: var(--vip-border) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff7e8 100%) !important;
}

.btn-secondary:hover,
.btn-ghost:hover {
  color: var(--vip-royal) !important;
  border-color: rgba(212, 155, 57, 0.55) !important;
  background: rgba(245, 213, 138, 0.18) !important;
}

.input,
input,
select,
textarea {
  border-color: rgba(212, 155, 57, 0.28) !important;
}

.card,
.modal,
.bg-white,
.\!bg-white,
.bg-white\/80,
.bg-white\/90,
.bg-white\/95 {
  border-color: rgba(212, 155, 57, 0.22) !important;
}

.shadow-primary-500\/25,
.hover\:shadow-primary-500\/30:hover {
  --tw-shadow-color: rgba(114, 39, 214, 0.26) !important;
}

.bg-primary-50,
.hover\:bg-primary-50:hover {
  background-color: #fff6e2 !important;
}

.bg-primary-100,
.hover\:bg-primary-100:hover {
  background-color: #f8e4b4 !important;
}

.bg-primary-200,
.hover\:bg-primary-200:hover {
  background-color: #efca7d !important;
}

.bg-primary-300,
.hover\:bg-primary-300:hover {
  background-color: #dfa942 !important;
}

.bg-primary-400,
.hover\:bg-primary-400:hover {
  background-color: #a358de !important;
}

.bg-primary-500,
.hover\:bg-primary-500:hover {
  background-color: var(--vip-violet) !important;
}

.bg-primary-600,
.hover\:bg-primary-600:hover {
  background-color: #5920b6 !important;
}

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

.bg-primary-800,
.hover\:bg-primary-800:hover {
  background-color: #1c114c !important;
}

.bg-primary-900,
.hover\:bg-primary-900:hover {
  background-color: #120a30 !important;
}

.bg-primary-950 {
  background-color: #09051a !important;
}

.text-primary-50 {
  color: #fff6e2 !important;
}

.text-primary-100,
.dark\:text-primary-100:is(.dark *) {
  color: #f8e4b4 !important;
}

.text-primary-200,
.dark\:text-primary-200:is(.dark *) {
  color: #efca7d !important;
}

.text-primary-300,
.dark\:text-primary-300:is(.dark *) {
  color: #dca642 !important;
}

.text-primary-400,
.dark\:text-primary-400:is(.dark *),
.dark\:text-primary-400\/90:is(.dark *) {
  color: var(--vip-gold) !important;
}

.text-primary-500,
.hover\:text-primary-500:hover,
.dark\:hover\:text-primary-400:hover:is(.dark *) {
  color: var(--vip-violet) !important;
}

.text-primary-600,
.hover\:text-primary-600:hover,
.focus\:text-primary-600:focus {
  color: #5920b6 !important;
}

.text-primary-700,
.hover\:text-primary-700:hover,
.dark\:text-primary-700:is(.dark *) {
  color: var(--vip-royal) !important;
}

.text-primary-800,
.dark\:text-primary-800:is(.dark *) {
  color: #1c114c !important;
}

.text-primary-900 {
  color: #120a30 !important;
}

.border-primary-200,
.border-primary-300,
.border-primary-400,
.border-primary-500,
.border-primary-600,
.border-primary-700,
.focus\:border-primary-500:focus,
.focus-within\:border-primary-500:focus-within,
.dark\:focus\:border-primary-500:focus:is(.dark *) {
  border-color: var(--vip-gold) !important;
}

.ring-primary-500,
.ring-primary-600,
.ring-primary-900,
.ring-primary-900\/40,
.focus\:ring-primary-500:focus,
.focus\:ring-primary-600:focus,
.dark\:focus\:ring-primary-600:focus:is(.dark *) {
  --tw-ring-color: rgba(212, 155, 57, 0.45) !important;
}

.from-primary-400,
.from-primary-500,
.from-primary-600,
.hover\:from-primary-600:hover {
  --tw-gradient-from: var(--vip-gold) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(212, 155, 57, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-primary-500,
.via-primary-600 {
  --tw-gradient-to: rgba(114, 39, 214, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:
    var(--tw-gradient-from),
    var(--vip-violet) var(--tw-gradient-via-position),
    var(--tw-gradient-to) !important;
}

.to-primary-500,
.to-primary-600,
.to-primary-700,
.hover\:to-primary-700:hover {
  --tw-gradient-to: var(--vip-indigo) var(--tw-gradient-to-position) !important;
}

.bg-gradient-to-r.from-primary-500.to-primary-600,
.bg-gradient-to-r.from-primary-600.to-primary-700 {
  background-image: linear-gradient(
    to right,
    var(--vip-gold),
    var(--vip-violet) 48%,
    var(--vip-indigo)
  ) !important;
}

.dark .btn-secondary,
.btn-secondary:is(.dark *) {
  color: #f8edd8 !important;
  border-color: rgba(245, 213, 138, 0.26) !important;
  background: rgba(39, 16, 95, 0.62) !important;
}

.dark .bg-dark-800,
.dark .bg-dark-900,
.bg-dark-800:is(.dark *),
.bg-dark-900:is(.dark *) {
  border-color: rgba(245, 213, 138, 0.16) !important;
}

/* Login scene: dark VIP nebula, gold accents, and a transparent QY watermark. */
#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen {
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding-top: 20px !important;
  color: #f8ead6 !important;
  background:
    radial-gradient(circle at 18% 34%, rgba(160, 75, 226, 0.45) 0%, rgba(69, 26, 117, 0.32) 24%, transparent 46%),
    radial-gradient(circle at 78% 72%, rgba(180, 83, 205, 0.34) 0%, rgba(24, 49, 129, 0.22) 30%, transparent 54%),
    linear-gradient(180deg, #060625 0%, #130935 42%, #090726 100%) !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/logo-watermark.png?v=20260519e");
  background-repeat: no-repeat;
  background-position: calc(50% - 540px) 54%;
  background-size: min(48vw, 760px);
  opacity: 0.42;
  filter: saturate(1.12) drop-shadow(0 0 56px rgba(245, 213, 138, 0.28));
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 9%, rgba(245, 213, 138, 0.95) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 24%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 18%, rgba(245, 213, 138, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 58%, rgba(245, 213, 138, 0.85) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 38%, rgba(245, 213, 138, 0.86) 0 2px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(245, 213, 138, 0.06) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(245, 213, 138, 0.045) 0 1px, transparent 1px 92px),
    linear-gradient(90deg, rgba(245, 213, 138, 0.12), transparent 28%, transparent 72%, rgba(114, 39, 214, 0.12)) !important;
  opacity: 0.85;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen > * {
  position: relative !important;
  z-index: 1 !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen img[src*="/logo.png"] {
  width: 104px !important;
  height: 104px !important;
  padding: 10px !important;
  border-radius: 26px !important;
  background: linear-gradient(145deg, #fffaf0 0%, #fff0c7 100%) !important;
  border: 1px solid rgba(245, 213, 138, 0.72) !important;
  box-shadow:
    0 0 34px rgba(245, 213, 138, 0.34),
    0 20px 48px rgba(5, 5, 28, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen h1,
#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .text-3xl,
#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .sm\:text-4xl {
  color: #f8ead6 !important;
  background: none !important;
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: 0.04em !important;
  text-shadow:
    0 0 18px rgba(245, 213, 138, 0.22),
    0 10px 30px rgba(0, 0, 0, 0.36) !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen h1 + p,
#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .text-gray-600,
#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .text-gray-500 {
  color: rgba(248, 234, 214, 0.78) !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .max-w-md {
  max-width: 560px !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .card-glass:has(form),
#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen [class*="rounded-"][class*="bg-white"]:has(form) {
  width: min(92vw, 560px) !important;
  border: 1px solid rgba(245, 213, 138, 0.52) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(55, 35, 99, 0.82) 0%, rgba(22, 13, 55, 0.84) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 34px rgba(245, 213, 138, 0.12),
    0 30px 80px rgba(0, 0, 0, 0.38) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen div:has(> form) {
  width: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .card-glass:has(form) * {
  border-color: rgba(245, 213, 138, 0.36);
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen form {
  position: relative !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen form::before {
  content: "";
  display: block;
  width: 138px;
  height: 2px;
  margin: 0 auto 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--vip-gold-soft), var(--vip-violet), transparent);
  box-shadow: 0 0 14px rgba(245, 213, 138, 0.36);
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .text-2xl {
  color: var(--vip-gold-soft) !important;
  background: none !important;
  text-shadow: 0 0 18px rgba(245, 213, 138, 0.2) !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen label {
  color: rgba(248, 234, 214, 0.94) !important;
  font-weight: 600 !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .input,
#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen input {
  color: #fffaf0 !important;
  background: rgba(16, 10, 42, 0.42) !important;
  border-color: rgba(245, 213, 138, 0.38) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .input:focus,
#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen input:focus {
  background: rgba(16, 10, 42, 0.62) !important;
  border-color: var(--vip-gold-soft) !important;
  box-shadow:
    0 0 0 3px rgba(245, 213, 138, 0.16),
    0 0 26px rgba(245, 213, 138, 0.1) !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .input svg,
#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen svg {
  color: var(--vip-gold-soft) !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen .btn-primary,
#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen button[type="submit"].btn {
  min-height: 60px !important;
  border-radius: 999px !important;
  border-color: rgba(245, 213, 138, 0.74) !important;
  background-image: linear-gradient(100deg, #d59b39 0%, #c026d3 36%, #5b21d5 64%, #081b6c 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 0 24px rgba(245, 213, 138, 0.32),
    0 18px 46px rgba(91, 33, 213, 0.32) !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen a {
  color: var(--vip-gold-soft) !important;
}

#app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen a:hover {
  color: var(--vip-gold) !important;
}

@media (max-width: 768px) {
  #app:has(input[type="password"]):has(a[href="/register"]) > div.min-h-screen::before {
    background-position: 50% 16%;
    background-size: min(78vw, 360px);
    opacity: 0.16;
  }
}

/* Logged-in shell: keep the internal product UI on the VIP palette too. */
#app:not(:has(a[href="/register"])) {
  color: #241637 !important;
}

html.dark #app:not(:has(a[href="/register"])) {
  color: #f8ead6 !important;
}

#app:not(:has(a[href="/register"])) .bg-gray-50,
#app:not(:has(a[href="/register"])) .bg-slate-50,
#app:not(:has(a[href="/register"])) .bg-dark-50 {
  background:
    linear-gradient(180deg, #fbf7ff 0%, #fff9ec 100%) !important;
}

#app:not(:has(a[href="/register"])) .bg-white,
#app:not(:has(a[href="/register"])) .bg-white\/80,
#app:not(:has(a[href="/register"])) .bg-white\/90,
#app:not(:has(a[href="/register"])) .bg-white\/95 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 240, 0.94) 100%) !important;
  border-color: rgba(212, 155, 57, 0.22) !important;
}

#app:not(:has(a[href="/register"])) header,
#app:not(:has(a[href="/register"])) aside,
#app:not(:has(a[href="/register"])) nav {
  border-color: rgba(212, 155, 57, 0.22) !important;
}

html:not(.dark) #app:not(:has(a[href="/register"])) .sidebar-link-active,
html:not(.dark) #app:not(:has(a[href="/register"])) .router-link-active.sidebar-link,
html:not(.dark) #app:not(:has(a[href="/register"])) .router-link-exact-active.sidebar-link {
  color: var(--vip-royal) !important;
  background:
    linear-gradient(90deg, rgba(245, 213, 138, 0.34) 0%, rgba(114, 39, 214, 0.14) 100%) !important;
  border: 1px solid rgba(212, 155, 57, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.56) inset,
    0 10px 26px rgba(39, 16, 95, 0.08) !important;
}

html:not(.dark) #app:not(:has(a[href="/register"])) .sidebar-link-active svg,
html:not(.dark) #app:not(:has(a[href="/register"])) .router-link-active.sidebar-link svg,
html:not(.dark) #app:not(:has(a[href="/register"])) .router-link-exact-active.sidebar-link svg,
html:not(.dark) #app:not(:has(a[href="/register"])) .sidebar-link-active .sidebar-label,
html:not(.dark) #app:not(:has(a[href="/register"])) .router-link-active.sidebar-link .sidebar-label,
html:not(.dark) #app:not(:has(a[href="/register"])) .router-link-exact-active.sidebar-link .sidebar-label {
  color: var(--vip-royal) !important;
}

html:not(.dark) #app:not(:has(a[href="/register"])) .sidebar-link:hover {
  color: var(--vip-royal) !important;
  background: rgba(245, 213, 138, 0.14) !important;
}

html.dark #app:not(:has(a[href="/register"])) .min-h-screen {
  background:
    radial-gradient(circle at 18% 8%, rgba(114, 39, 214, 0.2) 0%, transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(212, 155, 57, 0.11) 0%, transparent 30%),
    linear-gradient(180deg, #090d1d 0%, #11152a 100%) !important;
  color: #f8ead6 !important;
}

html.dark #app:not(:has(a[href="/register"])) .sidebar {
  background: linear-gradient(180deg, #090d1d 0%, #0d1124 100%) !important;
  color: #d8cdea !important;
  border-color: rgba(245, 213, 138, 0.18) !important;
}

html.dark #app:not(:has(a[href="/register"])) .sidebar-link {
  color: #d8cdea !important;
}

html.dark #app:not(:has(a[href="/register"])) .sidebar-link:hover {
  color: #fff6df !important;
  background: rgba(245, 213, 138, 0.09) !important;
}

html.dark #app:not(:has(a[href="/register"])) .sidebar-link-active,
html.dark #app:not(:has(a[href="/register"])) .router-link-active.sidebar-link,
html.dark #app:not(:has(a[href="/register"])) .router-link-exact-active.sidebar-link {
  color: var(--vip-gold-soft) !important;
  background:
    linear-gradient(90deg, rgba(212, 155, 57, 0.22) 0%, rgba(114, 39, 214, 0.24) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(245, 213, 138, 0.18) inset,
    0 10px 28px rgba(0, 0, 0, 0.12) !important;
}

html.dark #app:not(:has(a[href="/register"])) .sidebar-link-active svg,
html.dark #app:not(:has(a[href="/register"])) .router-link-active.sidebar-link svg,
html.dark #app:not(:has(a[href="/register"])) .router-link-exact-active.sidebar-link svg,
html.dark #app:not(:has(a[href="/register"])) .sidebar-link-active .sidebar-label,
html.dark #app:not(:has(a[href="/register"])) .router-link-active.sidebar-link .sidebar-label,
html.dark #app:not(:has(a[href="/register"])) .router-link-exact-active.sidebar-link .sidebar-label {
  color: var(--vip-gold-soft) !important;
}

html.dark #app:not(:has(a[href="/register"])) .glass,
html.dark #app:not(:has(a[href="/register"])) header {
  background: rgba(13, 17, 36, 0.92) !important;
  color: #f8ead6 !important;
  border-color: rgba(245, 213, 138, 0.2) !important;
}

html.dark #app:not(:has(a[href="/register"])) main,
html.dark #app:not(:has(a[href="/register"])) .card,
html.dark #app:not(:has(a[href="/register"])) .table-scroll-container,
html.dark #app:not(:has(a[href="/register"])) .bg-white,
html.dark #app:not(:has(a[href="/register"])) .bg-white\/80,
html.dark #app:not(:has(a[href="/register"])) .bg-white\/90,
html.dark #app:not(:has(a[href="/register"])) .bg-white\/95,
html.dark #app:not(:has(a[href="/register"])) .bg-gray-50,
html.dark #app:not(:has(a[href="/register"])) .bg-slate-50,
html.dark #app:not(:has(a[href="/register"])) .bg-dark-800,
html.dark #app:not(:has(a[href="/register"])) .bg-dark-900,
html.dark #app:not(:has(a[href="/register"])) .bg-dark-950 {
  background:
    linear-gradient(180deg, rgba(25, 19, 49, 0.96) 0%, rgba(16, 20, 40, 0.96) 100%) !important;
  color: #f8ead6 !important;
  border-color: rgba(245, 213, 138, 0.18) !important;
}

html.dark #app:not(:has(a[href="/register"])) table,
html.dark #app:not(:has(a[href="/register"])) thead,
html.dark #app:not(:has(a[href="/register"])) tbody,
html.dark #app:not(:has(a[href="/register"])) tr,
html.dark #app:not(:has(a[href="/register"])) td {
  background: transparent !important;
  color: #f8ead6 !important;
  border-color: rgba(245, 213, 138, 0.14) !important;
}

html.dark #app:not(:has(a[href="/register"])) th,
html.dark #app:not(:has(a[href="/register"])) .sticky-header-cell,
html.dark #app:not(:has(a[href="/register"])) .table-header {
  background: #17162f !important;
  color: var(--vip-gold-soft) !important;
  border-color: rgba(245, 213, 138, 0.16) !important;
}

html.dark #app:not(:has(a[href="/register"])) .table-body {
  background: rgba(17, 20, 40, 0.96) !important;
  color: #f8ead6 !important;
}

html.dark #app:not(:has(a[href="/register"])) .text-gray-400,
html.dark #app:not(:has(a[href="/register"])) .text-gray-500,
html.dark #app:not(:has(a[href="/register"])) .text-gray-600,
html.dark #app:not(:has(a[href="/register"])) .text-dark-300,
html.dark #app:not(:has(a[href="/register"])) .text-dark-400,
html.dark #app:not(:has(a[href="/register"])) .dark\:text-gray-400,
html.dark #app:not(:has(a[href="/register"])) .dark\:text-dark-400 {
  color: #cabee0 !important;
}

html.dark #app:not(:has(a[href="/register"])) .text-gray-700,
html.dark #app:not(:has(a[href="/register"])) .text-gray-800,
html.dark #app:not(:has(a[href="/register"])) .text-gray-900,
html.dark #app:not(:has(a[href="/register"])) h1,
html.dark #app:not(:has(a[href="/register"])) h2,
html.dark #app:not(:has(a[href="/register"])) h3,
html.dark #app:not(:has(a[href="/register"])) h4 {
  color: #fff6df !important;
}

html.dark #app:not(:has(a[href="/register"])) .input,
html.dark #app:not(:has(a[href="/register"])) input,
html.dark #app:not(:has(a[href="/register"])) textarea,
html.dark #app:not(:has(a[href="/register"])) select,
html.dark #app:not(:has(a[href="/register"])) .select-trigger,
html.dark #app:not(:has(a[href="/register"])) .date-picker-trigger {
  background: rgba(12, 16, 34, 0.96) !important;
  color: #f8ead6 !important;
  border-color: rgba(245, 213, 138, 0.26) !important;
}

html.dark #app:not(:has(a[href="/register"])) .input::placeholder,
html.dark #app:not(:has(a[href="/register"])) input::placeholder,
html.dark #app:not(:has(a[href="/register"])) textarea::placeholder {
  color: rgba(216, 205, 234, 0.68) !important;
}

html.dark #app:not(:has(a[href="/register"])) [class*="bg-primary-50"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-purple-50"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-violet-50"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-amber-50"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-yellow-50"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-orange-50"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-green-50"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-emerald-50"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-primary-100"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-purple-100"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-violet-100"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-amber-100"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-yellow-100"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-orange-100"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-green-100"],
html.dark #app:not(:has(a[href="/register"])) [class*="bg-emerald-100"] {
  background:
    linear-gradient(135deg, rgba(62, 42, 103, 0.92) 0%, rgba(29, 22, 64, 0.94) 100%) !important;
  color: #fff6df !important;
  border-color: rgba(245, 213, 138, 0.58) !important;
}

html.dark #app:not(:has(a[href="/register"])) [class*="bg-primary-50"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-purple-50"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-violet-50"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-amber-50"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-yellow-50"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-orange-50"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-green-50"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-emerald-50"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-primary-100"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-purple-100"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-violet-100"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-amber-100"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-yellow-100"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-orange-100"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-green-100"] *,
html.dark #app:not(:has(a[href="/register"])) [class*="bg-emerald-100"] * {
  color: inherit !important;
}

html.dark #app:not(:has(a[href="/register"])) [class*="border-primary-500"],
html.dark #app:not(:has(a[href="/register"])) [class*="border-purple-500"],
html.dark #app:not(:has(a[href="/register"])) [class*="border-violet-500"],
html.dark #app:not(:has(a[href="/register"])) [class*="border-amber-500"],
html.dark #app:not(:has(a[href="/register"])) [class*="border-yellow-500"],
html.dark #app:not(:has(a[href="/register"])) [class*="border-orange-500"],
html.dark #app:not(:has(a[href="/register"])) [class*="border-green-500"],
html.dark #app:not(:has(a[href="/register"])) [class*="border-emerald-500"] {
  border-color: var(--vip-gold-soft) !important;
}

.text-teal-300,
.text-teal-400,
.text-teal-500,
.text-teal-600,
.text-teal-700,
.hover\:text-teal-500:hover,
.hover\:text-teal-600:hover,
.dark\:text-teal-400:is(.dark *) {
  color: var(--vip-gold) !important;
}

.bg-teal-50,
.bg-teal-100,
.hover\:bg-teal-50:hover,
.hover\:bg-teal-100:hover {
  background-color: #fff6e2 !important;
}

.bg-teal-400,
.bg-teal-500,
.bg-teal-600,
.hover\:bg-teal-500:hover,
.hover\:bg-teal-600:hover,
.dark\:hover\:bg-teal-500:hover:is(.dark *) {
  background-color: var(--vip-violet) !important;
}

.border-teal-300,
.border-teal-400,
.border-teal-500,
.focus\:border-teal-500:focus,
.ring-teal-500,
.focus\:ring-teal-500:focus {
  border-color: var(--vip-gold) !important;
  --tw-ring-color: rgba(212, 155, 57, 0.45) !important;
}

.btn-success,
.bg-green-500,
.bg-green-600,
.bg-emerald-500,
.bg-emerald-600,
.hover\:bg-green-600:hover,
.hover\:bg-green-700:hover,
.hover\:bg-emerald-600:hover,
.hover\:bg-emerald-700:hover {
  color: #fffaf0 !important;
  background-image: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-violet) 48%, var(--vip-indigo) 100%) !important;
  background-color: var(--vip-violet) !important;
  border-color: rgba(245, 213, 138, 0.54) !important;
  box-shadow:
    0 10px 24px rgba(39, 16, 95, 0.18),
    0 0 0 1px rgba(245, 213, 138, 0.16) inset !important;
}

.btn-success:hover {
  background-image: linear-gradient(135deg, #e8b95f 0%, var(--vip-amethyst) 48%, #10276f 100%) !important;
}

.text-green-500,
.text-green-600,
.text-green-700,
.text-emerald-500,
.text-emerald-600,
.text-emerald-700,
.dark\:text-green-400:is(.dark *),
.dark\:text-emerald-400:is(.dark *) {
  color: var(--vip-gold) !important;
}

.bg-green-50,
.bg-green-100,
.bg-emerald-50,
.bg-emerald-100,
.hover\:bg-green-50:hover,
.hover\:bg-emerald-50:hover {
  background-color: #fff6e2 !important;
}

.border-green-300,
.border-green-400,
.border-green-500,
.border-emerald-300,
.border-emerald-400,
.border-emerald-500 {
  border-color: var(--vip-gold) !important;
}

.driver-popover,
.driver-popover * {
  border-color: rgba(212, 155, 57, 0.24) !important;
}

.driver-popover-next-btn {
  color: #fffaf0 !important;
  background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-violet) 48%, var(--vip-indigo) 100%) !important;
  background-image: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-violet) 48%, var(--vip-indigo) 100%) !important;
  background-color: var(--vip-violet) !important;
  border-color: rgba(245, 213, 138, 0.54) !important;
  box-shadow:
    0 10px 24px rgba(39, 16, 95, 0.18),
    0 0 0 1px rgba(245, 213, 138, 0.16) inset !important;
}

.driver-popover-next-btn:hover {
  background: linear-gradient(135deg, #e8b95f 0%, var(--vip-amethyst) 48%, #10276f 100%) !important;
  background-image: linear-gradient(135deg, #e8b95f 0%, var(--vip-amethyst) 48%, #10276f 100%) !important;
}

.driver-popover-prev-btn {
  color: var(--vip-royal) !important;
  border-color: rgba(212, 155, 57, 0.28) !important;
}

.driver-popover p[style*="#10b981"] {
  color: var(--vip-gold) !important;
}