/* Default colour ramps - the token layer petal_components styles against.
 *
 * These make a fresh install work out of the box (blue primary, pink
 * secondary, semantic hues, zinc gray). Override any ramp by defining the
 * same --color-{role}-{stop} variables in an @theme block AFTER this import
 * - later definitions win, so your colors.css stays the source of truth.
 * Values are the Tailwind v4 palette.
 */
@theme {
  --color-primary-50: oklch(97% 0.014 254.604);
  --color-primary-100: oklch(93.2% 0.032 255.585);
  --color-primary-200: oklch(88.2% 0.059 254.128);
  --color-primary-300: oklch(80.9% 0.105 251.813);
  --color-primary-400: oklch(70.7% 0.165 254.624);
  --color-primary-500: oklch(62.3% 0.214 259.815);
  --color-primary-600: oklch(54.6% 0.245 262.881);
  --color-primary-700: oklch(48.8% 0.243 264.376);
  --color-primary-800: oklch(42.4% 0.199 265.638);
  --color-primary-900: oklch(37.9% 0.146 265.522);
  --color-primary-950: oklch(28.2% 0.091 267.935);

  --color-secondary-50: oklch(97.1% 0.014 343.198);
  --color-secondary-100: oklch(94.8% 0.028 342.258);
  --color-secondary-200: oklch(89.9% 0.061 343.231);
  --color-secondary-300: oklch(82.3% 0.12 346.018);
  --color-secondary-400: oklch(71.8% 0.202 349.761);
  --color-secondary-500: oklch(65.6% 0.241 354.308);
  --color-secondary-600: oklch(59.2% 0.249 0.584);
  --color-secondary-700: oklch(52.5% 0.223 3.958);
  --color-secondary-800: oklch(45.9% 0.187 3.815);
  --color-secondary-900: oklch(40.8% 0.153 2.432);
  --color-secondary-950: oklch(28.4% 0.109 3.907);

  --color-info-50: oklch(97.7% 0.013 236.62);
  --color-info-100: oklch(95.1% 0.026 236.824);
  --color-info-200: oklch(90.1% 0.058 230.902);
  --color-info-300: oklch(82.8% 0.111 230.318);
  --color-info-400: oklch(74.6% 0.16 232.661);
  --color-info-500: oklch(68.5% 0.169 237.323);
  --color-info-600: oklch(58.8% 0.158 241.966);
  --color-info-700: oklch(50% 0.134 242.749);
  --color-info-800: oklch(44.3% 0.11 240.79);
  --color-info-900: oklch(39.1% 0.09 240.876);
  --color-info-950: oklch(29.3% 0.066 243.157);

  --color-success-50: oklch(98.2% 0.018 155.826);
  --color-success-100: oklch(96.2% 0.044 156.743);
  --color-success-200: oklch(92.5% 0.084 155.995);
  --color-success-300: oklch(87.1% 0.15 154.449);
  --color-success-400: oklch(79.2% 0.209 151.711);
  --color-success-500: oklch(72.3% 0.219 149.579);
  --color-success-600: oklch(62.7% 0.194 149.214);
  --color-success-700: oklch(52.7% 0.154 150.069);
  --color-success-800: oklch(44.8% 0.119 151.328);
  --color-success-900: oklch(39.3% 0.095 152.535);
  --color-success-950: oklch(26.6% 0.065 152.934);

  --color-warning-50: oklch(98.7% 0.026 102.212);
  --color-warning-100: oklch(97.3% 0.071 103.193);
  --color-warning-200: oklch(94.5% 0.129 101.54);
  --color-warning-300: oklch(90.5% 0.182 98.111);
  --color-warning-400: oklch(85.2% 0.199 91.936);
  --color-warning-500: oklch(79.5% 0.184 86.047);
  --color-warning-600: oklch(68.1% 0.162 75.834);
  --color-warning-700: oklch(55.4% 0.135 66.442);
  --color-warning-800: oklch(47.6% 0.114 61.907);
  --color-warning-900: oklch(42.1% 0.095 57.708);
  --color-warning-950: oklch(28.6% 0.066 53.813);

  --color-danger-50: oklch(97.1% 0.013 17.38);
  --color-danger-100: oklch(93.6% 0.032 17.717);
  --color-danger-200: oklch(88.5% 0.062 18.334);
  --color-danger-300: oklch(80.8% 0.114 19.571);
  --color-danger-400: oklch(70.4% 0.191 22.216);
  --color-danger-500: oklch(63.7% 0.237 25.331);
  --color-danger-600: oklch(57.7% 0.245 27.325);
  --color-danger-700: oklch(50.5% 0.213 27.518);
  --color-danger-800: oklch(44.4% 0.177 26.899);
  --color-danger-900: oklch(39.6% 0.141 25.723);
  --color-danger-950: oklch(25.8% 0.092 26.042);

  --color-gray-50: oklch(98.5% 0 0);
  --color-gray-100: oklch(96.7% 0.001 286.375);
  --color-gray-200: oklch(92% 0.004 286.32);
  --color-gray-300: oklch(87.1% 0.006 286.286);
  --color-gray-400: oklch(70.5% 0.015 286.067);
  --color-gray-500: oklch(55.2% 0.016 285.938);
  --color-gray-600: oklch(44.2% 0.017 285.786);
  --color-gray-700: oklch(37% 0.013 285.805);
  --color-gray-800: oklch(27.4% 0.006 286.033);
  --color-gray-900: oklch(21% 0.006 285.885);
  --color-gray-950: oklch(14.1% 0.005 285.823);
}

@layer components {
  /* Container */

  .pc-container {
    @apply w-full mx-auto sm:px-6 lg:px-8;
  }
  .pc-container--sm {
    @apply max-w-3xl;
  }
  .pc-container--md {
    @apply max-w-5xl;
  }
  .pc-container--lg {
    @apply max-w-7xl;
  }
  .pc-container--xl {
    @apply max-w-[85rem];
  }
  .pc-container--full {
    @apply max-w-full;
  }
  .pc-container--mobile-padded {
    @apply max-sm:px-4;
  }

  /* Buttons (New) */

  .pc-button {
    @apply inline-flex items-center justify-center font-medium whitespace-nowrap select-none transition-all duration-200 ease-out border focus-visible:ring-2 focus-visible:ring-primary-500/50 active:scale-[0.98];
    border-radius: var(--pc-radius, 0.625rem);
  }

  /* Buttons - sizes */

  .pc-button--xs {
    @apply text-xs leading-4 px-2.5 py-1.5;
  }
  .pc-button--sm {
    @apply px-3 py-2 text-sm leading-4;
  }
  .pc-button--md {
    @apply px-4 py-2 text-sm leading-5;
  }
  .pc-button--lg {
    @apply px-4 py-2 text-base leading-6;
  }
  .pc-button--xl {
    @apply px-6 py-3 text-base leading-6;
  }
  /* Square icon-only button; matches md button height. */
  .pc-button--icon {
    @apply p-2;
  }

  /* Buttons - border radius */
  .pc-button--radius-none {
    @apply rounded-none;
  }

  .pc-button--radius-sm {
    @apply rounded;
  }

  .pc-button--radius-md {
    @apply rounded-md;
  }

  .pc-button--radius-lg {
    @apply rounded-lg;
  }

  .pc-button--radius-xl {
    @apply rounded-xl;
  }

  .pc-button--radius-full {
    @apply rounded-full;
  }

  /* Buttons - colors */

  .pc-button--primary {
    @apply border-transparent bg-primary-600 hover:bg-primary-700 active:bg-primary-800 shadow-xs;
    color: var(--pc-button-solid-fg, #fff);
  }
  .pc-button--primary-light {
    @apply bg-primary-100 text-primary-800 border-transparent hover:bg-primary-200 active:bg-primary-300 shadow-xs dark:bg-primary-200 dark:text-primary-800 dark:hover:brightness-95 dark:active:brightness-90;
  }
  .pc-button--primary-soft {
    @apply bg-primary-100 text-primary-800 border-transparent hover:bg-primary-200 active:bg-primary-300 shadow-xs dark:bg-primary-500/15 dark:text-primary-300 dark:hover:bg-primary-500/25 dark:active:bg-primary-500/30;
  }
  .pc-button--primary-outline {
    @apply bg-transparent border-primary-600/30 text-primary-700 shadow-xs hover:bg-primary-50 hover:border-primary-600/50 hover:text-primary-800 active:bg-primary-100 dark:bg-white/5 dark:border-primary-500/40 dark:text-primary-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-300 dark:hover:border-primary-500/60 dark:active:bg-primary-500/20;
  }
  .pc-button--primary-inverted {
    @apply border-primary-400 dark:border-primary-400 dark:hover:border-primary-700 dark:hover:text-white dark:hover:bg-primary-700 dark:text-primary-400 hover:border-primary-600 text-primary-600 hover:text-white active:bg-primary-700 hover:bg-primary-600;
  }
  .pc-button--primary-shadow {
    @apply text-white border-transparent shadow-xl bg-primary-600 hover:bg-primary-700 active:bg-primary-800 shadow-primary-500/30 dark:hover:shadow-primary-600/30 dark:active:shadow-primary-700/30;
  }
  .pc-button--primary-ghost {
    @apply bg-transparent border-transparent text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 dark:text-primary-300 dark:hover:bg-primary-500/15 dark:hover:text-primary-300 dark:active:bg-primary-500/20;
  }
  .pc-button--secondary {
    @apply text-white border-transparent bg-secondary-600 hover:bg-secondary-700 active:bg-secondary-800 shadow-xs;
  }
  .pc-button--secondary-light {
    @apply bg-secondary-100 text-secondary-800 border-transparent hover:bg-secondary-200 active:bg-secondary-300 shadow-xs dark:bg-secondary-200 dark:text-secondary-800 dark:hover:brightness-95 dark:active:brightness-90;
  }
  .pc-button--secondary-soft {
    @apply bg-secondary-100 text-secondary-800 border-transparent hover:bg-secondary-200 active:bg-secondary-300 shadow-xs dark:bg-secondary-500/15 dark:text-secondary-300 dark:hover:bg-secondary-500/25 dark:active:bg-secondary-500/30;
  }
  .pc-button--secondary-outline {
    @apply bg-transparent border-secondary-600/30 text-secondary-700 shadow-xs hover:bg-secondary-50 hover:border-secondary-600/50 hover:text-secondary-800 active:bg-secondary-100 dark:bg-white/5 dark:border-secondary-500/40 dark:text-secondary-300 dark:hover:bg-secondary-500/10 dark:hover:text-secondary-300 dark:hover:border-secondary-500/60 dark:active:bg-secondary-500/20;
  }
  .pc-button--secondary-inverted {
    @apply border-secondary-400 dark:border-secondary-400 dark:hover:border-secondary-700 dark:hover:text-white dark:hover:bg-secondary-700 dark:text-secondary-400 hover:border-secondary-600 text-secondary-600 hover:text-white active:bg-secondary-700 hover:bg-secondary-600;
  }
  .pc-button--secondary-shadow {
    @apply text-white border-transparent shadow-xl bg-secondary-600 hover:bg-secondary-700 active:bg-secondary-800 shadow-secondary-500/30 dark:hover:shadow-secondary-600/30 dark:active:shadow-secondary-700/30;
  }
  .pc-button--secondary-ghost {
    @apply bg-transparent border-transparent text-secondary-700 hover:bg-secondary-100 hover:text-secondary-800 active:bg-secondary-200 dark:text-secondary-300 dark:hover:bg-secondary-500/15 dark:hover:text-secondary-300 dark:active:bg-secondary-500/20;
  }
  .pc-button--white {
    @apply text-gray-700 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;
  }
  .pc-button--white-outline {
    @apply bg-transparent border-gray-300 text-gray-700 shadow-xs hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:border-white/15 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-gray-50 dark:active:bg-white/15;
  }
  .pc-button--white-inverted {
    @apply text-gray-600 border-gray-400 dark:border-white dark:hover:border-gray-700 dark:hover:text-black dark:hover:bg-white dark:text-gray-300 hover:border-gray-600 hover:text-black active:bg-gray-700 hover:bg-white;
  }
  .pc-button--white-shadow {
    @apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 active:border-gray-400 active:bg-gray-200 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-black shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:active:shadow-gray-400/30;
  }
  .pc-button--pure-white {
    @apply text-gray-700 bg-white border-white hover:text-gray-900 hover:border-transparent hover:bg-gray-50 active:border-transparent active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;
  }
  .pc-button--info {
    @apply text-white border-transparent bg-info-600 hover:bg-info-700 active:bg-info-800 shadow-xs;
  }
  .pc-button--info-light {
    @apply bg-info-100 text-info-800 border-transparent hover:bg-info-200 active:bg-info-300 shadow-xs dark:bg-info-200 dark:text-info-800 dark:hover:bg-info-300 dark:active:bg-info-400;
  }
  .pc-button--info-soft {
    @apply bg-info-100 text-info-800 border-transparent hover:bg-info-200 active:bg-info-300 shadow-xs dark:bg-info-500/15 dark:text-info-300 dark:hover:bg-info-500/25 dark:active:bg-info-500/30;
  }
  .pc-button--info-outline {
    @apply bg-transparent border-info-600/30 text-info-700 shadow-xs hover:bg-info-50 hover:border-info-600/50 hover:text-info-800 active:bg-info-100 dark:bg-white/5 dark:border-info-500/40 dark:text-info-300 dark:hover:bg-info-500/10 dark:hover:text-info-300 dark:hover:border-info-500/60 dark:active:bg-info-500/20;
  }
  .pc-button--info-inverted {
    @apply text-info-600 border-info-400 dark:border-info-400 dark:hover:border-info-700 dark:hover:text-white dark:hover:bg-info-700 dark:text-info-400 hover:border-info-600 hover:text-white active:bg-info-800 hover:bg-info-600;
  }
  .pc-button--info-shadow {
    @apply text-white border-transparent shadow-xl bg-info-600 hover:bg-info-700 active:bg-info-800 shadow-info-500/30 dark:hover:shadow-info-600/30 dark:active:shadow-info-700/30;
  }
  .pc-button--info-ghost {
    @apply bg-transparent border-transparent text-info-700 hover:bg-info-100 hover:text-info-800 active:bg-info-200 dark:text-info-300 dark:hover:bg-info-500/15 dark:hover:text-info-300 dark:active:bg-info-500/20;
  }
  .pc-button--success {
    @apply text-white border-transparent bg-success-600 hover:bg-success-700 active:bg-success-800 shadow-xs;
  }
  .pc-button--success-light {
    @apply bg-success-100 text-success-800 border-transparent hover:bg-success-200 active:bg-success-300 shadow-xs dark:bg-success-200 dark:text-success-800 dark:hover:bg-success-300 dark:active:bg-success-400;
  }
  .pc-button--success-soft {
    @apply bg-success-100 text-success-800 border-transparent hover:bg-success-200 active:bg-success-300 shadow-xs dark:bg-success-500/15 dark:text-success-300 dark:hover:bg-success-500/25 dark:active:bg-success-500/30;
  }
  .pc-button--success-outline {
    @apply bg-transparent border-success-600/30 text-success-700 shadow-xs hover:bg-success-50 hover:border-success-600/50 hover:text-success-800 active:bg-success-100 dark:bg-white/5 dark:border-success-500/40 dark:text-success-300 dark:hover:bg-success-500/10 dark:hover:text-success-300 dark:hover:border-success-500/60 dark:active:bg-success-500/20;
  }
  .pc-button--success-inverted {
    @apply text-success-600 border-success-400 dark:border-success-400 dark:hover:border-success-700 dark:hover:text-white dark:hover:bg-success-700 dark:text-success-400 hover:border-success-600 hover:text-white active:bg-success-800 hover:bg-success-600;
  }
  .pc-button--success-shadow {
    @apply text-white border-transparent shadow-xl bg-success-600 hover:bg-success-700 active:bg-success-800 shadow-success-500/30 dark:hover:shadow-success-600/30 dark:active:shadow-success-700/30;
  }
  .pc-button--success-ghost {
    @apply bg-transparent border-transparent text-success-700 hover:bg-success-100 hover:text-success-800 active:bg-success-200 dark:text-success-300 dark:hover:bg-success-500/15 dark:hover:text-success-300 dark:active:bg-success-500/20;
  }
  .pc-button--warning {
    @apply text-white border-transparent bg-warning-600 hover:bg-warning-700 active:bg-warning-800 shadow-xs;
  }
  .pc-button--warning-light {
    @apply bg-warning-100 text-warning-800 border-transparent hover:bg-warning-200 active:bg-warning-300 shadow-xs dark:bg-warning-200 dark:text-warning-800 dark:hover:bg-warning-300 dark:active:bg-warning-400;
  }
  .pc-button--warning-soft {
    @apply bg-warning-100 text-warning-800 border-transparent hover:bg-warning-200 active:bg-warning-300 shadow-xs dark:bg-warning-500/15 dark:text-warning-300 dark:hover:bg-warning-500/25 dark:active:bg-warning-500/30;
  }
  .pc-button--warning-outline {
    @apply bg-transparent border-warning-600/30 text-warning-700 shadow-xs hover:bg-warning-50 hover:border-warning-600/50 hover:text-warning-800 active:bg-warning-100 dark:bg-white/5 dark:border-warning-500/40 dark:text-warning-300 dark:hover:bg-warning-500/10 dark:hover:text-warning-300 dark:hover:border-warning-500/60 dark:active:bg-warning-500/20;
  }
  .pc-button--warning-inverted {
    @apply text-warning-600 border-warning-400 dark:border-warning-400 dark:hover:border-warning-700 dark:hover:text-white dark:hover:bg-warning-700 dark:text-warning-400 hover:border-warning-600 hover:text-white active:bg-warning-800 hover:bg-warning-600;
  }
  .pc-button--warning-shadow {
    @apply text-white border-transparent shadow-xl bg-warning-600 hover:bg-warning-700 active:bg-warning-800 shadow-warning-500/30 dark:hover:shadow-warning-600/30 dark:active:shadow-warning-700/30;
  }
  .pc-button--warning-ghost {
    @apply bg-transparent border-transparent text-warning-700 hover:bg-warning-100 hover:text-warning-800 active:bg-warning-200 dark:text-warning-300 dark:hover:bg-warning-500/15 dark:hover:text-warning-300 dark:active:bg-warning-500/20;
  }
  .pc-button--danger {
    @apply text-white border-transparent bg-danger-600 hover:bg-danger-700 active:bg-danger-800 shadow-xs;
  }
  .pc-button--danger-light {
    @apply bg-danger-100 text-danger-800 border-transparent hover:bg-danger-200 active:bg-danger-300 shadow-xs dark:bg-danger-200 dark:text-danger-800 dark:hover:bg-danger-300 dark:active:bg-danger-400;
  }
  .pc-button--danger-soft {
    @apply bg-danger-100 text-danger-800 border-transparent hover:bg-danger-200 active:bg-danger-300 shadow-xs dark:bg-danger-500/15 dark:text-danger-300 dark:hover:bg-danger-500/25 dark:active:bg-danger-500/30;
  }
  .pc-button--danger-outline {
    @apply bg-transparent border-danger-600/30 text-danger-700 shadow-xs hover:bg-danger-50 hover:border-danger-600/50 hover:text-danger-800 active:bg-danger-100 dark:bg-white/5 dark:border-danger-500/40 dark:text-danger-300 dark:hover:bg-danger-500/10 dark:hover:text-danger-300 dark:hover:border-danger-500/60 dark:active:bg-danger-500/20;
  }
  .pc-button--danger-inverted {
    @apply text-danger-600 border-danger-400 dark:border-danger-400 dark:hover:border-danger-700 dark:hover:text-white dark:hover:bg-danger-700 dark:text-danger-400 hover:border-danger-600 hover:text-white active:bg-danger-800 hover:bg-danger-600;
  }
  .pc-button--danger-shadow {
    @apply text-white border-transparent shadow-xl bg-danger-600 hover:bg-danger-700 active:bg-danger-800 shadow-danger-500/30 dark:hover:shadow-danger-600/30 dark:active:shadow-danger-700/30;
  }
  .pc-button--danger-ghost {
    @apply bg-transparent border-transparent text-danger-700 hover:bg-danger-100 hover:text-danger-800 active:bg-danger-200 dark:text-danger-300 dark:hover:bg-danger-500/15 dark:hover:text-danger-300 dark:active:bg-danger-500/20;
  }
  .pc-button--gray {
    @apply text-white border-transparent bg-gray-600 hover:bg-gray-700 active:bg-gray-800 shadow-xs;
  }
  .pc-button--gray-light {
    @apply bg-gray-100 text-gray-800 border-transparent hover:bg-gray-200 active:bg-gray-300 shadow-xs dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300 dark:active:bg-gray-400;
  }
  .pc-button--gray-soft {
    @apply bg-gray-100 text-gray-800 border-transparent hover:bg-gray-200 active:bg-gray-300 shadow-xs dark:bg-gray-500/15 dark:text-gray-300 dark:hover:bg-gray-500/25 dark:active:bg-gray-500/30;
  }
  .pc-button--gray-outline {
    @apply bg-transparent border-gray-300 text-gray-700 shadow-xs hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:border-white/15 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-gray-50 dark:active:bg-white/15;
  }
  .pc-button--gray-inverted {
    @apply text-gray-600 border-gray-400 dark:border-gray-400 dark:hover:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:text-gray-400 hover:border-gray-600 hover:text-white active:bg-gray-700 hover:bg-gray-600;
  }
  .pc-button--gray-shadow {
    @apply text-white bg-gray-600 border-transparent shadow-xl active:bg-gray-800 hover:bg-gray-700 shadow-gray-500/30 dark:hover:shadow-gray-600/30 dark:active:shadow-gray-700/30;
  }
  .pc-button--gray-ghost {
    @apply bg-transparent border-transparent text-gray-700 hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-gray-50 dark:active:bg-white/15;
  }
  .pc-button--light {
    @apply text-gray-900 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-gray-800 dark:text-white dark:hover:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800 dark:active:text-white;
  }
  .pc-button--light-outline {
    @apply bg-transparent border-gray-300 text-gray-700 shadow-xs hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:border-white/15 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-gray-50 dark:active:bg-white/15;
  }
  .pc-button--light-inverted {
    @apply text-gray-900 border-gray-300 hover:border-gray-600 hover:text-white active:bg-gray-700 hover:bg-gray-600 dark:hover:text-black dark:hover:bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:border-white dark:active:bg-gray-300 dark:active:border-gray-300;
  }
  .pc-button--light-shadow {
    @apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800 shadow-gray-500/30 dark:shadow-gray-600/30 dark:hover:shadow-gray-500/30 dark:active:shadow-gray-600/30;
  }
  .pc-button--dark {
    @apply text-white border-transparent bg-gray-950 dark:text-gray-950 dark:bg-white dark:hover:text-gray-900 dark:hover:bg-gray-100 dark:active:bg-gray-300 dark:active:text-black hover:bg-gray-800 active:bg-gray-900;
  }
  .pc-button--dark-outline {
    @apply bg-transparent border-gray-300 text-gray-700 shadow-xs hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:border-white/15 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-gray-50 dark:active:bg-white/15;
  }
  .pc-button--dark-inverted {
    @apply border-gray-950 text-gray-950 hover:border-transparent hover:text-white active:bg-gray-800 hover:bg-gray-950 dark:hover:bg-white dark:hover:text-black dark:bg-gray-950 dark:text-white dark:active:bg-gray-200 dark:active:border-gray-200 dark:border-white;
  }
  .pc-button--dark-shadow {
    @apply text-white border-transparent shadow-xl dark:text-gray-950 bg-gray-950 active:bg-gray-900 hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-white shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:active:shadow-gray-400/30;
  }

  /* Buttons - loading */

  .pc-button--loading {
    @apply flex items-center gap-2 cursor-not-allowed whitespace-nowrap;
  }

  .pc-button__spinner-icon {
    @apply animate-spin;
  }

  /* Parent-scoped so the size wins over the heroicon mask's own
     width/height defaults regardless of stylesheet order. */
  .pc-button .pc-button__spinner-icon--xs {
    @apply w-3 h-3;
  }
  .pc-button .pc-button__spinner-icon--sm {
    @apply w-4 h-4;
  }
  .pc-button .pc-button__spinner-icon--md {
    @apply w-5 h-5;
  }
  .pc-button .pc-button__spinner-icon--lg {
    @apply w-5 h-5;
  }
  .pc-button .pc-button__spinner-icon--xl {
    @apply w-6 h-6;
  }

  /* Buttons - with icon */

  .pc-button--with-icon {
    @apply flex items-center gap-2 whitespace-nowrap;
  }

  /* Icon Button */

  .pc-icon-button {
    @apply inline-block p-2 transition-colors duration-200 ease-out;
  }

  .pc-icon-button__inner {
    @apply flex flex-col items-center;
  }

  .pc-icon-button__inner--tooltip {
    @apply relative;
  }

  .pc-icon-button__tooltip {
    @apply absolute flex-col items-center invisible mb-6 transition-opacity duration-300 -translate-y-full opacity-0 -top-1 group-hover/pc-icon-button:flex group-hover/pc-icon-button:visible group-hover/pc-icon-button:opacity-100;
  }

  .pc-icon-button__tooltip__text {
    @apply relative z-10 p-2 text-xs leading-none text-white bg-gray-900 rounded-xs shadow-lg whitespace-nowrap dark:bg-gray-700;
  }

  .pc-icon-button__tooltip__arrow {
    @apply w-3 h-3 -mt-2 rotate-45 bg-gray-900 dark:bg-gray-700;
  }

  /* Icon Buttons - colors */

  .pc-icon-button--primary {
    @apply text-primary-600 dark:text-primary-500;
  }
  .pc-icon-button--secondary {
    @apply text-secondary-600 dark:text-secondary-500;
  }
  .pc-icon-button--gray {
    @apply text-gray-600 dark:text-gray-500;
  }
  .pc-icon-button--info {
    @apply text-info-600 dark:text-info-500;
  }
  .pc-icon-button--success {
    @apply text-success-600 dark:text-success-500;
  }
  .pc-icon-button--warning {
    @apply text-warning-600 dark:text-warning-500;
  }
  .pc-icon-button--danger {
    @apply text-danger-600 dark:text-danger-500;
  }

  /* Icon Buttons - background colors */

  .pc-icon-button-bg--primary {
    @apply hover:bg-primary-50 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--secondary {
    @apply hover:bg-secondary-50 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--gray {
    @apply hover:bg-gray-100 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--info {
    @apply hover:bg-info-50 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--success {
    @apply hover:bg-success-50 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--warning {
    @apply hover:bg-warning-50 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--danger {
    @apply hover:bg-danger-50 dark:hover:bg-gray-800;
  }

  /* Icon Button - sizes */

  .pc-icon-button--xs {
    @apply w-9 h-9;
  }
  .pc-icon-button--sm {
    @apply w-10 h-10;
  }
  .pc-icon-button--md {
    @apply w-11 h-11;
  }
  .pc-icon-button--lg {
    @apply w-12 h-12;
  }
  .pc-icon-button--xl {
    @apply w-14 h-14;
  }

  /* Icon Buttons - border radius */
  .pc-icon-button--radius-none {
    @apply rounded-none;
  }

  .pc-icon-button--radius-sm {
    @apply rounded;
  }

  .pc-icon-button--radius-md {
    @apply rounded-md;
  }

  .pc-icon-button--radius-lg {
    @apply rounded-lg;
  }

  .pc-icon-button--radius-xl {
    @apply rounded-xl;
  }

  .pc-icon-button--radius-full {
    @apply rounded-full;
  }

  /* Icon Button - loading */

  .pc-icon-button-spinner--xs {
    @apply w-5 h-5;
  }
  .pc-icon-button-spinner--sm {
    @apply w-6 h-6;
  }
  .pc-icon-button-spinner--md {
    @apply w-7 h-7;
  }
  .pc-icon-button-spinner--lg {
    @apply w-8 h-8;
  }
  .pc-icon-button-spinner--xl {
    @apply w-10 h-10;
  }

  /* Button - disabled */

  .pc-button--disabled {
    @apply opacity-50 cursor-not-allowed active:scale-100;
  }

  /* Button Group */

  .pc-button-group {
    @apply flex -space-x-px;
  }

  /* Button Group - Buttons */

  .pc-button-group__button {
    @apply inline-flex items-center justify-center;
  }

  /* Button Group - Default Styles */

  .pc-button-group__button--default-styles {
    @apply whitespace-nowrap;
    @apply focus:ring-gray-200 focus:z-10;
    @apply focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2;
    @apply disabled:pointer-events-none disabled:opacity-50;
  }

  /* Button Group - Default Background and Border Styles */

  .pc-button-group__button--bg-default {
    @apply bg-white hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800;
    @apply text-gray-800 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300;
  }

  .pc-button-group__button--border-default {
    @apply border border-gray-200 dark:border-gray-800;
  }

  /* Button Group - Button Sizes */

  .pc-button-group__button--xs {
    @apply text-xs px-2.5 py-1.5 leading-4;
  }

  .pc-button-group__button--sm {
    @apply px-3 py-2 text-sm leading-4;
  }

  .pc-button-group__button--md {
    @apply px-4 py-2 text-sm leading-5;
  }

  .pc-button-group__button--lg {
    @apply px-4 py-2 text-base leading-6;
  }

  .pc-button-group__button--xl {
    @apply px-6 py-3 text-base leading-6;
  }

  /* Button Group - Font Weights */

  .pc-button-group__button--font-normal {
    @apply font-normal;
  }

  .pc-button-group__button--font-medium {
    @apply font-medium;
  }

  .pc-button-group__button--font-semibold {
    @apply font-semibold;
  }

  .pc-button-group__button--font-bold {
    @apply font-bold;
  }

  /* Button Group - Button Positions */

  .pc-button-group__button--rounded {
    @apply rounded-md;
  }

  .pc-button-group__button--rounded-r-none {
    @apply rounded-r-none rounded-l-md;
  }

  .pc-button-group__button--rounded-l-none {
    @apply rounded-l-none rounded-r-md;
  }

  .pc-button-group__button--rounded-none {
    @apply rounded-none;
  }

  /* Typography */

  .pc-h1 {
    @apply scroll-m-20 text-4xl font-extrabold tracking-tight text-balance leading-tight sm:text-5xl lg:text-6xl;
  }
  .pc-h2 {
    @apply scroll-m-20 text-3xl font-semibold tracking-tight text-balance leading-tight;
  }
  .pc-h3 {
    @apply scroll-m-20 text-2xl font-semibold tracking-tight text-balance leading-snug;
  }
  .pc-h4 {
    @apply scroll-m-20 text-xl font-semibold tracking-tight text-balance leading-snug;
  }
  .pc-h5 {
    @apply scroll-m-20 text-base font-semibold leading-snug;
  }
  .pc-heading--color {
    @apply text-gray-900 dark:text-white;
  }
  .pc-heading--underline {
    @apply pb-2 border-b border-gray-200 dark:border-gray-800;
  }
  .pc-h1--margin {
    @apply mb-3;
  }
  .pc-h2--margin {
    @apply mt-12 mb-3 first:mt-0;
  }
  .pc-h3--margin {
    @apply mt-8 mb-3 first:mt-0;
  }
  .pc-h4--margin {
    @apply mt-8 mb-3 first:mt-0;
  }
  .pc-h5--margin {
    @apply mt-6 mb-3 first:mt-0;
  }
  .pc-text {
    @apply text-base leading-7 text-pretty text-gray-700 dark:text-gray-100;
  }
  .pc-p--margin {
    @apply mb-6;
  }

  /* Extended typography */
  .pc-lead {
    @apply mb-6 text-xl leading-relaxed text-gray-500 dark:text-gray-400;
  }
  .pc-blockquote {
    @apply my-6 border-l-2 border-gray-300 pl-6 italic text-gray-700 dark:border-white/15 dark:text-gray-100;
  }
  .pc-inline-code {
    @apply bg-gray-100 px-[0.4rem] py-[0.2rem] font-mono text-sm font-semibold text-gray-700 dark:bg-white/10 dark:text-gray-100;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.3125rem), 0.125rem);
  }
  .pc-text-muted {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }
  .pc-text-large {
    @apply text-lg font-semibold text-gray-900 dark:text-white;
  }
  .pc-text-small {
    @apply text-sm font-medium leading-none text-gray-900 dark:text-white;
  }
  .pc-hr {
    @apply my-8 border-gray-200 dark:border-gray-800;
  }

  /* Badges */

  .pc-badge {
    @apply inline-flex items-center justify-center border focus:outline-hidden;
    border-radius: var(--pc-radius, 0.625rem);
  }

  /* Badges - with icon */

  .pc-badge--with-icon {
    @apply flex items-center gap-1 whitespace-nowrap;
  }

  /* Badges - sizes */

    .pc-badge--xs {
    @apply text-[0.5625rem] font-semibold px-1;
  }
  .pc-badge--sm {
    @apply text-[0.625rem] font-semibold px-1.5;
  }
  .pc-badge--md {
    @apply text-xs font-semibold px-2.5 py-0.5;
  }
  .pc-badge--lg {
    @apply text-sm font-semibold px-2.5 py-0.5;
  }
  .pc-badge--xl {
    @apply text-base font-semibold px-3 py-1;
  }

  /* Badges - colors */

  .pc-badge--primary-light {
    @apply text-primary-800 bg-primary-100 border-transparent dark:bg-primary-200;
  }
  .pc-badge--primary-soft {
    @apply text-primary-800 bg-primary-100 border-transparent dark:bg-primary-500/15 dark:text-primary-300;
  }
  .pc-badge--primary-dark {
    @apply border-transparent bg-primary-600;
    color: var(--pc-button-solid-fg, #fff);
  }
  .pc-badge--primary-outline {
    @apply bg-transparent text-primary-700 border-primary-600/30 dark:bg-white/5 dark:text-primary-300 dark:border-primary-500/40;
  }

  .pc-badge--secondary-light {
    @apply text-secondary-800 bg-secondary-100 border-transparent dark:bg-secondary-200;
  }
  .pc-badge--secondary-soft {
    @apply text-secondary-800 bg-secondary-100 border-transparent dark:bg-secondary-500/15 dark:text-secondary-300;
  }
  .pc-badge--secondary-dark {
    @apply text-white bg-secondary-600 border-secondary-600;
  }
  .pc-badge--secondary-outline {
    @apply bg-transparent text-secondary-700 border-secondary-600/30 dark:bg-white/5 dark:text-secondary-300 dark:border-secondary-500/40;
  }

  .pc-badge--info-light {
    @apply text-info-800 bg-info-100 border-transparent dark:bg-info-200;
  }
  .pc-badge--info-soft {
    @apply text-info-800 bg-info-100 border-transparent dark:bg-info-500/15 dark:text-info-300;
  }
  .pc-badge--info-dark {
    @apply text-white bg-info-600 border-info-600;
  }
  .pc-badge--info-outline {
    @apply bg-transparent text-info-700 border-info-600/30 dark:bg-white/5 dark:text-info-300 dark:border-info-500/40;
  }

  .pc-badge--success-light {
    @apply text-success-800 bg-success-100 border-transparent dark:bg-success-200;
  }
  .pc-badge--success-soft {
    @apply text-success-800 bg-success-100 border-transparent dark:bg-success-500/15 dark:text-success-300;
  }
  .pc-badge--success-dark {
    @apply text-white bg-success-600 border-success-600;
  }
  .pc-badge--success-outline {
    @apply bg-transparent text-success-700 border-success-600/30 dark:bg-white/5 dark:text-success-300 dark:border-success-500/40;
  }

  .pc-badge--warning-light {
    @apply text-warning-800 bg-warning-100 border-transparent dark:bg-warning-200;
  }
  .pc-badge--warning-soft {
    @apply text-warning-800 bg-warning-100 border-transparent dark:bg-warning-500/15 dark:text-warning-300;
  }
  .pc-badge--warning-dark {
    @apply text-white bg-warning-600 border-warning-600;
  }
  .pc-badge--warning-outline {
    @apply bg-transparent text-warning-700 border-warning-600/30 dark:bg-white/5 dark:text-warning-300 dark:border-warning-500/40;
  }

  .pc-badge--danger-light {
    @apply text-danger-800 bg-danger-100 border-transparent dark:bg-danger-200;
  }
  .pc-badge--danger-soft {
    @apply text-danger-800 bg-danger-100 border-transparent dark:bg-danger-500/15 dark:text-danger-300;
  }
  .pc-badge--danger-dark {
    @apply text-white bg-danger-600 border-danger-600;
  }
  .pc-badge--danger-outline {
    @apply bg-transparent text-danger-700 border-danger-600/30 dark:bg-white/5 dark:text-danger-300 dark:border-danger-500/40;
  }

  .pc-badge--gray-light {
    @apply text-gray-800 bg-gray-100 border-transparent dark:bg-gray-200;
  }
  .pc-badge--gray-soft {
    @apply text-gray-800 bg-gray-100 border-transparent dark:bg-gray-500/15 dark:text-gray-300;
  }
  .pc-badge--gray-dark {
    @apply text-white bg-gray-600 border-gray-600 dark:bg-gray-700 dark:border-gray-700;
  }
  .pc-badge--gray-outline {
    @apply bg-transparent text-gray-700 border-gray-300 dark:bg-white/5 dark:text-gray-200 dark:border-white/15;
  }

  /* Alerts */

  .pc-alert {
    @apply w-full grow-0;
  }
  .pc-alert__inner {
    @apply flex items-start justify-between;
  }
  .pc-alert-base-classes {
    @apply flex items-center w-full gap-3 px-4 py-3 text-sm border border-transparent focus:outline-hidden;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-alert__heading {
    @apply pt-1 font-bold;
  }
  .pc-alert__label {
    @apply py-1 font-medium;
  }
  .pc-alert__dismiss-button {
    @apply flex p-2 hover:cursor-pointer transition-colors duration-150;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0px);
  }

  /* Alerts - colors and variants */

  /* Info variants */
  .pc-alert--info-light {
    @apply text-info-800 bg-info-100 dark:bg-info-200 dark:text-info-800;
  }
  .pc-alert--info-soft {
    @apply text-info-800 bg-info-100 dark:bg-info-500/15 dark:text-info-300;
  }
  .pc-alert--info-dark {
    @apply text-white bg-info-600;
  }
  .pc-alert--info-outline {
    @apply bg-transparent text-info-700 border-info-600/30 dark:bg-white/5 dark:text-info-300 dark:border-info-500/40;
  }

  /* Success variants */
  .pc-alert--success-light {
    @apply text-success-800 bg-success-100 dark:bg-success-200 dark:text-success-800;
  }
  .pc-alert--success-soft {
    @apply text-success-800 bg-success-100 dark:bg-success-500/15 dark:text-success-300;
  }
  .pc-alert--success-dark {
    @apply text-white bg-success-600;
  }
  .pc-alert--success-outline {
    @apply bg-transparent text-success-700 border-success-600/30 dark:bg-white/5 dark:text-success-300 dark:border-success-500/40;
  }

  /* Warning variants */
  .pc-alert--warning-light {
    @apply text-warning-800 bg-warning-100 dark:bg-warning-200 dark:text-warning-800;
  }
  .pc-alert--warning-soft {
    @apply text-warning-800 bg-warning-100 dark:bg-warning-500/15 dark:text-warning-300;
  }
  .pc-alert--warning-dark {
    @apply text-white bg-warning-600;
  }
  .pc-alert--warning-outline {
    @apply bg-transparent text-warning-700 border-warning-600/30 dark:bg-white/5 dark:text-warning-300 dark:border-warning-500/40;
  }

  /* Danger variants */
  .pc-alert--danger-light {
    @apply text-danger-800 bg-danger-100 dark:bg-danger-200 dark:text-danger-800;
  }
  .pc-alert--danger-soft {
    @apply text-danger-800 bg-danger-100 dark:bg-danger-500/15 dark:text-danger-300;
  }
  .pc-alert--danger-dark {
    @apply text-white bg-danger-600;
  }
  .pc-alert--danger-outline {
    @apply bg-transparent text-danger-700 border-danger-600/30 dark:bg-white/5 dark:text-danger-300 dark:border-danger-500/40;
  }

  /* Alerts - dismiss button variants */

  /* Info dismiss button variants */
  .pc-alert__dismiss-button--info-light {
    @apply hover:bg-info-200 hover:text-info-800 dark:hover:bg-info-300 dark:hover:text-info-800;
  }
  .pc-alert__dismiss-button--info-soft {
    @apply hover:bg-info-200 hover:text-info-800 dark:hover:bg-info-500/25 dark:hover:text-info-200;
  }
  .pc-alert__dismiss-button--info-dark {
    @apply text-white hover:bg-info-500;
  }
  .pc-alert__dismiss-button--info-outline {
    @apply text-info-700 hover:bg-info-50 dark:text-info-300 dark:hover:bg-white/10;
  }

  /* Success dismiss button variants */
  .pc-alert__dismiss-button--success-light {
    @apply hover:bg-success-200 hover:text-success-800 dark:hover:bg-success-300 dark:hover:text-success-800;
  }
  .pc-alert__dismiss-button--success-soft {
    @apply hover:bg-success-200 hover:text-success-800 dark:hover:bg-success-500/25 dark:hover:text-success-200;
  }
  .pc-alert__dismiss-button--success-dark {
    @apply text-white hover:bg-success-500;
  }
  .pc-alert__dismiss-button--success-outline {
    @apply text-success-700 hover:bg-success-50 dark:text-success-300 dark:hover:bg-white/10;
  }

  /* Warning dismiss button variants */
  .pc-alert__dismiss-button--warning-light {
    @apply hover:bg-warning-200 hover:text-warning-800 dark:hover:bg-warning-300 dark:hover:text-warning-800;
  }
  .pc-alert__dismiss-button--warning-soft {
    @apply hover:bg-warning-200 hover:text-warning-800 dark:hover:bg-warning-500/25 dark:hover:text-warning-200;
  }
  .pc-alert__dismiss-button--warning-dark {
    @apply text-white hover:bg-warning-500;
  }
  .pc-alert__dismiss-button--warning-outline {
    @apply text-warning-700 hover:bg-warning-50 dark:text-warning-300 dark:hover:bg-white/10;
  }

  /* Danger dismiss button variants */
  .pc-alert__dismiss-button--danger-light {
    @apply hover:bg-danger-200 hover:text-danger-800 dark:hover:bg-danger-300 dark:hover:text-danger-800;
  }
  .pc-alert__dismiss-button--danger-soft {
    @apply hover:bg-danger-200 hover:text-danger-800 dark:hover:bg-danger-500/25 dark:hover:text-danger-200;
  }
  .pc-alert__dismiss-button--danger-dark {
    @apply text-white hover:bg-danger-500;
  }
  .pc-alert__dismiss-button--danger-outline {
    @apply text-danger-700 hover:bg-danger-50 dark:text-danger-300 dark:hover:bg-white/10;
  }

  /* Alert - gray (monochrome) */

  .pc-alert--gray-light {
    @apply text-gray-800 bg-gray-100 dark:bg-gray-200 dark:text-gray-800;
  }
  .pc-alert--gray-soft {
    @apply text-gray-800 bg-gray-100 dark:bg-gray-500/15 dark:text-gray-300;
  }
  .pc-alert--gray-dark {
    @apply text-white bg-gray-600;
  }
  .pc-alert--gray-outline {
    @apply bg-transparent text-gray-700 border-gray-300 dark:bg-white/5 dark:text-gray-200 dark:border-white/15;
  }
  .pc-alert__dismiss-button--gray-light {
    @apply hover:bg-gray-200 hover:text-gray-800 dark:hover:bg-gray-300 dark:hover:text-gray-800;
  }
  .pc-alert__dismiss-button--gray-soft {
    @apply hover:bg-gray-200 hover:text-gray-800 dark:hover:bg-gray-500/25 dark:hover:text-gray-200;
  }
  .pc-alert__dismiss-button--gray-dark {
    @apply text-white hover:bg-gray-500;
  }
  .pc-alert__dismiss-button--gray-outline {
    @apply text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/10;
  }

  /* Alerts - with icon */

  .pc-alert__icon-container {
    @apply self-start shrink-0 pt-0.5 w-6 h-6;
  }

  /* Forms */

  .pc-form-field-wrapper {
    @apply mb-6;
  }

  .pc-form-field-wrapper--no-margin {
    @apply mb-0;
  }

  .pc-form-field-wrapper--error input,
  .pc-form-field-wrapper--error select,
  .pc-form-field-wrapper--error textarea {
    @apply border-danger-500 ring-2 ring-danger-500/20 focus-visible:border-danger-500 focus-visible:ring-danger-500/40 dark:border-danger-500/70 dark:ring-danger-500/25 dark:focus-visible:ring-danger-500/40;
  }
  .pc-form-field-wrapper--error input[type="checkbox"] {
    @apply border-danger-500 dark:border-danger-500/70;
  }
  .pc-form-field-wrapper--error .pc-switch .pc-switch__fake-input {
    @apply border-danger-500 dark:border-danger-500/70;
  }
  .pc-form-field-wrapper--error .pc-radio-card .pc-radio-card__fake-input {
    @apply border-danger-500 dark:border-danger-500/70;
  }
  .pc-checkbox-label {
    @apply inline-flex items-center gap-3 text-sm font-normal text-gray-900 cursor-pointer dark:text-gray-200;
  }
  .pc-label {
    @apply block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200;
  }
  .pc-label--for-checkbox {
    @apply mb-0! font-normal;
  }
  .pc-label--required:after {
    color: var(--color-danger-500);
    content: " *";
    display: inline;
  }
  .pc-form-field-error {
    @apply mt-1.5 text-sm text-danger-600 dark:text-danger-400;
  }
  .pc-form-help-text {
    @apply mt-2 text-sm text-gray-500 dark:text-gray-400;
  }
  .pc-time-select {
    @apply text-sm border-gray-300 rounded-md shadow-xs cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 dark:bg-gray-800 dark:text-gray-300 focus:outline-hidden;
    @apply dark:text-white;
  }
  .pc-datetime-select {
    @apply text-sm border-gray-300 rounded-md shadow-xs cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 dark:bg-gray-800 dark:text-gray-300 focus:outline-hidden;
    @apply dark:text-white;
  }
  .pc-date-select {
    @apply text-sm border-gray-300 rounded-md shadow-xs cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 dark:bg-gray-800 dark:text-gray-300 focus:outline-hidden;
    @apply dark:text-white;
  }
  .pc-switch {
    @apply relative inline-flex items-center justify-center shrink-0 cursor-pointer;
  }
  .pc-switch--xs {
    @apply w-6 h-3;
  }
  .pc-switch--sm {
    @apply w-8 h-4;
  }
  .pc-switch--md {
    @apply w-10 h-5;
  }
  .pc-switch--lg {
    @apply w-12 h-6;
  }
  .pc-switch--xl {
    @apply w-14 h-7;
  }
  .pc-switch__fake-input {
    @apply absolute mx-auto transition-colors duration-200 ease-in-out bg-gray-200 border border-transparent rounded-full pointer-events-none dark:bg-white/15 peer-checked:bg-primary-600 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/50;
  }
  .pc-switch__fake-input--xs {
    @apply h-4 w-7;
  }
  .pc-switch__fake-input--sm {
    @apply h-5 w-9;
  }
  .pc-switch__fake-input--md {
    @apply h-6 w-11;
  }
  .pc-switch__fake-input--lg {
    @apply h-7 w-[3.25rem];
  }
  .pc-switch__fake-input--xl {
    @apply h-8 w-[3.75rem];
  }
  .pc-switch__fake-input-bg {
    @apply absolute left-0 inline-block transition-transform duration-200 ease-in-out transform translate-x-0 bg-white rounded-full shadow-sm pointer-events-none ring-0;
  }
  .pc-switch__fake-input-bg--xs {
    @apply w-3 h-3;
    @apply peer-checked:translate-x-3;
  }
  .pc-switch__fake-input-bg--sm {
    @apply w-4 h-4;
    @apply peer-checked:translate-x-4;
  }
  .pc-switch__fake-input-bg--md {
    @apply w-5 h-5;
    @apply peer-checked:translate-x-5;
  }
  .pc-switch__fake-input-bg--lg {
    @apply w-6 h-6;
    @apply peer-checked:translate-x-6;
  }
  .pc-switch__fake-input-bg--xl {
    @apply w-7 h-7;
    @apply peer-checked:translate-x-7;
  }
  .pc-text-input {
    @apply block w-full bg-transparent border-gray-300 shadow-xs text-gray-900 placeholder:text-gray-400 transition-[color,box-shadow] duration-200 ease-out focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm dark:bg-white/5 dark:border-white/15 dark:text-gray-100 dark:placeholder:text-gray-500;
    border-radius: var(--pc-radius, 0.625rem);
  }

  /* Password Field Styles */
  .pc-password-field-wrapper {
    @apply relative;
  }

  .pc-password-field-input {
    @apply pr-10;
  }

  .pc-password-field-toggle-button {
    @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500;
  }

  .pc-password-field-toggle-icon-container {
    @apply flex items-center;
  }

  .pc-password-field-toggle-icon {
    @apply w-5 h-5 text-gray-400;
  }

  /* Copyable Field Styles */
  .pc-copyable-field-wrapper {
    @apply relative;
  }

  .pc-copyable-field-input {
    @apply pr-10 cursor-text;
  }

  .pc-copyable-field-button {
    @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 bg-transparent border-none cursor-pointer;
  }

  .pc-copyable-field-icon-container {
    @apply flex items-center;
  }

  .pc-copyable-field-icon {
    @apply w-5 h-5 text-gray-400;
  }

  /* Clearable Field Styles */
  .pc-clearable-field-input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  .pc-clearable-field-wrapper {
    @apply relative;
  }

  .pc-clearable-field-input {
    @apply pr-10;
  }

  .pc-clearable-field-button {
    @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 bg-transparent border-none cursor-pointer;
  }

  .pc-clearable-field-icon-container {
    @apply flex items-center;
  }

  .pc-clearable-field-icon {
    @apply w-5 h-5 text-gray-500 dark:text-gray-400;
  }

  /* Date and Time Field Styles */
  .pc-date-input {
    @apply block w-full bg-transparent border-gray-300 shadow-xs text-gray-900 transition-[color,box-shadow] duration-200 ease-out focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm dark:bg-white/5 dark:border-white/15 dark:text-gray-100;
    @apply [-webkit-appearance:none] [&::-webkit-datetime-edit-fields-wrapper]:p-0 [&::-webkit-date-and-time-value]:text-gray-900 dark:[&::-webkit-date-and-time-value]:text-gray-100 pe-[40px];
    border-radius: var(--pc-radius, 0.625rem);
  }

  .pc-date-input-wrapper {
    @apply relative;
  }

  .pc-date-input-icon {
    @apply absolute inset-y-0 right-0 flex items-center mr-3 pointer-events-none text-gray-400 dark:text-gray-500;
  }

  .pc-date-picker-indicator {
    @apply [&::-webkit-calendar-picker-indicator]:opacity-0;
    @apply [&::-webkit-calendar-picker-indicator]:absolute;
    @apply [&::-webkit-calendar-picker-indicator]:inset-y-0;
    @apply [&::-webkit-calendar-picker-indicator]:right-0;
    @apply [&::-webkit-calendar-picker-indicator]:w-10;
    @apply [&::-webkit-calendar-picker-indicator]:h-full;
    @apply [&::-webkit-calendar-picker-indicator]:cursor-pointer;
  }

  .pc-select {
    @apply block w-full py-2 pl-3 pr-10 text-base bg-transparent border-gray-300 shadow-xs text-gray-900 cursor-pointer transition-[color,box-shadow] duration-200 ease-out focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm dark:bg-white/5 dark:border-white/15 dark:text-gray-100;
    border-radius: var(--pc-radius, 0.625rem);
  }
  select.pc-text-input[multiple],
  select.pc-select[multiple] {
    @apply p-1.5;
    scrollbar-width: thin;
  }
  select.pc-text-input[multiple] option,
  select.pc-select[multiple] option {
    @apply px-2.5 py-1.5;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.375rem), 0px);
  }
  select.pc-text-input[multiple] option:checked,
  select.pc-select[multiple] option:checked {
    background: linear-gradient(0deg, var(--color-primary-200) 0%, var(--color-primary-200) 100%);
  }
  .dark select.pc-text-input[multiple] option:checked,
  .dark select.pc-select[multiple] option:checked {
    background: linear-gradient(0deg, color-mix(in oklab, var(--color-primary-500) 35%, transparent) 0%, color-mix(in oklab, var(--color-primary-500) 35%, transparent) 100%);
  }

  .pc-file-input {
    @apply text-sm cursor-pointer text-gray-500 dark:text-gray-400 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 file:mr-4 file:px-4 file:py-2 file:font-medium file:border file:border-solid file:border-gray-300 file:bg-transparent file:text-gray-700 file:shadow-xs hover:file:bg-gray-100 dark:file:border-white/15 dark:file:bg-white/5 dark:file:text-gray-200 dark:hover:file:bg-white/10 file:transition-colors file:duration-200;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-file-input::file-selector-button {
    border-radius: var(--pc-radius, 0.625rem);
  }
  /* Input Group */

  .pc-input-group {
    @apply flex flex-col w-full bg-transparent border border-gray-300 shadow-xs transition-[color,box-shadow] duration-200 ease-out focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/50 dark:bg-white/5 dark:border-white/15;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-input-group:has(input:disabled, select:disabled, textarea:disabled) {
    @apply opacity-50;
  }
  .pc-input-group__row {
    @apply flex items-stretch w-full;
  }
  .pc-input-group :is(input, select, textarea) {
    @apply flex-1 min-w-0 border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent;
    border-radius: 0;
  }

  /* Addons: tight against their input - the addon owns the outer padding,
     the input sheds the adjacent side of its own */
  .pc-input-group__addon {
    @apply flex items-center gap-1.5 text-sm text-gray-500 select-none whitespace-nowrap dark:text-gray-400;
  }
  .pc-input-group__addon--leading {
    @apply pl-3;
  }
  .pc-input-group__addon--trailing {
    @apply pr-3;
  }
  .pc-input-group__addon--leading + :is(input, select, textarea) {
    @apply pl-2;
  }
  .pc-input-group__row :is(input, select, textarea):has(+ .pc-input-group__addon--trailing) {
    @apply pr-2;
  }
  .pc-input-group__addon:has(> .pc-button) {
    @apply px-1.5;
  }
  .pc-input-group__addon [class*="hero-"]:not([class*="w-"]) {
    @apply w-4 h-4;
  }

  /* kbd hints: shadcn-calibre chip, nested radius */
  :is(.pc-kbd, .pc-input-group__addon kbd) {
    @apply inline-flex items-center justify-center h-5 min-w-5 px-1 font-sans text-xs font-medium bg-gray-100 text-gray-500 pointer-events-none select-none dark:bg-white/10 dark:text-gray-400;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.3125rem), 0.125rem);
  }
  .pc-input-group__addon--trailing:has(> kbd) {
    @apply pr-2;
  }
  .pc-input-group__addon--leading:has(> kbd) {
    @apply pl-2;
  }

  /* Block addons: full-width rows above/below the control (toolbars,
     helper rows, character counters) */
  .pc-input-group__block {
    @apply flex items-center gap-2 px-3 py-1.5 text-sm text-gray-500 select-none dark:text-gray-400;
  }

  .pc-form-field-wrapper--error .pc-input-group {
    @apply border-danger-500 ring-2 ring-danger-500/20 focus-within:ring-danger-500/40 dark:border-danger-500/70 dark:ring-danger-500/25;
  }
  /* Input OTP */

  .pc-otp {
    @apply relative inline-flex;
  }
  .pc-otp__input {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-text disabled:cursor-not-allowed;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }
  .pc-otp__slots {
    @apply flex items-center gap-2 pointer-events-none;
  }
  .pc-otp__group {
    @apply flex items-center;
  }
  .pc-otp__slot {
    @apply relative flex items-center justify-center w-10 h-12 text-lg font-medium bg-transparent border border-gray-300 text-gray-900 shadow-xs transition-[color,box-shadow] duration-200 ease-out dark:bg-white/5 dark:border-white/15 dark:text-gray-100;
  }
  .pc-otp__group .pc-otp__slot + .pc-otp__slot {
    @apply -ml-px;
  }
  .pc-otp__group .pc-otp__slot:first-child {
    border-start-start-radius: var(--pc-radius, 0.625rem);
    border-end-start-radius: var(--pc-radius, 0.625rem);
  }
  .pc-otp__group .pc-otp__slot:last-child {
    border-start-end-radius: var(--pc-radius, 0.625rem);
    border-end-end-radius: var(--pc-radius, 0.625rem);
  }
  .pc-otp__slot--active {
    @apply border-primary-500 ring-2 ring-primary-500/50 z-10;
  }
  .pc-otp__slot--active:not(.pc-otp__slot--filled)::before {
    content: "";
    @apply absolute w-px h-6 bg-gray-900 dark:bg-gray-100;
    animation: pc-otp-blink 1.1s steps(2, start) infinite;
  }
  @keyframes pc-otp-blink {
    to {
      visibility: hidden;
    }
  }
  .pc-otp__separator {
    @apply px-1 text-gray-400 select-none dark:text-gray-500;
  }
  .pc-otp:has(.pc-otp__input:disabled) .pc-otp__slot {
    @apply opacity-50;
  }
  .pc-form-field-wrapper--error .pc-otp__slot {
    @apply border-danger-500 dark:border-danger-500/70;
  }


  .pc-color-input {
    @apply h-10 w-14 bg-transparent border-gray-300 shadow-xs cursor-pointer transition-[color,box-shadow] duration-200 ease-out focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-white/5 dark:border-white/15;
    @apply [&::-webkit-color-swatch-wrapper]:p-1 [&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:border-0;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-color-input::-webkit-color-swatch {
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0px);
  }
  .pc-color-input::-moz-color-swatch {
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0px);
  }
  .pc-range-input {
    @apply w-full cursor-pointer focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:opacity-50 disabled:cursor-not-allowed;
    border-radius: var(--pc-radius, 0.625rem);
  }

  /* ---- Dual Range Slider -------------------------------------------- */

  .pc-dual-range {
    @apply relative select-none;
  }

  .pc-dual-range--disabled {
    @apply opacity-50 pointer-events-none;
  }

  /* Stacking context for the overlapping inputs and track */
  .pc-dual-range__track-wrapper {
    @apply relative flex items-center h-5;
  }

  /* Full-width grey background track */
  .pc-dual-range__track {
    @apply absolute inset-x-0 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700;
  }

  /* Primary-coloured highlight between the two thumbs — position set server-side
     initially and updated live by the PetalDualRangeSlider hook */
  .pc-dual-range__range {
    @apply absolute h-1.5 rounded-full bg-primary-500;
  }

  /* Zero-height inputs stacked on top of the track; pointer-events disabled on the
     element itself so only the visible thumb thumb captures clicks */
  .pc-dual-range__thumb {
    @apply absolute w-full appearance-none bg-transparent outline-none pointer-events-none;
    height: 0;
  }

  .pc-dual-range__thumb::-webkit-slider-thumb {
    @apply appearance-none w-5 h-5 rounded-full pointer-events-auto cursor-pointer;
    @apply bg-primary-500 border-[3px] border-white dark:border-gray-900;
    @apply shadow shadow-black/25;
    @apply transition-transform duration-100 ease-out;
  }

  .pc-dual-range__thumb::-moz-range-thumb {
    @apply w-5 h-5 rounded-full pointer-events-auto cursor-pointer bg-primary-500 shadow shadow-black/25 transition-transform duration-100 ease-out;
    border: 3px solid white;
  }

  .pc-dual-range__thumb:hover::-webkit-slider-thumb {
    @apply scale-110;
  }

  .pc-dual-range__thumb:focus-visible::-webkit-slider-thumb {
    @apply scale-110 ring-4 ring-primary-300 dark:ring-primary-800 ring-offset-0;
  }

  .pc-dual-range__thumb:hover::-moz-range-thumb {
    transform: scale(1.1);
  }

  .pc-dual-range__thumb:focus-visible::-moz-range-thumb {
    transform: scale(1.1);
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-300) 50%, transparent);
  }

  /* Three-column label row: bound | current values | bound */
  .pc-dual-range__labels {
    @apply grid grid-cols-3 mt-2.5 text-sm;
  }

  .pc-dual-range__bound {
    @apply text-gray-400 dark:text-gray-500 tabular-nums;
  }

  .pc-dual-range__bound--end {
    @apply text-right;
  }

  .pc-dual-range__display {
    @apply text-center font-medium text-gray-700 dark:text-gray-200 tabular-nums;
  }

  /* -------------------------------------------------------------------- */
  .pc-checkbox {
    @apply w-4 h-4 transition-shadow duration-200 ease-out bg-transparent border-gray-300 cursor-pointer text-primary-600 checked:bg-primary-600 checked:border-primary-600 focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-0 dark:bg-white/5 dark:border-white/15 disabled:opacity-50 disabled:cursor-not-allowed;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.375rem), 0px);
  }
  .pc-checkbox-group {
    @apply pt-2;
  }
  .pc-checkbox-group--row {
    @apply flex flex-row gap-4 mb-3;
  }
  .pc-checkbox-group--col {
    @apply flex flex-col gap-4 mb-3;
  }
  .pc-checkbox-group__item--row {
    @apply inline-flex items-center gap-2 cursor-pointer;
  }
  .pc-checkbox-group__item--col {
    @apply inline-flex items-center gap-3 cursor-pointer;
  }
  .pc-radio {
    @apply w-4 h-4 transition-shadow duration-200 ease-out bg-transparent border-gray-300 cursor-pointer text-primary-600 checked:bg-primary-600 checked:border-primary-600 focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-0 dark:bg-white/5 dark:border-white/15 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .pc-radio-group {
    @apply pt-2;
  }
  .pc-radio-group--row {
    @apply flex flex-row gap-4 mb-3;
  }
  .pc-radio-group--col {
    @apply flex flex-col gap-4 mb-3;
  }
  .pc-radio-group__item--row {
    @apply inline-flex items-center gap-2 cursor-pointer;
  }
  .pc-radio-group__item--col {
    @apply inline-flex items-center gap-3 cursor-pointer;
  }
  .pc-checkbox-group--empty-message,
  .pc-radio-group--empty-message {
    @apply text-sm;
  }

  /* Radio Card Styles */

  .pc-radio-card-group {
    @apply flex gap-4;
  }

  .pc-radio-card-group--row {
    @apply flex-col sm:flex-row;
  }

  .pc-radio-card-group--col {
    @apply flex-col;
  }

  .pc-radio-card {
    @apply relative transition-all cursor-pointer select-none;
    @apply flex items-center justify-center text-left text-gray-900 dark:text-white;
  }

  /* Radio Card Size Styles */

  /* Apply padding to .pc-radio-card__content */
  .pc-radio-card--sm > .pc-radio-card__content {
    @apply px-4 py-2;
  }

  .pc-radio-card--md > .pc-radio-card__content {
    @apply px-8 py-4;
  }

  .pc-radio-card--lg > .pc-radio-card__content {
    @apply px-12 py-6;
  }

  /* Adjust text size for labels */
  .pc-radio-card--sm .pc-radio-card__label {
    @apply text-sm;
  }

  .pc-radio-card--md .pc-radio-card__label {
    @apply text-base;
  }

  .pc-radio-card--lg .pc-radio-card__label {
    @apply text-lg;
  }

  /* Adjust text size for descriptions */
  .pc-radio-card--sm .pc-radio-card__description {
    @apply text-xs;
  }

  .pc-radio-card--md .pc-radio-card__description {
    @apply text-sm;
  }

  .pc-radio-card--lg .pc-radio-card__description {
    @apply text-base;
  }

  .pc-radio-card--outline .pc-radio-card__fake-input {
    @apply bg-transparent border border-gray-300 dark:bg-white/5 dark:border-white/15;
  }

  .pc-radio-card--outline:hover .pc-radio-card__fake-input {
    @apply bg-gray-50 dark:bg-white/10;
  }

  .pc-radio-card--classic .pc-radio-card__fake-input {
    @apply bg-gray-100 border border-transparent dark:bg-white/10;
  }

  .pc-radio-card--classic:hover .pc-radio-card__fake-input {
    @apply bg-gray-200/70 dark:bg-white/15;
  }

  /* Checked State Styles */
  .pc-radio-card__input:checked ~ .pc-radio-card__fake-input {
    @apply border-primary-600 dark:border-primary-600;
  }

  /* Keyboard focus surfaces on the card (the real input is sr-only) */
  .pc-radio-card__input:focus-visible ~ .pc-radio-card__fake-input {
    @apply ring-2 ring-primary-500/50;
  }

  /* Disabled State */
  .pc-radio-card--disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  /* Input Styles */
  .pc-radio-card__input {
    @apply sr-only;
  }

  /* Fake Input Styles */
  .pc-radio-card__fake-input {
    @apply absolute inset-0;
    border-radius: var(--pc-radius, 0.625rem);
  }

  /* Indicator variant - a visible radio dot inside the card */
  .pc-radio-card--indicator {
    @apply justify-start;
  }
  .pc-radio-card--indicator > .pc-radio-card__content {
    @apply w-full;
  }
  .pc-radio-card__content--indicator {
    @apply flex items-center gap-3;
  }
  .pc-radio-card__dot {
    @apply shrink-0 w-4 h-4 rounded-full border border-gray-300 bg-transparent dark:border-white/25;
  }
  .pc-radio-card__input:checked ~ .pc-radio-card__content .pc-radio-card__dot {
    @apply border-primary-600 dark:border-primary-600;
    border-width: 5px;
  }

  /* Content Styles */
  .pc-radio-card__content {
    @apply relative pointer-events-none;
  }

  /* Label Styles */
  .pc-radio-card__label {
    @apply font-semibold;
  }

  /* Description Styles */
  .pc-radio-card__description {
    @apply text-sm font-normal text-gray-600;
    @apply dark:text-gray-400;
  }

  /* Apply styles when input is checked using peer-checked variants */
  .pc-radio-card.peer-checked\\:border-primary-500 {
    @apply border-primary-500;
  }

  .pc-radio-card.peer-checked\\:bg-primary-50 {
    @apply bg-primary-50;
  }

  .pc-radio-card.dark\\:peer-checked\\:bg-primary-700 {
    @apply dark:bg-primary-700;
  }

  /* Dropdown */

  .pc-dropdown {
    @apply relative inline-block text-left;
  }
  .pc-dropdown__chevron {
    @apply w-5 h-5 ml-2 -mr-1 dark:text-gray-100;
  }
  .pc-dropdown__menu-items-wrapper {
    @apply absolute z-30 w-56 mt-2 p-1 bg-white shadow-lg border border-gray-200 focus:outline-hidden dark:bg-zinc-900 dark:border-white/10;
    border-radius: min(var(--pc-radius, 0.625rem), 1rem);
  }
  .pc-dropdown__menu-items-wrapper-placement--left {
    @apply right-0 origin-top-right;
  }
  .pc-dropdown__menu-items-wrapper-placement--right {
    @apply left-0 origin-top-left;
  }
  .pc-dropdown__menu-item {
    @apply flex items-center self-start justify-start w-full gap-2 px-3 py-2 text-sm text-left text-gray-700 transition-colors duration-150 ease-out hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/10;
    border-radius: max(calc(min(var(--pc-radius, 0.625rem), 1rem) - 0.25rem), 0px);
  }
  .pc-dropdown__trigger-button--no-label {
    @apply flex items-center p-1.5 text-gray-400 bg-transparent transition-colors duration-200 ease-out hover:text-gray-600 hover:bg-gray-100 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:hover:text-gray-300 dark:hover:bg-white/10;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-dropdown__trigger-button--with-label {
    @apply inline-flex items-center justify-center w-full px-4 py-2 text-sm font-medium bg-transparent border border-gray-300 text-gray-700 shadow-xs transition-colors duration-200 ease-out hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:border-white/15 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-gray-50;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-dropdown__trigger-button--with-label-and-trigger-element {
    @apply align-middle;
  }
  .pc-dropdown__menu-item--disabled {
    @apply text-gray-500 hover:bg-transparent;
  }
  .pc-dropdown__ellipsis {
    @apply w-5 h-5;
  }
  .pc-dropdown__separator {
    @apply h-px my-1 -mx-1 bg-gray-200 dark:bg-white/10;
  }
  .pc-dropdown__label {
    @apply px-3 py-1.5 text-xs font-medium text-gray-500 select-none dark:text-gray-400;
  }

  /* Tooltip */

  .pc-tooltip {
    @apply relative inline-block;
  }
  .pc-tooltip__content {
    @apply absolute z-40 invisible w-max max-w-xs px-2.5 py-1.5 text-xs font-medium leading-snug text-white bg-gray-900 shadow-lg opacity-0 transition-opacity duration-150 delay-75 pointer-events-none dark:bg-gray-100 dark:text-gray-900 group-hover/pc-tooltip:visible group-hover/pc-tooltip:opacity-100 group-focus-within/pc-tooltip:visible group-focus-within/pc-tooltip:opacity-100;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-tooltip--suppressed .pc-tooltip__content {
    display: none;
  }
  .pc-tooltip__content--top {
    @apply bottom-full left-1/2 -translate-x-1/2 mb-2;
  }
  .pc-tooltip__content--bottom {
    @apply top-full left-1/2 -translate-x-1/2 mt-2;
  }
  .pc-tooltip__content--left {
    @apply right-full top-1/2 -translate-y-1/2 mr-2;
  }
  .pc-tooltip__content--right {
    @apply left-full top-1/2 -translate-y-1/2 ml-2;
  }
  .pc-tooltip__arrow {
    @apply absolute w-2 h-2 rotate-45 bg-gray-900 dark:bg-gray-100;
  }
  .pc-tooltip__arrow--top {
    @apply top-full left-1/2 -translate-x-1/2 -mt-1;
  }
  .pc-tooltip__arrow--bottom {
    @apply bottom-full left-1/2 -translate-x-1/2 -mb-1;
  }
  .pc-tooltip__arrow--left {
    @apply left-full top-1/2 -translate-y-1/2 -ml-1;
  }
  .pc-tooltip__arrow--right {
    @apply right-full top-1/2 -translate-y-1/2 -mr-1;
  }

  /* Popover */

  .pc-popover {
    @apply relative inline-block;
  }
  .pc-popover__panel {
    @apply absolute z-40 w-max max-w-[min(24rem,calc(100vw-1rem))] bg-white p-4 shadow-lg border border-gray-200 focus:outline-hidden dark:bg-zinc-900 dark:border-white/10;
    border-radius: min(var(--pc-radius, 0.625rem), 1rem);
  }
  .pc-popover__panel--top {
    @apply bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom;
  }
  .pc-popover__panel--top-start {
    @apply bottom-full left-0 mb-2 origin-bottom-left;
  }
  .pc-popover__panel--top-end {
    @apply bottom-full right-0 mb-2 origin-bottom-right;
  }
  .pc-popover__panel--bottom {
    @apply top-full left-1/2 -translate-x-1/2 mt-2 origin-top;
  }
  .pc-popover__panel--bottom-start {
    @apply top-full left-0 mt-2 origin-top-left;
  }
  .pc-popover__panel--bottom-end {
    @apply top-full right-0 mt-2 origin-top-right;
  }
  .pc-popover__panel--left {
    @apply right-full top-1/2 -translate-y-1/2 mr-2 origin-right;
  }
  .pc-popover__panel--left-start {
    @apply right-full top-0 mr-2 origin-top-right;
  }
  .pc-popover__panel--left-end {
    @apply right-full bottom-0 mr-2 origin-bottom-right;
  }
  .pc-popover__panel--right {
    @apply left-full top-1/2 -translate-y-1/2 ml-2 origin-left;
  }
  .pc-popover__panel--right-start {
    @apply left-full top-0 ml-2 origin-top-left;
  }
  .pc-popover__panel--right-end {
    @apply left-full bottom-0 ml-2 origin-bottom-left;
  }
  /* Top-layer mode: the PetalPopover hook positions with fixed inline styles;
     [popover] UA defaults handle visibility. Fade in via @starting-style where supported. */
  .pc-popover__panel--top-layer {
    @apply fixed m-0 transition-opacity duration-100;
  }
  .pc-popover__panel--top-layer:popover-open {
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }

  /* Loading */

  .pc-spinner--sm {
    @apply w-5 h-5 shrink-0;
  }
  .pc-spinner--md {
    @apply w-8 h-8 shrink-0;
  }
  .pc-spinner--lg {
    @apply w-16 h-16 shrink-0;
  }

  /* Breadcrumbs */

  .pc-breadcrumbs {
    @apply flex items-center;
  }
  .pc-breadcrumb {
    @apply flex text-gray-500 hover:underline dark:text-gray-400;
  }
  .pc-breadcrumbs__separator-slash {
    @apply px-5 text-lg text-gray-300;
  }
  .pc-breadcrumbs__separator-chevron {
    @apply px-3 text-gray-300;
  }
  .pc-breadcrumbs__separator-chevron__icon {
    @apply w-6 h-6;
  }
  .pc-breadcrumb-icon {
    @apply w-6 h-6 shrink-0;
  }

  /* Avatars */

  .pc-avatar--with-image {
    @apply object-cover rounded-full;
  }
  .pc-avatar--with-placeholder-icon {
    @apply relative inline-block overflow-hidden bg-gray-100 text-gray-300 rounded-full dark:bg-white/10;
  }
  .pc-avatar--with-placeholder-initials {
    @apply flex items-center justify-center font-semibold text-gray-500 uppercase bg-gray-100 rounded-full dark:bg-white/10 dark:text-gray-300;
  }
  .pc-avatar-group {
    @apply ring-white ring-2 dark:ring-gray-100;
  }
  .pc-avatar__placeholder-icon {
    @apply relative w-full! h-full! bg-gray-300 top-[12%] scale-[1.15] transform;
  }

  /* Avatars - sizes */

  .pc-avatar--xs {
    @apply text-xs w-7 h-7;
  }
  .pc-avatar--sm {
    @apply w-8 h-8 text-sm;
  }
  .pc-avatar--md {
    @apply w-10 h-10 text-base;
  }
  .pc-avatar--lg {
    @apply w-12 h-12 text-lg;
  }
  .pc-avatar--xl {
    @apply text-xl w-14 h-14;
  }
  .pc-avatar-group--xs {
    @apply relative z-0 flex -space-x-2;
  }
  .pc-avatar-group--sm {
    @apply relative z-0 flex -space-x-3;
  }
  .pc-avatar-group--md {
    @apply relative z-0 flex -space-x-4;
  }
  .pc-avatar-group--lg {
    @apply relative z-0 flex -space-x-5;
  }
  .pc-avatar-group--xl {
    @apply relative z-0 flex -space-x-6;
  }

  /* Progress */

  .pc-progress {
    @apply flex overflow-hidden;
  }
  .pc-progress-wrapper {
    @apply w-full;
  }
  .pc-progress__header {
    @apply flex items-center justify-between mb-1.5 text-sm;
  }
  .pc-progress__title {
    @apply font-medium text-gray-900 dark:text-gray-100;
  }
  .pc-progress__value {
    @apply text-gray-500 tabular-nums dark:text-gray-400;
  }

  .pc-progress__inner {
    @apply flex flex-col justify-center rounded-full transition-[width] duration-500 ease-out;
  }

  /* Progress - label (xl only) */

  .pc-progress__label {
    @apply px-4 text-xs font-medium leading-6 text-center whitespace-nowrap;
    color: var(--pc-button-solid-fg, #fff);
  }

  /* Progress - sizes */

  .pc-progress--xs {
    @apply h-1 rounded-full;
  }
  .pc-progress--sm {
    @apply h-2 rounded-full;
  }
  .pc-progress--md {
    @apply h-3 rounded-full;
  }
  .pc-progress--lg {
    @apply h-4 rounded-full;
  }
  .pc-progress--xl {
    @apply h-5 rounded-full;
  }

  /* Progress - colors */

  .pc-progress--primary {
    @apply bg-primary-500/15;
  }
  .pc-progress--secondary {
    @apply bg-secondary-500/15;
  }
  .pc-progress--info {
    @apply bg-info-500/15;
  }
  .pc-progress--success {
    @apply bg-success-500/15;
  }
  .pc-progress--warning {
    @apply bg-warning-500/15;
  }
  .pc-progress--danger {
    @apply bg-danger-500/15;
  }
  .pc-progress--gray {
    @apply bg-gray-500/15;
  }
  .pc-progress__inner--primary {
    @apply bg-primary-600;
  }
  .pc-progress__inner--secondary {
    @apply bg-secondary-600;
  }
  .pc-progress__inner--info {
    @apply bg-info-600;
  }
  .pc-progress__inner--success {
    @apply bg-success-600;
  }
  .pc-progress__inner--warning {
    @apply bg-warning-600;
  }
  .pc-progress__inner--danger {
    @apply bg-danger-600;
  }
  .pc-progress__inner--gray {
    @apply bg-gray-600;
  }

  /* Pagination */

  .pc-pagination {
    @apply flex;
  }
  .pc-pagination__inner {
    @apply inline-flex -space-x-px text-sm font-medium;
  }
  .pc-pagination__item {
    @apply inline-flex items-center justify-center leading-5 px-3.5 py-2 border border-gray-200 dark:border-white/15;
  }
  .pc-pagination__item--is-current {
    @apply text-gray-900 bg-gray-100 dark:bg-white/10 dark:text-gray-100;
  }
  .pc-pagination__item--is-not-current {
    @apply text-gray-600 bg-white hover:bg-gray-50 hover:text-gray-800 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200;
  }
  .pc-pagination__item--current {
    @apply inline-flex items-center justify-center leading-5 px-3.5 py-2 border border-gray-200 dark:border-white/15;
  }
  .pc-pagination__item__previous {
    @apply mr-2 inline-flex items-center justify-center leading-5 px-2.5 py-2 bg-white enabled:hover:bg-gray-50 dark:bg-white/5 enabled:dark:hover:bg-white/10 border dark:border-white/15 border-gray-200 text-gray-600 enabled:hover:text-gray-800 disabled:opacity-50 transition-colors duration-150;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-pagination__item__previous__chevron {
    /* !important is needed because heroicon class overrides width and height */
    @apply w-5! h-5! text-gray-600 dark:text-gray-400;
  }
  .pc-pagination__item__next {
    @apply ml-2 inline-flex items-center justify-center leading-5 px-2.5 py-2 bg-white enabled:hover:bg-gray-50 dark:bg-white/5 enabled:dark:hover:bg-white/10 dark:border-white/15 border border-gray-200 text-gray-600 enabled:hover:text-gray-800 disabled:opacity-50 transition-colors duration-150;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-pagination__item__next__chevron {
    /* !important is needed because heroicon class overrides width and height */
    @apply w-5! h-5! text-gray-600 dark:text-gray-400;
  }
  .pc-pagination__item__ellipsis {
    @apply inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white border dark:bg-white/5 dark:border-white/15 border-gray-200 text-gray-400;
  }

  /* Pagination - number(s) rounded box corner style */

  .pc-pagination__item--with-single-box {
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-pagination__item--with-multiple-boxes--left {
    border-start-start-radius: var(--pc-radius, 0.625rem);
    border-end-start-radius: var(--pc-radius, 0.625rem);
  }
  .pc-pagination__item--with-multiple-boxes--right {
    border-start-end-radius: var(--pc-radius, 0.625rem);
    border-end-end-radius: var(--pc-radius, 0.625rem);
  }
  .pc-pagination__item--with-multiple-boxes--right {
    border-start-end-radius: var(--pc-radius, 0.625rem);
    border-end-end-radius: var(--pc-radius, 0.625rem);
  }

  /* Tabs */

  .pc-tabs {
    @apply flex gap-x-8 gap-y-2;
  }
  .pc-tabs--underlined {
    @apply border-b border-gray-200 dark:border-white/10;
  }

  /* Tabs - Pill */

  .pc-tab__pill {
    @apply flex items-center px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors duration-200;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-tab__pill--is-active {
    @apply bg-primary-100 text-primary-700 dark:bg-primary-500/15 dark:text-primary-300;
  }
  .pc-tab__pill--is-not-active {
    @apply text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 dark:text-gray-400 dark:hover:bg-white/10 hover:bg-gray-100;
  }

  /* Tabs - Individual Tab Underline */

  .pc-tab__underline {
    @apply flex items-center px-3 py-3 text-sm font-medium border-b-2 whitespace-nowrap transition-colors duration-200;
  }
  .pc-tab__underline--is-active {
    @apply border-primary-500 text-primary-600 dark:text-primary-500 dark:border-primary-500;
  }
  .pc-tab__underline--is-not-active {
    @apply text-gray-500 border-transparent dark:hover:text-gray-300 dark:text-gray-400 hover:border-gray-300 hover:text-gray-600;
  }
  .pc-tab__underline--with-underline-and-is-active {
  }
  .pc-tab__underline--with-underline-and-is-not-active {
    @apply hover:border-gray-300;
  }

  /* Tabs - Number */

  .pc-tab__number {
    @apply whitespace-nowrap ml-2 py-0.5 px-2 rounded-full text-xs font-normal;
  }

  /* Tabs - Pill with number */

  .pc-tab__number__pill--is-active {
    @apply text-white bg-primary-600;
  }
  .pc-tab__number__pill--is-not-active {
    @apply text-white bg-gray-500 dark:bg-gray-600;
  }

  /* Tabs - Underlined with number */

  .pc-tab__number__underline--is-active {
    @apply bg-primary-100 text-primary-600;
  }
  .pc-tab__number__underline--is-not-active {
    @apply text-gray-500 bg-gray-100;
  }
  .pc-tab__number__underline--with-underline-and-is-active {
    @apply bg-primary-100 dark:bg-primary-600 text-primary-600 dark:text-white;
  }
  .pc-tab__number__underline--with-underline-and-is-not-active {
    @apply text-gray-500 bg-gray-100 dark:bg-gray-600 dark:text-white;
  }

  /* Cards */

  .pc-card {
    @apply flex flex-wrap overflow-hidden bg-white dark:bg-zinc-900;
  }
  .pc-card__inner {
    @apply flex flex-col w-full max-w-full;
  }
  .pc-card--basic {
    @apply border border-gray-200 shadow-lg dark:shadow-2xl dark:border-white/10;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  .pc-card--outline {
    @apply border border-gray-300 dark:border-white/15;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }

  /* Cards - content */

  .pc-card__content {
    @apply flex-1 p-6 text-base font-light text-gray-500 dark:text-gray-400;
  }
  .pc-card__category {
    @apply mb-3 text-sm font-medium;
  }
  .pc-card__category--primary {
    @apply text-primary-600 dark:text-primary-400;
  }
  .pc-card__heading {
    @apply mb-2 text-xl font-medium text-gray-900 dark:text-gray-300;
  }

  /* Cards - with media */

  .pc-card__image {
    @apply shrink-0 object-cover w-full;
  }
  .pc-card__image-placeholder {
    @apply shrink-0 w-full bg-gray-300 dark:bg-white/10;
  }

  /* Cards - footer */

  .pc-card__footer {
    @apply px-6 pb-6;
  }

  /* Table */

  .pc-table--basic {
    @apply min-w-full overflow-hidden shadow-sm table-auto ring-1 ring-gray-200 dark:ring-white/10;
    border-radius: min(var(--pc-radius, 0.625rem), 1rem);
  }
  .pc-table--ghost {
    @apply min-w-full overflow-hidden table-auto;
  }
  .pc-table__th {
    @apply px-6 py-3 text-sm font-semibold text-left text-gray-900 bg-gray-50 dark:bg-white/5 dark:text-white;
  }
  .pc-table thead {
    @apply border-b dark:border-white/10;
  }
  .pc-table__tr {
    @apply bg-white border-b border-gray-200 dark:border-white/10 dark:bg-transparent last:border-none;
  }
  .pc-table__tr--row-click {
    @apply hover:bg-gray-50 dark:hover:bg-white/5 transition-colors duration-150;
  }
  .pc-table__td {
    @apply px-6 py-4 text-sm text-gray-700 dark:text-gray-100 tabular-nums;
  }
  .pc-table__td--first-col {
    @apply font-semibold;
  }
  .pc-table__td--row-click {
    @apply hover:cursor-pointer;
  }
  .pc-table__user-inner-td {
    @apply flex items-center gap-3;
  }
  .pc-table__user-inner-td__inner {
    @apply flex flex-col overflow-hidden;
  }
  .pc-table__user-inner-td__label {
    @apply overflow-hidden font-medium text-gray-700 whitespace-nowrap text-ellipsis dark:text-gray-100;
  }
  .pc-table__user-inner-td__sub-label {
    @apply overflow-hidden font-normal text-gray-500 dark:text-gray-400 whitespace-nowrap text-ellipsis;
  }

  /* Accordion */

  .pc-accordion-item {
    @apply flex items-center justify-between w-full p-5 text-left text-gray-800 bg-white border border-gray-200 dark:bg-zinc-900 dark:border-white/10 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors duration-200;
  }
  .pc-accordion-item--first {
    border-start-start-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
    border-start-end-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  .pc-accordion-item--all-except-last {
    @apply border-b-0;
  }
  .pc-accordion-item__heading {
    @apply text-base font-semibold;
  }
  .pc-accordion-item__chevron {
    @apply shrink-0 w-6 h-6 ml-3 text-gray-400 duration-300 fill-current dark:group-hover:text-gray-300 group-hover:text-gray-500;
  }
  .pc-accordion-item__content-container {
    @apply p-5 bg-white border border-gray-200 dark:border-white/10 dark:bg-zinc-900;
  }
  .pc-accordion-item__content-container--not-last {
    @apply border-b-0;
  }
  .pc-accordion-item__content-container--last {
    @apply border-t-0;
    border-end-start-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
    border-end-end-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  .pc-accordion-item__content-container--highlight-accordion-button-on-expanded-js-attributes {
    @apply bg-gray-50 dark:bg-white/5;
  }

  /* Ghost variant */
  .pc-accordion--ghost {
    @apply w-full mx-auto divide-y divide-gray-900/10 dark:divide-gray-100/10;
  }

  .pc-accordion-item--ghost {
    @apply py-6;
  }

  .pc-accordion-item__button--ghost {
    @apply flex items-start justify-between w-full text-left text-gray-900 dark:text-gray-100;
  }

  .pc-accordion-item__minus {
    @apply w-6! h-6! text-gray-400 duration-300 fill-current dark:group-hover:text-gray-300 group-hover:text-gray-500;
  }
  .pc-accordion-item__plus {
    @apply w-6! h-6! text-gray-400 duration-300 fill-current dark:group-hover:text-gray-300 group-hover:text-gray-500;
  }

  .pc-accordion-item__heading--ghost {
    @apply text-base font-semibold leading-7;
  }

  .pc-accordion-item__icon-container--ghost {
    @apply relative flex items-center ml-6 h-7;
  }

  .pc-accordion-item__content--ghost {
    @apply pr-12 my-2;
  }

  /* Marquee Container */
  .pc-marquee-container {
    @apply relative flex p-2 overflow-hidden;
    gap: var(--gap);
  }

  .pc-marquee-container.pc-vertical {
    @apply flex-col;
  }

  /* Max width variants */
  .pc-marquee-container[max-width="sm"] {
    @apply max-w-sm;
  }

  .pc-marquee-container[max-width="md"] {
    @apply max-w-md;
  }

  .pc-marquee-container[max-width="lg"] {
    @apply max-w-lg;
  }

  .pc-marquee-container[max-width="xl"] {
    @apply max-w-xl;
  }

  .pc-marquee-container[max-width="2xl"] {
    @apply max-w-2xl;
  }

  /* Max height variants */
  .pc-marquee-container[max-height="sm"] {
    @apply max-h-[24rem];
  }

  .pc-marquee-container[max-height="md"] {
    @apply max-h-[28rem];
  }

  .pc-marquee-container[max-height="lg"] {
    @apply max-h-[32rem];
  }

  .pc-marquee-container[max-height="xl"] {
    @apply max-h-[36rem];
  }

  .pc-marquee-container[max-height="2xl"] {
    @apply max-h-[42rem];
  }

  /* Marquee Content */
  .pc-marquee-content {
    @apply flex justify-around shrink-0;
    gap: var(--gap);
  }

  .pc-marquee-horizontal {
    @apply flex-row;
    animation: marquee var(--duration) linear infinite;
  }

  .pc-marquee-vertical {
    @apply flex-col;
    animation: marquee-vertical var(--duration) linear infinite;
  }

  .pc-pause-on-hover {
    @apply group-hover:[animation-play-state:paused];
  }

  .pc-review-card {
    @apply relative md:w-64 cursor-pointer overflow-hidden border p-4
      border-black/10 bg-black/[0.01] hover:bg-black/[0.05]
      dark:border-white/10 dark:bg-white/10 dark:hover:bg-white/[0.15];
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }

  .pc-review-header {
    @apply flex items-center gap-2;
  }

  .pc-review-meta {
    @apply flex flex-col;
  }

  .pc-review-username {
    @apply text-xs text-black/40 dark:text-white/40;
  }

  .pc-review-body {
    @apply mt-2;
  }

  /* Animations */
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }

  .pc-gradient-overlay-left {
    @apply absolute top-0 bottom-0 left-0 w-1/3 pointer-events-none bg-gradient-to-r from-white to-white/0 dark:from-gray-900 dark:to-gray-900/0;
  }

  .pc-gradient-overlay-right {
    @apply absolute top-0 bottom-0 right-0 w-1/3 pointer-events-none bg-gradient-to-r from-white/0 to-white dark:from-gray-900/0 dark:to-gray-900;
  }

  .pc-gradient-overlay-top {
    @apply absolute top-0 left-0 right-0 pointer-events-none h-1/3 bg-gradient-to-b from-white to-white/0 dark:from-gray-900 dark:to-gray-900/0;
  }

  .pc-gradient-overlay-bottom {
    @apply absolute bottom-0 left-0 right-0 pointer-events-none h-1/3 bg-gradient-to-t from-white to-white/0 dark:from-gray-900 dark:to-gray-900/0;
  }

  /* Modal */
  .pc-modal {
    @apply relative z-50;
  }
  .pc-modal__overlay {
    @apply fixed inset-0 z-50 transition-opacity bg-black/50 dark:bg-black/60;
  }
  .pc-modal__wrapper {
    @apply fixed inset-0 z-50 flex items-center justify-center px-4 my-4 overflow-hidden transform sm:px-6;
  }
  .pc-modal__box {
    @apply w-full max-h-full overflow-auto bg-white shadow-lg border border-gray-200 dark:bg-zinc-900 dark:border-white/10;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  .pc-modal__box--sm {
    @apply max-w-sm;
  }
  .pc-modal__box--md {
    @apply max-w-xl;
  }
  .pc-modal__box--lg {
    @apply max-w-3xl;
  }
  .pc-modal__box--xl {
    @apply max-w-5xl;
  }
  .pc-modal__box--2xl {
    @apply max-w-7xl;
  }
  .pc-modal__box--full {
    @apply max-w-full;
  }
  .pc-modal__header {
    @apply px-5 py-3 border-b border-gray-100 dark:border-gray-700;
  }
  .pc-modal__header__container {
    @apply flex items-center justify-between;
  }
  .pc-modal__header__text {
    @apply font-semibold text-gray-800 dark:text-gray-200;
  }
  .pc-modal__header__button {
    @apply text-gray-400 hover:text-gray-500;
  }
  .pc-modal__header__close-svg {
    @apply w-5 h-5 fill-current;
  }
  .pc-modal__content {
    @apply p-5;
  }

  /* Skeleton */

  .pc-skeleton {
    @apply animate-pulse;
  }

  /* Default Skeleton */
  .pc-skeleton--default {
    @apply animate-pulse;
    @apply max-w-sm;
  }

  .pc-skeleton--default__line {
    @apply bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--default__line--h-2 {
    @apply h-2;
  }

  .pc-skeleton--default__line--h-2\.5 {
    @apply h-2.5;
  }

  .pc-skeleton--default__line--w-48 {
    @apply w-48;
  }

  .pc-skeleton--default__line--mb-4 {
    @apply mb-4;
  }

  .pc-skeleton--default__line--mb-2\.5 {
    @apply mb-2.5;
  }

  .pc-skeleton--default__line--max-w-360px {
    @apply max-w-[360px];
  }

  .pc-skeleton--default__line--max-w-330px {
    @apply max-w-[330px];
  }

  .pc-skeleton--default__line--max-w-300px {
    @apply max-w-[300px];
  }

  /* Image Skeleton */
  .pc-skeleton--image {
    @apply animate-pulse;
    @apply space-y-8 md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center;
  }

  .pc-skeleton--image__image-placeholder {
    @apply flex items-center justify-center w-full h-48 bg-gray-300 rounded-sm sm:w-96 dark:bg-gray-700;
  }

  .pc-skeleton--image__icon {
    @apply w-10 h-10 text-gray-200 dark:text-gray-600;
  }

  .pc-skeleton--image__content {
    @apply w-full;
  }

  /* Repeat similar classes for lines inside the image skeleton */
  .pc-skeleton--image__line {
    @apply bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--image__line--h-2 {
    @apply h-2;
  }

  .pc-skeleton--image__line--h-2\.5 {
    @apply h-2.5;
  }

  .pc-skeleton--image__line--w-48 {
    @apply w-48;
  }

  .pc-skeleton--image__line--mb-4 {
    @apply mb-4;
  }

  .pc-skeleton--image__line--mb-2\.5 {
    @apply mb-2.5;
  }

  .pc-skeleton--image__line--max-w-480px {
    @apply max-w-[480px];
  }

  .pc-skeleton--image__line--max-w-440px {
    @apply max-w-[440px];
  }

  .pc-skeleton--image__line--max-w-460px {
    @apply max-w-[460px];
  }

  .pc-skeleton--image__line--max-w-360px {
    @apply max-w-[360px];
  }

  /* Video Skeleton */
  .pc-skeleton--video {
    @apply animate-pulse;
    @apply flex items-center justify-center h-56 max-w-sm bg-gray-300 rounded-lg dark:bg-gray-700;
  }

  .pc-skeleton--video__icon {
    @apply w-10 h-10 text-gray-200 dark:text-gray-600;
  }

  /* Text Skeleton */
  .pc-skeleton--text {
    @apply animate-pulse;
    @apply space-y-2.5 max-w-lg;
  }

  .pc-skeleton--text__line-group {
    @apply flex items-center w-full;
  }

  .pc-skeleton--text__line-group--max-w-480px {
    @apply max-w-[480px];
  }

  .pc-skeleton--text__line-group--max-w-400px {
    @apply max-w-[400px];
  }

  .pc-skeleton--text__line-group--max-w-440px {
    @apply max-w-[440px];
  }

  .pc-skeleton--text__line-group--max-w-360px {
    @apply max-w-[360px];
  }

  .pc-skeleton--text__block {
    @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--text__block--bg-gray-300 {
    @apply bg-gray-300 dark:bg-gray-600;
  }

  .pc-skeleton--text__block--w-32 {
    @apply w-32;
  }

  .pc-skeleton--text__block--w-24 {
    @apply w-24;
  }

  .pc-skeleton--text__block--w-full {
    @apply w-full;
  }

  .pc-skeleton--text__block--w-80 {
    @apply w-80;
  }

  .pc-skeleton--text__block--ms-2 {
    @apply ms-2;
  }

  /* Card Skeleton */
  .pc-skeleton--card {
    @apply animate-pulse;
    @apply max-w-sm p-4 border border-gray-200 rounded-sm shadow-sm md:p-6 dark:border-gray-700;
  }

  .pc-skeleton--card__image-placeholder {
    @apply flex items-center justify-center h-48 mb-4 bg-gray-300 rounded-sm dark:bg-gray-700;
  }

  .pc-skeleton--card__icon {
    @apply w-10 h-10 text-gray-200 dark:text-gray-600;
  }

  .pc-skeleton--card__line {
    @apply bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--card__line--h-2\.5 {
    @apply h-2.5 w-48;
  }

  .pc-skeleton--card__line--h-2 {
    @apply h-2;
  }

  .pc-skeleton--card__line--mb-4 {
    @apply mb-4;
  }

  .pc-skeleton--card__line--mb-2\.5 {
    @apply mb-2.5;
  }

  .pc-skeleton--card__avatar {
    @apply flex items-center mt-4;
  }

  .pc-skeleton--card__avatar-icon {
    @apply w-10 h-10 text-gray-200 me-3 dark:text-gray-700;
  }

  .pc-skeleton--card__avatar-text {
    @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--card__avatar-text--w-32 {
    @apply w-32 mb-2;
  }

  .pc-skeleton--card__avatar-text--w-48 {
    @apply w-48 h-2;
  }

  /* Widget Skeleton */

  .pc-skeleton--widget {
    @apply animate-pulse;
    @apply max-w-sm p-4 border border-gray-200 rounded-sm shadow-sm md:p-6 dark:border-gray-700;
  }

  .pc-skeleton--widget__header-line {
    @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--widget__header-line--w-32 {
    @apply w-32 mb-2.5;
  }

  .pc-skeleton--widget__header-line--w-48 {
    @apply w-48 h-2 mb-10;
  }

  .pc-skeleton--widget__chart {
    @apply flex items-baseline mt-4;
  }

  .pc-skeleton--widget__chart-bar {
    @apply w-full bg-gray-200 rounded-t-lg dark:bg-gray-700;
  }

  .pc-skeleton--widget__chart-bar--h-72 {
    @apply h-72;
  }

  .pc-skeleton--widget__chart-bar--h-56 {
    @apply h-56;
  }

  .pc-skeleton--widget__chart-bar--h-64 {
    @apply h-64;
  }

  .pc-skeleton--widget__chart-bar--h-80 {
    @apply h-80;
  }

  .pc-skeleton--widget__chart-bar--ms-6 {
    @apply ms-6;
  }

  /* List Skeleton */

  .pc-skeleton--list {
    @apply animate-pulse;
    @apply max-w-md p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-sm shadow-sm md:p-6 dark:divide-gray-700 dark:border-gray-700;
  }

  .pc-skeleton--list__item {
    @apply flex items-center justify-between;
  }

  .pc-skeleton--list__item--pt-4 {
    @apply pt-4;
  }

  .pc-skeleton--list__text-group {
    @apply flex flex-col;
  }

  .pc-skeleton--list__text-line {
    @apply w-24 mb-2.5 bg-gray-300 rounded-full dark:bg-gray-600;
  }

  .pc-skeleton--list__sub-text-line {
    @apply w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--list__text-line--h-2\.5 {
    @apply h-2.5;
  }

  .pc-skeleton--list__button {
    @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--list__button--w-12 {
    @apply w-12;
  }

  /* Testimonial Skeleton */

  .pc-skeleton--testimonial {
    @apply animate-pulse;
  }

  .pc-skeleton--testimonial__line {
    @apply h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 mx-auto;
  }

  .pc-skeleton--testimonial__line--h-2\.5 {
    @apply h-2.5;
  }

  .pc-skeleton--testimonial__line--max-w-640px {
    @apply max-w-[640px] mb-2.5;
  }

  .pc-skeleton--testimonial__line--max-w-540px {
    @apply max-w-[540px];
  }

  .pc-skeleton--testimonial__footer {
    @apply flex items-center justify-center mt-4;
  }

  .pc-skeleton--testimonial__avatar-icon {
    @apply w-8 h-8 text-gray-200 me-4 dark:text-gray-700;
  }

  .pc-skeleton--testimonial__avatar-text {
    @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--testimonial__avatar-text--w-20 {
    @apply w-20 me-3;
  }

  .pc-skeleton--testimonial__avatar-text--w-24 {
    @apply w-24 h-2;
  }

  /* Slideover */

  .pc-slideover__overlay {
    @apply fixed inset-0 z-50 transition-opacity bg-black/50 dark:bg-black/60;
  }
  .pc-slideover__wrapper {
    @apply fixed inset-0 z-50 flex overflow-hidden;
  }
  .pc-slideover__box {
    @apply w-full max-h-full overflow-auto bg-white shadow-lg dark:bg-zinc-900;
  }
  .pc-slideover__box--sm {
    @apply max-w-sm;
  }
  .pc-slideover__box--md {
    @apply max-w-xl;
  }
  .pc-slideover__box--lg {
    @apply max-w-3xl;
  }
  .pc-slideover__box--xl {
    @apply max-w-5xl;
  }
  .pc-slideover__box--2xl {
    @apply max-w-7xl;
  }
  .pc-slideover__box--full {
    @apply max-w-full;
  }
  .pc-slideover__header {
    @apply px-5 py-3 border-b border-gray-100 dark:border-white/10;
  }
  .pc-slideover__header__container {
    @apply flex items-center justify-between;
  }
  .pc-slideover__header__text {
    @apply font-semibold text-gray-800 dark:text-gray-200;
  }
  .pc-slideover__header__button {
    @apply text-gray-400 hover:text-gray-500;
  }
  .pc-slideover__header__close-svg {
    @apply w-4 h-4 fill-current;
  }
  .pc-slideover__content {
    @apply p-5;
  }

  /* Stepper */
  .pc-stepper {
    @apply w-full;
  }

  .pc-stepper__container {
    @apply flex md:gap-4;
  }

  .pc-stepper--horizontal .pc-stepper__container {
    @apply flex-col items-start md:flex-row md:items-center;
  }

  .pc-stepper--vertical .pc-stepper__container {
    @apply flex-col items-start;
  }

  /* Item */
  .pc-stepper__item {
    @apply shrink-0;
  }

  .pc-stepper__item-content {
    @apply flex items-center gap-4 focus:outline-hidden ring-0;
  }

  /* Node */
  .pc-stepper__node {
    @apply flex items-center gap-4 transition-all duration-200 ease-out cursor-pointer hover:opacity-90;
  }

  /* Indicator */
  .pc-stepper__indicator {
    @apply grid shrink-0 text-white transition-all duration-200 bg-gray-500 rounded-full place-items-center;
  }

  .pc-stepper__node--complete .pc-stepper__indicator {
    @apply bg-success-500;
  }

  .pc-stepper__node--active .pc-stepper__indicator {
    @apply border-2 border-success-800 dark:border-success-100;
  }

  /* Size variants for indicator */
  .pc-stepper--sm .pc-stepper__indicator {
    @apply w-8 h-8;
  }

  .pc-stepper--md .pc-stepper__indicator {
    @apply w-10 h-10;
  }

  .pc-stepper--lg .pc-stepper__indicator {
    @apply w-12 h-12;
  }

  /* Check icon */
  .pc-stepper__check {
    @apply text-white;
  }

  .pc-stepper--sm .pc-stepper__check {
    @apply w-4 h-4;
  }

  .pc-stepper--md .pc-stepper__check {
    @apply w-5 h-5;
  }

  .pc-stepper--lg .pc-stepper__check {
    @apply w-6 h-6;
  }

  /* Number */
  .pc-stepper__number {
    @apply font-semibold;
  }

  .pc-stepper--sm .pc-stepper__number {
    @apply text-sm;
  }

  .pc-stepper--md .pc-stepper__number {
    @apply text-base;
  }

  .pc-stepper--lg .pc-stepper__number {
    @apply text-lg;
  }

  /* Content */
  .pc-stepper__content {
    @apply flex flex-col w-full gap-1 text-left grow;
  }

  /* Title */
  .pc-stepper__title {
    @apply text-sm font-semibold text-gray-900 dark:text-gray-100;
  }

  /* Description */
  .pc-stepper__description {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }

  /* Connector Wrapper */
  .pc-stepper__connector-wrapper {
    @apply flex self-start shrink md:self-center;
  }

  /* Size Variants */
  .pc-stepper--sm .pc-stepper__connector-wrapper {
    @apply pl-4 md:pl-0;
  }

  .pc-stepper--md .pc-stepper__connector-wrapper {
    @apply pl-5 md:pl-0;
  }

  .pc-stepper--lg .pc-stepper__connector-wrapper {
    @apply pl-6 md:pl-0;
  }

  .pc-stepper--horizontal .pc-stepper__connector-wrapper {
    @apply flex h-full md:w-full md:h-auto;
  }

  /* Vertical Orientation Connector Wrapper Adjustments */

  /* Small Size */
  .pc-stepper--vertical.pc-stepper--sm .pc-stepper__connector-wrapper {
    @apply self-start;
    @apply md:pl-4;
  }

  /* Medium Size */
  .pc-stepper--vertical.pc-stepper--md .pc-stepper__connector-wrapper {
    @apply self-start;
    @apply md:pl-5;
  }

  /* Large Size */
  .pc-stepper--vertical.pc-stepper--lg .pc-stepper__connector-wrapper {
    @apply self-start;
    @apply md:pl-6;
  }
  .pc-stepper--vertical .pc-stepper__container {
    @apply md:gap-1;
  }

  /* Connector */
  .pc-stepper__connector {
    @apply bg-gray-200 shrink dark:bg-gray-600;
  }

  .pc-stepper__connector--complete {
    @apply bg-success-500 dark:bg-success-500;
  }

  .pc-stepper--horizontal .pc-stepper__connector {
    @apply h-8 w-0.5 my-2 mx-auto md:h-0.5 md:w-full md:my-auto md:mx-0;
  }

  .pc-stepper--vertical .pc-stepper__connector {
    @apply w-0.5 h-8 mx-auto;
  }

  /* Rating */

  .pc-rating__wrapper {
    @apply flex items-center gap-1;
  }
  .pc-rating__label {
    @apply ml-1 text-base font-bold text-gray-700 dark:text-gray-300;
  }
  .pc-rating__star--filled {
    @apply w-5 h-5 fill-warning-500;
  }
  .pc-rating__star--half {
    @apply w-5 h-5 fill-warning-500;
  }
  .pc-rating__star--empty {
    @apply w-5 h-5 fill-gray-400 dark:fill-gray-500;
  }

  /* Menu */

  .pc-vertical-menu {
    @apply flex flex-col gap-5;
  }

  .pc-vertical-menu-item__icon {
    @apply shrink-0 w-5 h-5;
  }

  .pc-vertical-menu-item {
    @apply flex items-center w-full gap-3 px-3 py-2 text-sm font-semibold leading-none transition-colors duration-200 ease-out;
    border-radius: max(calc(min(var(--pc-radius, 0.625rem), 1rem) - 0.25rem), 0px);
  }

  .pc-vertical-menu-item--active {
    @apply text-primary-700 dark:text-primary-400 bg-gray-50 dark:bg-white/10;
  }

  .pc-vertical-menu-item--inactive {
    @apply text-gray-700 hover:bg-gray-50 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white dark:hover:bg-white/10;
  }

  .pc-vertical-menu__menu-group__wrapper {
    @apply divide-y divide-gray-300;
  }

  .pc-vertical-menu__menu-group {
    @apply space-y-1;
  }

  .pc-vertical-menu__menu-group__title {
    @apply pl-3 mb-3 text-xs font-semibold leading-6 text-gray-400 uppercase;
  }

  .pc-vertical-menu-item__label {
    @apply flex-1;
  }

  .pc-vertical-menu-item__toggle-label {
    @apply flex-1 text-left;
  }

  .pc-vertical-menu-item__toggle-chevron__icon {
    /* !important is needed because heroicon class overrides width and height */
    @apply w-3! h-3! ml-2 transition duration-200 transform;
  }

  .pc-vertical-menu-item__toggle-chevron__wrapper {
    @apply relative inline-block;
  }

  .pc-vertical-menu-item__submenu-wrapper {
    @apply mt-1 ml-3 space-y-1;
  }

  .pc-vertical-menu-item__icon--active {
    @apply shrink-0 w-5 h-5;
  }

  .pc-vertical-menu-item__icon--inactive {
    @apply shrink-0 w-5 h-5;
  }

  /* Other */

  /* This is for selects inside of a group of selects. Phoenix doesn't provide a way to add a class to these. */
  .select-wrapper select {
    @apply text-sm border-gray-300 rounded-md shadow-xs cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 dark:bg-gray-800 dark:text-gray-300 focus:outline-hidden;
  }

  label.has-error {
    @apply text-danger-900! dark:text-danger-200!;
  }

  span.has-error {
    @apply text-danger-900! dark:text-danger-200!;
  }

  textarea.has-error,
  input.has-error:not(:checked),
  select.has-error {
    @apply border-danger-500! focus:border-danger-500! text-danger-900! placeholder-danger-700! bg-danger-50! dark:text-danger-100! dark:placeholder-danger-300! dark:bg-danger-900! focus:ring-danger-500!;
  }

  input[type="file_input"].has-error {
    @apply border-danger-500! rounded-md! focus:border-danger-500! text-danger-900! placeholder-danger-700! bg-danger-50! file:border-none! dark:border-none! dark:bg-gray-950! dark:text-danger-400;
  }

  /* If in tailwind config, darkMode: 'class', use this: */
  .dark ::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }

  /*
    Needed for datetime inputs to have the correct size in Safari
    See: https://github.com/twbs/bootstrap/issues/34433#issuecomment-1831467352
  */
  input::-webkit-datetime-edit {
    display: block;
    padding: 0;
  }

  /* Chat / AI (New) */

  .pc-chat {
    /* Theme tokens — override these to reskin without touching markup. */
    --pc-chat-radius: 1rem;
    --pc-chat-user-bg: var(--color-primary-600, #2563eb);
    --pc-chat-user-fg: #ffffff;
    --pc-chat-assistant-bg: var(--color-gray-100, #f3f4f6);
    --pc-chat-assistant-fg: var(--color-gray-900, #111827);
    @apply flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
  }
  .pc-chat__thread {
    @apply flex flex-1 flex-col gap-3 overflow-y-auto p-4;
    /* Override --pc-chat-thread-max-height (e.g. 100% / 70vh) to fit a full-page
       chat; set it to none to grow unbounded. */
    max-height: var(--pc-chat-thread-max-height, 28rem);
  }
  .pc-chat__footer {
    @apply border-t border-gray-200 p-3 dark:border-gray-700;
  }
  .pc-chat__row {
    @apply flex items-start gap-2;
  }
  .pc-chat__row--user {
    @apply justify-end;
  }
  .pc-chat__avatar {
    @apply flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full text-sm;
  }
  .pc-chat__bubble {
    @apply min-w-min max-w-[80%] px-4 py-2 text-sm leading-relaxed;
    border-radius: var(--pc-chat-radius);
    /* Long URLs / unbroken tokens wrap instead of blowing out the bubble. */
    overflow-wrap: anywhere;
  }
  /* Preserve newlines ONLY on leaf text nodes — never on the bubble itself, or
     structural whitespace (and dev HEEx debug comments) renders as blank lines
     and balloons the bubble. Wrap plain message text in this. */
  .pc-chat__text {
    white-space: pre-wrap;
  }
  .pc-chat__bubble--user {
    background-color: var(--pc-chat-user-bg);
    color: var(--pc-chat-user-fg);
  }
  .pc-chat__bubble--assistant,
  .pc-chat__bubble--system {
    background-color: var(--pc-chat-assistant-bg);
    color: var(--pc-chat-assistant-fg);
  }
  .pc-chat__stream {
    @apply block text-left;
  }
  .pc-chat__stream-text {
    @apply inline whitespace-pre-wrap;
  }
  /* Before the first token: show the typing dots, hide text + caret. */
  .pc-chat__stream:not([data-started]) .pc-chat__stream-text,
  .pc-chat__stream:not([data-started]) .pc-chat__caret {
    @apply hidden;
  }
  /* After the first token: hide the typing dots. */
  .pc-chat__stream[data-started] .pc-chat__typing {
    @apply hidden;
  }
  .pc-chat__typing {
    @apply inline-flex items-center gap-0.5 align-middle;
  }
  .pc-chat__typing > span {
    @apply inline-block h-1 w-1 rounded-full;
    background-color: currentColor;
    opacity: 0.4;
    animation: pc-chat-bounce 1.2s ease-in-out infinite;
  }
  .pc-chat__typing > span:nth-child(2) {
    animation-delay: 0.15s;
  }
  .pc-chat__typing > span:nth-child(3) {
    animation-delay: 0.3s;
  }
  .pc-chat__caret {
    @apply ml-0.5 inline-block h-4 w-1.5 align-middle;
    background-color: currentColor;
    opacity: 0.6;
    animation: pc-chat-blink 1s steps(2, start) infinite;
  }

  /* Rendered markdown (committed assistant messages). Block content, so reset
     the bubble's pre-wrap and apply prose spacing. */
  .pc-chat__markdown {
    white-space: normal;
    @apply text-sm leading-relaxed;
  }
  .pc-chat__markdown > :first-child {
    @apply mt-0;
  }
  .pc-chat__markdown > :last-child {
    @apply mb-0;
  }
  .pc-chat__markdown p {
    @apply my-2;
  }
  .pc-chat__markdown h1 {
    @apply mt-4 mb-2 text-lg font-semibold;
  }
  .pc-chat__markdown h2 {
    @apply mt-4 mb-2 text-base font-semibold;
  }
  .pc-chat__markdown h3 {
    @apply mt-3 mb-1 text-sm font-semibold;
  }
  .pc-chat__markdown ul {
    @apply my-2 list-disc space-y-1 ps-5;
  }
  .pc-chat__markdown ol {
    @apply my-2 list-decimal space-y-1 ps-5;
  }
  .pc-chat__markdown a {
    @apply font-medium underline underline-offset-2;
  }
  .pc-chat__markdown blockquote {
    @apply my-2 border-s-2 border-gray-300 ps-3 text-gray-600 italic dark:border-gray-600 dark:text-gray-400;
  }
  /* Inline code (code blocks carry their own theme colours from the highlighter). */
  .pc-chat__markdown :not(pre) > code {
    @apply rounded bg-black/5 px-1 py-0.5 font-mono text-[0.85em] dark:bg-white/10;
  }
  .pc-chat__markdown pre {
    @apply relative my-2 overflow-x-auto rounded-lg p-3 text-xs leading-relaxed;
  }
  .pc-chat__code-copy {
    @apply absolute right-2 top-2 rounded bg-white/10 px-2 py-0.5 text-[11px] text-white/80 hover:bg-white/20;
  }
  .pc-chat__markdown table {
    @apply my-2 w-full border-collapse text-left;
  }
  .pc-chat__markdown th,
  .pc-chat__markdown td {
    @apply border border-gray-200 px-2 py-1 dark:border-gray-700;
  }
  .pc-chat__markdown th {
    @apply bg-black/5 font-semibold dark:bg-white/10;
  }
  /* Tool-call card (generative-UI widgets) */
  .pc-chat__tool {
    @apply my-1 overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
  }
  .pc-chat__tool-header {
    @apply flex items-center gap-2 px-3 py-2 text-xs font-medium text-gray-600 dark:text-gray-300;
  }
  .pc-chat__tool-name {
    @apply font-mono;
  }
  .pc-chat__tool-check {
    @apply text-green-600 dark:text-green-400;
  }
  .pc-chat__tool-error {
    @apply flex h-4 w-4 items-center justify-center rounded-full bg-amber-500 text-[10px] font-bold text-white;
  }
  .pc-chat__tool-spinner {
    @apply inline-block h-3.5 w-3.5 rounded-full border-2 border-gray-300 border-t-gray-600 dark:border-gray-600 dark:border-t-gray-300;
    animation: pc-chat-spin 0.6s linear infinite;
  }
  .pc-chat__tool-body {
    @apply border-t border-gray-100 p-3 dark:border-gray-800;
  }

  /* Viewport wraps the thread so the scroll-to-bottom button can sit over it. */
  .pc-chat__viewport {
    @apply relative flex min-h-0 flex-1 flex-col;
  }
  .pc-chat__scroll-btn {
    @apply absolute bottom-3 left-1/2 flex h-8 w-8 -translate-x-1/2 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-600 shadow-md transition-opacity dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200;
  }
  .pc-chat__scroll-btn--hidden {
    @apply pointer-events-none opacity-0;
  }

  /* Reasoning / thinking block */
  .pc-chat__reasoning {
    @apply my-1 rounded-lg border border-gray-200 px-3 py-1.5 text-xs dark:border-gray-700;
  }
  .pc-chat__reasoning-summary {
    @apply cursor-pointer list-none font-medium text-gray-500 select-none dark:text-gray-400;
  }
  .pc-chat__reasoning-body {
    @apply mt-1.5 border-s-2 border-gray-200 ps-2 whitespace-pre-wrap text-gray-600 dark:border-gray-700 dark:text-gray-400;
  }

  /* Message actions (copy / regenerate / feedback) */
  .pc-chat__actions {
    @apply mt-1 flex items-center gap-1;
  }
  .pc-chat__action {
    @apply rounded px-2 py-1 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200;
  }

  /* Prompt suggestion chips */
  .pc-chat__suggestions {
    @apply flex flex-wrap gap-2;
  }
  .pc-chat__suggestion {
    @apply rounded-full border border-gray-300 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:border-primary-400 hover:bg-primary-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800;
  }

  /* Error notice */
  .pc-chat__error {
    @apply my-1 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-300;
  }
  .pc-chat__error-text {
    @apply flex-1;
  }
  .pc-chat__retry {
    @apply rounded-md border border-red-300 px-2 py-1 text-xs font-medium hover:bg-red-100 dark:border-red-800 dark:hover:bg-red-900/40;
  }

  .pc-chat__composer {
    @apply flex items-end gap-2;
  }
  .pc-chat__composer-input {
    @apply flex-1 resize-none overflow-y-hidden rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none disabled:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100;
    field-sizing: content;
  }
  .pc-chat__composer-send {
    @apply rounded-lg px-4 py-2 text-sm font-medium text-white disabled:opacity-40;
    background-color: var(--pc-chat-user-bg);
  }
  .pc-chat__composer-stop {
    @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-white;
    background-color: var(--pc-chat-user-bg);
  }
  .pc-chat__stop-icon {
    @apply h-3 w-3 rounded-[2px] bg-white;
  }
}

@keyframes pc-chat-blink {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0;
  }
}

@keyframes pc-chat-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pc-chat-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-3px);
    opacity: 0.9;
  }
}

/* Respect users who prefer reduced motion: keep the chat indicators static. */
@media (prefers-reduced-motion: reduce) {
  .pc-chat__typing > span,
  .pc-chat__caret,
  .pc-chat__tool-spinner {
    animation: none;
  }
}

/*
  Hide the calendar icon added by Petal in Firefox since Firefox includes one
  and the onclick for the Petal one doesn't work.
  See: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
*/
@-moz-document url-prefix() {
  .pc-date-input {
    @apply pe-3;
  }
  /* Firefox's native time picker icon overlaps the AM/PM text, so make extra room (#377). */
  input.pc-date-input[type="time"] {
    @apply pe-8;
  }
  .pc-date-input-icon {
    @apply hidden;
  }
}

@layer components {
  /* Navigation Menu (flyout / mega menu) */
  .pc-nav-menu__list {
    @apply flex items-center gap-x-1 list-none m-0 p-0;
  }

  .pc-nav-menu__link-item,
  .pc-nav-menu__trigger {
    @apply inline-flex items-center gap-x-1 rounded-md px-3 py-2 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white;
  }

  .pc-nav-menu__link-item[aria-current="page"] {
    @apply text-primary-600 dark:text-primary-400;
  }

  .pc-nav-menu__trigger[aria-expanded="true"] {
    @apply bg-gray-50 text-gray-900 dark:bg-gray-800 dark:text-white;
  }

  .pc-nav-menu__chevron {
    @apply h-4 w-4 text-gray-400 transition-transform duration-200;
  }

  .pc-nav-menu__trigger[aria-expanded="true"] .pc-nav-menu__chevron {
    @apply rotate-180;
  }

  /* Anchored under the trigger at its start edge, opening rightward into the
     page (so a left-most trigger never opens back under a sidebar). Absolute at
     every breakpoint — the same reliable positioning on mobile and desktop. The
     width is clamped to the viewport and the panel scrolls if it is taller than
     the screen, so it is never clipped off the bottom on a phone. */
  .pc-nav-menu__panel {
    @apply absolute left-0 top-full z-20 mt-3 max-h-[85vh] max-w-[calc(100vw-1rem)] overflow-x-hidden overflow-y-auto rounded-2xl bg-white p-4 shadow-lg ring-1 ring-gray-900/5 dark:bg-gray-800 dark:ring-white/10 sm:max-h-none sm:overflow-hidden;
  }

  /* Each width is clamped to the viewport so a wide panel shrinks to fit instead
     of overflowing on a narrow screen. */
  .pc-nav-menu__panel--sm {
    @apply w-[min(24rem,calc(100vw-1rem))];
  }

  .pc-nav-menu__panel--md {
    @apply w-[min(28rem,calc(100vw-1rem))];
  }

  .pc-nav-menu__panel--lg {
    @apply w-[min(32rem,calc(100vw-1rem))];
  }

  .pc-nav-menu__panel--xl {
    @apply w-[min(36rem,calc(100vw-1rem))];
  }

  /* Anchor the panel to the trigger's end edge (opens leftward). Use for
     triggers near the right of the nav so the panel stays on screen. */
  .pc-nav-menu__panel--end {
    @apply left-auto right-0;
  }

  /* Mega menu: spans the nearest positioned ancestor (give your header `relative`). */
  .pc-nav-menu__panel--full {
    @apply inset-x-0 mt-0 w-auto max-w-none rounded-none border-t border-gray-100 p-6 dark:border-gray-700;
  }

  .pc-nav-menu__link {
    @apply flex gap-x-4 rounded-lg p-3 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50;
  }

  .pc-nav-menu__link-icon {
    @apply flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 transition-colors group-hover:bg-white dark:bg-gray-700 dark:group-hover:bg-gray-600;
  }

  .pc-nav-menu__link-icon-svg {
    @apply h-6 w-6 text-gray-600 group-hover:text-primary-600 dark:text-gray-300 dark:group-hover:text-primary-400;
  }

  .pc-nav-menu__link-body {
    @apply flex flex-col;
  }

  .pc-nav-menu__link-title {
    @apply text-sm font-semibold text-gray-900 dark:text-white;
  }

  .pc-nav-menu__link-description {
    @apply mt-0.5 text-sm text-gray-600 dark:text-gray-400;
  }

  /* Footer: negative margins escape the panel's p-4 (p-6 when full) for a full-bleed strip */
  .pc-nav-menu__footer {
    @apply -mx-4 -mb-4 mt-4 grid auto-cols-fr grid-flow-col divide-x divide-gray-900/5 bg-gray-50 dark:divide-white/10 dark:bg-gray-900/40;
  }

  .pc-nav-menu__panel--full .pc-nav-menu__footer {
    @apply -mx-6 -mb-6 mt-6;
  }

  .pc-nav-menu__footer-link {
    @apply flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700/60;
  }

  .pc-nav-menu__footer-link-icon {
    @apply h-5 w-5 flex-none text-gray-400;
  }


  /* Shine Border */
  .pc-shine-border {
    @apply relative bg-white border-gray-200 dark:bg-zinc-900 dark:border-white/10;
    border-width: var(--pc-shine-border-width, 1px);
    border-style: solid;
    border-radius: var(--pc-shine-radius, min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem));
  }

  /* The shimmer: a radial gradient with the colour band in its middle, blown
     up to 300% and swept via background-position, then masked to the border
     ring (content-box XOR border-box). Sits just outside the container's own
     border via a negative inset so the sweep reads as ON the edge. */
  .pc-shine-border__shine {
    @apply pointer-events-none absolute;
    inset: calc(-1 * var(--pc-shine-border-width, 1px));
    border-radius: inherit;
    padding: var(--pc-shine-border-width, 1px);
    background-image: radial-gradient(
      transparent,
      transparent,
      var(--pc-shine-colors, #a1a1aa),
      transparent,
      transparent
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    will-change: background-position;
  }
  @media (prefers-reduced-motion: no-preference) {
    .pc-shine-border__shine {
      animation: pc-shine var(--pc-shine-duration, 14s) infinite linear;
    }
  }

  /* Form controls dropped inside follow the wrapper's rounded shape (and the
     radius rail). The shimmer IS the border, so the control's own default
     ring is stripped (like input_group); keyboard focus still shows a soft
     accent outline that follows the rounded shape. */
  .pc-shine-border :is(input, select, textarea) {
    border-radius: inherit;
  }
  .pc-shine-border :is(input, select, textarea):focus {
    outline: none;
    box-shadow: none;
  }
  .pc-shine-border :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
  }

  /* Border Beam */
  .pc-border-beam {
    @apply relative bg-white border-gray-200 dark:bg-zinc-900 dark:border-white/10;
    border-style: solid;
    border-width: var(--pc-beam-border-width, 1px);
    border-radius: var(--pc-beam-radius, min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem));
  }

  /* Each beam layer is masked to the border ring, so the travelling gradient
     square only ever paints over the border itself. */
  .pc-border-beam__beam {
    @apply pointer-events-none absolute inset-0;
    /* size container: lets the traveller clamp itself to the card's
       smallest side via cqmin - safe here because inset-0 gives this layer
       a definite size */
    container-type: size;
    border: var(--pc-beam-border-width, 1px) solid transparent;
    border-radius: inherit;
    -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
    mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
    -webkit-mask-clip: padding-box, border-box;
    mask-clip: padding-box, border-box;
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect;
  }

  /* The traveller: a gradient square riding offset-path around the border
     rectangle. The path's corner rounding equals the BEAM SIZE (not the
     card radius) - the wide swing keeps the square overlapping the ring
     mask through the whole corner turn, which is what makes the tail fade
     smoothly around corners at any aspect ratio. */
  /* Glows have no sharp head, so long beams stay artifact-free even past
     the size regime - lift the clamp and let them stretch. */
  .pc-border-beam--glow .pc-border-beam__beam::after {
    --pc-beam-max: 500cqmax;
  }

  .pc-border-beam__beam::after {
    content: "";
    display: block;
    /* the technique's invariant: beam size must stay well under the card's
       smallest side, or the traveller cuts corners on a visible diagonal
       (racing + tail split). Clamp to 30% of the min side, always. */
    --pc-beam-eff: min(var(--pc-beam-size, 150px), var(--pc-beam-max, 45cqmin));
    width: var(--pc-beam-eff);
    aspect-ratio: 1 / 1;
    background: var(
      --pc-beam-gradient,
      linear-gradient(to left, var(--pc-beam-from, #ffaa40), var(--pc-beam-to, #9c40ff), transparent)
    );
    offset-path: rect(0 auto auto 0 round var(--pc-beam-eff));
    /* Chrome won't resolve inherited custom props inside @keyframes on
       pseudo-elements, so the keyframes animate a registered number
       (--pc-beam-t) and the offset maths lives here, where vars resolve. */
    offset-distance: calc(var(--pc-beam-offset, 0%) + var(--pc-beam-t, 0) * 100%);
    offset-rotate: var(--pc-beam-rotate, auto);
    animation: pc-border-beam var(--pc-beam-duration, 8s) infinite;
    animation-timing-function: var(--pc-beam-ease, linear);
    animation-direction: var(--pc-beam-direction, normal);
    animation-delay: calc(
      var(--pc-beam-delay, 0s) + var(--pc-beam-duration, 8s) * var(--pc-beam-phase, 0)
    );
  }


  /* Meteors */
  .pc-meteors {
    @apply pointer-events-none absolute inset-0 overflow-hidden;
  }
  .pc-meteors--reverse {
    transform: scaleX(-1);
  }

  .pc-meteor {
    @apply absolute h-0.5 w-0.5 rounded-full opacity-0;
    background-color: var(--pc-meteor-color, #64748b);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
    transform: rotate(var(--pc-meteor-angle, 215deg));
    animation: pc-meteor linear infinite;
  }

  .pc-meteor::before {
    content: "";
    @apply absolute top-1/2 h-px w-[50px] -translate-y-1/2;
    background: linear-gradient(90deg, var(--pc-meteor-color, #64748b), transparent);
  }

  /* Gradient Text */
  .pc-gradient-text {
    @apply inline-block bg-clip-text text-transparent;
    background-image: linear-gradient(
      to right,
      var(--pc-gradient-from, #ffaa40),
      var(--pc-gradient-to, #9c40ff),
      var(--pc-gradient-from, #ffaa40)
    );
    background-size: 300% 100%;
    animation: pc-gradient-sweep var(--pc-gradient-duration, 8s) linear infinite;
  }

  /* Shimmer Text */
  .pc-shimmer-text {
    @apply inline-block bg-clip-text text-transparent [--pc-shimmer-base:#6b7280] [--pc-shimmer-shine:#111827] dark:[--pc-shimmer-base:#9ca3af] dark:[--pc-shimmer-shine:#ffffff];
    background-image: linear-gradient(
      110deg,
      var(--pc-shimmer-base) 35%,
      var(--pc-shimmer-shine) 50%,
      var(--pc-shimmer-base) 65%
    );
    background-size: 200% 100%;
    animation: pc-shimmer var(--pc-shimmer-duration, 2.5s) linear infinite;
  }

  /* Word Rotate */
  .pc-word-rotate {
    @apply inline-flex overflow-hidden align-bottom;
  }

  .pc-word-rotate__word {
    @apply inline-block transition-all duration-200 ease-out;
  }

  .pc-word-rotate__word--out {
    @apply -translate-y-full opacity-0;
  }

  .pc-word-rotate__word--pre {
    @apply translate-y-full opacity-0;
    transition: none;
  }

  /* Typing Effect */
  .pc-typing-effect__cursor {
    @apply ml-0.5 inline-block h-[1em] w-[2px] translate-y-[0.15em] bg-current;
    animation: pc-cursor-blink 1s step-end infinite;
  }

  /* Number Ticker */
  .pc-number-ticker {
    @apply inline-block tabular-nums;
  }

  /* Confetti mount point */
  .pc-confetti {
    @apply hidden;
  }

  /* Spotlight Card */
  .pc-spotlight-card {
    @apply relative overflow-hidden border border-gray-200 bg-white dark:border-white/10 dark:bg-zinc-900;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }

  .pc-spotlight-card__glow {
    @apply pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300;
    background: radial-gradient(
      var(--pc-spotlight-size, 350px) circle at var(--pc-spotlight-x, 50%) var(--pc-spotlight-y, 50%),
      var(--pc-spotlight-color, rgb(120 119 198 / 0.18)),
      transparent 80%
    );
  }

  .pc-spotlight-card:hover .pc-spotlight-card__glow {
    @apply opacity-100;
  }

  .pc-spotlight-card__content {
    @apply relative;
  }
}

@property --pc-beam-t {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes pc-shine {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes pc-border-beam {
  from {
    --pc-beam-t: 0;
  }
  to {
    /* closed offset-paths wrap past 100%, so the shifted range (applied in
       the ::after's offset-distance calc) relocates the lap seam - and with
       it, where the spring parks and releases */
    --pc-beam-t: 1;
  }
}

@keyframes pc-meteor {
  0% {
    transform: rotate(var(--pc-meteor-angle, 215deg)) translateX(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--pc-meteor-angle, 215deg)) translateX(-500px);
    opacity: 0;
  }
}

@keyframes pc-gradient-sweep {
  from {
    background-position: 0% center;
  }
  to {
    background-position: 300% center;
  }
}

@keyframes pc-shimmer {
  from {
    background-position: 200% center;
  }
  to {
    background-position: -200% center;
  }
}

@keyframes pc-cursor-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Reduced motion: hide purely decorative animation, keep informative content static. */
@media (prefers-reduced-motion: reduce) {
  .pc-border-beam__beam,
  .pc-meteor {
    display: none;
  }

  .pc-gradient-text,
  .pc-shimmer-text,
  .pc-typing-effect__cursor {
    animation: none;
  }

  .pc-word-rotate__word {
    transition: none;
  }
}