body.pearl-app-shell {
  background:
    radial-gradient(circle at top left, rgba(34, 199, 238, 0.12), transparent 22%),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 20%),
    linear-gradient(180deg, #fbfdff 0%, #f2f8ff 100%);
  color: #11314d;
}

body.pearl-app-shell #root {
  min-height: 100vh;
}

body.pearl-app-shell .rounded-2xl {
  border-radius: 14px !important;
}

body.pearl-app-shell .rounded-3xl {
  border-radius: 18px !important;
}

body.pearl-app-shell .p-8 {
  padding: 1.25rem !important;
}

body.pearl-app-shell .p-6 {
  padding: 1rem !important;
}

body.pearl-app-shell .px-8 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

body.pearl-app-shell .py-8 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

body.pearl-app-shell .gap-8 {
  gap: 1.25rem !important;
}

body.pearl-app-shell .gap-6 {
  gap: 1rem !important;
}

body.pearl-app-shell .gap-5 {
  gap: 0.875rem !important;
}

body.pearl-app-shell .gap-4 {
  gap: 0.75rem !important;
}

body.pearl-app-shell .space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.25rem !important;
}

body.pearl-app-shell .space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem !important;
}

body.pearl-app-shell .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem !important;
}

body.pearl-app-shell .text-4xl {
  font-size: 2rem !important;
  line-height: 1.1 !important;
}

body.pearl-app-shell .text-3xl {
  font-size: 1.55rem !important;
  line-height: 1.2 !important;
}

body.pearl-app-shell .text-2xl {
  font-size: 1.3rem !important;
  line-height: 1.25 !important;
}

body.pearl-app-shell .text-xl {
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
}

body.pearl-app-shell .h-16 {
  height: 3.5rem !important;
}

body.pearl-app-shell .h-20 {
  height: 4.5rem !important;
}

body.pearl-app-shell .shadow-xl,
body.pearl-app-shell .shadow-2xl {
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

body.pearl-app-shell [role="dialog"] {
  max-width: min(92vw, 34rem) !important;
}

body.pearl-app-shell [data-slot="dialog-content"] {
  padding: 1rem !important;
  border-radius: 18px !important;
}

body.pearl-app-shell [data-slot="dialog-header"] {
  gap: 0.35rem !important;
  padding-bottom: 0.25rem !important;
}

body.pearl-app-shell [data-slot="dialog-footer"] {
  gap: 0.625rem !important;
  padding-top: 0.25rem !important;
}

body.pearl-app-shell [data-slot="card"] {
  border-radius: 16px !important;
}

body.pearl-app-shell [data-slot="sidebar"],
body.pearl-app-shell [data-slot="sidebar-container"] {
  background: rgba(247, 252, 255, 0.92) !important;
  backdrop-filter: blur(12px);
}

body.pearl-app-shell button {
  border-radius: 12px;
}

body.pearl-app-shell input,
body.pearl-app-shell textarea,
body.pearl-app-shell select {
  min-height: 2.6rem;
}

body.pearl-app-shell .pearl-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  padding: 0.35rem;
  background: transparent !important;
}

body.pearl-app-shell .overflow-hidden:has(> .pearl-logo-image) {
  background: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  border: 1px solid rgba(191, 219, 254, 0.85);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 900px) {
  body.pearl-app-shell .p-8 {
    padding: 1rem !important;
  }

  body.pearl-app-shell .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body.pearl-app-shell .gap-8 {
    gap: 1rem !important;
  }
}