#aimasker-online-studio-nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  color: rgb(75 85 99);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}

/* AIMasker user theme: keep the admin area on the upstream default theme. */
html.aimasker-user-theme {
  --aimasker-violet-50: #f7f4ff;
  --aimasker-violet-100: #eee8ff;
  --aimasker-violet-200: #ddd2ff;
  --aimasker-violet-300: #c2aeff;
  --aimasker-violet-400: #9c7cff;
  --aimasker-violet-500: #7c4dff;
  --aimasker-violet-600: #6c3bee;
  --aimasker-violet-700: #582bd1;
  --aimasker-violet-800: #4724a7;
  --aimasker-violet-900: #3b2582;
  --aimasker-violet-950: #21134d;
  --aimasker-cyan: #36d1c4;
}

html.aimasker-user-theme:not(.dark) body {
  background-color: #f7f7fc !important;
  background-image:
    radial-gradient(circle at 78% 4%, rgb(124 77 255 / 0.12), transparent 28%),
    radial-gradient(circle at 7% 32%, rgb(54 209 196 / 0.10), transparent 24%),
    linear-gradient(135deg, #fbfaff 0%, #f7f6fd 56%, #f4fbfa 100%) !important;
  background-attachment: fixed !important;
}

html.aimasker-user-theme .btn-primary {
  border-color: transparent !important;
  color: #fff !important;
  background-color: var(--aimasker-violet-600) !important;
  background-image: linear-gradient(105deg, var(--aimasker-violet-600), #a43ef2) !important;
  box-shadow: 0 10px 24px rgb(108 59 238 / 0.22) !important;
}

html.aimasker-user-theme .btn-primary:hover {
  background-color: var(--aimasker-violet-700) !important;
  background-image: linear-gradient(105deg, var(--aimasker-violet-700), #9135da) !important;
}

html.aimasker-user-theme .stat-icon-primary,
html.aimasker-user-theme .badge-primary {
  color: var(--aimasker-violet-600) !important;
  background-color: var(--aimasker-violet-100) !important;
}

html.aimasker-user-theme .bg-primary-50 { background-color: var(--aimasker-violet-50) !important; }
html.aimasker-user-theme .bg-primary-100 { background-color: var(--aimasker-violet-100) !important; }
html.aimasker-user-theme .bg-primary-200\/50 { background-color: rgb(221 210 255 / .5) !important; }
html.aimasker-user-theme .bg-primary-300\/10 { background-color: rgb(194 174 255 / .1) !important; }
html.aimasker-user-theme .bg-primary-400 { background-color: var(--aimasker-violet-400) !important; }
html.aimasker-user-theme .bg-primary-400\/10 { background-color: rgb(156 124 255 / .1) !important; }
html.aimasker-user-theme .bg-primary-400\/20 { background-color: rgb(156 124 255 / .2) !important; }
html.aimasker-user-theme .bg-primary-500 { background-color: var(--aimasker-violet-500) !important; }
html.aimasker-user-theme .bg-primary-500\/10 { background-color: rgb(124 77 255 / .1) !important; }
html.aimasker-user-theme .bg-primary-500\/15 { background-color: rgb(124 77 255 / .15) !important; }
html.aimasker-user-theme .bg-primary-600 { background-color: var(--aimasker-violet-600) !important; }
html.aimasker-user-theme .bg-primary-900\/10 { background-color: rgb(59 37 130 / .1) !important; }

html.aimasker-user-theme .text-primary-300 { color: var(--aimasker-violet-300) !important; }
html.aimasker-user-theme .text-primary-400 { color: var(--aimasker-violet-400) !important; }
html.aimasker-user-theme .text-primary-500 { color: var(--aimasker-violet-500) !important; }
html.aimasker-user-theme .text-primary-600,
html.aimasker-user-theme .text-primary-600\/90 { color: var(--aimasker-violet-600) !important; }
html.aimasker-user-theme .text-primary-700 { color: var(--aimasker-violet-700) !important; }
html.aimasker-user-theme .text-primary-800 { color: var(--aimasker-violet-800) !important; }
html.aimasker-user-theme .text-primary-900 { color: var(--aimasker-violet-900) !important; }

html.aimasker-user-theme .border-primary-100 { border-color: var(--aimasker-violet-100) !important; }
html.aimasker-user-theme .border-primary-200,
html.aimasker-user-theme .border-primary-200\/80 { border-color: var(--aimasker-violet-200) !important; }
html.aimasker-user-theme .border-primary-300 { border-color: var(--aimasker-violet-300) !important; }
html.aimasker-user-theme .border-primary-400 { border-color: var(--aimasker-violet-400) !important; }
html.aimasker-user-theme .border-primary-500 { border-color: var(--aimasker-violet-500) !important; }
html.aimasker-user-theme .border-primary-600 { border-color: var(--aimasker-violet-600) !important; }
html.aimasker-user-theme .border-primary-600\/25 { border-color: rgb(108 59 238 / .25) !important; }
html.aimasker-user-theme .border-t-primary-600 { border-top-color: var(--aimasker-violet-600) !important; }

html.aimasker-user-theme .from-primary-50 { --tw-gradient-from: var(--aimasker-violet-50) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(247 244 255 / 0) var(--tw-gradient-to-position) !important; }
html.aimasker-user-theme .from-primary-400 { --tw-gradient-from: var(--aimasker-violet-400) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(156 124 255 / 0) var(--tw-gradient-to-position) !important; }
html.aimasker-user-theme .from-primary-500 { --tw-gradient-from: var(--aimasker-violet-500) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(124 77 255 / 0) var(--tw-gradient-to-position) !important; }
html.aimasker-user-theme .from-primary-600 { --tw-gradient-from: var(--aimasker-violet-600) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(108 59 238 / 0) var(--tw-gradient-to-position) !important; }
html.aimasker-user-theme .to-primary-100 { --tw-gradient-to: var(--aimasker-violet-100) var(--tw-gradient-to-position) !important; }
html.aimasker-user-theme .to-primary-500 { --tw-gradient-to: var(--aimasker-violet-500) var(--tw-gradient-to-position) !important; }
html.aimasker-user-theme .to-primary-600 { --tw-gradient-to: #a43ef2 var(--tw-gradient-to-position) !important; }

html.aimasker-user-theme .accent-primary-600 { accent-color: var(--aimasker-violet-600) !important; }
html.aimasker-user-theme .ring-primary-100 { --tw-ring-color: var(--aimasker-violet-100) !important; }
html.aimasker-user-theme .ring-primary-200\/80 { --tw-ring-color: rgb(221 210 255 / .8) !important; }
html.aimasker-user-theme .ring-primary-500\/20 { --tw-ring-color: rgb(124 77 255 / .2) !important; }
html.aimasker-user-theme .ring-primary-500\/40 { --tw-ring-color: rgb(124 77 255 / .4) !important; }
html.aimasker-user-theme .shadow-primary-500\/20,
html.aimasker-user-theme .shadow-primary-500\/25,
html.aimasker-user-theme .shadow-primary-500\/30 { --tw-shadow-color: rgb(124 77 255 / .24) !important; }

html.aimasker-user-theme .hover\:bg-primary-50:hover { background-color: var(--aimasker-violet-50) !important; }
html.aimasker-user-theme .hover\:bg-primary-100:hover { background-color: var(--aimasker-violet-100) !important; }
html.aimasker-user-theme .hover\:bg-primary-600:hover { background-color: var(--aimasker-violet-600) !important; }
html.aimasker-user-theme .hover\:bg-primary-700:hover { background-color: var(--aimasker-violet-700) !important; }
html.aimasker-user-theme .hover\:text-primary-500:hover { color: var(--aimasker-violet-500) !important; }
html.aimasker-user-theme .hover\:text-primary-600:hover { color: var(--aimasker-violet-600) !important; }
html.aimasker-user-theme .hover\:text-primary-700:hover { color: var(--aimasker-violet-700) !important; }
html.aimasker-user-theme .hover\:border-primary-300:hover { border-color: var(--aimasker-violet-300) !important; }
html.aimasker-user-theme .hover\:border-primary-500:hover { border-color: var(--aimasker-violet-500) !important; }
html.aimasker-user-theme .focus\:border-primary-500:focus,
html.aimasker-user-theme .focus-within\:border-primary-500:focus-within { border-color: var(--aimasker-violet-500) !important; }
html.aimasker-user-theme .focus\:ring-primary-500:focus,
html.aimasker-user-theme .focus-visible\:ring-primary-500:focus-visible { --tw-ring-color: var(--aimasker-violet-500) !important; }

html.aimasker-user-theme .navigation-progress-bar {
  background: linear-gradient(90deg, transparent 0%, var(--aimasker-violet-400) 20%, var(--aimasker-violet-600) 50%, #a43ef2 80%, transparent 100%) !important;
}

html.aimasker-user-theme ::selection {
  color: var(--aimasker-violet-900);
  background: rgb(124 77 255 / .2);
}

#aimasker-online-studio-nav:hover {
  color: rgb(17 24 39);
  background: rgb(243 244 246);
}

#aimasker-online-studio-nav svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#aimasker-sidebar-studio-nav svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dark #aimasker-online-studio-nav {
  color: rgb(156 163 175);
}

.dark #aimasker-online-studio-nav:hover {
  color: #fff;
  background: rgb(31 41 55);
}

.aimasker-redeem-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(221 210 255 / 0.9);
  font-size: 0.875rem;
}

.aimasker-redeem-contact strong {
  color: #6c3bee;
}

.aimasker-redeem-contact button,
.aimasker-redeem-contact .aimasker-redeem-buy {
  border: 1px solid #c2aeff;
  border-radius: 0.5rem;
  padding: 0.25rem 0.625rem;
  color: #6c3bee;
  background: #f7f4ff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.aimasker-redeem-contact button:hover,
.aimasker-redeem-contact .aimasker-redeem-buy:hover {
  background: #eee8ff;
}

.aimasker-redeem-contact .aimasker-redeem-buy {
  padding: 0.42rem 0.85rem;
  color: #fff;
  border-color: #6c3bee;
  background: linear-gradient(105deg, #6c3bee, #a43ef2);
}

.aimasker-redeem-contact .aimasker-redeem-buy:hover {
  color: #fff;
  background: linear-gradient(105deg, #582bd1, #9135da);
}

.dark .aimasker-redeem-contact {
  border-top-color: rgb(71 36 167 / .75);
}

@media (max-width: 639px) {
  #aimasker-online-studio-nav {
    width: 2.25rem;
    height: 2.25rem;
    justify-content: center;
    padding: 0;
  }

  #aimasker-online-studio-nav svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  #aimasker-online-studio-nav .aimasker-studio-label {
    display: none;
  }
}