html.sub3api-purple-theme {
  --primary: #6b4fff;
  --primary-hover: #5a3fe8;
  --background: #f7f7fb;
  --surface: #ffffff;
  --text-primary: #111827;
  --text-secondary: #5b6079;
  --border: #e8e3ff;
}

html.sub3api-purple-theme.dark {
  --background: #12131a;
  --surface: #1c1e29;
  --text-primary: #f3f4f6;
  --text-secondary: #bfc2d2;
  --border: #43475c;
}

html.sub3api-purple-theme body {
  background-color: var(--background) !important;
  background-image:
    radial-gradient(circle at top, rgba(107, 79, 255, .10), transparent 30%),
    linear-gradient(180deg, #fff, #f7f7fb) !important;
  background-attachment: fixed;
}

html.sub3api-purple-theme.dark body {
  background-color: #12131a !important;
  background-image:
    radial-gradient(circle at top, rgba(107, 79, 255, .18), transparent 28%),
    linear-gradient(180deg, #12131a, #1c1e29) !important;
}

html.sub3api-purple-theme ::selection {
  background: rgba(107, 79, 255, .18) !important;
  color: var(--text-primary) !important;
}

html.sub3api-purple-theme .navigation-progress-bar {
  background: linear-gradient(90deg, transparent 0%, #9a7cff 20%, #6b4fff 50%, #9a7cff 80%, transparent 100%) !important;
}

html.sub3api-purple-theme .btn-primary,
html.sub3api-purple-theme button[class*="bg-primary"],
html.sub3api-purple-theme a[class*="bg-primary"] {
  background: linear-gradient(90deg, #6b4fff, #5a3fe8) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px -14px rgba(107, 79, 255, .58) !important;
}

html.sub3api-purple-theme .btn-primary:hover,
html.sub3api-purple-theme button[class*="bg-primary"]:hover,
html.sub3api-purple-theme a[class*="bg-primary"]:hover {
  background: linear-gradient(90deg, #5a3fe8, #4b34c3) !important;
  box-shadow: 0 16px 30px -16px rgba(107, 79, 255, .66) !important;
}

html.sub3api-purple-theme [class*="text-primary"],
html.sub3api-purple-theme [class*="hover:text-primary"]:hover {
  color: #6b4fff !important;
}

html.sub3api-purple-theme.dark [class*="text-primary"],
html.sub3api-purple-theme.dark [class*="hover:text-primary"]:hover {
  color: #9a7cff !important;
}

html.sub3api-purple-theme [class*="border-primary"],
html.sub3api-purple-theme [class*="focus:border-primary"]:focus,
html.sub3api-purple-theme [class*="hover:border-primary"]:hover {
  border-color: #6b4fff !important;
}

html.sub3api-purple-theme [class*="ring-primary"],
html.sub3api-purple-theme [class*="focus:ring-primary"]:focus {
  --tw-ring-color: rgba(107, 79, 255, .32) !important;
}

html.sub3api-purple-theme [class*="bg-primary-50"],
html.sub3api-purple-theme [class*="bg-primary-100"],
html.sub3api-purple-theme [class*="bg-primary-500/10"],
html.sub3api-purple-theme [class*="bg-primary-900/20"],
html.sub3api-purple-theme [class*="hover:bg-primary-500/10"]:hover {
  background-color: rgba(107, 79, 255, .10) !important;
}

html.sub3api-purple-theme.dark [class*="bg-primary-900"],
html.sub3api-purple-theme.dark [class*="hover:bg-primary-900"]:hover {
  background-color: rgba(52, 38, 125, .42) !important;
}

html.sub3api-purple-theme input:focus,
html.sub3api-purple-theme textarea:focus,
html.sub3api-purple-theme select:focus {
  border-color: #6b4fff !important;
  box-shadow: 0 0 0 4px rgba(107, 79, 255, .16) !important;
}

.sub3api-purple-switch {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(107, 79, 255, .30);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #4b34c3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 16px 38px -22px rgba(76, 56, 180, .55);
  backdrop-filter: blur(12px);
}

.dark .sub3api-purple-switch {
  background: rgba(28, 30, 41, .92);
  color: #d5ccff;
  border-color: rgba(154, 124, 255, .38);
}

.sub3api-purple-switch::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #9a7cff, #6b4fff);
  box-shadow: 0 0 0 4px rgba(107, 79, 255, .12);
}

.sub3api-purple-switch:hover {
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .sub3api-purple-switch {
    right: 12px;
    bottom: 12px;
    height: 34px;
    padding: 0 11px;
    font-size: 12px;
  }
}