/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-orange-900: oklch(40.8% 0.123 38.172);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-amber-950: oklch(27.9% 0.077 45.635);
    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
    --color-yellow-800: oklch(47.6% 0.114 61.907);
    --color-yellow-900: oklch(42.1% 0.095 57.708);
    --color-lime-500: oklch(76.8% 0.233 130.85);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-teal-50: oklch(98.4% 0.014 180.72);
    --color-teal-100: oklch(95.3% 0.051 180.801);
    --color-teal-200: oklch(91% 0.096 180.426);
    --color-teal-400: oklch(77.7% 0.152 181.912);
    --color-teal-500: oklch(70.4% 0.14 182.503);
    --color-teal-600: oklch(60% 0.118 184.704);
    --color-teal-700: oklch(51.1% 0.096 186.391);
    --color-teal-800: oklch(43.7% 0.078 188.216);
    --color-cyan-50: oklch(98.4% 0.019 200.873);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-200: oklch(91.7% 0.08 205.041);
    --color-cyan-400: oklch(78.9% 0.154 211.53);
    --color-cyan-500: oklch(71.5% 0.143 215.221);
    --color-cyan-600: oklch(60.9% 0.126 221.723);
    --color-cyan-700: oklch(52% 0.105 223.128);
    --color-cyan-800: oklch(45% 0.085 224.283);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-600: oklch(58.8% 0.158 241.966);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-sky-800: oklch(44.3% 0.11 240.79);
    --color-sky-900: oklch(39.1% 0.09 240.876);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-200: oklch(87% 0.065 274.039);
    --color-indigo-400: oklch(67.3% 0.182 276.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-indigo-800: oklch(39.8% 0.195 277.366);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-violet-50: oklch(96.9% 0.016 293.756);
    --color-violet-100: oklch(94.3% 0.029 294.588);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-violet-700: oklch(49.1% 0.27 292.581);
    --color-violet-800: oklch(43.2% 0.232 292.759);
    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-purple-900: oklch(38.1% 0.176 304.987);
    --color-pink-50: oklch(97.1% 0.014 343.198);
    --color-pink-100: oklch(94.8% 0.028 342.258);
    --color-pink-200: oklch(89.9% 0.061 343.231);
    --color-pink-400: oklch(71.8% 0.202 349.761);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-pink-600: oklch(59.2% 0.249 0.584);
    --color-pink-800: oklch(45.9% 0.187 3.815);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-200: oklch(89.2% 0.058 10.001);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-rose-800: oklch(45.5% 0.188 13.697);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-black: #000;
    --color-white: #ffffff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-shark: #1d1d1f;
    --color-athens-gray: #f5f5f7;
    --color-deep-purple: #6366f1;
    --color-science-blue: #0066cc;
    --color-trust-blue: #2B5AA0;
    --color-emerald: #50c878;
    --color-jade-green: #00A86B;
    --color-forest-green: #228b22;
    --color-crimson-red: #dc143c;
    --color-warning-orange: #ff6b35;
    --color-platinum-silver: #c0c0c0;
    --color-midnight-purple: #483d8b;
    --color-rich-indigo: #4b0082;
    --color-premium-gold: #d4af37;
    --color-premium-gold-dark: #b8860b;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8rem;
    --font-size-base: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.125rem;
    --font-size-2xl: 1.25rem;
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 1.875rem;
    --font-size-5xl: 2.25rem;
    --font-size-6xl: 3rem;
    --font-size-7xl: 3.75rem;
    --font-size-8xl: 4.5rem;
    --font-size-9xl: 6rem;
    --button-radius: 0.75rem;
    --cd-button-radius-sharp: 0;
    --cd-panel-shadow: none;
    --cd-panel-border-width: 1px;
    --cd-panel-radius: var(--cd-radius-2xl);
    --cd-panel-hover-transform: none;
    --cd-panel-hover-shadow: none;
    --spacing-18: 4.5rem;
    --spacing-72: 18rem;
    --spacing-84: 21rem;
    --spacing-96: 24rem;
    --cd-space-0: 0;
    --cd-space-0_5: 0.125rem;
    --cd-space-1: 0.25rem;
    --cd-space-1_5: 0.375rem;
    --cd-space-2: 0.5rem;
    --cd-space-2_5: 0.625rem;
    --cd-space-3: 0.75rem;
    --cd-space-3_5: 0.875rem;
    --cd-space-4: 1rem;
    --cd-space-5: 1.25rem;
    --cd-space-6: 1.5rem;
    --cd-space-7: 1.75rem;
    --cd-space-8: 2rem;
    --cd-space-9: 2.25rem;
    --cd-space-10: 2.5rem;
    --cd-space-12: 3rem;
    --cd-space-14: 3.5rem;
    --cd-space-16: 4rem;
    --cd-space-20: 5rem;
    --cd-space-24: 6rem;
    --cd-space-32: 8rem;
    --cd-radius-none: 0;
    --cd-radius-xs: 0.0625rem;
    --cd-radius-sm: 0.125rem;
    --cd-radius-base: 0.25rem;
    --cd-radius-md: 0.375rem;
    --cd-radius-lg: 0.5rem;
    --cd-radius-xl: 0.75rem;
    --cd-radius-2xl: 1rem;
    --cd-radius-3xl: 1.5rem;
    --cd-radius-full: 9999px;
    --cd-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
    --cd-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
    --cd-shadow-md: 0 4px 6px rgb(0 0 0 / 0.07), 0 2px 4px rgb(0 0 0 / 0.06);
    --cd-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.10), 0 4px 6px rgb(0 0 0 / 0.05);
    --cd-shadow-xl: 0 20px 25px rgb(0 0 0 / 0.10), 0 10px 10px rgb(0 0 0 / 0.04);
    --cd-shadow-2xl: 0 25px 50px rgb(0 0 0 / 0.25);
    --cd-border-hairline: var(--cd-border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --cd-border-hairline: color-mix(in srgb, var(--cd-border-primary) 50%, transparent);
    }
    --cd-z-behind: -1;
    --cd-z-base: 0;
    --cd-z-sticky: 30;
    --cd-z-floating: 40;
    --cd-z-topbar: 50;
    --cd-z-topbar-dropdown: 60;
    --cd-z-section-overlay: 70;
    --cd-z-modal: 90;
    --cd-z-modal-elevated: 100;
    --cd-z-palette: 1000;
    --cd-z-palette-top: 1001;
    --cd-z-tour: 10000;
    --cd-z-tour-popover: 10001;
    --cd-z-tour-highlight: 10002;
    --cd-grid-gap-sm: var(--cd-space-3);
    --cd-grid-gap-base: var(--cd-space-4);
    --cd-grid-gap-lg: var(--cd-space-6);
    --cd-input-padding-x: var(--cd-space-4);
    --cd-input-padding-y: var(--cd-space-3);
    --cd-button-padding-y: var(--cd-space-3);
    --cd-font-editorial: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
    --cd-font-editorial-body: "Newsreader", Georgia, "Iowan Old Style", "Times New Roman", serif;
    --cd-font-numeral: Georgia, "Iowan Old Style", "Times New Roman", serif;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .\!visible {
    visibility: visible !important;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .fixed\! {
    position: fixed !important;
  }
  .group {
    position: relative;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .-inset-1\.5 {
    inset: calc(var(--spacing) * -1.5);
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-3 {
    inset: calc(var(--spacing) * 3);
  }
  .inset-\[-4px\] {
    inset: -4px;
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .-top-0\.5 {
    top: calc(var(--spacing) * -0.5);
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .-top-1\.5 {
    top: calc(var(--spacing) * -1.5);
  }
  .-top-2 {
    top: calc(var(--spacing) * -2);
  }
  .-top-2\.5 {
    top: calc(var(--spacing) * -2.5);
  }
  .-top-3 {
    top: calc(var(--spacing) * -3);
  }
  .-top-4 {
    top: calc(var(--spacing) * -4);
  }
  .-top-6 {
    top: calc(var(--spacing) * -6);
  }
  .-top-20 {
    top: calc(var(--spacing) * -20);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-2\.5 {
    top: calc(var(--spacing) * 2.5);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-5 {
    top: calc(var(--spacing) * 5);
  }
  .top-6 {
    top: calc(var(--spacing) * 6);
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .top-10 {
    top: calc(var(--spacing) * 10);
  }
  .top-12 {
    top: calc(var(--spacing) * 12);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .top-\[2px\] {
    top: 2px;
  }
  .top-full {
    top: 100%;
  }
  .-right-0\.5 {
    right: calc(var(--spacing) * -0.5);
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .-right-1\.5 {
    right: calc(var(--spacing) * -1.5);
  }
  .-right-2 {
    right: calc(var(--spacing) * -2);
  }
  .-right-3 {
    right: calc(var(--spacing) * -3);
  }
  .-right-4 {
    right: calc(var(--spacing) * -4);
  }
  .-right-5 {
    right: calc(var(--spacing) * -5);
  }
  .-right-8 {
    right: calc(var(--spacing) * -8);
  }
  .-right-10 {
    right: calc(var(--spacing) * -10);
  }
  .-right-20 {
    right: calc(var(--spacing) * -20);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-1 {
    right: calc(var(--spacing) * 1);
  }
  .right-1\/4 {
    right: calc(1/4 * 100%);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .right-8 {
    right: calc(var(--spacing) * 8);
  }
  .right-24 {
    right: calc(var(--spacing) * 24);
  }
  .right-\[12\.5\%\] {
    right: 12.5%;
  }
  .right-\[16\%\] {
    right: 16%;
  }
  .right-\[16\.66\%\] {
    right: 16.66%;
  }
  .right-\[50\%\] {
    right: 50%;
  }
  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }
  .-bottom-2 {
    bottom: calc(var(--spacing) * -2);
  }
  .-bottom-20 {
    bottom: calc(var(--spacing) * -20);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }
  .bottom-10 {
    bottom: calc(var(--spacing) * 10);
  }
  .bottom-full {
    bottom: 100%;
  }
  .-left-2 {
    left: calc(var(--spacing) * -2);
  }
  .-left-3 {
    left: calc(var(--spacing) * -3);
  }
  .-left-4 {
    left: calc(var(--spacing) * -4);
  }
  .-left-20 {
    left: calc(var(--spacing) * -20);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1 {
    left: calc(var(--spacing) * 1);
  }
  .left-1\.5 {
    left: calc(var(--spacing) * 1.5);
  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
  .left-1\/4 {
    left: calc(1/4 * 100%);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-5 {
    left: calc(var(--spacing) * 5);
  }
  .left-6 {
    left: calc(var(--spacing) * 6);
  }
  .left-7 {
    left: calc(var(--spacing) * 7);
  }
  .left-8 {
    left: calc(var(--spacing) * 8);
  }
  .left-16 {
    left: calc(var(--spacing) * 16);
  }
  .left-\[12\.5\%\] {
    left: 12.5%;
  }
  .left-\[16\%\] {
    left: 16%;
  }
  .left-\[16\.66\%\] {
    left: 16.66%;
  }
  .left-\[32px\] {
    left: 32px;
  }
  .isolate {
    isolation: isolate;
  }
  .-z-0 {
    z-index: calc(0 * -1);
  }
  .-z-10 {
    z-index: calc(10 * -1);
  }
  .z-0 {
    z-index: 0;
  }
  .z-5 {
    z-index: 5;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-25 {
    z-index: 25;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-60 {
    z-index: 60;
  }
  .z-9999 {
    z-index: 9999;
  }
  .z-\[1\] {
    z-index: 1;
  }
  .z-\[55\] {
    z-index: 55;
  }
  .z-\[56\] {
    z-index: 56;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .col-span-1 {
    grid-column: span 1 / span 1;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .row-1 {
    grid-row: 1;
  }
  .row-2 {
    grid-row: 2;
  }
  .row-3 {
    grid-row: 3;
  }
  .float-left {
    float: left;
  }
  .float-right {
    float: right;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .-m-2 {
    margin: calc(var(--spacing) * -2);
  }
  .-m-4 {
    margin: calc(var(--spacing) * -4);
  }
  .-m-6 {
    margin: calc(var(--spacing) * -6);
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .m-6 {
    margin: calc(var(--spacing) * 6);
  }
  .-mx-0\.5 {
    margin-inline: calc(var(--spacing) * -0.5);
  }
  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }
  .-mx-1\.5 {
    margin-inline: calc(var(--spacing) * -1.5);
  }
  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }
  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }
  .-mx-6 {
    margin-inline: calc(var(--spacing) * -6);
  }
  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }
  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .-my-2 {
    margin-block: calc(var(--spacing) * -2);
  }
  .-my-3 {
    margin-block: calc(var(--spacing) * -3);
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
  .ms-1 {
    margin-inline-start: calc(var(--spacing) * 1);
  }
  .me-1 {
    margin-inline-end: calc(var(--spacing) * 1);
  }
  .\!mt-0 {
    margin-top: calc(var(--spacing) * 0) !important;
  }
  .-mt-0\.5 {
    margin-top: calc(var(--spacing) * -0.5);
  }
  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }
  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .-mt-20 {
    margin-top: calc(var(--spacing) * -20);
  }
  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }
  .mt-24 {
    margin-top: calc(var(--spacing) * 24);
  }
  .mt-80 {
    margin-top: calc(var(--spacing) * 80);
  }
  .mt-auto {
    margin-top: auto;
  }
  .-mr-4 {
    margin-right: calc(var(--spacing) * -4);
  }
  .-mr-20 {
    margin-right: calc(var(--spacing) * -20);
  }
  .mr-0 {
    margin-right: calc(var(--spacing) * 0);
  }
  .mr-0\.5 {
    margin-right: calc(var(--spacing) * 0.5);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-6 {
    margin-right: calc(var(--spacing) * 6);
  }
  .mr-12 {
    margin-right: calc(var(--spacing) * 12);
  }
  .mr-36 {
    margin-right: calc(var(--spacing) * 36);
  }
  .mr-80 {
    margin-right: calc(var(--spacing) * 80);
  }
  .\!mb-0 {
    margin-bottom: calc(var(--spacing) * 0) !important;
  }
  .\!mb-1 {
    margin-bottom: calc(var(--spacing) * 1) !important;
  }
  .-mb-4 {
    margin-bottom: calc(var(--spacing) * -4);
  }
  .-mb-20 {
    margin-bottom: calc(var(--spacing) * -20);
  }
  .-mb-px {
    margin-bottom: -1px;
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-14 {
    margin-bottom: calc(var(--spacing) * 14);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }
  .mb-24 {
    margin-bottom: calc(var(--spacing) * 24);
  }
  .mb-28 {
    margin-bottom: calc(var(--spacing) * 28);
  }
  .-ml-2 {
    margin-left: calc(var(--spacing) * -2);
  }
  .-ml-20 {
    margin-left: calc(var(--spacing) * -20);
  }
  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }
  .ml-0\.5 {
    margin-left: calc(var(--spacing) * 0.5);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }
  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }
  .ml-7 {
    margin-left: calc(var(--spacing) * 7);
  }
  .ml-8 {
    margin-left: calc(var(--spacing) * 8);
  }
  .ml-9 {
    margin-left: calc(var(--spacing) * 9);
  }
  .ml-10 {
    margin-left: calc(var(--spacing) * 10);
  }
  .ml-11 {
    margin-left: calc(var(--spacing) * 11);
  }
  .ml-12 {
    margin-left: calc(var(--spacing) * 12);
  }
  .ml-13 {
    margin-left: calc(var(--spacing) * 13);
  }
  .ml-14 {
    margin-left: calc(var(--spacing) * 14);
  }
  .ml-28 {
    margin-left: calc(var(--spacing) * 28);
  }
  .ml-\[52px\] {
    margin-left: 52px;
  }
  .ml-\[88px\] {
    margin-left: 88px;
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
  .line-clamp-none {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: unset;
  }
  .\!flex {
    display: flex !important;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .table-cell {
    display: table-cell;
  }
  .table-row {
    display: table-row;
  }
  .aspect-\[2\/1\] {
    aspect-ratio: 2/1;
  }
  .aspect-\[3\/1\] {
    aspect-ratio: 3/1;
  }
  .aspect-\[3\/2\] {
    aspect-ratio: 3/2;
  }
  .aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .size-44 {
    width: calc(var(--spacing) * 44);
    height: calc(var(--spacing) * 44);
  }
  .size-56 {
    width: calc(var(--spacing) * 56);
    height: calc(var(--spacing) * 56);
  }
  .size-64 {
    width: calc(var(--spacing) * 64);
    height: calc(var(--spacing) * 64);
  }
  .size-72 {
    width: var(--spacing-72);
    height: var(--spacing-72);
  }
  .size-80 {
    width: calc(var(--spacing) * 80);
    height: calc(var(--spacing) * 80);
  }
  .size-96 {
    width: var(--spacing-96);
    height: var(--spacing-96);
  }
  .size-120 {
    width: calc(var(--spacing) * 120);
    height: calc(var(--spacing) * 120);
  }
  .size-160 {
    width: calc(var(--spacing) * 160);
    height: calc(var(--spacing) * 160);
  }
  .\!h-3 {
    height: calc(var(--spacing) * 3) !important;
  }
  .\!h-4 {
    height: calc(var(--spacing) * 4) !important;
  }
  .h-0 {
    height: calc(var(--spacing) * 0);
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-44 {
    height: calc(var(--spacing) * 44);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-80 {
    height: calc(var(--spacing) * 80);
  }
  .h-96 {
    height: var(--spacing-96);
  }
  .h-\[3\.66rem\] {
    height: 3.66rem;
  }
  .h-\[4\.5rem\] {
    height: 4.5rem;
  }
  .h-\[14px\] {
    height: 14px;
  }
  .h-\[18px\] {
    height: 18px;
  }
  .h-\[54px\] {
    height: 54px;
  }
  .h-\[220px\] {
    height: 220px;
  }
  .h-\[calc\(100vh-12rem\)\] {
    height: calc(100vh - 12rem);
  }
  .h-\[calc\(100vh-310px\)\] {
    height: calc(100vh - 310px);
  }
  .h-auto {
    height: auto;
  }
  .h-fit {
    height: fit-content;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .h-screen {
    height: 100vh;
  }
  .max-h-12 {
    max-height: calc(var(--spacing) * 12);
  }
  .max-h-16 {
    max-height: calc(var(--spacing) * 16);
  }
  .max-h-24 {
    max-height: calc(var(--spacing) * 24);
  }
  .max-h-28 {
    max-height: calc(var(--spacing) * 28);
  }
  .max-h-32 {
    max-height: calc(var(--spacing) * 32);
  }
  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }
  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }
  .max-h-52 {
    max-height: calc(var(--spacing) * 52);
  }
  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .max-h-72 {
    max-height: var(--spacing-72);
  }
  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }
  .max-h-96 {
    max-height: var(--spacing-96);
  }
  .max-h-\[70vh\] {
    max-height: 70vh;
  }
  .max-h-\[80vh\] {
    max-height: 80vh;
  }
  .max-h-\[90vh\] {
    max-height: 90vh;
  }
  .max-h-\[200px\] {
    max-height: 200px;
  }
  .max-h-\[420px\] {
    max-height: 420px;
  }
  .max-h-\[500px\] {
    max-height: 500px;
  }
  .max-h-\[600px\] {
    max-height: 600px;
  }
  .max-h-\[calc\(100vh-280px\)\] {
    max-height: calc(100vh - 280px);
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-4 {
    min-height: calc(var(--spacing) * 4);
  }
  .min-h-64 {
    min-height: calc(var(--spacing) * 64);
  }
  .min-h-\[1\.25rem\] {
    min-height: 1.25rem;
  }
  .min-h-\[2\.5rem\] {
    min-height: 2.5rem;
  }
  .min-h-\[3\.5rem\] {
    min-height: 3.5rem;
  }
  .min-h-\[5\.5rem\] {
    min-height: 5.5rem;
  }
  .min-h-\[8\.5rem\] {
    min-height: 8.5rem;
  }
  .min-h-\[8rem\] {
    min-height: 8rem;
  }
  .min-h-\[18rem\] {
    min-height: 18rem;
  }
  .min-h-\[44px\] {
    min-height: 44px;
  }
  .min-h-\[60px\] {
    min-height: 60px;
  }
  .min-h-\[60vh\] {
    min-height: 60vh;
  }
  .min-h-\[80vh\] {
    min-height: 80vh;
  }
  .min-h-\[100px\] {
    min-height: 100px;
  }
  .min-h-\[120px\] {
    min-height: 120px;
  }
  .min-h-\[150px\] {
    min-height: 150px;
  }
  .min-h-\[200px\] {
    min-height: 200px;
  }
  .min-h-\[250px\] {
    min-height: 250px;
  }
  .min-h-\[300px\] {
    min-height: 300px;
  }
  .min-h-\[400px\] {
    min-height: 400px;
  }
  .min-h-\[480px\] {
    min-height: 480px;
  }
  .min-h-\[500px\] {
    min-height: 500px;
  }
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .\!w-3 {
    width: calc(var(--spacing) * 3) !important;
  }
  .\!w-4 {
    width: calc(var(--spacing) * 4) !important;
  }
  .\!w-auto {
    width: auto !important;
  }
  .w-0 {
    width: calc(var(--spacing) * 0);
  }
  .w-0\.5 {
    width: calc(var(--spacing) * 0.5);
  }
  .w-1 {
    width: calc(var(--spacing) * 1);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-1\/2 {
    width: calc(1/2 * 100%);
  }
  .w-1\/3 {
    width: calc(1/3 * 100%);
  }
  .w-1\/4 {
    width: calc(1/4 * 100%);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-2\/3 {
    width: calc(2/3 * 100%);
  }
  .w-2\/5 {
    width: calc(2/5 * 100%);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-3\/4 {
    width: calc(3/4 * 100%);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-4\/5 {
    width: calc(4/5 * 100%);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-44 {
    width: calc(var(--spacing) * 44);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-52 {
    width: calc(var(--spacing) * 52);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-72 {
    width: var(--spacing-72);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-96 {
    width: var(--spacing-96);
  }
  .w-\[7\%\] {
    width: 7%;
  }
  .w-\[8\%\] {
    width: 8%;
  }
  .w-\[14px\] {
    width: 14px;
  }
  .w-\[15\%\] {
    width: 15%;
  }
  .w-\[30\%\] {
    width: 30%;
  }
  .w-\[40\%\] {
    width: 40%;
  }
  .w-\[75\%\] {
    width: 75%;
  }
  .w-\[350px\] {
    width: 350px;
  }
  .w-\[400px\] {
    width: 400px;
  }
  .w-\[500px\] {
    width: 500px;
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .w-px {
    width: 1px;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-24 {
    max-width: calc(var(--spacing) * 24);
  }
  .max-w-80 {
    max-width: calc(var(--spacing) * 80);
  }
  .max-w-\[14rem\] {
    max-width: 14rem;
  }
  .max-w-\[80\%\] {
    max-width: 80%;
  }
  .max-w-\[85\%\] {
    max-width: 85%;
  }
  .max-w-\[96px\] {
    max-width: 96px;
  }
  .max-w-\[110px\] {
    max-width: 110px;
  }
  .max-w-\[120px\] {
    max-width: 120px;
  }
  .max-w-\[140px\] {
    max-width: 140px;
  }
  .max-w-\[160px\] {
    max-width: 160px;
  }
  .max-w-\[180px\] {
    max-width: 180px;
  }
  .max-w-\[200px\] {
    max-width: 200px;
  }
  .max-w-\[250px\] {
    max-width: 250px;
  }
  .max-w-\[320px\] {
    max-width: 320px;
  }
  .max-w-\[360px\] {
    max-width: 360px;
  }
  .max-w-\[450px\] {
    max-width: 450px;
  }
  .max-w-\[480px\] {
    max-width: 480px;
  }
  .max-w-\[520px\] {
    max-width: 520px;
  }
  .max-w-\[1180px\] {
    max-width: 1180px;
  }
  .max-w-\[1200px\] {
    max-width: 1200px;
  }
  .max-w-\[1400px\] {
    max-width: 1400px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-none {
    max-width: none;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-\[1\.5rem\] {
    min-width: 1.5rem;
  }
  .min-w-\[1\.25rem\] {
    min-width: 1.25rem;
  }
  .min-w-\[2rem\] {
    min-width: 2rem;
  }
  .min-w-\[8rem\] {
    min-width: 8rem;
  }
  .min-w-\[14rem\] {
    min-width: 14rem;
  }
  .min-w-\[60px\] {
    min-width: 60px;
  }
  .min-w-\[100px\] {
    min-width: 100px;
  }
  .min-w-\[120px\] {
    min-width: 120px;
  }
  .min-w-\[140px\] {
    min-width: 140px;
  }
  .min-w-\[150px\] {
    min-width: 150px;
  }
  .min-w-\[160px\] {
    min-width: 160px;
  }
  .min-w-\[180px\] {
    min-width: 180px;
  }
  .min-w-\[200px\] {
    min-width: 200px;
  }
  .min-w-\[220px\] {
    min-width: 220px;
  }
  .min-w-\[250px\] {
    min-width: 250px;
  }
  .min-w-\[280px\] {
    min-width: 280px;
  }
  .min-w-\[300px\] {
    min-width: 300px;
  }
  .min-w-\[320px\] {
    min-width: 320px;
  }
  .min-w-\[380px\] {
    min-width: 380px;
  }
  .min-w-\[420px\] {
    min-width: 420px;
  }
  .min-w-\[600px\] {
    min-width: 600px;
  }
  .min-w-full {
    min-width: 100%;
  }
  .min-w-max {
    min-width: max-content;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-none {
    flex: none;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .table-fixed {
    table-layout: fixed;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .origin-top {
    transform-origin: top;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-6 {
    --tw-translate-x: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-16 {
    --tw-translate-x: calc(var(--spacing) * 16);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[2px\] {
    --tw-translate-x: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[16px\] {
    --tw-translate-x: 16px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[20px\] {
    --tw-translate-x: 20px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * -4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-16 {
    --tw-translate-y: calc(var(--spacing) * -16);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-\[-1px\] {
    --tw-translate-y: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-150 {
    --tw-scale-x: 150%;
    --tw-scale-y: 150%;
    --tw-scale-z: 150%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-\[0\.92\] {
    scale: 0.92;
  }
  .-rotate-90 {
    rotate: calc(90deg * -1);
  }
  .rotate-2 {
    rotate: 2deg;
  }
  .rotate-3 {
    rotate: 3deg;
  }
  .rotate-6 {
    rotate: 6deg;
  }
  .rotate-45 {
    rotate: 45deg;
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-\[float_6s_ease-in-out_infinite\] {
    animation: float 6s ease-in-out infinite;
  }
  .animate-\[float_8s_ease-in-out_infinite_1s\] {
    animation: float 8s ease-in-out infinite 1s;
  }
  .animate-bounce {
    animation: var(--animate-bounce);
  }
  .animate-ping {
    animation: var(--animate-ping);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-help {
    cursor: help;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-text {
    cursor: text;
  }
  .cursor-wait {
    cursor: wait;
  }
  .touch-pan-x {
    --tw-pan-x: pan-x;
    touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .resize-y {
    resize: vertical;
  }
  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-outside {
    list-style-position: outside;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-disc {
    list-style-type: disc;
  }
  .list-none {
    list-style-type: none;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-flow-col {
    grid-auto-flow: column;
  }
  .auto-rows-\[200px\] {
    grid-auto-rows: 200px;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: 1fr auto 1fr;
  }
  .grid-cols-\[1fr_auto_70px\] {
    grid-template-columns: 1fr auto 70px;
  }
  .grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }
  .grid-cols-\[auto_1px_1fr\] {
    grid-template-columns: auto 1px 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .\!flex-wrap {
    flex-wrap: wrap !important;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .\!gap-2 {
    gap: calc(var(--spacing) * 2) !important;
  }
  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }
  .space-y-0 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-10 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-12 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-16 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-1 {
    column-gap: calc(var(--spacing) * 1);
  }
  .gap-x-1\.5 {
    column-gap: calc(var(--spacing) * 1.5);
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-x-10 {
    column-gap: calc(var(--spacing) * 10);
  }
  .-space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-1 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-3 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-4 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-6 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-8 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * 0.5);
  }
  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .gap-y-5 {
    row-gap: calc(var(--spacing) * 5);
  }
  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }
  .divide-x {
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-\[var\(--cd-border-hairline\)\] {
    :where(& > :not(:last-child)) {
      border-color: var(--cd-border-hairline);
    }
  }
  .divide-athens-gray {
    :where(& > :not(:last-child)) {
      border-color: var(--color-athens-gray);
    }
  }
  .divide-gray-50 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-50);
    }
  }
  .divide-gray-100 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-100);
    }
  }
  .divide-gray-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .divide-shark\/5 {
    :where(& > :not(:last-child)) {
      border-color: color-mix(in srgb, #1d1d1f 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-shark) 5%, transparent);
      }
    }
  }
  .divide-shark\/10 {
    :where(& > :not(:last-child)) {
      border-color: color-mix(in srgb, #1d1d1f 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-shark) 10%, transparent);
      }
    }
  }
  .divide-slate-100 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-slate-100);
    }
  }
  .self-center {
    align-self: center;
  }
  .self-end {
    align-self: flex-end;
  }
  .self-start {
    align-self: flex-start;
  }
  .self-stretch {
    align-self: stretch;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .\!overflow-hidden {
    overflow: hidden !important;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-clip {
    overflow-x: clip;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overflow-y-hidden {
    overflow-y: hidden;
  }
  .overscroll-contain {
    overscroll-behavior: contain;
  }
  .overscroll-x-contain {
    overscroll-behavior-x: contain;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-\[10px\] {
    border-radius: 10px;
  }
  .rounded-\[12px\] {
    border-radius: 12px;
  }
  .rounded-\[16px\] {
    border-radius: 16px;
  }
  .rounded-\[inherit\] {
    border-radius: inherit;
  }
  .rounded-\[var\(--cd-radius-xl\)\] {
    border-radius: var(--cd-radius-xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }
  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .rounded-l-md {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  .rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .rounded-tl-lg {
    border-top-left-radius: var(--radius-lg);
  }
  .rounded-tl-none {
    border-top-left-radius: 0;
  }
  .rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .rounded-r-md {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .rounded-r-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .rounded-tr-lg {
    border-top-right-radius: var(--radius-lg);
  }
  .rounded-tr-none {
    border-top-right-radius: 0;
  }
  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-b-xl {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }
  .rounded-br-lg {
    border-bottom-right-radius: var(--radius-lg);
  }
  .rounded-br-md {
    border-bottom-right-radius: var(--radius-md);
  }
  .rounded-br-xl {
    border-bottom-right-radius: var(--radius-xl);
  }
  .rounded-bl-lg {
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-bl-md {
    border-bottom-left-radius: var(--radius-md);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-8 {
    border-style: var(--tw-border-style);
    border-width: 8px;
  }
  .border-\[3px\] {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
  }
  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }
  .border-t-4 {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-l-3 {
    border-left-style: var(--tw-border-style);
    border-left-width: 3px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-l-\[3px\] {
    border-left-style: var(--tw-border-style);
    border-left-width: 3px;
  }
  .\!border-solid {
    --tw-border-style: solid !important;
    border-style: solid !important;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .\!border-crimson-red {
    border-color: var(--color-crimson-red) !important;
  }
  .\!border-forest-green {
    border-color: var(--color-forest-green) !important;
  }
  .\!border-gray-200 {
    border-color: var(--color-gray-200) !important;
  }
  .border-\[var\(--cd-border-hairline\)\] {
    border-color: var(--cd-border-hairline);
  }
  .border-\[var\(--cd-border-primary\)\] {
    border-color: var(--cd-border-primary);
  }
  .border-\[var\(--cd-border-secondary\)\] {
    border-color: var(--cd-border-secondary);
  }
  .border-\[var\(--cd-color-primary\)\] {
    border-color: var(--cd-color-primary);
  }
  .border-amber-100 {
    border-color: var(--color-amber-100);
  }
  .border-amber-200 {
    border-color: var(--color-amber-200);
  }
  .border-amber-300 {
    border-color: var(--color-amber-300);
  }
  .border-amber-300\/30 {
    border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-300) 30%, transparent);
    }
  }
  .border-amber-400 {
    border-color: var(--color-amber-400);
  }
  .border-amber-500 {
    border-color: var(--color-amber-500);
  }
  .border-athens-gray {
    border-color: var(--color-athens-gray);
  }
  .border-athens-gray\/30 {
    border-color: color-mix(in srgb, #f5f5f7 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-athens-gray) 30%, transparent);
    }
  }
  .border-athens-gray\/50 {
    border-color: color-mix(in srgb, #f5f5f7 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-athens-gray) 50%, transparent);
    }
  }
  .border-black {
    border-color: var(--color-black);
  }
  .border-blue-100 {
    border-color: var(--color-blue-100);
  }
  .border-blue-200 {
    border-color: var(--color-blue-200);
  }
  .border-blue-300 {
    border-color: var(--color-blue-300);
  }
  .border-blue-400 {
    border-color: var(--color-blue-400);
  }
  .border-blue-500 {
    border-color: var(--color-blue-500);
  }
  .border-blue-600 {
    border-color: var(--color-blue-600);
  }
  .border-blue-700 {
    border-color: var(--color-blue-700);
  }
  .border-crimson-red {
    border-color: var(--color-crimson-red);
  }
  .border-crimson-red\/10 {
    border-color: color-mix(in srgb, #dc143c 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-crimson-red) 10%, transparent);
    }
  }
  .border-crimson-red\/20 {
    border-color: color-mix(in srgb, #dc143c 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-crimson-red) 20%, transparent);
    }
  }
  .border-crimson-red\/30 {
    border-color: color-mix(in srgb, #dc143c 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-crimson-red) 30%, transparent);
    }
  }
  .border-deep-purple {
    border-color: var(--color-deep-purple);
  }
  .border-deep-purple\/10 {
    border-color: color-mix(in srgb, #6366f1 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-deep-purple) 10%, transparent);
    }
  }
  .border-deep-purple\/20 {
    border-color: color-mix(in srgb, #6366f1 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-deep-purple) 20%, transparent);
    }
  }
  .border-emerald-100 {
    border-color: var(--color-emerald-100);
  }
  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }
  .border-emerald-400 {
    border-color: var(--color-emerald-400);
  }
  .border-emerald-500 {
    border-color: var(--color-emerald-500);
  }
  .border-emerald-500\/20 {
    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }
  .border-emerald\/20 {
    border-color: color-mix(in srgb, #50c878 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald) 20%, transparent);
    }
  }
  .border-forest-green {
    border-color: var(--color-forest-green);
  }
  .border-forest-green\/15 {
    border-color: color-mix(in srgb, #228b22 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-forest-green) 15%, transparent);
    }
  }
  .border-forest-green\/20 {
    border-color: color-mix(in srgb, #228b22 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-forest-green) 20%, transparent);
    }
  }
  .border-forest-green\/30 {
    border-color: color-mix(in srgb, #228b22 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-forest-green) 30%, transparent);
    }
  }
  .border-forest-green\/40 {
    border-color: color-mix(in srgb, #228b22 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-forest-green) 40%, transparent);
    }
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-200\/70 {
    border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-200) 70%, transparent);
    }
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-gray-400 {
    border-color: var(--color-gray-400);
  }
  .border-gray-600 {
    border-color: var(--color-gray-600);
  }
  .border-gray-700 {
    border-color: var(--color-gray-700);
  }
  .border-gray-900 {
    border-color: var(--color-gray-900);
  }
  .border-green-100 {
    border-color: var(--color-green-100);
  }
  .border-green-200 {
    border-color: var(--color-green-200);
  }
  .border-green-300 {
    border-color: var(--color-green-300);
  }
  .border-green-500 {
    border-color: var(--color-green-500);
  }
  .border-indigo-100 {
    border-color: var(--color-indigo-100);
  }
  .border-indigo-200 {
    border-color: var(--color-indigo-200);
  }
  .border-indigo-500 {
    border-color: var(--color-indigo-500);
  }
  .border-jade-green\/20 {
    border-color: color-mix(in srgb, #00A86B 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-jade-green) 20%, transparent);
    }
  }
  .border-neutral-100 {
    border-color: var(--color-neutral-100);
  }
  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }
  .border-orange-100 {
    border-color: var(--color-orange-100);
  }
  .border-orange-200 {
    border-color: var(--color-orange-200);
  }
  .border-orange-400 {
    border-color: var(--color-orange-400);
  }
  .border-orange-500 {
    border-color: var(--color-orange-500);
  }
  .border-pink-100 {
    border-color: var(--color-pink-100);
  }
  .border-pink-200 {
    border-color: var(--color-pink-200);
  }
  .border-platinum-silver {
    border-color: var(--color-platinum-silver);
  }
  .border-purple-100 {
    border-color: var(--color-purple-100);
  }
  .border-purple-200 {
    border-color: var(--color-purple-200);
  }
  .border-purple-300 {
    border-color: var(--color-purple-300);
  }
  .border-red-100 {
    border-color: var(--color-red-100);
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .border-red-300 {
    border-color: var(--color-red-300);
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-red-500\/30 {
    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
  }
  .border-red-600 {
    border-color: var(--color-red-600);
  }
  .border-rose-200 {
    border-color: var(--color-rose-200);
  }
  .border-science-blue {
    border-color: var(--color-science-blue);
  }
  .border-science-blue\/10 {
    border-color: color-mix(in srgb, #0066cc 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-science-blue) 10%, transparent);
    }
  }
  .border-science-blue\/20 {
    border-color: color-mix(in srgb, #0066cc 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
    }
  }
  .border-science-blue\/30 {
    border-color: color-mix(in srgb, #0066cc 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-science-blue) 30%, transparent);
    }
  }
  .border-shark {
    border-color: var(--color-shark);
  }
  .border-shark\/5 {
    border-color: color-mix(in srgb, #1d1d1f 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-shark) 5%, transparent);
    }
  }
  .border-shark\/10 {
    border-color: color-mix(in srgb, #1d1d1f 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-shark) 10%, transparent);
    }
  }
  .border-shark\/15 {
    border-color: color-mix(in srgb, #1d1d1f 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-shark) 15%, transparent);
    }
  }
  .border-shark\/20 {
    border-color: color-mix(in srgb, #1d1d1f 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-shark) 20%, transparent);
    }
  }
  .border-shark\/30 {
    border-color: color-mix(in srgb, #1d1d1f 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-shark) 30%, transparent);
    }
  }
  .border-shark\/40 {
    border-color: color-mix(in srgb, #1d1d1f 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-shark) 40%, transparent);
    }
  }
  .border-sky-200 {
    border-color: var(--color-sky-200);
  }
  .border-sky-300 {
    border-color: var(--color-sky-300);
  }
  .border-slate-100 {
    border-color: var(--color-slate-100);
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-slate-600 {
    border-color: var(--color-slate-600);
  }
  .border-teal-200 {
    border-color: var(--color-teal-200);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-trust-blue\/20 {
    border-color: color-mix(in srgb, #2B5AA0 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-trust-blue) 20%, transparent);
    }
  }
  .border-warning-orange {
    border-color: var(--color-warning-orange);
  }
  .border-warning-orange\/10 {
    border-color: color-mix(in srgb, #ff6b35 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-warning-orange) 10%, transparent);
    }
  }
  .border-warning-orange\/20 {
    border-color: color-mix(in srgb, #ff6b35 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-warning-orange) 20%, transparent);
    }
  }
  .border-warning-orange\/30 {
    border-color: color-mix(in srgb, #ff6b35 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-warning-orange) 30%, transparent);
    }
  }
  .border-white {
    border-color: var(--color-white);
  }
  .border-white\/5 {
    border-color: color-mix(in srgb, #ffffff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .border-white\/10 {
    border-color: color-mix(in srgb, #ffffff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .border-white\/20 {
    border-color: color-mix(in srgb, #ffffff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .border-white\/25 {
    border-color: color-mix(in srgb, #ffffff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }
  .border-white\/30 {
    border-color: color-mix(in srgb, #ffffff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .border-white\/40 {
    border-color: color-mix(in srgb, #ffffff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .border-white\/50 {
    border-color: color-mix(in srgb, #ffffff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .border-white\/70 {
    border-color: color-mix(in srgb, #ffffff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .border-yellow-200 {
    border-color: var(--color-yellow-200);
  }
  .border-yellow-300 {
    border-color: var(--color-yellow-300);
  }
  .border-yellow-400 {
    border-color: var(--color-yellow-400);
  }
  .border-yellow-500 {
    border-color: var(--color-yellow-500);
  }
  .border-t-science-blue {
    border-top-color: var(--color-science-blue);
  }
  .border-t-transparent {
    border-top-color: transparent;
  }
  .border-l-crimson-red {
    border-left-color: var(--color-crimson-red);
  }
  .border-l-forest-green {
    border-left-color: var(--color-forest-green);
  }
  .border-l-gray-400 {
    border-left-color: var(--color-gray-400);
  }
  .border-l-green-500 {
    border-left-color: var(--color-green-500);
  }
  .border-l-red-500 {
    border-left-color: var(--color-red-500);
  }
  .border-l-science-blue {
    border-left-color: var(--color-science-blue);
  }
  .border-l-warning-orange {
    border-left-color: var(--color-warning-orange);
  }
  .border-l-yellow-500 {
    border-left-color: var(--color-yellow-500);
  }
  .bg-\[\#1a1a1e\] {
    background-color: #1a1a1e;
  }
  .bg-\[\#111113\] {
    background-color: #111113;
  }
  .bg-\[\#141416\] {
    background-color: #141416;
  }
  .bg-\[var\(--cd-bg-card\)\] {
    background-color: var(--cd-bg-card);
  }
  .bg-\[var\(--cd-bg-secondary\)\] {
    background-color: var(--cd-bg-secondary);
  }
  .bg-\[var\(--cd-bg-tertiary\)\] {
    background-color: var(--cd-bg-tertiary);
  }
  .bg-\[var\(--cd-color-primary\)\] {
    background-color: var(--cd-color-primary);
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .bg-amber-50\/40 {
    background-color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-50) 40%, transparent);
    }
  }
  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }
  .bg-amber-200 {
    background-color: var(--color-amber-200);
  }
  .bg-amber-200\/60 {
    background-color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-200) 60%, transparent);
    }
  }
  .bg-amber-400 {
    background-color: var(--color-amber-400);
  }
  .bg-amber-400\/15 {
    background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
    }
  }
  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }
  .bg-amber-500\/10 {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }
  .bg-amber-600 {
    background-color: var(--color-amber-600);
  }
  .bg-athens-gray {
    background-color: var(--color-athens-gray);
  }
  .bg-athens-gray\/30 {
    background-color: color-mix(in srgb, #f5f5f7 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-athens-gray) 30%, transparent);
    }
  }
  .bg-athens-gray\/50 {
    background-color: color-mix(in srgb, #f5f5f7 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-athens-gray) 50%, transparent);
    }
  }
  .bg-athens-gray\/60 {
    background-color: color-mix(in srgb, #f5f5f7 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-athens-gray) 60%, transparent);
    }
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/0 {
    background-color: color-mix(in srgb, #000 0%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 0%, transparent);
    }
  }
  .bg-black\/10 {
    background-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
  .bg-black\/20 {
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-black\/45 {
    background-color: color-mix(in srgb, #000 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 45%, transparent);
    }
  }
  .bg-black\/50 {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .bg-black\/55 {
    background-color: color-mix(in srgb, #000 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
    }
  }
  .bg-black\/60 {
    background-color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
  .bg-blue-50\/50 {
    background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-50) 50%, transparent);
    }
  }
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .bg-blue-200 {
    background-color: var(--color-blue-200);
  }
  .bg-blue-400 {
    background-color: var(--color-blue-400);
  }
  .bg-blue-400\/15 {
    background-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-400) 15%, transparent);
    }
  }
  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-blue-700 {
    background-color: var(--color-blue-700);
  }
  .bg-blue-800 {
    background-color: var(--color-blue-800);
  }
  .bg-crimson-red {
    background-color: var(--color-crimson-red);
  }
  .bg-crimson-red\/5 {
    background-color: color-mix(in srgb, #dc143c 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-crimson-red) 5%, transparent);
    }
  }
  .bg-crimson-red\/10 {
    background-color: color-mix(in srgb, #dc143c 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-crimson-red) 10%, transparent);
    }
  }
  .bg-crimson-red\/15 {
    background-color: color-mix(in srgb, #dc143c 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-crimson-red) 15%, transparent);
    }
  }
  .bg-crimson-red\/20 {
    background-color: color-mix(in srgb, #dc143c 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-crimson-red) 20%, transparent);
    }
  }
  .bg-crimson-red\/90 {
    background-color: color-mix(in srgb, #dc143c 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-crimson-red) 90%, transparent);
    }
  }
  .bg-cyan-100 {
    background-color: var(--color-cyan-100);
  }
  .bg-cyan-200 {
    background-color: var(--color-cyan-200);
  }
  .bg-cyan-500 {
    background-color: var(--color-cyan-500);
  }
  .bg-deep-purple {
    background-color: var(--color-deep-purple);
  }
  .bg-deep-purple\/5 {
    background-color: color-mix(in srgb, #6366f1 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-deep-purple) 5%, transparent);
    }
  }
  .bg-deep-purple\/10 {
    background-color: color-mix(in srgb, #6366f1 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-deep-purple) 10%, transparent);
    }
  }
  .bg-deep-purple\/15 {
    background-color: color-mix(in srgb, #6366f1 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-deep-purple) 15%, transparent);
    }
  }
  .bg-emerald {
    background-color: var(--color-emerald);
  }
  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }
  .bg-emerald-50\/50 {
    background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-50) 50%, transparent);
    }
  }
  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }
  .bg-emerald-400 {
    background-color: var(--color-emerald-400);
  }
  .bg-emerald-400\/15 {
    background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
    }
  }
  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }
  .bg-emerald-500\/5 {
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);
    }
  }
  .bg-emerald-500\/10 {
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }
  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }
  .bg-emerald-600\/10 {
    background-color: color-mix(in srgb, oklch(59.6% 0.145 163.225) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-600) 10%, transparent);
    }
  }
  .bg-emerald\/5 {
    background-color: color-mix(in srgb, #50c878 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald) 5%, transparent);
    }
  }
  .bg-emerald\/10 {
    background-color: color-mix(in srgb, #50c878 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald) 10%, transparent);
    }
  }
  .bg-emerald\/15 {
    background-color: color-mix(in srgb, #50c878 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald) 15%, transparent);
    }
  }
  .bg-forest-green {
    background-color: var(--color-forest-green);
  }
  .bg-forest-green\/5 {
    background-color: color-mix(in srgb, #228b22 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-forest-green) 5%, transparent);
    }
  }
  .bg-forest-green\/10 {
    background-color: color-mix(in srgb, #228b22 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-forest-green) 10%, transparent);
    }
  }
  .bg-forest-green\/15 {
    background-color: color-mix(in srgb, #228b22 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-forest-green) 15%, transparent);
    }
  }
  .bg-forest-green\/20 {
    background-color: color-mix(in srgb, #228b22 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-forest-green) 20%, transparent);
    }
  }
  .bg-forest-green\/90 {
    background-color: color-mix(in srgb, #228b22 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-forest-green) 90%, transparent);
    }
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-50\/50 {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
    }
  }
  .bg-gray-50\/60 {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 60%, transparent);
    }
  }
  .bg-gray-50\/80 {
    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-50) 80%, transparent);
    }
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-100\/50 {
    background-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
    }
  }
  .bg-gray-100\/80 {
    background-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-100) 80%, transparent);
    }
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }
  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }
  .bg-gray-500\/90 {
    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-500) 90%, transparent);
    }
  }
  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }
  .bg-gray-700 {
    background-color: var(--color-gray-700);
  }
  .bg-gray-700\/50 {
    background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
    }
  }
  .bg-gray-700\/60 {
    background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
    }
  }
  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }
  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }
  .bg-gray-900\/50 {
    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
    }
  }
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .bg-green-400 {
    background-color: var(--color-green-400);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-green-600 {
    background-color: var(--color-green-600);
  }
  .bg-green-800 {
    background-color: var(--color-green-800);
  }
  .bg-indigo-50 {
    background-color: var(--color-indigo-50);
  }
  .bg-indigo-100 {
    background-color: var(--color-indigo-100);
  }
  .bg-indigo-200 {
    background-color: var(--color-indigo-200);
  }
  .bg-indigo-500 {
    background-color: var(--color-indigo-500);
  }
  .bg-indigo-600 {
    background-color: var(--color-indigo-600);
  }
  .bg-jade-green\/10 {
    background-color: color-mix(in srgb, #00A86B 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-jade-green) 10%, transparent);
    }
  }
  .bg-lime-500 {
    background-color: var(--color-lime-500);
  }
  .bg-midnight-purple\/10 {
    background-color: color-mix(in srgb, #483d8b 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-midnight-purple) 10%, transparent);
    }
  }
  .bg-neutral-50 {
    background-color: var(--color-neutral-50);
  }
  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }
  .bg-orange-50 {
    background-color: var(--color-orange-50);
  }
  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }
  .bg-orange-400 {
    background-color: var(--color-orange-400);
  }
  .bg-orange-500 {
    background-color: var(--color-orange-500);
  }
  .bg-orange-600 {
    background-color: var(--color-orange-600);
  }
  .bg-pink-100 {
    background-color: var(--color-pink-100);
  }
  .bg-platinum-silver {
    background-color: var(--color-platinum-silver);
  }
  .bg-premium-gold {
    background-color: var(--color-premium-gold);
  }
  .bg-premium-gold\/10 {
    background-color: color-mix(in srgb, #d4af37 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-premium-gold) 10%, transparent);
    }
  }
  .bg-purple-50 {
    background-color: var(--color-purple-50);
  }
  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }
  .bg-purple-200 {
    background-color: var(--color-purple-200);
  }
  .bg-purple-400 {
    background-color: var(--color-purple-400);
  }
  .bg-purple-400\/10 {
    background-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-400) 10%, transparent);
    }
  }
  .bg-purple-400\/15 {
    background-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-400) 15%, transparent);
    }
  }
  .bg-purple-500 {
    background-color: var(--color-purple-500);
  }
  .bg-purple-600 {
    background-color: var(--color-purple-600);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-red-200 {
    background-color: var(--color-red-200);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-red-500\/10 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .bg-red-700 {
    background-color: var(--color-red-700);
  }
  .bg-rose-50 {
    background-color: var(--color-rose-50);
  }
  .bg-rose-100 {
    background-color: var(--color-rose-100);
  }
  .bg-rose-500 {
    background-color: var(--color-rose-500);
  }
  .bg-rose-600 {
    background-color: var(--color-rose-600);
  }
  .bg-science-blue {
    background-color: var(--color-science-blue);
  }
  .bg-science-blue\/5 {
    background-color: color-mix(in srgb, #0066cc 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
    }
  }
  .bg-science-blue\/10 {
    background-color: color-mix(in srgb, #0066cc 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 10%, transparent);
    }
  }
  .bg-science-blue\/15 {
    background-color: color-mix(in srgb, #0066cc 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 15%, transparent);
    }
  }
  .bg-science-blue\/20 {
    background-color: color-mix(in srgb, #0066cc 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
    }
  }
  .bg-science-blue\/30 {
    background-color: color-mix(in srgb, #0066cc 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 30%, transparent);
    }
  }
  .bg-science-blue\/60 {
    background-color: color-mix(in srgb, #0066cc 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 60%, transparent);
    }
  }
  .bg-science-blue\/90 {
    background-color: color-mix(in srgb, #0066cc 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 90%, transparent);
    }
  }
  .bg-shark {
    background-color: var(--color-shark);
  }
  .bg-shark\/5 {
    background-color: color-mix(in srgb, #1d1d1f 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-shark) 5%, transparent);
    }
  }
  .bg-shark\/8 {
    background-color: color-mix(in srgb, #1d1d1f 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-shark) 8%, transparent);
    }
  }
  .bg-shark\/10 {
    background-color: color-mix(in srgb, #1d1d1f 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-shark) 10%, transparent);
    }
  }
  .bg-shark\/30 {
    background-color: color-mix(in srgb, #1d1d1f 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-shark) 30%, transparent);
    }
  }
  .bg-shark\/40 {
    background-color: color-mix(in srgb, #1d1d1f 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-shark) 40%, transparent);
    }
  }
  .bg-sky-50 {
    background-color: var(--color-sky-50);
  }
  .bg-sky-100 {
    background-color: var(--color-sky-100);
  }
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .bg-slate-200 {
    background-color: var(--color-slate-200);
  }
  .bg-slate-300 {
    background-color: var(--color-slate-300);
  }
  .bg-slate-400 {
    background-color: var(--color-slate-400);
  }
  .bg-slate-500 {
    background-color: var(--color-slate-500);
  }
  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }
  .bg-teal-50 {
    background-color: var(--color-teal-50);
  }
  .bg-teal-100 {
    background-color: var(--color-teal-100);
  }
  .bg-teal-500 {
    background-color: var(--color-teal-500);
  }
  .bg-teal-600 {
    background-color: var(--color-teal-600);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-trust-blue {
    background-color: var(--color-trust-blue);
  }
  .bg-trust-blue\/10 {
    background-color: color-mix(in srgb, #2B5AA0 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-trust-blue) 10%, transparent);
    }
  }
  .bg-violet-100 {
    background-color: var(--color-violet-100);
  }
  .bg-warning-orange {
    background-color: var(--color-warning-orange);
  }
  .bg-warning-orange\/5 {
    background-color: color-mix(in srgb, #ff6b35 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 5%, transparent);
    }
  }
  .bg-warning-orange\/10 {
    background-color: color-mix(in srgb, #ff6b35 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 10%, transparent);
    }
  }
  .bg-warning-orange\/15 {
    background-color: color-mix(in srgb, #ff6b35 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 15%, transparent);
    }
  }
  .bg-warning-orange\/20 {
    background-color: color-mix(in srgb, #ff6b35 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 20%, transparent);
    }
  }
  .bg-warning-orange\/90 {
    background-color: color-mix(in srgb, #ff6b35 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 90%, transparent);
    }
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/5 {
    background-color: color-mix(in srgb, #ffffff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .bg-white\/10 {
    background-color: color-mix(in srgb, #ffffff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .bg-white\/15 {
    background-color: color-mix(in srgb, #ffffff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .bg-white\/20 {
    background-color: color-mix(in srgb, #ffffff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .bg-white\/25 {
    background-color: color-mix(in srgb, #ffffff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }
  .bg-white\/30 {
    background-color: color-mix(in srgb, #ffffff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .bg-white\/50 {
    background-color: color-mix(in srgb, #ffffff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .bg-white\/60 {
    background-color: color-mix(in srgb, #ffffff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .bg-white\/80 {
    background-color: color-mix(in srgb, #ffffff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .bg-white\/85 {
    background-color: color-mix(in srgb, #ffffff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .bg-white\/90 {
    background-color: color-mix(in srgb, #ffffff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .bg-white\/95 {
    background-color: color-mix(in srgb, #ffffff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }
  .bg-white\/\[0\.03\] {
    background-color: color-mix(in srgb, #ffffff 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
  }
  .bg-yellow-50 {
    background-color: var(--color-yellow-50);
  }
  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }
  .bg-yellow-400 {
    background-color: var(--color-yellow-400);
  }
  .bg-yellow-400\/5 {
    background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yellow-400) 5%, transparent);
    }
  }
  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }
  .bg-yellow-600 {
    background-color: var(--color-yellow-600);
  }
  .bg-yellow-800 {
    background-color: var(--color-yellow-800);
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-\[\#fffbeb\] {
    --tw-gradient-from: #fffbeb;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-amber-50 {
    --tw-gradient-from: var(--color-amber-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-amber-100 {
    --tw-gradient-from: var(--color-amber-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-amber-400 {
    --tw-gradient-from: var(--color-amber-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-amber-500 {
    --tw-gradient-from: var(--color-amber-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-athens-gray {
    --tw-gradient-from: var(--color-athens-gray);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black {
    --tw-gradient-from: var(--color-black);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/50 {
    --tw-gradient-from: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/70 {
    --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/80 {
    --tw-gradient-from: color-mix(in srgb, #000 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-50 {
    --tw-gradient-from: var(--color-blue-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-100 {
    --tw-gradient-from: var(--color-blue-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-400 {
    --tw-gradient-from: var(--color-blue-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-500 {
    --tw-gradient-from: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-600 {
    --tw-gradient-from: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-crimson-red\/5 {
    --tw-gradient-from: color-mix(in srgb, #dc143c 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-crimson-red) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-crimson-red\/10 {
    --tw-gradient-from: color-mix(in srgb, #dc143c 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-crimson-red) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-cyan-50 {
    --tw-gradient-from: var(--color-cyan-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-deep-purple {
    --tw-gradient-from: var(--color-deep-purple);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-deep-purple\/5 {
    --tw-gradient-from: color-mix(in srgb, #6366f1 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-deep-purple) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-deep-purple\/10 {
    --tw-gradient-from: color-mix(in srgb, #6366f1 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-deep-purple) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-emerald-50 {
    --tw-gradient-from: var(--color-emerald-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-emerald-100 {
    --tw-gradient-from: var(--color-emerald-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-emerald-500 {
    --tw-gradient-from: var(--color-emerald-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-emerald-600 {
    --tw-gradient-from: var(--color-emerald-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-emerald\/10 {
    --tw-gradient-from: color-mix(in srgb, #50c878 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-emerald) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-forest-green {
    --tw-gradient-from: var(--color-forest-green);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-forest-green\/5 {
    --tw-gradient-from: color-mix(in srgb, #228b22 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-forest-green) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-forest-green\/10 {
    --tw-gradient-from: color-mix(in srgb, #228b22 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-forest-green) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-forest-green\/15 {
    --tw-gradient-from: color-mix(in srgb, #228b22 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-forest-green) 15%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-50 {
    --tw-gradient-from: var(--color-gray-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-100 {
    --tw-gradient-from: var(--color-gray-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-200 {
    --tw-gradient-from: var(--color-gray-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-300 {
    --tw-gradient-from: var(--color-gray-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-600 {
    --tw-gradient-from: var(--color-gray-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-700 {
    --tw-gradient-from: var(--color-gray-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-900 {
    --tw-gradient-from: var(--color-gray-900);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-green-50 {
    --tw-gradient-from: var(--color-green-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-green-100 {
    --tw-gradient-from: var(--color-green-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-green-200 {
    --tw-gradient-from: var(--color-green-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-green-400 {
    --tw-gradient-from: var(--color-green-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-green-500 {
    --tw-gradient-from: var(--color-green-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-50 {
    --tw-gradient-from: var(--color-indigo-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-100 {
    --tw-gradient-from: var(--color-indigo-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-400 {
    --tw-gradient-from: var(--color-indigo-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-500 {
    --tw-gradient-from: var(--color-indigo-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-jade-green\/5 {
    --tw-gradient-from: color-mix(in srgb, #00A86B 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-jade-green) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-orange-50 {
    --tw-gradient-from: var(--color-orange-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-orange-400 {
    --tw-gradient-from: var(--color-orange-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-orange-500 {
    --tw-gradient-from: var(--color-orange-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-pink-50 {
    --tw-gradient-from: var(--color-pink-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-pink-400 {
    --tw-gradient-from: var(--color-pink-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-pink-500 {
    --tw-gradient-from: var(--color-pink-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-purple-50 {
    --tw-gradient-from: var(--color-purple-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-purple-100 {
    --tw-gradient-from: var(--color-purple-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-purple-400 {
    --tw-gradient-from: var(--color-purple-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-purple-500 {
    --tw-gradient-from: var(--color-purple-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-purple-600 {
    --tw-gradient-from: var(--color-purple-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-red-50 {
    --tw-gradient-from: var(--color-red-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-red-100 {
    --tw-gradient-from: var(--color-red-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-red-500 {
    --tw-gradient-from: var(--color-red-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-red-600 {
    --tw-gradient-from: var(--color-red-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-science-blue {
    --tw-gradient-from: var(--color-science-blue);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-science-blue\/5 {
    --tw-gradient-from: color-mix(in srgb, #0066cc 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-science-blue\/10 {
    --tw-gradient-from: color-mix(in srgb, #0066cc 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-science-blue) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-science-blue\/15 {
    --tw-gradient-from: color-mix(in srgb, #0066cc 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-science-blue) 15%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-science-blue\/20 {
    --tw-gradient-from: color-mix(in srgb, #0066cc 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-science-blue\/40 {
    --tw-gradient-from: color-mix(in srgb, #0066cc 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-science-blue) 40%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-sky-400 {
    --tw-gradient-from: var(--color-sky-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-teal-400 {
    --tw-gradient-from: var(--color-teal-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-trust-blue\/5 {
    --tw-gradient-from: color-mix(in srgb, #2B5AA0 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-trust-blue) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-warning-orange {
    --tw-gradient-from: var(--color-warning-orange);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-warning-orange\/5 {
    --tw-gradient-from: color-mix(in srgb, #ff6b35 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-warning-orange) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-warning-orange\/10 {
    --tw-gradient-from: color-mix(in srgb, #ff6b35 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-warning-orange) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-warning-orange\/15 {
    --tw-gradient-from: color-mix(in srgb, #ff6b35 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-warning-orange) 15%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-warning-orange\/20 {
    --tw-gradient-from: color-mix(in srgb, #ff6b35 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-warning-orange) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-white {
    --tw-gradient-from: var(--color-white);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-white\/5 {
    --tw-gradient-from: color-mix(in srgb, #ffffff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-white\/90 {
    --tw-gradient-from: color-mix(in srgb, #ffffff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yellow-50 {
    --tw-gradient-from: var(--color-yellow-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yellow-100 {
    --tw-gradient-from: var(--color-yellow-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yellow-400 {
    --tw-gradient-from: var(--color-yellow-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yellow-500 {
    --tw-gradient-from: var(--color-yellow-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-athens-gray {
    --tw-gradient-via: var(--color-athens-gray);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-black\/20 {
    --tw-gradient-via: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-black\/30 {
    --tw-gradient-via: color-mix(in srgb, #000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-blue-400 {
    --tw-gradient-via: var(--color-blue-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-deep-purple {
    --tw-gradient-via: var(--color-deep-purple);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-deep-purple\/80 {
    --tw-gradient-via: color-mix(in srgb, #6366f1 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-deep-purple) 80%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-gray-200 {
    --tw-gradient-via: var(--color-gray-200);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-gray-900 {
    --tw-gradient-via: var(--color-gray-900);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-indigo-400 {
    --tw-gradient-via: var(--color-indigo-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-indigo-500 {
    --tw-gradient-via: var(--color-indigo-500);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-orange-400 {
    --tw-gradient-via: var(--color-orange-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-pink-400 {
    --tw-gradient-via: var(--color-pink-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-pink-500 {
    --tw-gradient-via: var(--color-pink-500);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-purple-400 {
    --tw-gradient-via: var(--color-purple-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-red-400 {
    --tw-gradient-via: var(--color-red-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-slate-200 {
    --tw-gradient-via: var(--color-slate-200);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-transparent {
    --tw-gradient-via: transparent;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-trust-blue\/15 {
    --tw-gradient-via: color-mix(in srgb, #2B5AA0 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-trust-blue) 15%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-white {
    --tw-gradient-via: var(--color-white);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-white\/20 {
    --tw-gradient-via: color-mix(in srgb, #ffffff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-\[\#fef3c7\] {
    --tw-gradient-to: #fef3c7;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-amber-50 {
    --tw-gradient-to: var(--color-amber-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-amber-50\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(98.7% 0.022 95.277) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-amber-50) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-amber-100 {
    --tw-gradient-to: var(--color-amber-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-amber-200 {
    --tw-gradient-to: var(--color-amber-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-amber-500 {
    --tw-gradient-to: var(--color-amber-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-amber-600 {
    --tw-gradient-to: var(--color-amber-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-athens-gray\/70 {
    --tw-gradient-to: color-mix(in srgb, #f5f5f7 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-athens-gray) 70%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-black {
    --tw-gradient-to: var(--color-black);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-blue-100 {
    --tw-gradient-to: var(--color-blue-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-blue-200 {
    --tw-gradient-to: var(--color-blue-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-blue-500 {
    --tw-gradient-to: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-blue-600 {
    --tw-gradient-to: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-blue-700 {
    --tw-gradient-to: var(--color-blue-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-blue-800 {
    --tw-gradient-to: var(--color-blue-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-crimson-red\/10 {
    --tw-gradient-to: color-mix(in srgb, #dc143c 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-crimson-red) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-cyan-100 {
    --tw-gradient-to: var(--color-cyan-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-cyan-400 {
    --tw-gradient-to: var(--color-cyan-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-deep-purple {
    --tw-gradient-to: var(--color-deep-purple);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-deep-purple\/5 {
    --tw-gradient-to: color-mix(in srgb, #6366f1 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-deep-purple) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-deep-purple\/10 {
    --tw-gradient-to: color-mix(in srgb, #6366f1 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-deep-purple) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-deep-purple\/20 {
    --tw-gradient-to: color-mix(in srgb, #6366f1 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-deep-purple) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-deep-purple\/90 {
    --tw-gradient-to: color-mix(in srgb, #6366f1 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-deep-purple) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-emerald-50 {
    --tw-gradient-to: var(--color-emerald-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-emerald-100 {
    --tw-gradient-to: var(--color-emerald-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-emerald-200 {
    --tw-gradient-to: var(--color-emerald-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-forest-green {
    --tw-gradient-to: var(--color-forest-green);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-forest-green\/5 {
    --tw-gradient-to: color-mix(in srgb, #228b22 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-forest-green) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-forest-green\/10 {
    --tw-gradient-to: color-mix(in srgb, #228b22 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-forest-green) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-forest-green\/20 {
    --tw-gradient-to: color-mix(in srgb, #228b22 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-forest-green) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-forest-green\/75 {
    --tw-gradient-to: color-mix(in srgb, #228b22 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-forest-green) 75%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-forest-green\/90 {
    --tw-gradient-to: color-mix(in srgb, #228b22 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-forest-green) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-gray-100 {
    --tw-gradient-to: var(--color-gray-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-gray-200 {
    --tw-gradient-to: var(--color-gray-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-gray-300 {
    --tw-gradient-to: var(--color-gray-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-gray-400 {
    --tw-gradient-to: var(--color-gray-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-gray-900 {
    --tw-gradient-to: var(--color-gray-900);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-green-100 {
    --tw-gradient-to: var(--color-green-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-green-200 {
    --tw-gradient-to: var(--color-green-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-green-600 {
    --tw-gradient-to: var(--color-green-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-green-700 {
    --tw-gradient-to: var(--color-green-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-50 {
    --tw-gradient-to: var(--color-indigo-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-100 {
    --tw-gradient-to: var(--color-indigo-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-200 {
    --tw-gradient-to: var(--color-indigo-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-400 {
    --tw-gradient-to: var(--color-indigo-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-500 {
    --tw-gradient-to: var(--color-indigo-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-600 {
    --tw-gradient-to: var(--color-indigo-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-jade-green\/5 {
    --tw-gradient-to: color-mix(in srgb, #00A86B 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-jade-green) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-midnight-purple {
    --tw-gradient-to: var(--color-midnight-purple);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-midnight-purple\/10 {
    --tw-gradient-to: color-mix(in srgb, #483d8b 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-midnight-purple) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-orange-400 {
    --tw-gradient-to: var(--color-orange-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-orange-500 {
    --tw-gradient-to: var(--color-orange-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-orange-600 {
    --tw-gradient-to: var(--color-orange-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-pink-400 {
    --tw-gradient-to: var(--color-pink-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-pink-500 {
    --tw-gradient-to: var(--color-pink-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-pink-600 {
    --tw-gradient-to: var(--color-pink-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-purple-50 {
    --tw-gradient-to: var(--color-purple-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-purple-100 {
    --tw-gradient-to: var(--color-purple-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-purple-200 {
    --tw-gradient-to: var(--color-purple-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-purple-400 {
    --tw-gradient-to: var(--color-purple-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-purple-500 {
    --tw-gradient-to: var(--color-purple-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-purple-600 {
    --tw-gradient-to: var(--color-purple-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-purple-700 {
    --tw-gradient-to: var(--color-purple-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-red-50 {
    --tw-gradient-to: var(--color-red-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-red-50\/30 {
    --tw-gradient-to: color-mix(in srgb, oklch(97.1% 0.013 17.38) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-red-50) 30%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-red-100 {
    --tw-gradient-to: var(--color-red-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-red-200 {
    --tw-gradient-to: var(--color-red-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-red-400 {
    --tw-gradient-to: var(--color-red-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-red-500 {
    --tw-gradient-to: var(--color-red-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-red-600 {
    --tw-gradient-to: var(--color-red-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-red-700 {
    --tw-gradient-to: var(--color-red-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-rose-50 {
    --tw-gradient-to: var(--color-rose-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-rose-500 {
    --tw-gradient-to: var(--color-rose-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-science-blue {
    --tw-gradient-to: var(--color-science-blue);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-science-blue\/5 {
    --tw-gradient-to: color-mix(in srgb, #0066cc 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-science-blue\/10 {
    --tw-gradient-to: color-mix(in srgb, #0066cc 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-science-blue) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-science-blue\/15 {
    --tw-gradient-to: color-mix(in srgb, #0066cc 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-science-blue) 15%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-science-blue\/20 {
    --tw-gradient-to: color-mix(in srgb, #0066cc 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-science-blue\/50 {
    --tw-gradient-to: color-mix(in srgb, #0066cc 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-science-blue) 50%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-science-blue\/75 {
    --tw-gradient-to: color-mix(in srgb, #0066cc 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-science-blue) 75%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-science-blue\/80 {
    --tw-gradient-to: color-mix(in srgb, #0066cc 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-science-blue) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-shark {
    --tw-gradient-to: var(--color-shark);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-shark\/5 {
    --tw-gradient-to: color-mix(in srgb, #1d1d1f 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-shark) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-sky-500 {
    --tw-gradient-to: var(--color-sky-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-teal-500 {
    --tw-gradient-to: var(--color-teal-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-teal-600 {
    --tw-gradient-to: var(--color-teal-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-trust-blue {
    --tw-gradient-to: var(--color-trust-blue);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-trust-blue\/5 {
    --tw-gradient-to: color-mix(in srgb, #2B5AA0 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-trust-blue) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-trust-blue\/10 {
    --tw-gradient-to: color-mix(in srgb, #2B5AA0 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-trust-blue) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-trust-blue\/15 {
    --tw-gradient-to: color-mix(in srgb, #2B5AA0 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-trust-blue) 15%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-violet-50 {
    --tw-gradient-to: var(--color-violet-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-warning-orange {
    --tw-gradient-to: var(--color-warning-orange);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-warning-orange\/5 {
    --tw-gradient-to: color-mix(in srgb, #ff6b35 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-warning-orange) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-warning-orange\/10 {
    --tw-gradient-to: color-mix(in srgb, #ff6b35 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-warning-orange) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-white {
    --tw-gradient-to: var(--color-white);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-white\/50 {
    --tw-gradient-to: color-mix(in srgb, #ffffff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yellow-50\/30 {
    --tw-gradient-to: color-mix(in srgb, oklch(98.7% 0.026 102.212) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yellow-50) 30%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yellow-200 {
    --tw-gradient-to: var(--color-yellow-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yellow-500 {
    --tw-gradient-to: var(--color-yellow-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yellow-600 {
    --tw-gradient-to: var(--color-yellow-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .bg-\[length\:200\%_100\%\] {
    background-size: 200% 100%;
  }
  .bg-clip-text {
    background-clip: text;
  }
  .mask-repeat {
    mask-repeat: repeat;
  }
  .fill-current {
    fill: currentcolor;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-center {
    object-position: center;
  }
  .\!p-0 {
    padding: calc(var(--spacing) * 0) !important;
  }
  .\!p-3 {
    padding: calc(var(--spacing) * 3) !important;
  }
  .\!p-4 {
    padding: calc(var(--spacing) * 4) !important;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-0\.5 {
    padding: calc(var(--spacing) * 0.5);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-7 {
    padding: calc(var(--spacing) * 7);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .p-16 {
    padding: calc(var(--spacing) * 16);
  }
  .p-\[1\.618rem\] {
    padding: 1.618rem;
  }
  .\!px-3 {
    padding-inline: calc(var(--spacing) * 3) !important;
  }
  .\!px-8 {
    padding-inline: calc(var(--spacing) * 8) !important;
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-0\.5 {
    padding-inline: calc(var(--spacing) * 0.5);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }
  .\!py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5) !important;
  }
  .\!py-3 {
    padding-block: calc(var(--spacing) * 3) !important;
  }
  .\!py-4 {
    padding-block: calc(var(--spacing) * 4) !important;
  }
  .\!py-8 {
    padding-block: calc(var(--spacing) * 8) !important;
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-9 {
    padding-block: calc(var(--spacing) * 9);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  .py-px {
    padding-block: 1px;
  }
  .\!pt-4 {
    padding-top: calc(var(--spacing) * 4) !important;
  }
  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-3\.5 {
    padding-top: calc(var(--spacing) * 3.5);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }
  .pt-32 {
    padding-top: calc(var(--spacing) * 32);
  }
  .pt-\[68px\] {
    padding-top: 68px;
  }
  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }
  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }
  .pr-16 {
    padding-right: calc(var(--spacing) * 16);
  }
  .pr-20 {
    padding-right: calc(var(--spacing) * 20);
  }
  .\!pb-0 {
    padding-bottom: calc(var(--spacing) * 0) !important;
  }
  .\!pb-2 {
    padding-bottom: calc(var(--spacing) * 2) !important;
  }
  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }
  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
  .\!pl-9 {
    padding-left: calc(var(--spacing) * 9) !important;
  }
  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-7 {
    padding-left: calc(var(--spacing) * 7);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }
  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-baseline {
    vertical-align: baseline;
  }
  .align-middle {
    vertical-align: middle;
  }
  .align-text-bottom {
    vertical-align: text-bottom;
  }
  .align-top {
    vertical-align: top;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .\!text-lg {
    font-size: var(--text-lg) !important;
    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[0\.5rem\] {
    font-size: 0.5rem;
  }
  .text-\[0\.6rem\] {
    font-size: 0.6rem;
  }
  .text-\[0\.7rem\] {
    font-size: 0.7rem;
  }
  .text-\[0\.8rem\] {
    font-size: 0.8rem;
  }
  .text-\[0\.65rem\] {
    font-size: 0.65rem;
  }
  .text-\[0\.68rem\] {
    font-size: 0.68rem;
  }
  .text-\[0\.78rem\] {
    font-size: 0.78rem;
  }
  .text-\[0\.95rem\] {
    font-size: 0.95rem;
  }
  .text-\[0\.625rem\] {
    font-size: 0.625rem;
  }
  .text-\[0\.6875rem\] {
    font-size: 0.6875rem;
  }
  .text-\[0\.9375rem\] {
    font-size: 0.9375rem;
  }
  .text-\[0px\] {
    font-size: 0px;
  }
  .text-\[5px\] {
    font-size: 5px;
  }
  .text-\[6rem\] {
    font-size: 6rem;
  }
  .text-\[7px\] {
    font-size: 7px;
  }
  .text-\[8px\] {
    font-size: 8px;
  }
  .text-\[8rem\] {
    font-size: 8rem;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[28px\] {
    font-size: 28px;
  }
  .text-\[34px\] {
    font-size: 34px;
  }
  .text-\[44px\] {
    font-size: 44px;
  }
  .text-\[64px\] {
    font-size: 64px;
  }
  .text-\[80px\] {
    font-size: 80px;
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.2em\] {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .tracking-\[0\.07em\] {
    --tw-tracking: 0.07em;
    letter-spacing: 0.07em;
  }
  .tracking-\[0\.08em\] {
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
  }
  .tracking-\[0\.16em\] {
    --tw-tracking: 0.16em;
    letter-spacing: 0.16em;
  }
  .tracking-\[0\.18em\] {
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
  }
  .tracking-\[0\.28em\] {
    --tw-tracking: 0.28em;
    letter-spacing: 0.28em;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-nowrap {
    text-wrap: nowrap;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .\!text-crimson-red {
    color: var(--color-crimson-red) !important;
  }
  .\!text-forest-green {
    color: var(--color-forest-green) !important;
  }
  .text-\[\#6b6b66\] {
    color: #6b6b66;
  }
  .text-\[\#9a9a93\] {
    color: #9a9a93;
  }
  .text-\[\#444\] {
    color: #444;
  }
  .text-\[\#666\] {
    color: #666;
  }
  .text-\[\#417690\] {
    color: #417690;
  }
  .text-\[var\(--cd-color-primary\)\] {
    color: var(--cd-color-primary);
  }
  .text-\[var\(--cd-text-primary\)\] {
    color: var(--cd-text-primary);
  }
  .text-\[var\(--cd-text-secondary\)\] {
    color: var(--cd-text-secondary);
  }
  .text-\[var\(--cd-text-tertiary\)\] {
    color: var(--cd-text-tertiary);
  }
  .text-amber-300 {
    color: var(--color-amber-300);
  }
  .text-amber-400 {
    color: var(--color-amber-400);
  }
  .text-amber-500 {
    color: var(--color-amber-500);
  }
  .text-amber-600 {
    color: var(--color-amber-600);
  }
  .text-amber-700 {
    color: var(--color-amber-700);
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-amber-900 {
    color: var(--color-amber-900);
  }
  .text-amber-950 {
    color: var(--color-amber-950);
  }
  .text-athens-gray {
    color: var(--color-athens-gray);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-blue-100 {
    color: var(--color-blue-100);
  }
  .text-blue-200 {
    color: var(--color-blue-200);
  }
  .text-blue-300 {
    color: var(--color-blue-300);
  }
  .text-blue-400 {
    color: var(--color-blue-400);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-blue-700 {
    color: var(--color-blue-700);
  }
  .text-blue-800 {
    color: var(--color-blue-800);
  }
  .text-blue-900 {
    color: var(--color-blue-900);
  }
  .text-crimson-red {
    color: var(--color-crimson-red);
  }
  .text-crimson-red\/80 {
    color: color-mix(in srgb, #dc143c 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-crimson-red) 80%, transparent);
    }
  }
  .text-cyan-500 {
    color: var(--color-cyan-500);
  }
  .text-cyan-600 {
    color: var(--color-cyan-600);
  }
  .text-cyan-700 {
    color: var(--color-cyan-700);
  }
  .text-cyan-800 {
    color: var(--color-cyan-800);
  }
  .text-deep-purple {
    color: var(--color-deep-purple);
  }
  .text-deep-purple\/50 {
    color: color-mix(in srgb, #6366f1 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-deep-purple) 50%, transparent);
    }
  }
  .text-deep-purple\/70 {
    color: color-mix(in srgb, #6366f1 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-deep-purple) 70%, transparent);
    }
  }
  .text-emerald {
    color: var(--color-emerald);
  }
  .text-emerald-400 {
    color: var(--color-emerald-400);
  }
  .text-emerald-500 {
    color: var(--color-emerald-500);
  }
  .text-emerald-600 {
    color: var(--color-emerald-600);
  }
  .text-emerald-700 {
    color: var(--color-emerald-700);
  }
  .text-emerald-800 {
    color: var(--color-emerald-800);
  }
  .text-forest-green {
    color: var(--color-forest-green);
  }
  .text-forest-green\/70 {
    color: color-mix(in srgb, #228b22 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-forest-green) 70%, transparent);
    }
  }
  .text-gray-100 {
    color: var(--color-gray-100);
  }
  .text-gray-200 {
    color: var(--color-gray-200);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-green-300 {
    color: var(--color-green-300);
  }
  .text-green-400 {
    color: var(--color-green-400);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-green-900 {
    color: var(--color-green-900);
  }
  .text-indigo-400 {
    color: var(--color-indigo-400);
  }
  .text-indigo-500 {
    color: var(--color-indigo-500);
  }
  .text-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-indigo-700 {
    color: var(--color-indigo-700);
  }
  .text-indigo-800 {
    color: var(--color-indigo-800);
  }
  .text-indigo-900 {
    color: var(--color-indigo-900);
  }
  .text-inherit {
    color: inherit;
  }
  .text-jade-green {
    color: var(--color-jade-green);
  }
  .text-midnight-purple {
    color: var(--color-midnight-purple);
  }
  .text-neutral-400 {
    color: var(--color-neutral-400);
  }
  .text-neutral-500 {
    color: var(--color-neutral-500);
  }
  .text-neutral-600 {
    color: var(--color-neutral-600);
  }
  .text-neutral-700 {
    color: var(--color-neutral-700);
  }
  .text-neutral-900 {
    color: var(--color-neutral-900);
  }
  .text-orange-400 {
    color: var(--color-orange-400);
  }
  .text-orange-500 {
    color: var(--color-orange-500);
  }
  .text-orange-600 {
    color: var(--color-orange-600);
  }
  .text-orange-700 {
    color: var(--color-orange-700);
  }
  .text-orange-800 {
    color: var(--color-orange-800);
  }
  .text-orange-900 {
    color: var(--color-orange-900);
  }
  .text-pink-500 {
    color: var(--color-pink-500);
  }
  .text-pink-600 {
    color: var(--color-pink-600);
  }
  .text-pink-800 {
    color: var(--color-pink-800);
  }
  .text-platinum-silver {
    color: var(--color-platinum-silver);
  }
  .text-premium-gold {
    color: var(--color-premium-gold);
  }
  .text-purple-100 {
    color: var(--color-purple-100);
  }
  .text-purple-300 {
    color: var(--color-purple-300);
  }
  .text-purple-400 {
    color: var(--color-purple-400);
  }
  .text-purple-500 {
    color: var(--color-purple-500);
  }
  .text-purple-600 {
    color: var(--color-purple-600);
  }
  .text-purple-700 {
    color: var(--color-purple-700);
  }
  .text-purple-800 {
    color: var(--color-purple-800);
  }
  .text-purple-900 {
    color: var(--color-purple-900);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-500\/70 {
    color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-500) 70%, transparent);
    }
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-red-900 {
    color: var(--color-red-900);
  }
  .text-rose-400 {
    color: var(--color-rose-400);
  }
  .text-rose-500 {
    color: var(--color-rose-500);
  }
  .text-rose-600 {
    color: var(--color-rose-600);
  }
  .text-rose-700 {
    color: var(--color-rose-700);
  }
  .text-rose-800 {
    color: var(--color-rose-800);
  }
  .text-science-blue {
    color: var(--color-science-blue);
  }
  .text-science-blue\/60 {
    color: color-mix(in srgb, #0066cc 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-science-blue) 60%, transparent);
    }
  }
  .text-science-blue\/70 {
    color: color-mix(in srgb, #0066cc 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-science-blue) 70%, transparent);
    }
  }
  .text-science-blue\/80 {
    color: color-mix(in srgb, #0066cc 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-science-blue) 80%, transparent);
    }
  }
  .text-shark {
    color: var(--color-shark);
  }
  .text-shark\/25 {
    color: color-mix(in srgb, #1d1d1f 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 25%, transparent);
    }
  }
  .text-shark\/30 {
    color: color-mix(in srgb, #1d1d1f 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 30%, transparent);
    }
  }
  .text-shark\/35 {
    color: color-mix(in srgb, #1d1d1f 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 35%, transparent);
    }
  }
  .text-shark\/40 {
    color: color-mix(in srgb, #1d1d1f 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 40%, transparent);
    }
  }
  .text-shark\/45 {
    color: color-mix(in srgb, #1d1d1f 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 45%, transparent);
    }
  }
  .text-shark\/50 {
    color: color-mix(in srgb, #1d1d1f 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 50%, transparent);
    }
  }
  .text-shark\/55 {
    color: color-mix(in srgb, #1d1d1f 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 55%, transparent);
    }
  }
  .text-shark\/60 {
    color: color-mix(in srgb, #1d1d1f 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 60%, transparent);
    }
  }
  .text-shark\/65 {
    color: color-mix(in srgb, #1d1d1f 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 65%, transparent);
    }
  }
  .text-shark\/70 {
    color: color-mix(in srgb, #1d1d1f 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 70%, transparent);
    }
  }
  .text-shark\/75 {
    color: color-mix(in srgb, #1d1d1f 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 75%, transparent);
    }
  }
  .text-shark\/80 {
    color: color-mix(in srgb, #1d1d1f 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 80%, transparent);
    }
  }
  .text-shark\/85 {
    color: color-mix(in srgb, #1d1d1f 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-shark) 85%, transparent);
    }
  }
  .text-sky-500 {
    color: var(--color-sky-500);
  }
  .text-sky-600 {
    color: var(--color-sky-600);
  }
  .text-sky-700 {
    color: var(--color-sky-700);
  }
  .text-sky-800 {
    color: var(--color-sky-800);
  }
  .text-sky-900 {
    color: var(--color-sky-900);
  }
  .text-slate-200 {
    color: var(--color-slate-200);
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-800 {
    color: var(--color-slate-800);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-teal-500 {
    color: var(--color-teal-500);
  }
  .text-teal-600 {
    color: var(--color-teal-600);
  }
  .text-teal-700 {
    color: var(--color-teal-700);
  }
  .text-teal-800 {
    color: var(--color-teal-800);
  }
  .text-transparent {
    color: transparent;
  }
  .text-trust-blue {
    color: var(--color-trust-blue);
  }
  .text-violet-600 {
    color: var(--color-violet-600);
  }
  .text-violet-700 {
    color: var(--color-violet-700);
  }
  .text-violet-800 {
    color: var(--color-violet-800);
  }
  .text-warning-orange {
    color: var(--color-warning-orange);
  }
  .text-warning-orange\/70 {
    color: color-mix(in srgb, #ff6b35 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-warning-orange) 70%, transparent);
    }
  }
  .text-warning-orange\/80 {
    color: color-mix(in srgb, #ff6b35 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-warning-orange) 80%, transparent);
    }
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/50 {
    color: color-mix(in srgb, #ffffff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .text-white\/60 {
    color: color-mix(in srgb, #ffffff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .text-white\/70 {
    color: color-mix(in srgb, #ffffff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .text-white\/75 {
    color: color-mix(in srgb, #ffffff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }
  .text-white\/80 {
    color: color-mix(in srgb, #ffffff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .text-white\/90 {
    color: color-mix(in srgb, #ffffff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .text-yellow-200 {
    color: var(--color-yellow-200);
  }
  .text-yellow-300 {
    color: var(--color-yellow-300);
  }
  .text-yellow-400 {
    color: var(--color-yellow-400);
  }
  .text-yellow-500 {
    color: var(--color-yellow-500);
  }
  .text-yellow-600 {
    color: var(--color-yellow-600);
  }
  .text-yellow-700 {
    color: var(--color-yellow-700);
  }
  .text-yellow-800 {
    color: var(--color-yellow-800);
  }
  .text-yellow-900 {
    color: var(--color-yellow-900);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .normal-case {
    text-transform: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .overline {
    text-decoration-line: overline;
  }
  .underline {
    text-decoration-line: underline;
  }
  .decoration-gray-300 {
    text-decoration-color: var(--color-gray-300);
  }
  .decoration-gray-400 {
    text-decoration-color: var(--color-gray-400);
  }
  .decoration-slate-300 {
    text-decoration-color: var(--color-slate-300);
  }
  .decoration-1 {
    text-decoration-thickness: 1px;
  }
  .decoration-2 {
    text-decoration-thickness: 2px;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .subpixel-antialiased {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }
  .placeholder-gray-400 {
    &::placeholder {
      color: var(--color-gray-400);
    }
  }
  .placeholder-gray-500 {
    &::placeholder {
      color: var(--color-gray-500);
    }
  }
  .accent-emerald-500 {
    accent-color: var(--color-emerald-500);
  }
  .accent-gray-400 {
    accent-color: var(--color-gray-400);
  }
  .accent-lime-500 {
    accent-color: var(--color-lime-500);
  }
  .accent-orange-500 {
    accent-color: var(--color-orange-500);
  }
  .accent-red-500 {
    accent-color: var(--color-red-500);
  }
  .accent-science-blue {
    accent-color: var(--color-science-blue);
  }
  .accent-yellow-500 {
    accent-color: var(--color-yellow-500);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-5 {
    opacity: 5%;
  }
  .opacity-10 {
    opacity: 10%;
  }
  .opacity-15 {
    opacity: 15%;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-85 {
    opacity: 85%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .mix-blend-multiply {
    mix-blend-mode: multiply;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_-4px_24px_rgba\(15\,23\,42\,0\.08\)\] {
    --tw-shadow: 0 -4px 24px var(--tw-shadow-color, rgba(15,23,42,0.08));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-8 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[3px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-amber-200 {
    --tw-shadow-color: oklch(92.4% 0.12 95.746);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-amber-200) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-blue-200 {
    --tw-shadow-color: oklch(88.2% 0.059 254.128);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-blue-200) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-orange-900\/20 {
    --tw-shadow-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .ring-\[var\(--cd-bg-secondary\,\#fff\)\] {
    --tw-ring-color: var(--cd-bg-secondary,#fff);
  }
  .ring-\[var\(--cd-color-primary\)\] {
    --tw-ring-color: var(--cd-color-primary);
  }
  .ring-amber-300\/50 {
    --tw-ring-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-amber-300) 50%, transparent);
    }
  }
  .ring-blue-500 {
    --tw-ring-color: var(--color-blue-500);
  }
  .ring-blue-600 {
    --tw-ring-color: var(--color-blue-600);
  }
  .ring-crimson-red {
    --tw-ring-color: var(--color-crimson-red);
  }
  .ring-emerald\/30 {
    --tw-ring-color: color-mix(in srgb, #50c878 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-emerald) 30%, transparent);
    }
  }
  .ring-forest-green\/5 {
    --tw-ring-color: color-mix(in srgb, #228b22 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-forest-green) 5%, transparent);
    }
  }
  .ring-forest-green\/15 {
    --tw-ring-color: color-mix(in srgb, #228b22 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-forest-green) 15%, transparent);
    }
  }
  .ring-gray-100 {
    --tw-ring-color: var(--color-gray-100);
  }
  .ring-gray-300 {
    --tw-ring-color: var(--color-gray-300);
  }
  .ring-gray-900 {
    --tw-ring-color: var(--color-gray-900);
  }
  .ring-green-500 {
    --tw-ring-color: var(--color-green-500);
  }
  .ring-orange-500 {
    --tw-ring-color: var(--color-orange-500);
  }
  .ring-red-200 {
    --tw-ring-color: var(--color-red-200);
  }
  .ring-red-500 {
    --tw-ring-color: var(--color-red-500);
  }
  .ring-science-blue {
    --tw-ring-color: var(--color-science-blue);
  }
  .ring-science-blue\/5 {
    --tw-ring-color: color-mix(in srgb, #0066cc 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
    }
  }
  .ring-transparent {
    --tw-ring-color: transparent;
  }
  .ring-warning-orange\/15 {
    --tw-ring-color: color-mix(in srgb, #ff6b35 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-warning-orange) 15%, transparent);
    }
  }
  .ring-white {
    --tw-ring-color: var(--color-white);
  }
  .ring-yellow-500 {
    --tw-ring-color: var(--color-yellow-500);
  }
  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .blur-sm {
    --tw-blur: blur(var(--blur-sm));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .blur-xl {
    --tw-blur: blur(var(--blur-xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-sm {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .\!filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[0\.5px\] {
    --tw-backdrop-blur: blur(0.5px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-1000 {
    --tw-duration: 1000ms;
    transition-duration: 1000ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[sub\:\<pk\>\] {
    sub: <pk>;
  }
  .\[sub\:\<subscription_pk\>\] {
    sub: <subscription pk>;
  }
  .\[tool\:pytest\] {
    tool: pytest;
  }
  .group-open\:rotate-90 {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      rotate: 90deg;
    }
  }
  .group-open\:rotate-180 {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      rotate: 180deg;
    }
  }
  .group-hover\:block {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: block;
      }
    }
  }
  .group-hover\:translate-x-0\.5 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:translate-x-1 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:translate-x-full {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:-translate-y-1 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:translate-y-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:translate-y-0\.5 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:scale-105 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-\[1\.58\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        scale: 1.58;
      }
    }
  }
  .group-hover\:animate-pulse {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        animation: var(--animate-pulse);
      }
    }
  }
  .group-hover\:border-emerald\/40 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #50c878 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-emerald) 40%, transparent);
        }
      }
    }
  }
  .group-hover\:border-gray-300 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        border-color: var(--color-gray-300);
      }
    }
  }
  .group-hover\:border-shark {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        border-color: var(--color-shark);
      }
    }
  }
  .group-hover\:bg-black\/20 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
        }
      }
    }
  }
  .group-hover\:bg-blue-200 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-blue-200);
      }
    }
  }
  .group-hover\:bg-crimson-red\/20 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #dc143c 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-crimson-red) 20%, transparent);
        }
      }
    }
  }
  .group-hover\:bg-deep-purple\/20 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #6366f1 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-deep-purple) 20%, transparent);
        }
      }
    }
  }
  .group-hover\:bg-forest-green\/20 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #228b22 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-forest-green) 20%, transparent);
        }
      }
    }
  }
  .group-hover\:bg-gray-300 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .group-hover\:bg-green-200 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-green-200);
      }
    }
  }
  .group-hover\:bg-green-500 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-green-500);
      }
    }
  }
  .group-hover\:bg-midnight-purple\/20 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #483d8b 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-midnight-purple) 20%, transparent);
        }
      }
    }
  }
  .group-hover\:bg-orange-200 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-orange-200);
      }
    }
  }
  .group-hover\:bg-pink-200 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-pink-200);
      }
    }
  }
  .group-hover\:bg-purple-200 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-purple-200);
      }
    }
  }
  .group-hover\:bg-red-200 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-red-200);
      }
    }
  }
  .group-hover\:bg-science-blue\/20 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #0066cc 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
        }
      }
    }
  }
  .group-hover\:bg-shark {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-shark);
      }
    }
  }
  .group-hover\:bg-warning-orange\/20 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ff6b35 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-warning-orange) 20%, transparent);
        }
      }
    }
  }
  .group-hover\:from-deep-purple\/20 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-gradient-from: color-mix(in srgb, #6366f1 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-gradient-from: color-mix(in oklab, var(--color-deep-purple) 20%, transparent);
        }
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .group-hover\:to-midnight-purple\/20 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-gradient-to: color-mix(in srgb, #483d8b 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-gradient-to: color-mix(in oklab, var(--color-midnight-purple) 20%, transparent);
        }
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .group-hover\:text-amber-400 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-amber-400);
      }
    }
  }
  .group-hover\:text-blue-500 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-blue-500);
      }
    }
  }
  .group-hover\:text-blue-600 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .group-hover\:text-crimson-red {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-crimson-red);
      }
    }
  }
  .group-hover\:text-deep-purple {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-deep-purple);
      }
    }
  }
  .group-hover\:text-gray-500 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-gray-500);
      }
    }
  }
  .group-hover\:text-gray-600 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .group-hover\:text-science-blue {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-science-blue);
      }
    }
  }
  .group-hover\:text-shark {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-shark);
      }
    }
  }
  .group-hover\:text-warning-orange {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-warning-orange);
      }
    }
  }
  .group-hover\:text-white {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .group-hover\:underline {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .group-hover\:opacity-10 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 10%;
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\:shadow-md {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .group-hover\:ring-2 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .group-hover\:brightness-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-brightness: brightness(110%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
  }
  .group-hover\/img\:scale-105 {
    &:is(:where(.group\/img):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .peer-checked\:border-black {
    &:is(:where(.peer):checked ~ *) {
      border-color: var(--color-black);
    }
  }
  .peer-checked\:border-deep-purple {
    &:is(:where(.peer):checked ~ *) {
      border-color: var(--color-deep-purple);
    }
  }
  .peer-checked\:border-gray-600 {
    &:is(:where(.peer):checked ~ *) {
      border-color: var(--color-gray-600);
    }
  }
  .peer-checked\:border-gray-700 {
    &:is(:where(.peer):checked ~ *) {
      border-color: var(--color-gray-700);
    }
  }
  .peer-checked\:border-science-blue {
    &:is(:where(.peer):checked ~ *) {
      border-color: var(--color-science-blue);
    }
  }
  .peer-checked\:border-warning-orange {
    &:is(:where(.peer):checked ~ *) {
      border-color: var(--color-warning-orange);
    }
  }
  .peer-checked\:bg-\[var\(--cd-color-primary\)\] {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--cd-color-primary);
    }
  }
  .peer-checked\:bg-blue-600 {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--color-blue-600);
    }
  }
  .peer-checked\:bg-green-600 {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--color-green-600);
    }
  }
  .peer-checked\:bg-orange-50 {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--color-orange-50);
    }
  }
  .peer-checked\:bg-purple-50 {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--color-purple-50);
    }
  }
  .peer-checked\:bg-science-blue {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--color-science-blue);
    }
  }
  .peer-checked\:bg-gradient-to-br {
    &:is(:where(.peer):checked ~ *) {
      --tw-gradient-position: to bottom right in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops));
    }
  }
  .peer-checked\:from-blue-50 {
    &:is(:where(.peer):checked ~ *) {
      --tw-gradient-from: var(--color-blue-50);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .peer-checked\:from-gray-50 {
    &:is(:where(.peer):checked ~ *) {
      --tw-gradient-from: var(--color-gray-50);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .peer-checked\:from-gray-100 {
    &:is(:where(.peer):checked ~ *) {
      --tw-gradient-from: var(--color-gray-100);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .peer-checked\:from-orange-50 {
    &:is(:where(.peer):checked ~ *) {
      --tw-gradient-from: var(--color-orange-50);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .peer-checked\:from-purple-50 {
    &:is(:where(.peer):checked ~ *) {
      --tw-gradient-from: var(--color-purple-50);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .peer-checked\:from-yellow-50 {
    &:is(:where(.peer):checked ~ *) {
      --tw-gradient-from: var(--color-yellow-50);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .peer-checked\:to-white {
    &:is(:where(.peer):checked ~ *) {
      --tw-gradient-to: var(--color-white);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .peer-checked\:opacity-100 {
    &:is(:where(.peer):checked ~ *) {
      opacity: 100%;
    }
  }
  .peer-focus\:ring-4 {
    &:is(:where(.peer):focus ~ *) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .peer-focus\:ring-blue-300 {
    &:is(:where(.peer):focus ~ *) {
      --tw-ring-color: var(--color-blue-300);
    }
  }
  .peer-focus\:ring-green-300 {
    &:is(:where(.peer):focus ~ *) {
      --tw-ring-color: var(--color-green-300);
    }
  }
  .peer-focus\:ring-science-blue\/20 {
    &:is(:where(.peer):focus ~ *) {
      --tw-ring-color: color-mix(in srgb, #0066cc 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
      }
    }
  }
  .peer-focus\:outline-none {
    &:is(:where(.peer):focus ~ *) {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .selection\:text-white {
    & *::selection {
      color: var(--color-white);
    }
    &::selection {
      color: var(--color-white);
    }
  }
  .file\:mr-4 {
    &::file-selector-button {
      margin-right: calc(var(--spacing) * 4);
    }
  }
  .file\:rounded-full {
    &::file-selector-button {
      border-radius: calc(infinity * 1px);
    }
  }
  .file\:border-0 {
    &::file-selector-button {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .file\:bg-blue-50 {
    &::file-selector-button {
      background-color: var(--color-blue-50);
    }
  }
  .file\:px-4 {
    &::file-selector-button {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .file\:py-2 {
    &::file-selector-button {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .file\:text-sm {
    &::file-selector-button {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .file\:font-semibold {
    &::file-selector-button {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
  }
  .file\:text-blue-700 {
    &::file-selector-button {
      color: var(--color-blue-700);
    }
  }
  .placeholder\:text-gray-400 {
    &::placeholder {
      color: var(--color-gray-400);
    }
  }
  .after\:absolute {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .after\:top-\[2px\] {
    &::after {
      content: var(--tw-content);
      top: 2px;
    }
  }
  .after\:left-\[2px\] {
    &::after {
      content: var(--tw-content);
      left: 2px;
    }
  }
  .after\:h-5 {
    &::after {
      content: var(--tw-content);
      height: calc(var(--spacing) * 5);
    }
  }
  .after\:w-5 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 5);
    }
  }
  .after\:rounded-full {
    &::after {
      content: var(--tw-content);
      border-radius: calc(infinity * 1px);
    }
  }
  .after\:border {
    &::after {
      content: var(--tw-content);
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .after\:border-gray-300 {
    &::after {
      content: var(--tw-content);
      border-color: var(--color-gray-300);
    }
  }
  .after\:bg-white {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-white);
    }
  }
  .after\:transition-all {
    &::after {
      content: var(--tw-content);
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .after\:content-\[\'\'\] {
    &::after {
      --tw-content: '';
      content: var(--tw-content);
    }
  }
  .peer-checked\:after\:translate-x-full {
    &:is(:where(.peer):checked ~ *) {
      &::after {
        content: var(--tw-content);
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .peer-checked\:after\:border-white {
    &:is(:where(.peer):checked ~ *) {
      &::after {
        content: var(--tw-content);
        border-color: var(--color-white);
      }
    }
  }
  .last\:mb-0 {
    &:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .last\:border-0 {
    &:last-child {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .last\:border-b-0 {
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .last\:pb-0 {
    &:last-child {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .focus-within\:border-science-blue {
    &:focus-within {
      border-color: var(--color-science-blue);
    }
  }
  .focus-within\:opacity-100 {
    &:focus-within {
      opacity: 100%;
    }
  }
  .focus-within\:ring-2 {
    &:focus-within {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-within\:ring-science-blue {
    &:focus-within {
      --tw-ring-color: var(--color-science-blue);
    }
  }
  .hover\:z-10 {
    &:hover {
      @media (hover: hover) {
        z-index: 10;
      }
    }
  }
  .hover\:translate-x-1 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:-translate-y-0\.5 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:-translate-y-1 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:translate-y-\[-4px\] {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: -4px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:scale-105 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-110 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-\[1\.03\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.03;
      }
    }
  }
  .hover\:rotate-0 {
    &:hover {
      @media (hover: hover) {
        rotate: 0deg;
      }
    }
  }
  .hover\:gap-3 {
    &:hover {
      @media (hover: hover) {
        gap: calc(var(--spacing) * 3);
      }
    }
  }
  .hover\:border-\[\#417690\] {
    &:hover {
      @media (hover: hover) {
        border-color: #417690;
      }
    }
  }
  .hover\:border-amber-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-amber-200);
      }
    }
  }
  .hover\:border-athens-gray {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-athens-gray);
      }
    }
  }
  .hover\:border-black {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-black);
      }
    }
  }
  .hover\:border-blue-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-200);
      }
    }
  }
  .hover\:border-blue-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-300);
      }
    }
  }
  .hover\:border-blue-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-500);
      }
    }
  }
  .hover\:border-crimson-red {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-crimson-red);
      }
    }
  }
  .hover\:border-deep-purple {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-deep-purple);
      }
    }
  }
  .hover\:border-deep-purple\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #6366f1 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-deep-purple) 40%, transparent);
        }
      }
    }
  }
  .hover\:border-emerald-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-emerald-200);
      }
    }
  }
  .hover\:border-emerald-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-emerald-500);
      }
    }
  }
  .hover\:border-forest-green {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-forest-green);
      }
    }
  }
  .hover\:border-forest-green\/30 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #228b22 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-forest-green) 30%, transparent);
        }
      }
    }
  }
  .hover\:border-forest-green\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #228b22 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-forest-green) 40%, transparent);
        }
      }
    }
  }
  .hover\:border-forest-green\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #228b22 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-forest-green) 50%, transparent);
        }
      }
    }
  }
  .hover\:border-gray-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-200);
      }
    }
  }
  .hover\:border-gray-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-300);
      }
    }
  }
  .hover\:border-gray-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-400);
      }
    }
  }
  .hover\:border-gray-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-600);
      }
    }
  }
  .hover\:border-gray-700 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-700);
      }
    }
  }
  .hover\:border-gray-900 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-900);
      }
    }
  }
  .hover\:border-green-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-green-300);
      }
    }
  }
  .hover\:border-green-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-green-400);
      }
    }
  }
  .hover\:border-orange-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-orange-300);
      }
    }
  }
  .hover\:border-purple-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-purple-200);
      }
    }
  }
  .hover\:border-purple-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-purple-300);
      }
    }
  }
  .hover\:border-red-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-300);
      }
    }
  }
  .hover\:border-red-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-400);
      }
    }
  }
  .hover\:border-red-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-600);
      }
    }
  }
  .hover\:border-red-700 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-700);
      }
    }
  }
  .hover\:border-science-blue {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-science-blue);
      }
    }
  }
  .hover\:border-science-blue\/30 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #0066cc 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-science-blue) 30%, transparent);
        }
      }
    }
  }
  .hover\:border-science-blue\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #0066cc 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-science-blue) 40%, transparent);
        }
      }
    }
  }
  .hover\:border-science-blue\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #0066cc 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-science-blue) 50%, transparent);
        }
      }
    }
  }
  .hover\:border-shark {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-shark);
      }
    }
  }
  .hover\:border-shark\/20 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #1d1d1f 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-shark) 20%, transparent);
        }
      }
    }
  }
  .hover\:border-slate-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
  }
  .hover\:border-trust-blue\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #2B5AA0 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-trust-blue) 40%, transparent);
        }
      }
    }
  }
  .hover\:border-warning-orange {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-warning-orange);
      }
    }
  }
  .hover\:border-warning-orange\/30 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #ff6b35 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-warning-orange) 30%, transparent);
        }
      }
    }
  }
  .hover\:border-warning-orange\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #ff6b35 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-warning-orange) 40%, transparent);
        }
      }
    }
  }
  .hover\:border-yellow-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-yellow-300);
      }
    }
  }
  .hover\:border-yellow-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-yellow-400);
      }
    }
  }
  .hover\:\!bg-crimson-red\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #dc143c 10%, transparent) !important;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-crimson-red) 10%, transparent) !important;
        }
      }
    }
  }
  .hover\:bg-\[color-mix\(in_srgb\,var\(--cd-color-primary\)_4\%\,transparent\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--cd-color-primary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in srgb,var(--cd-color-primary) 4%,transparent);
        }
      }
    }
  }
  .hover\:bg-\[var\(--cd-bg-hover\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--cd-bg-hover);
      }
    }
  }
  .hover\:bg-\[var\(--cd-bg-secondary\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--cd-bg-secondary);
      }
    }
  }
  .hover\:bg-\[var\(--cd-bg-tertiary\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--cd-bg-tertiary);
      }
    }
  }
  .hover\:bg-amber-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-50);
      }
    }
  }
  .hover\:bg-amber-100\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-amber-100) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-amber-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-600);
      }
    }
  }
  .hover\:bg-amber-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-700);
      }
    }
  }
  .hover\:bg-athens-gray {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-athens-gray);
      }
    }
  }
  .hover\:bg-athens-gray\/30 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #f5f5f7 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-athens-gray) 30%, transparent);
        }
      }
    }
  }
  .hover\:bg-black {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-black);
      }
    }
  }
  .hover\:bg-black\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-black\/60 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
        }
      }
    }
  }
  .hover\:bg-black\/\[0\.03\] {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 3%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 3%, transparent);
        }
      }
    }
  }
  .hover\:bg-blue-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .hover\:bg-blue-50\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-blue-50) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-blue-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-100);
      }
    }
  }
  .hover\:bg-blue-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .hover\:bg-blue-900 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-900);
      }
    }
  }
  .hover\:bg-crimson-red {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-crimson-red);
      }
    }
  }
  .hover\:bg-crimson-red\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #dc143c 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-crimson-red) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-crimson-red\/80 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #dc143c 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-crimson-red) 80%, transparent);
        }
      }
    }
  }
  .hover\:bg-crimson-red\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #dc143c 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-crimson-red) 90%, transparent);
        }
      }
    }
  }
  .hover\:bg-deep-purple\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #6366f1 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-deep-purple) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-deep-purple\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #6366f1 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-deep-purple) 90%, transparent);
        }
      }
    }
  }
  .hover\:bg-emerald-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-emerald-100);
      }
    }
  }
  .hover\:bg-emerald-500\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-forest-green\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #228b22 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-forest-green) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-forest-green\/15 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #228b22 15%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-forest-green) 15%, transparent);
        }
      }
    }
  }
  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .hover\:bg-gray-50\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-gray-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:bg-gray-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .hover\:bg-gray-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-500);
      }
    }
  }
  .hover\:bg-gray-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-600);
      }
    }
  }
  .hover\:bg-gray-600\/80 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-600) 80%, transparent);
        }
      }
    }
  }
  .hover\:bg-gray-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .hover\:bg-gray-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
      }
    }
  }
  .hover\:bg-gray-900 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-900);
      }
    }
  }
  .hover\:bg-green-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
  }
  .hover\:bg-green-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-700);
      }
    }
  }
  .hover\:bg-indigo-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-indigo-100);
      }
    }
  }
  .hover\:bg-neutral-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-neutral-50);
      }
    }
  }
  .hover\:bg-neutral-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-neutral-100);
      }
    }
  }
  .hover\:bg-orange-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-orange-600);
      }
    }
  }
  .hover\:bg-purple-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-purple-100);
      }
    }
  }
  .hover\:bg-purple-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-purple-700);
      }
    }
  }
  .hover\:bg-red-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .hover\:bg-red-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-100);
      }
    }
  }
  .hover\:bg-red-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-200);
      }
    }
  }
  .hover\:bg-red-500\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-red-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-600);
      }
    }
  }
  .hover\:bg-red-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .hover\:bg-rose-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-rose-100);
      }
    }
  }
  .hover\:bg-science-blue {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-science-blue);
      }
    }
  }
  .hover\:bg-science-blue\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #0066cc 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-science-blue\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #0066cc 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-science-blue) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-science-blue\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #0066cc 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-science-blue\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #0066cc 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-science-blue) 90%, transparent);
        }
      }
    }
  }
  .hover\:bg-shark\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #1d1d1f 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-shark) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-shark\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #1d1d1f 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-shark) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-slate-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
  }
  .hover\:bg-slate-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-100);
      }
    }
  }
  .hover\:bg-teal-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-teal-100);
      }
    }
  }
  .hover\:bg-trust-blue {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-trust-blue);
      }
    }
  }
  .hover\:bg-warning-orange {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-warning-orange);
      }
    }
  }
  .hover\:bg-warning-orange\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ff6b35 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-warning-orange) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-warning-orange\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ff6b35 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-warning-orange) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-white {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .hover\:bg-white\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ffffff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ffffff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ffffff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ffffff 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/\[0\.03\] {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ffffff 3%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
        }
      }
    }
  }
  .hover\:bg-yellow-50\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(98.7% 0.026 102.212) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-yellow-50) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-yellow-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-100);
      }
    }
  }
  .hover\:bg-yellow-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-200);
      }
    }
  }
  .hover\:bg-yellow-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-600);
      }
    }
  }
  .hover\:bg-gradient-to-r {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-position: to right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops));
      }
    }
  }
  .hover\:from-amber-50 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-amber-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:from-amber-500 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-amber-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:from-blue-50 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-blue-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:from-blue-700 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-blue-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:from-emerald-50 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-emerald-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:from-emerald-700 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-emerald-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:from-purple-50 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-purple-50);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:from-purple-700 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-purple-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-amber-100 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-amber-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-blue-100 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-blue-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-blue-700 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-blue-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-blue-800 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-blue-800);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-emerald-100 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-emerald-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-indigo-700 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-indigo-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-orange-500 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-orange-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-purple-100 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-purple-100);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-teal-700 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-teal-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:\!text-crimson-red {
    &:hover {
      @media (hover: hover) {
        color: var(--color-crimson-red) !important;
      }
    }
  }
  .hover\:text-\[\#417690\] {
    &:hover {
      @media (hover: hover) {
        color: #417690;
      }
    }
  }
  .hover\:text-\[var\(--cd-text-primary\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--cd-text-primary);
      }
    }
  }
  .hover\:text-amber-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-amber-400);
      }
    }
  }
  .hover\:text-amber-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-amber-500);
      }
    }
  }
  .hover\:text-amber-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-amber-900);
      }
    }
  }
  .hover\:text-blue-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .hover\:text-blue-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
  }
  .hover\:text-blue-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }
  .hover\:text-blue-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-900);
      }
    }
  }
  .hover\:text-crimson-red {
    &:hover {
      @media (hover: hover) {
        color: var(--color-crimson-red);
      }
    }
  }
  .hover\:text-crimson-red\/80 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #dc143c 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-crimson-red) 80%, transparent);
        }
      }
    }
  }
  .hover\:text-deep-purple {
    &:hover {
      @media (hover: hover) {
        color: var(--color-deep-purple);
      }
    }
  }
  .hover\:text-deep-purple\/80 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #6366f1 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-deep-purple) 80%, transparent);
        }
      }
    }
  }
  .hover\:text-emerald-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-emerald-500);
      }
    }
  }
  .hover\:text-forest-green {
    &:hover {
      @media (hover: hover) {
        color: var(--color-forest-green);
      }
    }
  }
  .hover\:text-gray-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-200);
      }
    }
  }
  .hover\:text-gray-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-300);
      }
    }
  }
  .hover\:text-gray-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-400);
      }
    }
  }
  .hover\:text-gray-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .hover\:text-gray-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .hover\:text-gray-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-800);
      }
    }
  }
  .hover\:text-gray-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .hover\:text-green-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-green-600);
      }
    }
  }
  .hover\:text-jade-green {
    &:hover {
      @media (hover: hover) {
        color: var(--color-jade-green);
      }
    }
  }
  .hover\:text-purple-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-purple-600);
      }
    }
  }
  .hover\:text-red-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-400);
      }
    }
  }
  .hover\:text-red-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-500);
      }
    }
  }
  .hover\:text-red-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-600);
      }
    }
  }
  .hover\:text-red-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
  }
  .hover\:text-red-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-800);
      }
    }
  }
  .hover\:text-red-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-900);
      }
    }
  }
  .hover\:text-science-blue {
    &:hover {
      @media (hover: hover) {
        color: var(--color-science-blue);
      }
    }
  }
  .hover\:text-science-blue\/75 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #0066cc 75%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-science-blue) 75%, transparent);
        }
      }
    }
  }
  .hover\:text-science-blue\/80 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #0066cc 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-science-blue) 80%, transparent);
        }
      }
    }
  }
  .hover\:text-shark {
    &:hover {
      @media (hover: hover) {
        color: var(--color-shark);
      }
    }
  }
  .hover\:text-shark\/60 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #1d1d1f 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-shark) 60%, transparent);
        }
      }
    }
  }
  .hover\:text-shark\/80 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #1d1d1f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-shark) 80%, transparent);
        }
      }
    }
  }
  .hover\:text-trust-blue {
    &:hover {
      @media (hover: hover) {
        color: var(--color-trust-blue);
      }
    }
  }
  .hover\:text-warning-orange {
    &:hover {
      @media (hover: hover) {
        color: var(--color-warning-orange);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:text-yellow-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-yellow-400);
      }
    }
  }
  .hover\:no-underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: none;
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:decoration-red-300 {
    &:hover {
      @media (hover: hover) {
        text-decoration-color: var(--color-red-300);
      }
    }
  }
  .hover\:underline-offset-2 {
    &:hover {
      @media (hover: hover) {
        text-underline-offset: 2px;
      }
    }
  }
  .hover\:opacity-70 {
    &:hover {
      @media (hover: hover) {
        opacity: 70%;
      }
    }
  }
  .hover\:opacity-75 {
    &:hover {
      @media (hover: hover) {
        opacity: 75%;
      }
    }
  }
  .hover\:opacity-80 {
    &:hover {
      @media (hover: hover) {
        opacity: 80%;
      }
    }
  }
  .hover\:opacity-90 {
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:shadow {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-2xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-\[0_10px_25px_rgba\(245\,158\,11\,0\.15\)\,0_4px_15px_rgba\(245\,158\,11\,0\.1\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 25px var(--tw-shadow-color, rgba(245,158,11,0.15)), 0 4px 15px var(--tw-shadow-color, rgba(245,158,11,0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-lg {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-md {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-none {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-sm {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:ring-2 {
    &:hover {
      @media (hover: hover) {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-red-200 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: oklch(88.5% 0.062 18.334);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, var(--color-red-200) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .hover\:ring-forest-green {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-forest-green);
      }
    }
  }
  .hover\:ring-science-blue {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-science-blue);
      }
    }
  }
  .hover\:backdrop-blur-lg {
    &:hover {
      @media (hover: hover) {
        --tw-backdrop-blur: blur(var(--blur-lg));
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
      }
    }
  }
  .hover\:file\:bg-blue-100 {
    &:hover {
      @media (hover: hover) {
        &::file-selector-button {
          background-color: var(--color-blue-100);
        }
      }
    }
  }
  .focus\:not-sr-only {
    &:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }
  .focus\:absolute {
    &:focus {
      position: absolute;
    }
  }
  .focus\:top-2 {
    &:focus {
      top: calc(var(--spacing) * 2);
    }
  }
  .focus\:left-2 {
    &:focus {
      left: calc(var(--spacing) * 2);
    }
  }
  .focus\:z-50 {
    &:focus {
      z-index: 50;
    }
  }
  .focus\:border-blue-500 {
    &:focus {
      border-color: var(--color-blue-500);
    }
  }
  .focus\:border-gray-400 {
    &:focus {
      border-color: var(--color-gray-400);
    }
  }
  .focus\:border-green-500 {
    &:focus {
      border-color: var(--color-green-500);
    }
  }
  .focus\:border-indigo-500 {
    &:focus {
      border-color: var(--color-indigo-500);
    }
  }
  .focus\:border-red-500 {
    &:focus {
      border-color: var(--color-red-500);
    }
  }
  .focus\:border-science-blue {
    &:focus {
      border-color: var(--color-science-blue);
    }
  }
  .focus\:border-transparent {
    &:focus {
      border-color: transparent;
    }
  }
  .focus\:bg-\[var\(--cd-bg-secondary\)\] {
    &:focus {
      background-color: var(--cd-bg-secondary);
    }
  }
  .focus\:bg-athens-gray {
    &:focus {
      background-color: var(--color-athens-gray);
    }
  }
  .focus\:bg-gray-50 {
    &:focus {
      background-color: var(--color-gray-50);
    }
  }
  .focus\:text-science-blue {
    &:focus {
      color: var(--color-science-blue);
    }
  }
  .focus\:underline {
    &:focus {
      text-decoration-line: underline;
    }
  }
  .focus\:placeholder-gray-400 {
    &:focus {
      &::placeholder {
        color: var(--color-gray-400);
      }
    }
  }
  .focus\:ring-0 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-1 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-4 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-blue-300 {
    &:focus {
      --tw-ring-color: var(--color-blue-300);
    }
  }
  .focus\:ring-blue-500 {
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .focus\:ring-blue-600 {
    &:focus {
      --tw-ring-color: var(--color-blue-600);
    }
  }
  .focus\:ring-crimson-red {
    &:focus {
      --tw-ring-color: var(--color-crimson-red);
    }
  }
  .focus\:ring-gray-200 {
    &:focus {
      --tw-ring-color: var(--color-gray-200);
    }
  }
  .focus\:ring-gray-300 {
    &:focus {
      --tw-ring-color: var(--color-gray-300);
    }
  }
  .focus\:ring-gray-500 {
    &:focus {
      --tw-ring-color: var(--color-gray-500);
    }
  }
  .focus\:ring-gray-700 {
    &:focus {
      --tw-ring-color: var(--color-gray-700);
    }
  }
  .focus\:ring-green-500 {
    &:focus {
      --tw-ring-color: var(--color-green-500);
    }
  }
  .focus\:ring-indigo-500 {
    &:focus {
      --tw-ring-color: var(--color-indigo-500);
    }
  }
  .focus\:ring-orange-500 {
    &:focus {
      --tw-ring-color: var(--color-orange-500);
    }
  }
  .focus\:ring-red-500 {
    &:focus {
      --tw-ring-color: var(--color-red-500);
    }
  }
  .focus\:ring-science-blue {
    &:focus {
      --tw-ring-color: var(--color-science-blue);
    }
  }
  .focus\:ring-science-blue\/20 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, #0066cc 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
      }
    }
  }
  .focus\:ring-science-blue\/50 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, #0066cc 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 50%, transparent);
      }
    }
  }
  .focus\:ring-warning-orange {
    &:focus {
      --tw-ring-color: var(--color-warning-orange);
    }
  }
  .focus\:ring-white {
    &:focus {
      --tw-ring-color: var(--color-white);
    }
  }
  .focus\:ring-offset-2 {
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .focus\:ring-offset-white {
    &:focus {
      --tw-ring-offset-color: var(--color-white);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus-visible\:ring-2 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-visible\:ring-science-blue {
    &:focus-visible {
      --tw-ring-color: var(--color-science-blue);
    }
  }
  .focus-visible\:ring-warning-orange {
    &:focus-visible {
      --tw-ring-color: var(--color-warning-orange);
    }
  }
  .active\:scale-95 {
    &:active {
      --tw-scale-x: 95%;
      --tw-scale-y: 95%;
      --tw-scale-z: 95%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .active\:border-science-blue {
    &:active {
      border-color: var(--color-science-blue);
    }
  }
  .active\:bg-science-blue {
    &:active {
      background-color: var(--color-science-blue);
    }
  }
  .active\:text-white {
    &:active {
      color: var(--color-white);
    }
  }
  .active\:shadow-lg {
    &:active {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:cursor-wait {
    &:disabled {
      cursor: wait;
    }
  }
  .disabled\:bg-gray-100 {
    &:disabled {
      background-color: var(--color-gray-100);
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .max-sm\:gap-1 {
    @media (width < 40rem) {
      gap: calc(var(--spacing) * 1);
    }
  }
  .max-sm\:\!border-0 {
    @media (width < 40rem) {
      border-style: var(--tw-border-style) !important;
      border-width: 0px !important;
    }
  }
  .max-sm\:border-0 {
    @media (width < 40rem) {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .max-sm\:px-2 {
    @media (width < 40rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .max-sm\:py-0\.5 {
    @media (width < 40rem) {
      padding-block: calc(var(--spacing) * 0.5);
    }
  }
  .max-sm\:leading-none {
    @media (width < 40rem) {
      --tw-leading: 1;
      line-height: 1;
    }
  }
  .max-sm\:\!shadow-none {
    @media (width < 40rem) {
      --tw-shadow: 0 0 #0000 !important;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
    }
  }
  .sm\:not-sr-only {
    @media (width >= 40rem) {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }
  .sm\:static {
    @media (width >= 40rem) {
      position: static;
    }
  }
  .sm\:order-1 {
    @media (width >= 40rem) {
      order: 1;
    }
  }
  .sm\:order-2 {
    @media (width >= 40rem) {
      order: 2;
    }
  }
  .sm\:col-span-1 {
    @media (width >= 40rem) {
      grid-column: span 1 / span 1;
    }
  }
  .sm\:col-span-2 {
    @media (width >= 40rem) {
      grid-column: span 2 / span 2;
    }
  }
  .sm\:col-span-4 {
    @media (width >= 40rem) {
      grid-column: span 4 / span 4;
    }
  }
  .sm\:col-span-7 {
    @media (width >= 40rem) {
      grid-column: span 7 / span 7;
    }
  }
  .sm\:-mx-1\.5 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * -1.5);
    }
  }
  .sm\:mx-0 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .sm\:mx-auto {
    @media (width >= 40rem) {
      margin-inline: auto;
    }
  }
  .sm\:my-8 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .sm\:mt-0 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .sm\:mt-2 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 2);
    }
  }
  .sm\:mt-4 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 4);
    }
  }
  .sm\:mt-8 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 8);
    }
  }
  .sm\:mt-10 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 10);
    }
  }
  .sm\:mr-1 {
    @media (width >= 40rem) {
      margin-right: calc(var(--spacing) * 1);
    }
  }
  .sm\:mr-2 {
    @media (width >= 40rem) {
      margin-right: calc(var(--spacing) * 2);
    }
  }
  .sm\:mr-4 {
    @media (width >= 40rem) {
      margin-right: calc(var(--spacing) * 4);
    }
  }
  .sm\:mb-0 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .sm\:mb-2 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 2);
    }
  }
  .sm\:mb-4 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .sm\:mb-6 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 6);
    }
  }
  .sm\:mb-8 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 8);
    }
  }
  .sm\:mb-10 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 10);
    }
  }
  .sm\:ml-0 {
    @media (width >= 40rem) {
      margin-left: calc(var(--spacing) * 0);
    }
  }
  .sm\:ml-2 {
    @media (width >= 40rem) {
      margin-left: calc(var(--spacing) * 2);
    }
  }
  .sm\:ml-5 {
    @media (width >= 40rem) {
      margin-left: calc(var(--spacing) * 5);
    }
  }
  .sm\:ml-\[52px\] {
    @media (width >= 40rem) {
      margin-left: 52px;
    }
  }
  .sm\:ml-auto {
    @media (width >= 40rem) {
      margin-left: auto;
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:inline-flex {
    @media (width >= 40rem) {
      display: inline-flex;
    }
  }
  .sm\:table-cell {
    @media (width >= 40rem) {
      display: table-cell;
    }
  }
  .sm\:h-3 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 3);
    }
  }
  .sm\:h-4 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 4);
    }
  }
  .sm\:h-6 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 6);
    }
  }
  .sm\:h-7 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 7);
    }
  }
  .sm\:h-8 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 8);
    }
  }
  .sm\:h-10 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 10);
    }
  }
  .sm\:h-11 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 11);
    }
  }
  .sm\:h-12 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 12);
    }
  }
  .sm\:h-14 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 14);
    }
  }
  .sm\:h-16 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 16);
    }
  }
  .sm\:h-20 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 20);
    }
  }
  .sm\:h-28 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 28);
    }
  }
  .sm\:h-32 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 32);
    }
  }
  .sm\:h-44 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 44);
    }
  }
  .sm\:h-48 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 48);
    }
  }
  .sm\:h-\[4\.27rem\] {
    @media (width >= 40rem) {
      height: 4.27rem;
    }
  }
  .sm\:w-3 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 3);
    }
  }
  .sm\:w-4 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 4);
    }
  }
  .sm\:w-7 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 7);
    }
  }
  .sm\:w-8 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 8);
    }
  }
  .sm\:w-10 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 10);
    }
  }
  .sm\:w-11 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 11);
    }
  }
  .sm\:w-12 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 12);
    }
  }
  .sm\:w-14 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 14);
    }
  }
  .sm\:w-16 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 16);
    }
  }
  .sm\:w-20 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 20);
    }
  }
  .sm\:w-24 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 24);
    }
  }
  .sm\:w-28 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 28);
    }
  }
  .sm\:w-32 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 32);
    }
  }
  .sm\:w-36 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 36);
    }
  }
  .sm\:w-40 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 40);
    }
  }
  .sm\:w-44 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 44);
    }
  }
  .sm\:w-48 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 48);
    }
  }
  .sm\:w-52 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 52);
    }
  }
  .sm\:w-64 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 64);
    }
  }
  .sm\:w-auto {
    @media (width >= 40rem) {
      width: auto;
    }
  }
  .sm\:max-w-\[180px\] {
    @media (width >= 40rem) {
      max-width: 180px;
    }
  }
  .sm\:max-w-md {
    @media (width >= 40rem) {
      max-width: var(--container-md);
    }
  }
  .sm\:min-w-\[120px\] {
    @media (width >= 40rem) {
      min-width: 120px;
    }
  }
  .sm\:min-w-\[140px\] {
    @media (width >= 40rem) {
      min-width: 140px;
    }
  }
  .sm\:min-w-\[180px\] {
    @media (width >= 40rem) {
      min-width: 180px;
    }
  }
  .sm\:min-w-\[200px\] {
    @media (width >= 40rem) {
      min-width: 200px;
    }
  }
  .sm\:flex-initial {
    @media (width >= 40rem) {
      flex: 0 auto;
    }
  }
  .sm\:flex-none {
    @media (width >= 40rem) {
      flex: none;
    }
  }
  .sm\:flex-shrink-0 {
    @media (width >= 40rem) {
      flex-shrink: 0;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-4 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-5 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-12 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-\[1fr_auto_auto_auto\] {
    @media (width >= 40rem) {
      grid-template-columns: 1fr auto auto auto;
    }
  }
  .sm\:grid-cols-\[200px_1fr\] {
    @media (width >= 40rem) {
      grid-template-columns: 200px 1fr;
    }
  }
  .sm\:grid-cols-\[260px_1fr\] {
    @media (width >= 40rem) {
      grid-template-columns: 260px 1fr;
    }
  }
  .sm\:flex-col {
    @media (width >= 40rem) {
      flex-direction: column;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:flex-wrap {
    @media (width >= 40rem) {
      flex-wrap: wrap;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:items-end {
    @media (width >= 40rem) {
      align-items: flex-end;
    }
  }
  .sm\:items-start {
    @media (width >= 40rem) {
      align-items: flex-start;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:justify-end {
    @media (width >= 40rem) {
      justify-content: flex-end;
    }
  }
  .sm\:justify-start {
    @media (width >= 40rem) {
      justify-content: flex-start;
    }
  }
  .sm\:gap-0 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 0);
    }
  }
  .sm\:gap-1\.5 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .sm\:gap-2 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .sm\:gap-3 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:gap-5 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .sm\:gap-6 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .sm\:gap-8 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .sm\:gap-10 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .sm\:space-y-0 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .sm\:space-y-3 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .sm\:space-y-4 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .sm\:space-y-6 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .sm\:space-y-8 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .sm\:gap-x-0 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 0);
    }
  }
  .sm\:gap-x-3 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 3);
    }
  }
  .sm\:space-x-3 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .sm\:space-x-4 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .sm\:divide-x {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .sm\:divide-y-0 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(0px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
      }
    }
  }
  .sm\:divide-gray-200 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-gray-200);
      }
    }
  }
  .sm\:self-auto {
    @media (width >= 40rem) {
      align-self: auto;
    }
  }
  .sm\:rounded-2xl {
    @media (width >= 40rem) {
      border-radius: var(--radius-2xl);
    }
  }
  .sm\:rounded-xl {
    @media (width >= 40rem) {
      border-radius: var(--radius-xl);
    }
  }
  .sm\:border-l {
    @media (width >= 40rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .sm\:border-\[var\(--cd-border-hairline\)\] {
    @media (width >= 40rem) {
      border-color: var(--cd-border-hairline);
    }
  }
  .sm\:border-gray-200 {
    @media (width >= 40rem) {
      border-color: var(--color-gray-200);
    }
  }
  .sm\:bg-science-blue\/10 {
    @media (width >= 40rem) {
      background-color: color-mix(in srgb, #0066cc 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-science-blue) 10%, transparent);
      }
    }
  }
  .sm\:p-0 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 0);
    }
  }
  .sm\:p-1 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 1);
    }
  }
  .sm\:p-2 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 2);
    }
  }
  .sm\:p-3 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .sm\:p-4 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .sm\:p-5 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .sm\:p-6 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:p-8 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .sm\:p-10 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .sm\:p-12 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .sm\:px-0 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .sm\:px-1\.5 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 1.5);
    }
  }
  .sm\:px-2 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .sm\:px-3 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .sm\:px-4 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:px-8 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .sm\:py-1\.5 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 1.5);
    }
  }
  .sm\:py-2 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .sm\:py-2\.5 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 2.5);
    }
  }
  .sm\:py-3 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .sm\:py-4 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .sm\:py-6 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .sm\:py-8 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .sm\:py-10 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .sm\:py-12 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .sm\:py-14 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 14);
    }
  }
  .sm\:py-16 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .sm\:pt-4 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 4);
    }
  }
  .sm\:pt-6 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .sm\:pr-6 {
    @media (width >= 40rem) {
      padding-right: calc(var(--spacing) * 6);
    }
  }
  .sm\:pr-20 {
    @media (width >= 40rem) {
      padding-right: calc(var(--spacing) * 20);
    }
  }
  .sm\:pb-6 {
    @media (width >= 40rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .sm\:pl-3 {
    @media (width >= 40rem) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .sm\:pl-10 {
    @media (width >= 40rem) {
      padding-left: calc(var(--spacing) * 10);
    }
  }
  .sm\:text-left {
    @media (width >= 40rem) {
      text-align: left;
    }
  }
  .sm\:text-right {
    @media (width >= 40rem) {
      text-align: right;
    }
  }
  .sm\:text-2xl {
    @media (width >= 40rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .sm\:text-3xl {
    @media (width >= 40rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .sm\:text-4xl {
    @media (width >= 40rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .sm\:text-5xl {
    @media (width >= 40rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .sm\:text-6xl {
    @media (width >= 40rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .sm\:text-7xl {
    @media (width >= 40rem) {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }
  .sm\:text-base {
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .sm\:text-lg {
    @media (width >= 40rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .sm\:text-sm {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .sm\:text-xl {
    @media (width >= 40rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .sm\:text-xs {
    @media (width >= 40rem) {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .sm\:whitespace-normal {
    @media (width >= 40rem) {
      white-space: normal;
    }
  }
  .sm\:whitespace-nowrap {
    @media (width >= 40rem) {
      white-space: nowrap;
    }
  }
  .sm\:text-science-blue {
    @media (width >= 40rem) {
      color: var(--color-science-blue);
    }
  }
  .sm\:opacity-0 {
    @media (width >= 40rem) {
      opacity: 0%;
    }
  }
  .sm\:group-hover\:opacity-100 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          opacity: 100%;
        }
      }
    }
  }
  .sm\:first\:pl-0 {
    @media (width >= 40rem) {
      &:first-child {
        padding-left: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:last\:pr-0 {
    @media (width >= 40rem) {
      &:last-child {
        padding-right: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:absolute {
    @media (width >= 48rem) {
      position: absolute;
    }
  }
  .md\:fixed {
    @media (width >= 48rem) {
      position: fixed;
    }
  }
  .md\:inset-4 {
    @media (width >= 48rem) {
      inset: calc(var(--spacing) * 4);
    }
  }
  .md\:right-0 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 0);
    }
  }
  .md\:bottom-0 {
    @media (width >= 48rem) {
      bottom: calc(var(--spacing) * 0);
    }
  }
  .md\:col-span-1 {
    @media (width >= 48rem) {
      grid-column: span 1 / span 1;
    }
  }
  .md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:col-span-3 {
    @media (width >= 48rem) {
      grid-column: span 3 / span 3;
    }
  }
  .md\:col-span-4 {
    @media (width >= 48rem) {
      grid-column: span 4 / span 4;
    }
  }
  .md\:col-span-5 {
    @media (width >= 48rem) {
      grid-column: span 5 / span 5;
    }
  }
  .md\:col-span-7 {
    @media (width >= 48rem) {
      grid-column: span 7 / span 7;
    }
  }
  .md\:col-span-8 {
    @media (width >= 48rem) {
      grid-column: span 8 / span 8;
    }
  }
  .md\:row-span-2 {
    @media (width >= 48rem) {
      grid-row: span 2 / span 2;
    }
  }
  .md\:mr-3 {
    @media (width >= 48rem) {
      margin-right: calc(var(--spacing) * 3);
    }
  }
  .md\:mr-auto {
    @media (width >= 48rem) {
      margin-right: auto;
    }
  }
  .md\:mb-0 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .md\:mb-3 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 3);
    }
  }
  .md\:mb-4 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .md\:mb-6 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 6);
    }
  }
  .md\:ml-0 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * 0);
    }
  }
  .md\:ml-2 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * 2);
    }
  }
  .md\:ml-8 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * 8);
    }
  }
  .md\:line-clamp-none {
    @media (width >= 48rem) {
      overflow: visible;
      display: block;
      -webkit-box-orient: horizontal;
      -webkit-line-clamp: unset;
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:grid {
    @media (width >= 48rem) {
      display: grid;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:inline {
    @media (width >= 48rem) {
      display: inline;
    }
  }
  .md\:inline-block {
    @media (width >= 48rem) {
      display: inline-block;
    }
  }
  .md\:inline-flex {
    @media (width >= 48rem) {
      display: inline-flex;
    }
  }
  .md\:table-cell {
    @media (width >= 48rem) {
      display: table-cell;
    }
  }
  .md\:h-16 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 16);
    }
  }
  .md\:h-48 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 48);
    }
  }
  .md\:h-56 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 56);
    }
  }
  .md\:h-64 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 64);
    }
  }
  .md\:h-96 {
    @media (width >= 48rem) {
      height: var(--spacing-96);
    }
  }
  .md\:min-h-\[360px\] {
    @media (width >= 48rem) {
      min-height: 360px;
    }
  }
  .md\:w-1\/2 {
    @media (width >= 48rem) {
      width: calc(1/2 * 100%);
    }
  }
  .md\:w-1\/3 {
    @media (width >= 48rem) {
      width: calc(1/3 * 100%);
    }
  }
  .md\:w-2\/3 {
    @media (width >= 48rem) {
      width: calc(2/3 * 100%);
    }
  }
  .md\:w-16 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 16);
    }
  }
  .md\:w-28 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 28);
    }
  }
  .md\:w-48 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 48);
    }
  }
  .md\:w-52 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 52);
    }
  }
  .md\:w-56 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 56);
    }
  }
  .md\:w-64 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 64);
    }
  }
  .md\:w-96 {
    @media (width >= 48rem) {
      width: var(--spacing-96);
    }
  }
  .md\:w-\[640px\] {
    @media (width >= 48rem) {
      width: 640px;
    }
  }
  .md\:w-auto {
    @media (width >= 48rem) {
      width: auto;
    }
  }
  .md\:\!max-w-none {
    @media (width >= 48rem) {
      max-width: none !important;
    }
  }
  .md\:flex-shrink-0 {
    @media (width >= 48rem) {
      flex-shrink: 0;
    }
  }
  .md\:-translate-y-4 {
    @media (width >= 48rem) {
      --tw-translate-y: calc(var(--spacing) * -4);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:grid-cols-1 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-5 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-6 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-12 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-\[1fr_22rem\] {
    @media (width >= 48rem) {
      grid-template-columns: 1fr 22rem;
    }
  }
  .md\:grid-cols-\[160px_1fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 160px 1fr;
    }
  }
  .md\:grid-cols-\[200px_1fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 200px 1fr;
    }
  }
  .md\:grid-cols-\[220px_1fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 220px 1fr;
    }
  }
  .md\:flex-col {
    @media (width >= 48rem) {
      flex-direction: column;
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:items-start {
    @media (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .md\:items-stretch {
    @media (width >= 48rem) {
      align-items: stretch;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:justify-end {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .md\:justify-start {
    @media (width >= 48rem) {
      justify-content: flex-start;
    }
  }
  .md\:gap-2 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .md\:gap-4 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-6 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-16 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .md\:space-y-0 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .md\:space-x-3 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .md\:gap-y-5 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 5);
    }
  }
  .md\:divide-x {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .md\:divide-y-0 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(0px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
      }
    }
  }
  .md\:border-r {
    @media (width >= 48rem) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .md\:border-b-0 {
    @media (width >= 48rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .md\:p-2 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 2);
    }
  }
  .md\:p-2\.5 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 2.5);
    }
  }
  .md\:p-4 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .md\:p-5 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:p-7 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .md\:p-8 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .md\:p-10 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .md\:p-12 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .md\:p-16 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 16);
    }
  }
  .md\:px-8 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .md\:py-4 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .md\:py-6 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .md\:py-8 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .md\:py-12 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .md\:py-14 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 14);
    }
  }
  .md\:py-16 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .md\:py-18 {
    @media (width >= 48rem) {
      padding-block: var(--spacing-18);
    }
  }
  .md\:py-20 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .md\:py-24 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .md\:pb-5 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 5);
    }
  }
  .md\:pb-12 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 12);
    }
  }
  .md\:text-left {
    @media (width >= 48rem) {
      text-align: left;
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-3xl {
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .md\:text-4xl {
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:text-base {
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .md\:text-lg {
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .md\:text-xl {
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .md\:opacity-20 {
    @media (width >= 48rem) {
      opacity: 20%;
    }
  }
  .md\:opacity-25 {
    @media (width >= 48rem) {
      opacity: 25%;
    }
  }
  .lg\:sticky {
    @media (width >= 64rem) {
      position: sticky;
    }
  }
  .lg\:top-4 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 4);
    }
  }
  .lg\:top-6 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 6);
    }
  }
  .lg\:top-20 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 20);
    }
  }
  .lg\:top-24 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 24);
    }
  }
  .lg\:order-1 {
    @media (width >= 64rem) {
      order: 1;
    }
  }
  .lg\:order-2 {
    @media (width >= 64rem) {
      order: 2;
    }
  }
  .lg\:col-span-1 {
    @media (width >= 64rem) {
      grid-column: span 1 / span 1;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:col-span-4 {
    @media (width >= 64rem) {
      grid-column: span 4 / span 4;
    }
  }
  .lg\:col-span-5 {
    @media (width >= 64rem) {
      grid-column: span 5 / span 5;
    }
  }
  .lg\:col-span-6 {
    @media (width >= 64rem) {
      grid-column: span 6 / span 6;
    }
  }
  .lg\:col-span-7 {
    @media (width >= 64rem) {
      grid-column: span 7 / span 7;
    }
  }
  .lg\:col-span-8 {
    @media (width >= 64rem) {
      grid-column: span 8 / span 8;
    }
  }
  .lg\:col-span-9 {
    @media (width >= 64rem) {
      grid-column: span 9 / span 9;
    }
  }
  .lg\:mx-0 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .lg\:mt-8 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 8);
    }
  }
  .lg\:mr-2 {
    @media (width >= 64rem) {
      margin-right: calc(var(--spacing) * 2);
    }
  }
  .lg\:mb-0 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .lg\:mb-3 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 3);
    }
  }
  .lg\:mb-4 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .lg\:mb-6 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 6);
    }
  }
  .lg\:mb-8 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 8);
    }
  }
  .lg\:ml-0 {
    @media (width >= 64rem) {
      margin-left: calc(var(--spacing) * 0);
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:grid {
    @media (width >= 64rem) {
      display: grid;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:inline {
    @media (width >= 64rem) {
      display: inline;
    }
  }
  .lg\:inline-flex {
    @media (width >= 64rem) {
      display: inline-flex;
    }
  }
  .lg\:table-cell {
    @media (width >= 64rem) {
      display: table-cell;
    }
  }
  .lg\:h-12 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 12);
    }
  }
  .lg\:h-16 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 16);
    }
  }
  .lg\:w-1\/2 {
    @media (width >= 64rem) {
      width: calc(1/2 * 100%);
    }
  }
  .lg\:w-1\/3 {
    @media (width >= 64rem) {
      width: calc(1/3 * 100%);
    }
  }
  .lg\:w-2\/3 {
    @media (width >= 64rem) {
      width: calc(2/3 * 100%);
    }
  }
  .lg\:w-2\/5 {
    @media (width >= 64rem) {
      width: calc(2/5 * 100%);
    }
  }
  .lg\:w-3\/5 {
    @media (width >= 64rem) {
      width: calc(3/5 * 100%);
    }
  }
  .lg\:w-12 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 12);
    }
  }
  .lg\:w-16 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 16);
    }
  }
  .lg\:w-48 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 48);
    }
  }
  .lg\:w-56 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 56);
    }
  }
  .lg\:w-64 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 64);
    }
  }
  .lg\:w-72 {
    @media (width >= 64rem) {
      width: var(--spacing-72);
    }
  }
  .lg\:w-80 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .lg\:w-\[720px\] {
    @media (width >= 64rem) {
      width: 720px;
    }
  }
  .lg\:w-auto {
    @media (width >= 64rem) {
      width: auto;
    }
  }
  .lg\:max-w-\[212px\] {
    @media (width >= 64rem) {
      max-width: 212px;
    }
  }
  .lg\:max-w-md {
    @media (width >= 64rem) {
      max-width: var(--container-md);
    }
  }
  .lg\:min-w-48 {
    @media (width >= 64rem) {
      min-width: calc(var(--spacing) * 48);
    }
  }
  .lg\:min-w-\[320px\] {
    @media (width >= 64rem) {
      min-width: 320px;
    }
  }
  .lg\:flex-1 {
    @media (width >= 64rem) {
      flex: 1;
    }
  }
  .lg\:flex-none {
    @media (width >= 64rem) {
      flex: none;
    }
  }
  .lg\:translate-x-0 {
    @media (width >= 64rem) {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-5 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-6 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-7 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-8 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-9 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(9, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-12 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[1\.6fr_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 1.6fr 1fr;
    }
  }
  .lg\:grid-cols-\[420px_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 420px 1fr;
    }
  }
  .lg\:flex-col {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:items-end {
    @media (width >= 64rem) {
      align-items: flex-end;
    }
  }
  .lg\:items-start {
    @media (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .lg\:items-stretch {
    @media (width >= 64rem) {
      align-items: stretch;
    }
  }
  .lg\:justify-between {
    @media (width >= 64rem) {
      justify-content: space-between;
    }
  }
  .lg\:justify-center {
    @media (width >= 64rem) {
      justify-content: center;
    }
  }
  .lg\:justify-end {
    @media (width >= 64rem) {
      justify-content: flex-end;
    }
  }
  .lg\:justify-start {
    @media (width >= 64rem) {
      justify-content: flex-start;
    }
  }
  .lg\:gap-0 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 0);
    }
  }
  .lg\:gap-2 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .lg\:gap-3 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .lg\:gap-4 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .lg\:gap-6 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:gap-8 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:gap-12 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:space-y-0 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .lg\:space-y-3 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .lg\:gap-x-6 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:divide-x {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .lg\:divide-y-0 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(0px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
      }
    }
  }
  .lg\:self-start {
    @media (width >= 64rem) {
      align-self: flex-start;
    }
  }
  .lg\:self-stretch {
    @media (width >= 64rem) {
      align-self: stretch;
    }
  }
  .lg\:border-r {
    @media (width >= 64rem) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .lg\:border-b-0 {
    @media (width >= 64rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .lg\:border-l {
    @media (width >= 64rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .lg\:border-gray-200 {
    @media (width >= 64rem) {
      border-color: var(--color-gray-200);
    }
  }
  .lg\:p-2 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 2);
    }
  }
  .lg\:p-4 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .lg\:p-6 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .lg\:p-7 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .lg\:p-8 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .lg\:px-3 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .lg\:px-4 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .lg\:px-6 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .lg\:px-7 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:py-2 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .lg\:py-3 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .lg\:py-4 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .lg\:py-6 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .lg\:py-12 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .lg\:py-16 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .lg\:py-20 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .lg\:py-32 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 32);
    }
  }
  .lg\:pt-6 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .lg\:pt-40 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 40);
    }
  }
  .lg\:pr-1 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 1);
    }
  }
  .lg\:pr-6 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 6);
    }
  }
  .lg\:pb-8 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .lg\:pb-12 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 12);
    }
  }
  .lg\:pb-28 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 28);
    }
  }
  .lg\:pl-0 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .lg\:pl-4 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .lg\:pl-6 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 6);
    }
  }
  .lg\:pl-7 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 7);
    }
  }
  .lg\:text-center {
    @media (width >= 64rem) {
      text-align: center;
    }
  }
  .lg\:text-left {
    @media (width >= 64rem) {
      text-align: left;
    }
  }
  .lg\:text-right {
    @media (width >= 64rem) {
      text-align: right;
    }
  }
  .lg\:text-2xl {
    @media (width >= 64rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .lg\:text-3xl {
    @media (width >= 64rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .lg\:text-4xl {
    @media (width >= 64rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .lg\:text-5xl {
    @media (width >= 64rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .lg\:text-6xl {
    @media (width >= 64rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .lg\:text-7xl {
    @media (width >= 64rem) {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }
  .lg\:text-base {
    @media (width >= 64rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .lg\:text-lg {
    @media (width >= 64rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .lg\:text-sm {
    @media (width >= 64rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .lg\:text-xl {
    @media (width >= 64rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .xl\:sticky {
    @media (width >= 80rem) {
      position: sticky;
    }
  }
  .xl\:top-6 {
    @media (width >= 80rem) {
      top: calc(var(--spacing) * 6);
    }
  }
  .xl\:col-span-1 {
    @media (width >= 80rem) {
      grid-column: span 1 / span 1;
    }
  }
  .xl\:col-span-2 {
    @media (width >= 80rem) {
      grid-column: span 2 / span 2;
    }
  }
  .xl\:col-span-4 {
    @media (width >= 80rem) {
      grid-column: span 4 / span 4;
    }
  }
  .xl\:col-span-8 {
    @media (width >= 80rem) {
      grid-column: span 8 / span 8;
    }
  }
  .xl\:block {
    @media (width >= 80rem) {
      display: block;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:table-cell {
    @media (width >= 80rem) {
      display: table-cell;
    }
  }
  .xl\:w-64 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 64);
    }
  }
  .xl\:w-72 {
    @media (width >= 80rem) {
      width: var(--spacing-72);
    }
  }
  .xl\:w-80 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .xl\:w-96 {
    @media (width >= 80rem) {
      width: var(--spacing-96);
    }
  }
  .xl\:w-auto {
    @media (width >= 80rem) {
      width: auto;
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-4 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-5 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-6 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-12 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .xl\:flex-row {
    @media (width >= 80rem) {
      flex-direction: row;
    }
  }
  .xl\:items-center {
    @media (width >= 80rem) {
      align-items: center;
    }
  }
  .xl\:justify-between {
    @media (width >= 80rem) {
      justify-content: space-between;
    }
  }
  .xl\:text-4xl {
    @media (width >= 80rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .\32 xl\:grid-cols-3 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .dark\:border-blue-800 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-blue-800);
    }
  }
  .dark\:border-gray-700 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-gray-700);
    }
  }
  .dark\:bg-gray-600 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-gray-600);
    }
  }
  .dark\:bg-gray-700 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-gray-700);
    }
  }
  .dark\:bg-gray-800 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-gray-800);
    }
  }
  .dark\:bg-gray-800\/50 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
      }
    }
  }
  .dark\:bg-gray-900\/80 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
      }
    }
  }
  .dark\:bg-neutral-800 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-neutral-800);
    }
  }
  .dark\:text-blue-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-blue-400);
    }
  }
  .dark\:text-gray-100 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-gray-100);
    }
  }
  .dark\:text-gray-200 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-gray-200);
    }
  }
  .dark\:text-gray-300 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-gray-300);
    }
  }
  .dark\:text-gray-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-gray-400);
    }
  }
  .dark\:text-gray-500 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-gray-500);
    }
  }
  .dark\:text-neutral-300 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-neutral-300);
    }
  }
  .dark\:text-neutral-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-neutral-400);
    }
  }
  .dark\:text-neutral-500 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-neutral-500);
    }
  }
  .dark\:hover\:bg-gray-700 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .dark\:hover\:bg-red-900\/10 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-red-900) 10%, transparent);
          }
        }
      }
    }
  }
  .\[\&_\.enhanced-image-item\]\:\!h-20 {
    & .enhanced-image-item {
      height: calc(var(--spacing) * 20) !important;
    }
  }
  .\[\&_\.enhanced-image-item\]\:\!w-20 {
    & .enhanced-image-item {
      width: calc(var(--spacing) * 20) !important;
    }
  }
  .\[\&_\.enhanced-image-item\]\:sm\:\!h-24 {
    & .enhanced-image-item {
      @media (width >= 40rem) {
        height: calc(var(--spacing) * 24) !important;
      }
    }
  }
  .\[\&_\.enhanced-image-item\]\:sm\:\!w-24 {
    & .enhanced-image-item {
      @media (width >= 40rem) {
        width: calc(var(--spacing) * 24) !important;
      }
    }
  }
  .\[\&\:\:-webkit-details-marker\]\:hidden {
    &::-webkit-details-marker {
      display: none;
    }
  }
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces/fraunces-latin.5d2835174326.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces/fraunces-latin-ext.3592119408ee.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces/fraunces-italic-latin.be1b7d1cec18.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces/fraunces-italic-latin-ext.173659e9f51e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-400-latin-ext.01ba6c2a184b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-400-latin.65850a373e25.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/inter-500-latin-ext.01ba6c2a184b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/inter-500-latin.65850a373e25.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-600-latin-ext.01ba6c2a184b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-600-latin.65850a373e25.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/inter-700-latin-ext.01ba6c2a184b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/inter-700-latin.65850a373e25.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto/roboto-400-latin-ext.536359ff0fc9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto/roboto-400-latin.b7627e3c9663.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto/roboto-500-latin-ext.536359ff0fc9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto/roboto-500-latin.b7627e3c9663.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto/roboto-700-latin-ext.536359ff0fc9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto/roboto-700-latin.b7627e3c9663.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-400-latin-ext.7f28d9acd0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-400-latin.23145c714161.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-500-latin-ext.7f28d9acd0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-500-latin.23145c714161.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-600-latin-ext.7f28d9acd0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-600-latin.23145c714161.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-700-latin-ext.7f28d9acd0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/open-sans/open-sans-700-latin.23145c714161.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato/lato-400-latin-ext.b0d495314364.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato/lato-400-latin.b7d6b48d8d12.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato/lato-700-latin-ext.01cbba1eab04.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato/lato-700-latin.017598645bcc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins/poppins-400-latin-ext.f2a04185547c.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins/poppins-400-latin.43751174b6b8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins/poppins-500-latin-ext.63af7d5e18e5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins/poppins-500-latin.792477d09826.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins/poppins-600-latin-ext.5a1b7c983a9d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins/poppins-600-latin.b550bca8934b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins/poppins-700-latin-ext.d3aa06d13d3c.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins/poppins-700-latin.0bd523f60499.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans/source-sans-400-latin-ext.f5ede6f599d1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans/source-sans-400-latin.a870ee3703f3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans/source-sans-600-latin-ext.dcc39b102225.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans/source-sans-600-latin.f3123e85194a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-sans/source-sans-700-latin-ext.dff4fcd7dfee.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-sans/source-sans-700-latin.b8be966e335e.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-400-latin-ext.e6155c5cfacf.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-400-latin.570751c5f8b4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-500-latin-ext.e6155c5cfacf.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-500-latin.570751c5f8b4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-600-latin-ext.e6155c5cfacf.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-600-latin.570751c5f8b4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-700-latin-ext.e6155c5cfacf.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-700-latin.570751c5f8b4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-baskerville/libre-baskerville-400-latin-ext.5f9829a886ca.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-baskerville/libre-baskerville-400-latin.40604adab287.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/libre-baskerville/libre-baskerville-700-latin-ext.5f9829a886ca.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/libre-baskerville/libre-baskerville-700-latin.40604adab287.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-400-latin-ext.dea099b7d5a5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-400-latin.25ea4a783c12.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-500-latin-ext.dea099b7d5a5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-500-latin.25ea4a783c12.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-600-latin-ext.dea099b7d5a5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-600-latin.25ea4a783c12.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-700-latin-ext.dea099b7d5a5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-700-latin.25ea4a783c12.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans/dm-sans-400-latin-ext.9598e1855de9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans/dm-sans-400-latin.d4c68940b772.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans/dm-sans-500-latin-ext.9598e1855de9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans/dm-sans-500-latin.d4c68940b772.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans/dm-sans-600-latin-ext.9598e1855de9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans/dm-sans-600-latin.d4c68940b772.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans/dm-sans-700-latin-ext.9598e1855de9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans/dm-sans-700-latin.d4c68940b772.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora/lora-italic-400-latin-ext.7b015a32d363.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora/lora-italic-400-latin.bf88700c66c9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/lora/lora-italic-500-latin-ext.7b015a32d363.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/lora/lora-italic-500-latin.bf88700c66c9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/lora/lora-italic-600-latin-ext.7b015a32d363.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/lora/lora-italic-600-latin.bf88700c66c9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lora/lora-italic-700-latin-ext.7b015a32d363.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lora/lora-italic-700-latin.bf88700c66c9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora/lora-400-latin-ext.d551ed729291.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora/lora-400-latin.662c56ecd8de.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/lora/lora-500-latin-ext.d551ed729291.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/lora/lora-500-latin.662c56ecd8de.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/lora/lora-600-latin-ext.d551ed729291.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/lora/lora-600-latin.662c56ecd8de.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lora/lora-700-latin-ext.d551ed729291.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lora/lora-700-latin.662c56ecd8de.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display/playfair-display-400-latin-ext.a81e6c6c3493.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display/playfair-display-400-latin.6da252de0cbc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-display/playfair-display-700-latin-ext.a81e6c6c3493.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-display/playfair-display-700-latin.6da252de0cbc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader/newsreader-italic-400-latin-ext.c8eb9a42b5ad.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader/newsreader-italic-400-latin.96616af417c8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader/newsreader-400-latin-ext.40f89707c10e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader/newsreader-400-latin.0a301b6df4c7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/newsreader/newsreader-500-latin-ext.40f89707c10e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/newsreader/newsreader-500-latin.0a301b6df4c7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
[data-button-shape="sharp"] {
  --button-radius: 0;
}
[data-button-shape="slight"] {
  --button-radius: 0.25rem;
}
[data-button-shape="default"] {
  --button-radius: 0.75rem;
}
[data-button-shape="pill"] {
  --button-radius: 1.25rem;
}
[data-button-shape="full-pill"] {
  --button-radius: 9999px;
}
[data-font="system"] {
  --cd-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
[data-font="inter"] {
  --cd-font-primary: "Inter", sans-serif;
}
[data-font="roboto"] {
  --cd-font-primary: "Roboto", sans-serif;
}
[data-font="open-sans"] {
  --cd-font-primary: "Open Sans", sans-serif;
}
[data-font="lato"] {
  --cd-font-primary: "Lato", sans-serif;
}
[data-font="poppins"] {
  --cd-font-primary: "Poppins", sans-serif;
}
[data-font="source-sans"] {
  --cd-font-primary: "Source Sans Pro", sans-serif;
}
[data-font="monospace"] {
  --cd-font-primary: "JetBrains Mono", "Courier New", monospace;
}
[data-font="libre-baskerville"] {
  --cd-font-primary: "Libre Baskerville", serif;
}
[data-font="space-grotesk"] {
  --cd-font-primary: "Space Grotesk", sans-serif;
}
[data-font="dm-sans"] {
  --cd-font-primary: "DM Sans", sans-serif;
}
[data-font="lora"] {
  --cd-font-primary: "Lora", serif;
}
[data-font="playfair-display"] {
  --cd-font-primary: "Playfair Display", serif;
}
[data-font-size="x-small"] {
  --cd-font-size-multiplier: 0.85;
}
[data-font-size="small"] {
  --cd-font-size-multiplier: 0.9;
}
[data-font-size="default"] {
  --cd-font-size-multiplier: 1.0;
}
[data-font-size="large"] {
  --cd-font-size-multiplier: 1.1;
}
[data-font-size="x-large"] {
  --cd-font-size-multiplier: 1.25;
}
@layer components {
  :root {
    --cd-color-shark: #1d1d1f;
    --cd-color-athens-gray: #f5f5f7;
    --cd-color-white: #ffffff;
    --cd-color-science-blue: #0066cc;
    --cd-color-forest-green: #228b22;
    --cd-color-crimson-red: #dc143c;
    --cd-color-warning-orange: #ff6b35;
    --cd-color-deep-purple: #6366f1;
    --cd-color-platinum-silver: #c0c0c0;
    --cd-focus-ring: 0 0 0 2px var(--cd-color-primary);
    --cd-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    --cd-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --cd-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --cd-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --cd-font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --cd-font-secondary: 'Roboto', sans-serif;
    --cd-font-display: var(--cd-font-editorial);
    --cd-font-mono: 'Fira Code', 'Courier New', monospace;
    --cd-font-size-multiplier: 1;
    --cd-text-xs: calc(0.75rem * var(--cd-font-size-multiplier));
    --cd-text-sm: calc(0.875rem * var(--cd-font-size-multiplier));
    --cd-text-base: calc(1rem * var(--cd-font-size-multiplier));
    --cd-text-lg: calc(1.125rem * var(--cd-font-size-multiplier));
    --cd-text-xl: calc(1.25rem * var(--cd-font-size-multiplier));
    --cd-text-2xl: calc(1.5rem * var(--cd-font-size-multiplier));
    --cd-text-3xl: calc(1.875rem * var(--cd-font-size-multiplier));
    --cd-text-4xl: calc(2.25rem * var(--cd-font-size-multiplier));
    --cd-text-5xl: calc(3rem * var(--cd-font-size-multiplier));
    --cd-text-6xl: calc(3.75rem * var(--cd-font-size-multiplier));
    --cd-text-tiny: calc(0.625rem * var(--cd-font-size-multiplier));
    --cd-text-micro: calc(0.5rem * var(--cd-font-size-multiplier));
    --cd-color-accent-light: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --cd-color-accent-light: color-mix(in srgb, var(--cd-color-accent) 10%, transparent);
    }
    --cd-color-accent-hover: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --cd-color-accent-hover: color-mix(in srgb, var(--cd-color-accent) 80%, black);
    }
    --cd-text-on-primary: #ffffff;
    --cd-text-on-dark: #ffffff;
    --cd-text-on-accent: #ffffff;
    --cd-text-on-success: #ffffff;
    --cd-text-on-warning: #ffffff;
    --cd-text-on-info: #ffffff;
    --cd-text-on-error: #ffffff;
    --cd-text-on-premium: #ffffff;
    --cd-color-trust: #c2410c;
    --cd-color-trust-bg: #fff4ec;
    --cd-color-trust-border: #fed7aa;
    --cd-navbar-height: 56px;
    --cd-sidebar-width-desktop: 16rem;
    --cd-sidebar-width-tablet: 4rem;
    --cd-sidebar-width-mobile: 4rem;
    --cd-sidebar-gap: 1.5rem;
    --cd-sidebar-mobile-offset: 0.5rem;
    --cd-hamburger-offset: 272px;
    --cd-total-navbar-offset: var(--cd-navbar-height);
    --cd-bg-athens-gray: var(--cd-color-athens-gray);
  }
  @media (width >= 48rem) {
    :root {
      --cd-navbar-height: 72px;
    }
  }
  :root, [data-theme="default"] {
    --cd-color-primary: #1d1d1f;
    --cd-color-accent: #0066cc;
    --cd-color-success: #228b22;
    --cd-color-error: #dc143c;
    --cd-color-warning: #ff6b35;
    --cd-color-info: #6366f1;
    --cd-color-premium: #b8860b;
    --cd-bg-primary: #ffffff;
    --cd-bg-secondary: #f5f5f7;
    --cd-bg-tertiary: #e5e5e7;
    --cd-bg-quaternary: #dcdcde;
    --cd-bg-hover: #f0f0f2;
    --cd-bg-unread: #f8f9ff;
    --cd-border-hover: #d0d0d2;
    --cd-color-warning-light: #ffeaa7;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-primary);
    --cd-btn-secondary-text: var(--cd-text-primary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="dark"] {
    --cd-color-primary: #3b82f6;
    --cd-color-accent: #38bdf8;
    --cd-color-success: #4ade80;
    --cd-color-error: #f87171;
    --cd-color-warning: #fb923c;
    --cd-color-info: #a78bfa;
    --cd-color-premium: #fbbf24;
    --cd-bg-primary: #0f172a;
    --cd-bg-secondary: #1e293b;
    --cd-bg-tertiary: #334155;
    --cd-bg-quaternary: #475569;
    --cd-text-on-accent: #ffffff;
    --cd-bg-hover: #334155;
    --cd-bg-unread: #1e3a8a;
    --cd-border-hover: #64748b;
    --cd-color-warning-light: #fbbf24;
    --cd-color-trust: #fed7aa;
    --cd-color-trust-bg: color-mix(in srgb, #c2410c 18%, transparent);
    --cd-color-trust-border: color-mix(in srgb, #fed7aa 30%, transparent);
    --cd-bg-athens-gray: var(--cd-bg-secondary);
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-on-dark);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-on-dark);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="professional"] {
    --cd-color-primary: #2c3e50;
    --cd-color-accent: #3498db;
    --cd-color-success: #27ae60;
    --cd-color-error: #e74c3c;
    --cd-color-warning: #f39c12;
    --cd-color-info: #8e44ad;
    --cd-color-premium: #b8860b;
    --cd-bg-primary: #ffffff;
    --cd-bg-secondary: #ecf0f1;
    --cd-bg-tertiary: #d5dbdb;
    --cd-bg-quaternary: #bdc3c7;
    --cd-bg-hover: #e8f4fd;
    --cd-bg-unread: #f8f9ff;
    --cd-border-hover: #3498db;
    --cd-color-warning-light: #fff4e6;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="modern"] {
    --cd-color-primary: #0891b2;
    --cd-color-accent: #06b6d4;
    --cd-color-success: #14b8a6;
    --cd-color-error: #ef4444;
    --cd-color-warning: #f59e0b;
    --cd-color-info: #0ea5e9;
    --cd-color-premium: #8b5cf6;
    --cd-bg-primary: #ffffff;
    --cd-bg-secondary: #f0fdfa;
    --cd-bg-tertiary: #e0f2fe;
    --cd-bg-quaternary: #bae6fd;
    --cd-bg-hover: #e0f2fe;
    --cd-bg-unread: #f0fdfa;
    --cd-border-hover: #06b6d4;
    --cd-color-warning-light: #fef3c7;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="sunset"] {
    --cd-color-primary: #c2410c;
    --cd-color-accent: #f59e0b;
    --cd-color-success: #84cc16;
    --cd-color-error: #dc2626;
    --cd-color-warning: #fbbf24;
    --cd-color-info: #f472b6;
    --cd-color-premium: #b8860b;
    --cd-bg-primary: #fffbf0;
    --cd-bg-secondary: #fef3c7;
    --cd-bg-tertiary: #fed7aa;
    --cd-bg-quaternary: #fdba74;
    --cd-bg-hover: #fed7aa;
    --cd-bg-unread: #fef3c7;
    --cd-border-hover: #f59e0b;
    --cd-color-warning-light: #fef3c7;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="canadian"] {
    --cd-color-primary: #dc2626;
    --cd-color-accent: #ca8a04;
    --cd-color-success: #16a34a;
    --cd-color-error: #991b1b;
    --cd-color-warning: #d97706;
    --cd-color-info: #2563eb;
    --cd-color-premium: #b8860b;
    --cd-bg-primary: #ffffff;
    --cd-bg-secondary: #fef2f2;
    --cd-bg-tertiary: #fee2e2;
    --cd-bg-quaternary: #fecaca;
    --cd-bg-hover: #fee2e2;
    --cd-bg-unread: #fef2f2;
    --cd-border-hover: #ca8a04;
    --cd-color-warning-light: #ffedd5;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="accessible"] {
    --cd-font-size-multiplier: 1.125;
    --cd-color-primary: #000000;
    --cd-color-accent: #0033cc;
    --cd-color-success: #008000;
    --cd-color-error: #cc0000;
    --cd-color-warning: #d65a00;
    --cd-color-info: #0066cc;
    --cd-color-premium: #b8860b;
    --cd-bg-primary: #ffffff;
    --cd-bg-secondary: #f0f0f0;
    --cd-bg-tertiary: #e0e0e0;
    --cd-bg-quaternary: #d0d0d0;
    --cd-bg-hover: #e0e0e0;
    --cd-bg-unread: #f0f0f0;
    --cd-border-hover: #0033cc;
    --cd-color-warning-light: #fff4e6;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
    --cd-text-on-warning: #000000;
  }
  [data-theme="neobrutalism"] {
    --cd-color-primary: #1d1d1f;
    --cd-color-accent: #FFE500;
    --cd-color-success: #00D26A;
    --cd-color-error: #FF3366;
    --cd-color-warning: #FF6600;
    --cd-color-info: #0066FF;
    --cd-color-premium: #9B59B6;
    --cd-bg-primary: #FFFFFF;
    --cd-bg-secondary: #F5F5F5;
    --cd-bg-tertiary: #E0E0E0;
    --cd-bg-quaternary: #C0C0C0;
    --cd-shadow-brutal-sm: 2px 2px 0 #000000;
    --cd-shadow-brutal-md: 4px 4px 0 #000000;
    --cd-shadow-brutal-lg: 6px 6px 0 #000000;
    --button-radius: var(--cd-button-radius-sharp);
    --cd-bg-hover: #E0E0E0;
    --cd-bg-unread: #FFFDE7;
    --cd-border-hover: #FFE500;
    --cd-color-warning-light: #FFF8DC;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="forest"] {
    --cd-color-primary: #166534;
    --cd-color-accent: #22c55e;
    --cd-color-success: #16a34a;
    --cd-color-error: #dc2626;
    --cd-color-warning: #f59e0b;
    --cd-color-info: #0ea5e9;
    --cd-color-premium: #8b5cf6;
    --cd-bg-primary: #f0fdf4;
    --cd-bg-secondary: #dcfce7;
    --cd-bg-tertiary: #bbf7d0;
    --cd-bg-quaternary: #86efac;
    --cd-bg-hover: #bbf7d0;
    --cd-bg-unread: #dcfce7;
    --cd-border-hover: #22c55e;
    --cd-color-warning-light: #fef3c7;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="ocean-breeze"] {
    --cd-color-primary: #0d9488;
    --cd-color-accent: #f97316;
    --cd-color-success: #22c55e;
    --cd-color-error: #dc2626;
    --cd-color-warning: #f59e0b;
    --cd-color-info: #0ea5e9;
    --cd-color-premium: #8b5cf6;
    --cd-bg-primary: #f0fdfa;
    --cd-bg-secondary: #ccfbf1;
    --cd-bg-tertiary: #99f6e4;
    --cd-bg-quaternary: #5eead4;
    --cd-bg-hover: #99f6e4;
    --cd-bg-unread: #ccfbf1;
    --cd-border-hover: #f97316;
    --cd-color-warning-light: #fef3c7;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="tabby"] {
    --cd-color-primary: #0066cc;
    --cd-color-accent: #ff6600;
    --cd-color-success: #22c55e;
    --cd-color-error: #dc2626;
    --cd-color-warning: #ff6600;
    --cd-color-info: #cc4400;
    --cd-color-premium: #b8860b;
    --cd-bg-primary: #ffffff;
    --cd-bg-secondary: #f5f5f7;
    --cd-bg-tertiary: #e5e5e7;
    --cd-bg-quaternary: #d1d5db;
    --cd-bg-hover: #e5e5e7;
    --cd-bg-unread: #f5f5f7;
    --cd-border-hover: #ff6600;
    --cd-color-warning-light: #fef3c7;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="sky"] {
    --cd-color-primary: #2B5AA0;
    --cd-color-accent: #1e40af;
    --cd-color-success: #22c55e;
    --cd-color-error: #dc2626;
    --cd-color-warning: #ff6b35;
    --cd-color-info: #0066cc;
    --cd-color-premium: #b8860b;
    --cd-bg-primary: #ffffff;
    --cd-bg-secondary: #f5f5f7;
    --cd-bg-tertiary: #e5e5e7;
    --cd-bg-quaternary: #d1d5db;
    --cd-bg-hover: #e5e5e7;
    --cd-bg-unread: #f5f5f7;
    --cd-border-hover: #0066cc;
    --cd-color-warning-light: #fef3c7;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="nostalgie"] {
    --cd-color-primary: #2B5AA0;
    --cd-color-accent: #ff6b35;
    --cd-color-success: #228b22;
    --cd-color-error: #dc143c;
    --cd-color-warning: #ff6b35;
    --cd-color-info: #2B5AA0;
    --cd-color-premium: #ffd700;
    --cd-bg-primary: #ffffff;
    --cd-bg-secondary: #c0c0c0;
    --cd-bg-tertiary: #b0b0b0;
    --cd-bg-quaternary: #a0a0a0;
    --cd-bg-hover: #b0b0b0;
    --cd-bg-unread: #c0c0c0;
    --cd-border-hover: #ff6b35;
    --cd-color-warning-light: #ffeaa7;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="craftsman"] {
    --cd-color-primary: #5D4037;
    --cd-color-accent: #B87333;
    --cd-color-success: #558B2F;
    --cd-color-error: #C62828;
    --cd-color-warning: #E65100;
    --cd-color-info: #5D4037;
    --cd-color-premium: #B87333;
    --cd-bg-primary: #FAF8F5;
    --cd-bg-secondary: #F5EDE4;
    --cd-bg-tertiary: #E8DDD0;
    --cd-bg-quaternary: #D4C4B0;
    --cd-bg-hover: #E8DDD0;
    --cd-bg-unread: #F5EDE4;
    --cd-border-hover: #B87333;
    --cd-color-warning-light: #FFE0B2;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="blueprint"] {
    --cd-color-primary: #0c4a6e;
    --cd-color-accent: #ea580c;
    --cd-color-success: #059669;
    --cd-color-error: #dc2626;
    --cd-color-warning: #ea580c;
    --cd-color-info: #0284c7;
    --cd-color-premium: #ca8a04;
    --cd-bg-primary: #f8fafc;
    --cd-bg-secondary: #e0f2fe;
    --cd-bg-tertiary: #bae6fd;
    --cd-bg-quaternary: #7dd3fc;
    --cd-bg-hover: #bae6fd;
    --cd-bg-unread: #e0f2fe;
    --cd-border-hover: #ea580c;
    --cd-color-warning-light: #ffedd5;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: #0c4a6e;
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: #0c4a6e;
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="worksite"] {
    --cd-color-primary: #1f2937;
    --cd-color-accent: #ea580c;
    --cd-color-success: #16a34a;
    --cd-color-error: #dc2626;
    --cd-color-warning: #f59e0b;
    --cd-color-info: #ea580c;
    --cd-color-premium: #f59e0b;
    --cd-bg-primary: #ffffff;
    --cd-bg-secondary: #fff7ed;
    --cd-bg-tertiary: #ffedd5;
    --cd-bg-quaternary: #fed7aa;
    --cd-bg-hover: #ffedd5;
    --cd-bg-unread: #fff7ed;
    --cd-border-hover: #ea580c;
    --cd-color-warning-light: #fef3c7;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: #1f2937;
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: #000000;
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: #1f2937;
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="workshop"] {
    --cd-color-primary: #b91c1c;
    --cd-color-accent: #9ca3af;
    --cd-color-success: #22c55e;
    --cd-color-error: #dc2626;
    --cd-color-warning: #f59e0b;
    --cd-color-info: #6b7280;
    --cd-color-premium: #b91c1c;
    --cd-bg-primary: #fef3c7;
    --cd-bg-secondary: #fde68a;
    --cd-bg-tertiary: #fcd34d;
    --cd-bg-quaternary: #fbbf24;
    --cd-bg-hover: #fde68a;
    --cd-bg-unread: #fef3c7;
    --cd-border-hover: #b91c1c;
    --cd-color-warning-light: #fef3c7;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-secondary);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: var(--cd-text-on-success);
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: var(--cd-text-on-warning);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-secondary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
  }
  [data-theme="darker-than-black"] {
    --cd-color-primary: #ffffff;
    --cd-color-accent: #00ffff;
    --cd-color-success: #00ff88;
    --cd-color-error: #ff0055;
    --cd-color-warning: #ffcc00;
    --cd-color-info: #00aaff;
    --cd-color-premium: #ffd700;
    --cd-text-on-primary: #000000;
    --cd-bg-primary: #0a0a0a;
    --cd-bg-secondary: #141414;
    --cd-bg-tertiary: #1e1e1e;
    --cd-bg-quaternary: #282828;
    --cd-bg-hover: #1e1e1e;
    --cd-bg-unread: #141414;
    --cd-border-hover: #00ffff;
    --cd-color-warning-light: #ffcc00;
    --cd-badge-primary-bg: var(--cd-color-primary);
    --cd-badge-primary-text: var(--cd-text-on-primary);
    --cd-badge-neutral-bg: var(--cd-bg-quaternary);
    --cd-badge-neutral-text: var(--cd-text-on-dark);
    --cd-badge-success-bg: var(--cd-color-success);
    --cd-badge-success-text: #000000;
    --cd-badge-warning-bg: var(--cd-color-warning);
    --cd-badge-warning-text: #000000;
    --cd-btn-primary-bg: var(--cd-color-accent);
    --cd-btn-primary-text: #000000;
    --cd-btn-secondary-bg: var(--cd-bg-tertiary);
    --cd-btn-secondary-text: var(--cd-text-on-dark);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: #000000;
    --cd-color-trust: #fed7aa;
    --cd-color-trust-bg: color-mix(in srgb, #c2410c 22%, transparent);
    --cd-color-trust-border: color-mix(in srgb, #fed7aa 35%, transparent);
    --cd-bg-athens-gray: var(--cd-bg-secondary);
  }
  :root, [data-theme] {
    --cd-text-primary: var(--cd-color-primary);
    --cd-text-secondary: #6b7280;
    --cd-text-tertiary: #9ca3af;
    --cd-border-primary: var(--cd-bg-tertiary);
    --cd-border-secondary: var(--cd-bg-quaternary);
    --cd-border-input: var(--cd-bg-quaternary);
    --cd-bg-card: var(--cd-bg-primary);
    --cd-card-bg: var(--cd-bg-card);
    --cd-card-border: var(--cd-border-primary);
    --cd-bg-hero: var(--cd-bg-primary);
    --cd-gradient-public-start: var(--cd-bg-hero);
    --cd-gradient-public-end: var(--cd-bg-primary);
    --cd-btn-primary-bg: var(--cd-color-primary);
    --cd-btn-primary-text: var(--cd-text-on-primary);
    --cd-btn-secondary-bg: var(--cd-bg-secondary);
    --cd-btn-secondary-text: var(--cd-text-primary);
    --cd-btn-accent-bg: var(--cd-color-accent);
    --cd-btn-accent-text: var(--cd-text-on-accent);
    --cd-avatar-placeholder-bg: var(--cd-text-secondary);
    --cd-avatar-placeholder-text: var(--cd-text-on-dark);
    --cd-badge-premium-bg: var(--cd-color-premium);
    --cd-badge-premium-text: var(--cd-text-on-premium);
  }
  [data-theme="default"], [data-theme=""] {
    --cd-btn-secondary-bg: var(--cd-bg-primary);
  }
  [data-theme="dark"] {
    --cd-text-primary: #f3f4f6;
    --cd-text-secondary: #9ca3af;
    --cd-text-tertiary: #d1d5db;
  }
  [data-theme="sunset"] {
    --cd-text-primary: #7c2d12;
    --cd-text-secondary: #9a3412;
    --cd-text-tertiary: #c2410c;
    --cd-text-on-accent: #000000;
  }
  [data-theme="forest"] {
    --cd-text-primary: #14532d;
    --cd-text-secondary: #166534;
    --cd-text-tertiary: #15803d;
    --cd-text-on-accent: #000000;
  }
  [data-theme="ocean-breeze"] {
    --cd-text-primary: #115e59;
    --cd-text-secondary: #0f766e;
    --cd-text-tertiary: #0d9488;
  }
  [data-theme="neobrutalism"] {
    --cd-text-primary: #1d1d1f;
    --cd-text-secondary: #4a4a4a;
    --cd-text-tertiary: #8a8a8a;
    --cd-text-on-accent: #000000;
    --cd-text-on-warning: #000000;
  }
  [data-theme="nostalgie"] {
    --cd-text-primary: #2B5AA0;
    --cd-text-secondary: #4b5563;
    --cd-text-tertiary: #6b7280;
  }
  [data-theme="craftsman"] {
    --cd-text-primary: #4E342E;
    --cd-text-secondary: #6D4C41;
    --cd-text-tertiary: #8D6E63;
  }
  [data-theme="blueprint"] {
    --cd-text-primary: #0c4a6e;
    --cd-text-secondary: #075985;
    --cd-text-tertiary: #0369a1;
  }
  [data-theme="worksite"] {
    --cd-text-primary: #1f2937;
    --cd-text-secondary: #374151;
    --cd-text-tertiary: #4b5563;
    --cd-text-on-warning: #000000;
  }
  [data-theme="workshop"] {
    --cd-text-primary: #1f2937;
    --cd-text-secondary: #4b5563;
    --cd-text-tertiary: #6b7280;
    --cd-text-on-accent: #000000;
  }
  [data-theme="darker-than-black"] {
    --cd-text-primary: #e0e0e0;
    --cd-text-secondary: #a0a0a0;
    --cd-text-tertiary: #999999;
    --cd-text-on-accent: #000000;
    --cd-text-on-success: #000000;
    --cd-text-on-warning: #000000;
  }
  [data-theme="canadian"] {
    --cd-text-primary: #450a0a;
    --cd-text-secondary: #78716c;
    --cd-text-tertiary: #a8a29e;
    --cd-text-on-accent: #000000;
  }
  [data-theme="accessible"] {
    --cd-text-primary: #000000;
    --cd-text-secondary: #1f2937;
    --cd-text-tertiary: #374151;
  }
  [data-theme="professional"] {
    --cd-text-primary: #2c3e50;
    --cd-text-secondary: #34495e;
    --cd-text-tertiary: #7f8c8d;
  }
  [data-theme="modern"] {
    --cd-text-primary: #0c4a6e;
    --cd-text-secondary: #0369a1;
    --cd-text-tertiary: #0284c7;
  }
  [data-theme="tabby"] {
    --cd-text-primary: #1e3a8a;
    --cd-text-secondary: #1e40af;
    --cd-text-tertiary: #3b82f6;
  }
  [data-theme="sky"] {
    --cd-text-primary: #1e3a8a;
    --cd-text-secondary: #1e40af;
    --cd-text-tertiary: #3b82f6;
  }
  .cd-logo {
    transition: var(--cd-transition);
  }
  [data-theme="dark"] .cd-logo {
    filter: invert(1) brightness(1);
  }
  [data-theme="darker-than-black"] .cd-logo {
    filter: invert(1) brightness(1);
  }
  .cd-logo-shine {
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
  }
  .cd-logo-shine:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.25);
  }
  .cd-logo-shine:active {
    transform: scale(0.94);
    transition-duration: 0.08s;
  }
  .cd-logo-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient( 60deg, transparent 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 60%, transparent 80% );
    pointer-events: none;
    opacity: 0;
  }
  .cd-logo-shine:hover::after {
    animation: logo-shine-sweep 0.6s ease-out;
  }
  @keyframes logo-shine-sweep {
    0% {
      transform: translateX(-120%);
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      transform: translateX(120%);
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-logo-shine, .cd-logo-shine:hover, .cd-logo-shine:active {
      transition: none;
      transform: none;
      box-shadow: none;
    }
    .cd-logo-shine:hover::after {
      animation: none;
    }
  }
  [data-theme="dark"] .cd-logo-shine::after, [data-theme="darker-than-black"] .cd-logo-shine::after {
    background: linear-gradient( 60deg, transparent 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 60%, transparent 80% );
  }
  @keyframes logo-shine {
    0% {
      transform: translateX(-100%) rotate(0deg);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    35% {
      transform: translateX(100%) rotate(0deg);
      opacity: 1;
    }
    40% {
      opacity: 0;
    }
    100% {
      transform: translateX(100%) rotate(0deg);
      opacity: 0;
    }
  }
  .cd-empty-state-image {
    transition: filter 0.2s ease;
  }
  [data-theme="dark"] .cd-empty-state-image, [data-theme="darker-than-black"] .cd-empty-state-image {
    filter: invert(1) brightness(0.9);
  }
  .cd-empty-state-colored {
    border-radius: var(--cd-radius-xl, 0.75rem);
    padding: var(--cd-space-3, 0.75rem);
    transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
  }
  [data-theme="dark"] .cd-empty-state-colored {
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
  }
  [data-theme="darker-than-black"] .cd-empty-state-colored {
    background-color: transparent;
    backdrop-filter: none;
  }
  [data-panel-style="clean"] {
    --cd-panel-shadow: none;
    --cd-panel-border-width: 1px;
    --cd-panel-radius: var(--cd-radius-2xl);
    --cd-panel-hover-transform: none;
    --cd-panel-hover-shadow: none;
  }
  [data-panel-style="elevated"] {
    --cd-panel-shadow: 0 4px 6px -1px rgba(0,0,0,0.08), 0 10px 20px -5px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.05);
    --cd-panel-border-width: 1px;
    --cd-panel-radius: var(--cd-radius-2xl);
    --cd-panel-hover-transform: translateY(-6px);
    --cd-panel-hover-shadow: 0 8px 12px -2px rgba(0,0,0,0.1), 0 20px 40px -10px rgba(0,0,0,0.15);
  }
  [data-panel-style="outlined"] {
    --cd-panel-shadow: none;
    --cd-panel-border-width: 2px;
    --cd-panel-border-color: #1d1d1f;
    --cd-panel-radius: var(--cd-radius-lg);
    --cd-panel-hover-transform: none;
    --cd-panel-hover-shadow: none;
  }
  [data-panel-style="brutal"] {
    --cd-panel-shadow: 4px 4px 0 #1d1d1f;
    --cd-panel-border-width: 2px;
    --cd-panel-radius: 0;
    --cd-panel-hover-transform: translate(-2px, -2px);
    --cd-panel-hover-shadow: 6px 6px 0 #1d1d1f;
  }
  [data-panel-style="soft"] {
    --cd-panel-shadow: inset 0 2px 6px rgba(0,0,0,0.06), inset 0 1px 2px rgba(0,0,0,0.04);
    --cd-panel-border-width: 1px;
    --cd-panel-radius: var(--cd-radius-3xl);
    --cd-panel-hover-transform: none;
    --cd-panel-hover-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
  }
  [data-panel-style="sharp"] {
    --cd-panel-shadow: 4px 4px 0 var(--cd-border-secondary);
    --cd-panel-border-width: 1px;
    --cd-panel-radius: var(--cd-radius-sm);
    --cd-panel-hover-transform: none;
    --cd-panel-hover-shadow: 6px 6px 0 var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] {
    --cd-panel-shadow: 4px 4px 0 var(--cd-color-primary);
    --cd-panel-border-width: 2px;
    --cd-panel-radius: 0;
    --cd-panel-hover-transform: translate(-2px, -2px);
    --cd-panel-hover-shadow: 6px 6px 0 var(--cd-color-primary);
  }
}
[data-panel-style="outlined"] .cd-card, [data-panel-style="outlined"] .cd-card-alt, [data-panel-style="outlined"] .cd-card-hover, [data-panel-style="outlined"] .cd-card-compact, [data-panel-style="outlined"] .cd-card-side-panel, [data-panel-style="outlined"] .cd-card-premium, [data-panel-style="outlined"] .cd-card-flush, [data-panel-style="outlined"] .cd-card-section {
  border-color: var(--cd-panel-border-color, var(--cd-card-border));
}
@layer components {
  .cd-panel-base {
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, none);
  }
  .cd-panel {
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-panel:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  .cd-panel-sm {
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-sm));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-panel-sm:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-sm)));
  }
  .cd-panel-md {
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-md));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-panel-md:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-md)));
  }
  .cd-panel-lg {
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-lg));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-panel-lg:hover {
    transform: var(--cd-panel-hover-transform, translateY(-0.25rem));
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-lg)));
  }
  .cd-panel-radius-xl {
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl)) !important;
  }
  .cd-panel-radius-lg {
    border-radius: var(--cd-panel-radius, var(--cd-radius-lg)) !important;
  }
  .cd-panel-static {
    transition: none;
  }
  .cd-panel-static:hover {
    transform: none;
    box-shadow: inherit;
  }
}
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  [x-cloak] {
    display: none !important;
  }
  .bg-gradient-gray {
    background: linear-gradient(to bottom, var(--color-athens-gray) 0%, var(--color-white) 100%);
  }
  .scrollbar-dropdown {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
  }
  .scrollbar-dropdown::-webkit-scrollbar {
    width: 8px;
  }
  .scrollbar-dropdown::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
  }
  .scrollbar-dropdown::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
    border: 1px solid #f3f4f6;
  }
  .scrollbar-dropdown::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }
  .scrollbar-visible {
    scrollbar-width: auto;
    scrollbar-color: #6b7280 #f9fafb;
  }
  .scrollbar-visible::-webkit-scrollbar {
    width: 12px;
  }
  .scrollbar-visible::-webkit-scrollbar-track {
    background: #f9fafb;
    border-radius: 6px;
  }
  .scrollbar-visible::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 6px;
    border: 2px solid #f9fafb;
  }
  .scrollbar-visible::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
  }
  .cd-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--cd-text-tertiary) var(--cd-bg-secondary);
  }
  .cd-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .cd-scrollbar::-webkit-scrollbar-track {
    background: var(--cd-bg-secondary);
    border-radius: 4px;
  }
  .cd-scrollbar::-webkit-scrollbar-thumb {
    background: var(--cd-text-tertiary);
    border-radius: 4px;
    border: 1px solid var(--cd-bg-secondary);
  }
  .cd-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--cd-text-secondary);
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  details[open] .details-open\:rotate-180 {
    transform: rotate(180deg);
  }
}
[x-cloak] {
  display: none !important;
}
.fas, .far, .fal, .fad, .fab, .fa-solid, .fa-regular, .fa-light, .fa-duotone, .fa-brands {
  display: inline-block;
  min-width: 1em;
  text-align: center;
}
@layer components {
  .cd-grid-3-col {
    display: grid;
    gap: var(--cd-grid-gap-base);
    grid-template-columns: repeat(3, 1fr);
  }
  .cd-grid-responsive-2col {
    display: grid;
    gap: var(--cd-grid-gap-lg);
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .cd-grid-responsive-2col {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .cd-flex {
    display: flex;
  }
  .cd-mb-2 {
    margin-bottom: var(--cd-space-2);
  }
  .cd-mb-4 {
    margin-bottom: var(--cd-space-4);
  }
  .cd-mt-6 {
    margin-top: var(--cd-space-6);
  }
  .cd-pt-6 {
    padding-top: var(--cd-space-6);
  }
  .cd-rounded-full {
    border-radius: var(--cd-radius-full);
  }
  .cd-text-center {
    text-align: center;
  }
}
@layer components {
  .cd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-2);
    padding-left: var(--cd-space-5);
    padding-right: var(--cd-space-5);
    padding-top: var(--cd-space-3);
    padding-bottom: var(--cd-space-3);
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--button-radius);
    font-family: var(--cd-font-primary);
    font-size: var(--cd-text-sm);
    transition: var(--cd-transition);
    background-color: var(--cd-btn-primary-bg);
    color: var(--cd-btn-primary-text);
  }
  .cd-btn-primary, .cd-btn-secondary, .cd-btn-outline, .cd-btn-outline-accent, .cd-btn-outline-danger, .cd-btn-destructive, .cd-btn-success, .cd-btn-warning, .cd-btn-black, .cd-btn-white, .cd-btn-outline-light, .cd-btn-ghost, .cd-btn-premium, .cd-btn-compare {
    cursor: pointer;
  }
  .cd-btn-wrap {
    white-space: normal;
    line-height: 1.2;
    padding-left: var(--cd-space-3);
    padding-right: var(--cd-space-3);
    font-size: 0.8125rem;
  }
  .cd-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--cd-color-accent-light);
  }
  .cd-btn-primary {
    background-color: var(--cd-btn-primary-bg);
    color: var(--cd-btn-primary-text);
  }
  .cd-btn-primary:hover {
    opacity: 0.85;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .cd-btn-secondary {
    background-color: var(--cd-btn-secondary-bg);
    color: var(--cd-btn-secondary-text);
    border: 2px solid var(--cd-border-secondary);
  }
  .cd-btn-secondary:hover {
    background-color: var(--cd-bg-tertiary);
    border-color: var(--cd-color-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }
  [data-theme="default"] .cd-btn-secondary:hover, [data-theme=""] .cd-btn-secondary:hover {
    background-color: var(--cd-bg-secondary);
    border-color: #b8b8bd;
  }
  .cd-btn-destructive, .cd-btn-danger {
    background-color: var(--cd-color-error);
    color: var(--cd-text-on-dark);
  }
  .cd-btn-success {
    background-color: var(--cd-color-success);
    color: var(--cd-text-on-dark);
  }
  .cd-btn-warning {
    background-color: var(--cd-color-warning);
    color: var(--cd-text-on-dark);
  }
  .cd-btn-black {
    background-color: var(--cd-color-shark);
    color: var(--cd-text-on-dark);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-btn-white {
    background-color: #ffffff;
    color: #0a0a0a;
    border: none;
  }
  .cd-btn-white:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
  .cd-btn-white:hover i {
    transform: translateX(3px);
  }
  .cd-btn-outline-light {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .cd-btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }
  .cd-btn-theme-secondary {
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-accent);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-btn-premium {
    background-color: var(--cd-color-info);
    color: var(--cd-text-on-dark);
  }
  .cd-btn-compare {
    background-color: var(--cd-btn-accent-bg);
    color: var(--cd-btn-accent-text);
    font-weight: 700;
    box-shadow: 0 4px 14px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 14px color-mix(in srgb, var(--cd-color-accent) 32%, transparent);
    }
  }
  .cd-btn-compare:hover {
    background-color: var(--cd-color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 6px 20px color-mix(in srgb, var(--cd-color-accent) 42%, transparent);
    }
  }
  .cd-btn-destructive:hover, .cd-btn-danger:hover, .cd-btn-success:hover, .cd-btn-warning:hover, .cd-btn-black:hover, .cd-btn-theme-secondary:hover, .cd-btn-premium:hover {
    opacity: 0.9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
  .cd-btn-outline {
    background-color: transparent;
    color: var(--cd-color-primary);
    border: 1px solid var(--cd-color-primary);
  }
  .cd-btn-outline:hover {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-btn-outline-accent {
    background-color: transparent;
    color: var(--cd-color-accent);
    border: 2px solid var(--cd-color-accent);
  }
  .cd-btn-outline-accent:hover {
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-accent);
  }
  .cd-btn-outline-danger {
    background-color: transparent;
    color: var(--cd-color-error);
    border: 2px solid var(--cd-color-error);
  }
  .cd-btn-outline-danger:hover {
    background-color: var(--cd-color-error);
    color: var(--cd-text-on-dark);
  }
  .cd-btn-ghost {
    background-color: transparent;
    color: var(--cd-text-primary);
  }
  .cd-btn-ghost:hover {
    background-color: var(--cd-bg-secondary);
  }
  .cd-btn-inactive {
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-tertiary);
    cursor: not-allowed;
  }
  .cd-btn-inactive:hover {
    background-color: var(--cd-bg-tertiary);
    transform: none;
    box-shadow: none;
  }
  .cd-btn-inactive:focus {
    box-shadow: 0 0 0 3px var(--cd-border-secondary);
  }
  .cd-btn-small, .cd-btn-sm {
    padding-left: var(--cd-space-3);
    padding-right: var(--cd-space-3);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    gap: var(--cd-space-1);
    font-size: var(--cd-text-xs);
  }
  .cd-btn-large {
    padding: var(--cd-space-3_5) var(--cd-space-7);
    gap: var(--cd-space-2_5);
    font-size: 0.9375rem;
  }
  .cd-btn:disabled, .cd-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }
  .cd-btn-loading {
    position: relative;
    color: transparent;
  }
  .cd-btn-loading::after {
    content: '';
    position: absolute;
    width: var(--cd-space-4);
    height: var(--cd-space-4);
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: var(--cd-radius-full);
    animation: spin 1s linear infinite;
    top: 50%;
    left: 50%;
    margin-left: calc(-1 * var(--cd-space-2));
    margin-top: calc(-1 * var(--cd-space-2));
    color: var(--cd-btn-spinner-color, white);
  }
  .cd-btn-secondary.cd-btn-loading {
    --cd-btn-spinner-color: var(--cd-btn-secondary-text);
  }
  .cd-btn-white.cd-btn-loading {
    --cd-btn-spinner-color: #0a0a0a;
  }
  .cd-btn-ghost.cd-btn-loading {
    --cd-btn-spinner-color: var(--cd-text-primary);
  }
  .cd-btn-outline.cd-btn-loading {
    --cd-btn-spinner-color: var(--cd-color-primary);
  }
  .cd-btn-inactive.cd-btn-loading {
    --cd-btn-spinner-color: var(--cd-text-tertiary);
  }
  a.cd-btn[data-nav-spinner].htmx-request {
    position: relative;
    pointer-events: none;
  }
  a.cd-btn[data-nav-spinner].htmx-request > * {
    opacity: 0;
  }
  a.cd-btn[data-nav-spinner].htmx-request::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--cd-space-4);
    height: var(--cd-space-4);
    margin-top: calc(-1 * var(--cd-space-2));
    margin-left: calc(-1 * var(--cd-space-2));
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: var(--cd-radius-full);
    animation: spin 1s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    a.cd-btn[data-nav-spinner].htmx-request {
      opacity: 0.7;
    }
    a.cd-btn[data-nav-spinner].htmx-request > * {
      opacity: 1;
    }
    a.cd-btn[data-nav-spinner].htmx-request::after {
      content: none;
    }
  }
  .cd-btn-archive {
    display: inline-flex;
    align-items: center;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    font-weight: 500;
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: var(--cd-text-sm);
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-btn-archive:hover {
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-color-primary);
    border-color: var(--cd-border-primary);
  }
  .cd-btn-nav {
    padding-left: var(--cd-space-6);
    padding-right: var(--cd-space-6);
    padding-top: var(--cd-space-3);
    padding-bottom: var(--cd-space-3);
    border-radius: var(--cd-radius-xl);
    font-weight: 600;
    gap: var(--cd-space-2);
    font-size: var(--cd-text-sm);
  }
  .cd-btn-nav-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    background-color: transparent;
    transition: all 0.2s ease;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-secondary);
    font-family: var(--cd-font-primary);
  }
  .cd-btn-nav-secondary:hover {
    background-color: var(--cd-bg-secondary);
  }
  .cd-btn-nav-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease;
    font-size: var(--cd-text-sm);
    background-color: var(--cd-btn-primary-bg);
    color: var(--cd-btn-primary-text);
    font-family: var(--cd-font-primary);
  }
  .cd-btn-nav-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease;
    font-size: var(--cd-text-sm);
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-accent);
    font-family: var(--cd-font-primary);
  }
  .cd-btn-search {
    position: absolute;
    right: var(--cd-space-3);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--cd-color-shark);
    color: white;
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0;
    box-shadow: var(--cd-shadow-md);
  }
  .cd-btn-search:hover {
    background-color: var(--cd-color-shark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-shark) 85%, transparent);
    }
  }
  .cd-btn-search:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-color-shark), 0 0 0 4px white;
  }
  .cd-btn-search-sm {
    width: calc(var(--cd-space-8) + var(--cd-space-1));
    height: calc(var(--cd-space-8) + var(--cd-space-1));
    font-size: var(--cd-text-sm);
  }
  .cd-btn-search-md {
    width: var(--cd-space-12);
    height: var(--cd-space-12);
    font-size: var(--cd-text-base);
  }
  .cd-btn-search-lg {
    width: calc(var(--cd-space-12) + var(--cd-space-2));
    height: calc(var(--cd-space-12) + var(--cd-space-2));
    font-size: var(--cd-text-lg);
  }
  .cd-btn-auth-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    font-weight: 500;
    border-radius: var(--cd-radius-xl);
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: var(--cd-text-sm);
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    border: 1px solid var(--cd-border-secondary);
    font-family: var(--cd-font-primary);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .cd-btn-auth-outline:hover {
    background-color: var(--cd-bg-tertiary);
    border-color: var(--cd-border-primary);
  }
  .cd-btn-auth-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    font-weight: 500;
    border-radius: var(--cd-radius-xl);
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: var(--cd-text-sm);
    background-color: var(--cd-btn-primary-bg);
    color: var(--cd-btn-primary-text);
    border: 1px solid var(--cd-btn-primary-bg);
    font-family: var(--cd-font-primary);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .cd-btn-auth-filled:hover {
    opacity: 0.85;
  }
  .cd-btn-text-responsive .cd-btn-text-mobile {
    display: none;
  }
  @media (max-width: 640px) {
    .cd-btn-text-responsive .cd-btn-text-desktop {
      display: none;
    }
    .cd-btn-text-responsive .cd-btn-text-mobile {
      display: inline;
    }
  }
  .cd-btn-progress-step {
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  @media (min-width: 640px) {
    .cd-btn-progress-step {
      min-width: 40px;
      min-height: 40px;
    }
  }
  .cd-btn-review-edit {
    min-height: 44px;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-3);
    padding-bottom: var(--cd-space-3);
    font-size: var(--cd-text-sm);
    transition: all 0.2s ease;
  }
  @media (max-width: 640px) {
    .cd-btn-review-edit {
      width: 100%;
      justify-content: center;
      margin-top: var(--cd-space-2);
    }
  }
  .cd-btn-icon {
    padding: var(--cd-space-2);
    aspect-ratio: 1;
    min-width: 36px;
  }
  .cd-btn-sm.cd-btn-icon, .cd-btn-small.cd-btn-icon {
    padding: var(--cd-space-1-5);
    min-width: 32px;
  }
  .cd-btn-icon-mobile {
    min-width: 44px;
    min-height: 44px;
    padding: var(--cd-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cd-radius-lg);
  }
  @media (min-width: 640px) {
    .cd-btn-icon-mobile {
      min-width: 40px;
      min-height: 40px;
    }
  }
  .cd-btn-group-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
  }
  @media (min-width: 640px) {
    .cd-btn-group-mobile {
      flex-direction: row;
      gap: var(--cd-space-2);
    }
  }
  @media (max-width: 768px) {
    .cd-btn:focus-visible {
      outline: 3px solid var(--cd-color-accent);
      @supports (color: color-mix(in lab, red, red)) {
        outline: 3px solid color-mix(in srgb, var(--cd-color-accent) 40%, transparent);
      }
      outline-offset: 2px;
    }
    .cd-btn:active {
      transform: scale(0.98);
    }
  }
  .cd-link-accent {
    color: var(--cd-color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--cd-transition);
  }
  .cd-link-accent:hover {
    color: var(--cd-color-accent-hover);
  }
  .cd-link-accent:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-color-accent-light);
    border-radius: var(--cd-radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-btn, .cd-btn-primary, .cd-btn-secondary, .cd-btn-destructive, .cd-btn-success, .cd-btn-warning, .cd-btn-black, .cd-btn-outline, .cd-btn-outline-accent, .cd-btn-outline-danger, .cd-btn-ghost, .cd-btn-premium, .cd-btn-white, .cd-btn-outline-light, .cd-btn-archive, .cd-btn-nav, .cd-btn-nav-secondary, .cd-btn-nav-primary, .cd-btn-nav-accent, .cd-btn-search, .cd-btn-auth-outline, .cd-btn-auth-filled, .cd-btn-progress-step, .cd-btn-review-edit, .cd-link-accent {
      transition: none !important;
    }
    .cd-btn:active {
      transform: none !important;
    }
    .cd-btn-loading::after {
      animation: none !important;
    }
  }
}
@layer components {
  :root {
    --size-text-xs: 0.6875rem;
    --size-text-sm: 0.75rem;
    --size-text-md: 0.875rem;
    --size-text-lg: 1rem;
    --size-text-xl: 1.125rem;
    --size-pad-xs: 0.25rem 0.5rem;
    --size-pad-sm: 0.5rem 0.75rem;
    --size-pad-md: 0.75rem 1.25rem;
    --size-pad-lg: 1rem 1.5rem;
    --size-pad-xl: 1.25rem 2rem;
    --size-gap-xs: 0.25rem;
    --size-gap-sm: 0.375rem;
    --size-gap-md: 0.5rem;
    --size-gap-lg: 0.75rem;
    --size-gap-xl: 1rem;
    --size-radius-xs: 0.25rem;
    --size-radius-sm: 0.375rem;
    --size-radius-md: 0.5rem;
    --size-radius-lg: 0.75rem;
    --size-radius-xl: 1rem;
    --size-height-xs: 1.75rem;
    --size-height-sm: 2rem;
    --size-height-md: 2.5rem;
    --size-height-lg: 3rem;
    --size-height-xl: 3.5rem;
  }
  .cd-btn[data-size="xs"] {
    padding: var(--size-pad-xs);
    font-size: var(--size-text-xs);
    gap: var(--size-gap-xs);
    min-height: var(--size-height-xs);
    border-radius: var(--size-radius-xs);
  }
  .cd-btn[data-size="sm"] {
    padding: var(--size-pad-sm);
    font-size: var(--size-text-sm);
    gap: var(--size-gap-sm);
    min-height: var(--size-height-sm);
    border-radius: var(--size-radius-sm);
  }
  .cd-btn[data-size="md"], .cd-btn:not([data-size]) {
    padding: var(--size-pad-md);
    font-size: var(--size-text-md);
    gap: var(--size-gap-md);
    min-height: var(--size-height-md);
  }
  .cd-btn[data-size="lg"] {
    padding: var(--size-pad-lg);
    font-size: var(--size-text-lg);
    gap: var(--size-gap-lg);
    min-height: var(--size-height-lg);
    border-radius: var(--size-radius-lg);
  }
  .cd-btn[data-size="xl"] {
    padding: var(--size-pad-xl);
    font-size: var(--size-text-xl);
    gap: var(--size-gap-xl);
    min-height: var(--size-height-xl);
    border-radius: var(--size-radius-xl);
  }
  .cd-btn.cd-btn-icon[data-size="xs"] {
    padding: 0.25rem;
    width: var(--size-height-xs);
    height: var(--size-height-xs);
  }
  .cd-btn.cd-btn-icon[data-size="sm"] {
    padding: 0.375rem;
    width: var(--size-height-sm);
    height: var(--size-height-sm);
  }
  .cd-btn.cd-btn-icon[data-size="md"], .cd-btn.cd-btn-icon:not([data-size]) {
    padding: 0.5rem;
    width: var(--size-height-md);
    height: var(--size-height-md);
  }
  .cd-btn.cd-btn-icon[data-size="lg"] {
    padding: 0.625rem;
    width: var(--size-height-lg);
    height: var(--size-height-lg);
  }
  .cd-btn.cd-btn-icon[data-size="xl"] {
    padding: 0.75rem;
    width: var(--size-height-xl);
    height: var(--size-height-xl);
  }
  .cd-badge[data-size="xs"] {
    padding: 0.125rem 0.375rem !important;
    font-size: var(--size-text-xs) !important;
    gap: var(--size-gap-xs) !important;
  }
  .cd-badge[data-size="sm"] {
    padding: 0.25rem 0.5rem !important;
    font-size: var(--size-text-sm) !important;
    gap: var(--size-gap-sm) !important;
  }
  .cd-badge[data-size="md"], .cd-badge:not([data-size]) {
    padding: 0.375rem 0.75rem !important;
    font-size: var(--size-text-md) !important;
    gap: var(--size-gap-md) !important;
  }
  .cd-badge[data-size="lg"] {
    padding: 0.5rem 1rem !important;
    font-size: var(--size-text-lg) !important;
    gap: var(--size-gap-lg) !important;
  }
  .cd-badge[data-size="xl"] {
    padding: 0.625rem 1.25rem !important;
    font-size: var(--size-text-xl) !important;
    gap: var(--size-gap-xl) !important;
  }
  .cd-input[data-size="xs"], .cd-select[data-size="xs"], .cd-textarea[data-size="xs"] {
    padding: var(--size-pad-xs) !important;
    font-size: var(--size-text-xs) !important;
    min-height: var(--size-height-xs);
    border-radius: var(--size-radius-xs);
  }
  .cd-input[data-size="sm"], .cd-select[data-size="sm"], .cd-textarea[data-size="sm"] {
    padding: var(--size-pad-sm) !important;
    font-size: var(--size-text-sm) !important;
    min-height: var(--size-height-sm);
    border-radius: var(--size-radius-sm);
  }
  .cd-input[data-size="md"], .cd-input:not([data-size]), .cd-select[data-size="md"], .cd-select:not([data-size]), .cd-textarea[data-size="md"], .cd-textarea:not([data-size]) {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: var(--size-text-md) !important;
    min-height: var(--size-height-md);
  }
  .cd-input[data-size="lg"], .cd-select[data-size="lg"], .cd-textarea[data-size="lg"] {
    padding: var(--size-pad-lg) !important;
    font-size: var(--size-text-lg) !important;
    min-height: var(--size-height-lg);
    border-radius: var(--size-radius-lg);
  }
  .cd-input[data-size="xl"], .cd-select[data-size="xl"], .cd-textarea[data-size="xl"] {
    padding: var(--size-pad-xl) !important;
    font-size: var(--size-text-xl) !important;
    min-height: var(--size-height-xl);
    border-radius: var(--size-radius-xl);
  }
  .cd-textarea[data-size] {
    min-height: auto;
  }
  .cd-card:not([data-size]) {
    padding: 0.75rem;
  }
  .cd-card[data-size="xs"] {
    padding: 0.75rem;
    border-radius: var(--size-radius-xs);
  }
  .cd-card[data-size="sm"] {
    padding: 1rem;
    border-radius: var(--size-radius-sm);
  }
  .cd-card[data-size="md"] {
    padding: 1.5rem;
  }
  .cd-card[data-size="lg"] {
    padding: 2rem;
    border-radius: var(--size-radius-lg);
  }
  .cd-card[data-size="xl"] {
    padding: 2.5rem;
    border-radius: var(--size-radius-xl);
  }
  .cd-card[data-size="xs"] .cd-card-header, .cd-card:not([data-size]) .cd-card-header {
    padding: 0.5rem 0.75rem;
    margin: -0.75rem -0.75rem 0.75rem;
  }
  .cd-card[data-size="sm"] .cd-card-header {
    padding: 0.75rem 1rem;
    margin: -1rem -1rem 1rem;
  }
  .cd-card[data-size="md"] .cd-card-header {
    padding: 1rem 1.5rem;
    margin: -1.5rem -1.5rem 1.5rem;
  }
  .cd-card[data-size="lg"] .cd-card-header {
    padding: 1.25rem 2rem;
    margin: -2rem -2rem 2rem;
  }
  .cd-card[data-size="xl"] .cd-card-header {
    padding: 1.5rem 2.5rem;
    margin: -2.5rem -2.5rem 2.5rem;
  }
  .cd-card[data-size="xs"] .cd-card-footer, .cd-card:not([data-size]) .cd-card-footer {
    padding: 0.5rem 0.75rem;
    margin: 0.75rem -0.75rem -0.75rem;
  }
  .cd-card[data-size="sm"] .cd-card-footer {
    padding: 0.75rem 1rem;
    margin: 1rem -1rem -1rem;
  }
  .cd-card[data-size="md"] .cd-card-footer {
    padding: 1rem 1.5rem;
    margin: 1.5rem -1.5rem -1.5rem;
  }
  .cd-card[data-size="lg"] .cd-card-footer {
    padding: 1.25rem 2rem;
    margin: 2rem -2rem -2rem;
  }
  .cd-card[data-size="xl"] .cd-card-footer {
    padding: 1.5rem 2.5rem;
    margin: 2.5rem -2.5rem -2.5rem;
  }
  .cd-alert[data-size="xs"] {
    padding: var(--size-pad-xs) !important;
    font-size: var(--size-text-xs) !important;
    border-radius: var(--size-radius-xs);
  }
  .cd-alert[data-size="sm"] {
    padding: var(--size-pad-sm) !important;
    font-size: var(--size-text-sm) !important;
    border-radius: var(--size-radius-sm);
  }
  .cd-alert[data-size="md"], .cd-alert:not([data-size]) {
    padding: var(--size-pad-md) !important;
    font-size: var(--size-text-md) !important;
  }
  .cd-alert[data-size="lg"] {
    padding: var(--size-pad-lg) !important;
    font-size: var(--size-text-lg) !important;
    border-radius: var(--size-radius-lg);
  }
  .cd-alert[data-size="xl"] {
    padding: var(--size-pad-xl) !important;
    font-size: var(--size-text-xl) !important;
    border-radius: var(--size-radius-xl);
  }
  @media (max-width: 640px) {
    [data-size="xl"] {
      --size-text-xl: 1rem;
      --size-height-xl: 3rem;
    }
    [data-size="lg"] {
      --size-text-lg: 0.875rem;
      --size-height-lg: 2.5rem;
    }
  }
  [data-button-size="xs"] .cd-btn:not([data-size]) {
    padding: var(--size-pad-xs);
    font-size: var(--size-text-xs);
    gap: var(--size-gap-xs);
    min-height: var(--size-height-xs);
  }
  [data-button-size="sm"] .cd-btn:not([data-size]) {
    padding: var(--size-pad-sm);
    font-size: var(--size-text-sm);
    gap: var(--size-gap-sm);
    min-height: var(--size-height-sm);
  }
  [data-button-size="lg"] .cd-btn:not([data-size]) {
    padding: var(--size-pad-lg);
    font-size: var(--size-text-lg);
    gap: var(--size-gap-lg);
    min-height: var(--size-height-lg);
  }
  [data-button-size="xl"] .cd-btn:not([data-size]) {
    padding: var(--size-pad-xl);
    font-size: var(--size-text-xl);
    gap: var(--size-gap-xl);
    min-height: var(--size-height-xl);
  }
  [data-button-size="xs"] .cd-btn.cd-btn-icon:not([data-size]) {
    width: var(--size-height-xs);
    height: var(--size-height-xs);
    padding: 0;
  }
  [data-button-size="sm"] .cd-btn.cd-btn-icon:not([data-size]) {
    width: var(--size-height-sm);
    height: var(--size-height-sm);
    padding: 0;
  }
  [data-button-size="lg"] .cd-btn.cd-btn-icon:not([data-size]) {
    width: var(--size-height-lg);
    height: var(--size-height-lg);
    padding: 0;
  }
  [data-button-size="xl"] .cd-btn.cd-btn-icon:not([data-size]) {
    width: var(--size-height-xl);
    height: var(--size-height-xl);
    padding: 0;
  }
}
@layer components {
  .cd-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-2_5) var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    font-weight: 500;
    font-size: var(--cd-text-xs);
    transition: var(--cd-transition);
  }
  .cd-badge img {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
  }
  @media (max-width: 640px) {
    .cd-trust-row {
      gap: var(--cd-space-1) !important;
      flex-wrap: nowrap !important;
    }
    .cd-trust-row > div {
      display: contents !important;
    }
    .cd-trust-row .cd-badge, .cd-trust-row button.cd-badge, .cd-trust-row span.cd-badge, .cd-trust-row a > span.cd-badge {
      padding: var(--cd-space-1) var(--cd-space-2) !important;
      font-size: 10px !important;
      gap: var(--cd-space-1) !important;
      white-space: nowrap;
      min-width: 0;
      flex-shrink: 1;
    }
    .cd-trust-row .cd-badge i {
      margin-right: 2px !important;
    }
  }
  .cd-badge-blue {
    color: var(--cd-color-accent);
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-accent) 30%, transparent);
    }
  }
  .cd-badge-green {
    color: var(--cd-color-success);
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 20%, transparent);
    }
  }
  .cd-badge-orange {
    color: var(--cd-color-warning);
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
  }
  .cd-badge-gold {
    color: var(--membership-business-primary, #d4af37);
    background-color: var(--membership-business-primary, #d4af37);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--membership-business-primary, #d4af37) 8%, var(--cd-bg-primary));
    }
    border-color: var(--membership-business-primary, #d4af37);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--membership-business-primary, #d4af37) 30%, transparent);
    }
  }
  .cd-badge-gray {
    background-color: var(--color-gray-100);
    color: var(--color-gray-500);
  }
  .cd-badge-red {
    color: var(--cd-color-error);
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-error) 20%, transparent);
    }
  }
  .cd-badge-purple {
    color: var(--cd-color-deep-purple);
    background-color: var(--cd-color-deep-purple);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-deep-purple) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-deep-purple);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-deep-purple) 30%, transparent);
    }
  }
  .cd-badge-status {
    display: flex;
    height: 100%;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--cd-radius-lg);
    border-style: var(--tw-border-style);
    border-width: 2px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .cd-badge-icon {
    height: auto;
    width: auto;
    padding: calc(var(--spacing) * 0);
  }
  .cd-badge-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-tiny);
    line-height: 1;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
  }
  .cd-badge-small-auto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-tiny);
    line-height: 1;
    gap: 0;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3125rem;
  }
  .cd-badge-compact {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-1_5) var(--cd-space-2_5);
    border-radius: var(--cd-radius-lg);
    font-weight: 500;
    font-size: var(--cd-text-xs);
    line-height: 1.3;
    transition: var(--cd-transition);
  }
  .cd-badge-large {
    padding: var(--cd-space-3) var(--cd-space-4);
    gap: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-sm);
  }
  .cd-badge-primary {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-badge-secondary {
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-dark);
  }
  .cd-badge-success {
    background-color: var(--cd-color-success);
    color: var(--cd-text-on-dark);
  }
  .cd-badge-warning {
    background-color: var(--cd-color-warning);
    color: var(--cd-text-on-dark);
  }
  .cd-badge-error {
    background-color: var(--cd-color-error);
    color: var(--cd-text-on-dark);
  }
  .cd-badge-premium {
    background-color: var(--cd-color-info);
    color: var(--cd-text-on-dark);
  }
  .cd-badge-neutral {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-badge-dark {
    background-color: var(--color-shark);
    color: var(--cd-text-on-dark);
  }
  .cd-badge-inactive {
    background-color: var(--cd-text-tertiary);
    color: var(--cd-text-on-dark);
  }
  .cd-badge-province {
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-dark);
  }
  .cd-badge-accent {
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-accent);
  }
  .cd-badge-outline {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-2_5) var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    font-weight: 500;
    background-color: transparent;
    font-size: var(--cd-text-xs);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-primary);
    transition: var(--cd-transition);
  }
  .cd-badge-outline:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-border-primary);
  }
  .cd-badge-outline:hover {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
  }
  .cd-badge-soft-primary {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 5%, transparent);
    }
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
    color: var(--cd-color-primary);
  }
  .cd-badge-soft-secondary {
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-secondary);
  }
  .cd-badge-soft-success {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 5%, transparent);
    }
    border: 1px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-success) 20%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-badge-soft-warning {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 5%, transparent);
    }
    border: 1px solid var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
    color: var(--cd-color-warning);
  }
  .cd-badge-soft-error {
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 5%, transparent);
    }
    border: 1px solid var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-error) 20%, transparent);
    }
    color: var(--cd-color-error);
  }
  .cd-badge-soft-trust {
    background-color: var(--cd-color-trust-bg);
    border: 1px solid var(--cd-color-trust-border);
    color: var(--cd-color-trust);
  }
  .cd-badge-soft-info {
    background-color: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-info) 5%, transparent);
    }
    border: 1px solid var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-info) 20%, transparent);
    }
    color: var(--cd-color-info);
  }
  .cd-badge-soft-gold {
    background-color: var(--membership-business-primary, #d4af37);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--membership-business-primary, #d4af37) 5%, transparent);
    }
    border: 1px solid var(--membership-business-primary, #d4af37);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--membership-business-primary, #d4af37) 20%, transparent);
    }
    color: var(--membership-business-primary, #d4af37);
  }
  .cd-badge-soft-neutral {
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-secondary);
  }
  .cd-badge-soft-dark {
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 5%, transparent);
    }
    border: 1px solid var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
    color: var(--cd-color-accent);
  }
  .cd-badge-soft-accent {
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 5%, transparent);
    }
    border: 1px solid var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
    color: var(--cd-color-accent);
  }
  .cd-badge-soft-premium {
    background: linear-gradient(to right, var(--cd-color-info), var(--cd-color-info));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to right, color-mix(in srgb, var(--cd-color-info) 5%, transparent), color-mix(in srgb, var(--cd-color-info) 10%, transparent));
    }
    border: 1px solid var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-info) 30%, transparent);
    }
    color: var(--cd-color-info);
  }
  .cd-badge-tonal {
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-secondary);
    padding: 0.25rem 0.5rem;
    gap: 0.3125rem;
    font-size: calc(0.71875rem * var(--cd-font-size-multiplier));
    line-height: 1.2;
  }
  .cd-badge-tonal > i, .cd-badge-tonal > svg {
    color: var(--cd-tonal-icon, var(--cd-text-tertiary));
    font-size: 0.9em;
  }
  .cd-badge-tonal-neutral {
    --cd-tonal-icon: var(--cd-text-secondary);
  }
  .cd-badge-tonal-accent {
    --cd-tonal-icon: var(--cd-color-accent);
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
  }
  .cd-badge-tonal-success {
    --cd-tonal-icon: var(--cd-color-success);
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 9%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 22%, transparent);
    }
  }
  .cd-badge-tonal-error {
    --cd-tonal-icon: var(--cd-color-error);
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-error) 22%, transparent);
    }
  }
  .cd-badge-tonal-gold {
    --cd-tonal-icon: var(--membership-business-primary, #d4af37);
    background-color: var(--membership-business-primary, #d4af37);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--membership-business-primary, #d4af37) 9%, var(--cd-bg-primary));
    }
    border-color: var(--membership-business-primary, #d4af37);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--membership-business-primary, #d4af37) 22%, transparent);
    }
  }
  .cd-badge-gradient-premium {
    background: linear-gradient(135deg, var(--color-shark) 0%, var(--color-science-blue) 100%);
    color: var(--cd-text-on-dark);
  }
  .cd-badge-gradient-success {
    background: linear-gradient(to right, var(--color-emerald), var(--cd-color-success));
    color: var(--cd-text-on-dark);
  }
  .cd-priority-chrono {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid color-mix(in srgb, #1d1d1f 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--color-shark) 12%, transparent);
    }
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-shark);
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
  }
  .cd-priority-chrono__dial {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: conic-gradient( var(--color-science-blue) 0 var(--cd-chrono-fill, 100%), var(--cd-border-primary) var(--cd-chrono-fill, 100%) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: conic-gradient( var(--color-science-blue) 0 var(--cd-chrono-fill, 100%), color-mix(in srgb, var(--cd-border-primary) 80%, transparent) var(--cd-chrono-fill, 100%) 100% );
    }
    position: relative;
    flex-shrink: 0;
    transition: background 0.3s ease;
  }
  .cd-priority-chrono__dial::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
  }
  .cd-priority-chrono__label {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
  }
  .cd-priority-chrono__time {
    font-variant-numeric: tabular-nums;
    color: var(--color-science-blue);
    font-weight: 700;
  }
  .cd-priority-chrono__suffix {
    color: var(--cd-text-secondary);
    font-weight: 500;
  }
}
@layer components {
  .cd-stat-card-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 1.5);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .cd-stat-card-container--cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .cd-stat-card-container--cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .cd-quiet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 1.5);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .cd-stat-card-accent {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-card-bg);
    text-align: center;
    --tw-shadow: var(--cd-panel-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-top: 3px solid currentColor;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-stat-card-accent:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  a:hover > .cd-stat-card-accent, a:focus > .cd-stat-card-accent {
    border-inline-color: var(--cd-border-hover);
    border-bottom-color: var(--cd-border-hover);
  }
  .cd-stat-card-accent-footer {
    display: none;
    background-color: var(--cd-bg-secondary);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
    @media (width >= 48rem) {
      display: block;
    }
  }
  .cd-stat-card-accent-footer-limit {
    display: none;
    background-color: var(--cd-bg-secondary);
    padding: calc(var(--spacing) * 0);
    padding-bottom: calc(var(--spacing) * 2);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
    @media (width >= 48rem) {
      display: block;
    }
  }
  .cd-stat-card-progress-label {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 0);
    text-align: center;
    font-size: var(--cd-text-xs);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--cd-text-tertiary);
  }
  .cd-stat-card-accent-content {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-grow: 1;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    padding: calc(var(--spacing) * 1);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      justify-content: space-between;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 5);
    }
    gap: var(--cd-space-1);
  }
  .cd-stat-card-accent-value-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-1);
  }
  .cd-stat-card-accent-small-icon {
    flex-shrink: 0;
    font-size: var(--cd-text-xs);
    @media (width >= 48rem) {
      display: none;
    }
    color: currentColor;
  }
  .cd-stat-card-accent-large-icon {
    display: none;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .cd-stat-card-accent-value-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    @media (width >= 48rem) {
      flex: 0 auto;
    }
    @media (width >= 48rem) {
      justify-content: normal;
    }
  }
  .cd-stat-card-accent-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--cd-text-lg);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    @media (width >= 48rem) {
      font-size: var(--cd-text-3xl);
    }
    color: currentColor;
    font-family: var(--cd-font-numeral);
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.015em;
  }
  .cd-stat-card-accent-label {
    font-size: 0.65rem;
    --tw-leading: 1.2;
    line-height: 1.2;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    overflow-wrap: break-word;
    color: var(--cd-text-secondary);
    @media (width >= 48rem) {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    word-break: break-word;
  }
  .cd-stat-card-container--align-end .cd-stat-card-accent-value-row {
    justify-content: flex-end;
  }
  .cd-stat-card-container--align-end .cd-stat-card-accent-label {
    text-align: right;
  }
  .cd-card {
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    color: var(--cd-text-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
  }
  .cd-card:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  .cd-card.cd-profile-result-card:not(.cd-card-featured) {
    border-color: var(--cd-border-secondary);
  }
  .cd-card.cd-profile-result-card:not(.cd-card-featured, .cd-profile-card-premium, .cd-profile-card-professional, .cd-profile-card-business):hover {
    transform: translateY(-2px);
    box-shadow: var(--cd-shadow-lg);
  }
  .cd-card-alt {
    background-color: var(--cd-bg-secondary);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-secondary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: var(--cd-space-6);
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-card-alt:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  .cd-card-outline {
    background-color: var(--cd-bg-primary);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: var(--cd-space-6);
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-card-outline:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  .cd-card-hover {
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-md));
    padding: var(--cd-space-6);
    transition: all 0.2s ease;
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
  }
  .cd-card-hover:hover {
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-shadow-lg));
    transform: var(--cd-panel-hover-transform, translateY(-0.25rem));
  }
  .cd-card-compact {
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-md));
    padding: var(--cd-space-4);
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-card-compact:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-md)));
  }
  .cd-card-side-panel {
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-md));
    padding: var(--cd-space-2);
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-card-side-panel:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-md)));
  }
  .cd-card-premium {
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-sm));
    min-width: 0;
    padding: var(--cd-space-6) var(--cd-space-4);
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    color: var(--cd-text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-card-premium:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-sm)));
  }
  .cd-card-premium-interactive {
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-lg));
    padding: var(--cd-space-8);
    border: var(--cd-panel-border-width, 2px) solid;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--cd-card-bg);
    border-color: var(--cd-card-border);
    color: var(--cd-text-primary);
  }
  .cd-card-premium-interactive:hover {
    border-color: var(--cd-color-primary);
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-lg)));
  }
  .cd-card-flush {
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-sm));
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    color: var(--cd-text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
  }
  .cd-card-flush:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-sm)));
  }
  .cd-card-flush-titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-card-flush-toolbar {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
    background-color: var(--cd-bg-secondary);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-card-section {
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-md));
    padding: var(--cd-space-6);
    margin-bottom: var(--cd-space-6);
    background-color: var(--cd-bg-card);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-card-section:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-md)));
  }
  .cd-card-header {
    margin: calc(-1 * var(--cd-space-6));
    margin-bottom: var(--cd-space-6);
    padding: var(--cd-space-6);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-card-footer {
    margin: calc(-1 * var(--cd-space-6));
    margin-top: var(--cd-space-6);
    padding: var(--cd-space-6);
    border-top: 1px solid var(--cd-border-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-card-body {
    padding: 0;
  }
  .cd-card-title {
    font-family: var(--cd-font-display);
    font-size: var(--cd-text-lg);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--cd-text-primary);
  }
  .cd-card-subtitle {
    font-size: var(--cd-text-sm);
    margin-bottom: 1rem;
    color: var(--cd-text-secondary);
  }
  .cd-card-gradient-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-color-success) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 10%, transparent) 0%, color-mix(in srgb, var(--cd-color-success) 10%, transparent) 100%);
    }
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
  }
  .cd-card-gradient-primary::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: var(--cd-space-32);
    height: var(--cd-space-32);
    transform: translate(var(--cd-space-16), calc(-1 * var(--cd-space-16)));
    border-radius: var(--cd-radius-full);
    opacity: 0.5;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
  }
  .cd-card-priority-halo {
    background-color: var(--cd-card-bg) !important;
    background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(59, 130, 246, 0.06), transparent 70%) !important;
    border: 1px solid rgba(29, 78, 216, 0.15) !important;
    box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.08), 0 8px 24px -4px rgba(29, 78, 216, 0.18), 0 2px 6px -1px rgba(15, 23, 42, 0.06) !important;
  }
  .cd-card-priority-halo:hover {
    border-color: rgba(29, 78, 216, 0.22) !important;
    box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.12), 0 12px 32px -4px rgba(29, 78, 216, 0.25), 0 2px 6px -1px rgba(15, 23, 42, 0.08) !important;
  }
  .cd-priority-strip {
    background: linear-gradient(180deg, #0f0f11 0%, #1d1d1f 100%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
  }
  .cd-priority-strip__top-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
  }
  .cd-priority-strip__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 4px 8px 0;
  }
  .cd-priority-strip__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
  }
  @media (max-width: 639px) {
    .cd-priority-strip__top-row {
      gap: 4px;
    }
    .cd-priority-strip__center {
      display: none;
    }
    .cd-priority-strip__kicker-text {
      display: none;
    }
    .cd-priority-strip .cd-quote-status-active--dark, .cd-priority-strip .cd-quote-status-draft--dark, .cd-priority-strip .cd-quote-status-paused--dark, .cd-priority-strip .cd-quote-status-completed--dark, .cd-priority-strip .cd-quote-status-expired--dark, .cd-priority-strip .cd-quote-status-cancelled--dark, .cd-priority-strip .cd-quote-status-closed--dark, .cd-priority-strip .cd-quote-urgency-urgent--dark, .cd-priority-strip .cd-quote-urgency-high--dark, .cd-priority-strip .cd-quote-urgency-medium--dark, .cd-priority-strip .cd-quote-urgency-low--dark, .cd-priority-strip .cd-priority-strip__lock-badge {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
  }
  .cd-priority-strip__bot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    padding: 0 16px;
  }
  .cd-priority-strip__sub {
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-priority-strip__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .cd-priority-strip .cd-quote-status-active--dark, .cd-priority-strip .cd-quote-status-draft--dark, .cd-priority-strip .cd-quote-status-paused--dark, .cd-priority-strip .cd-quote-status-completed--dark, .cd-priority-strip .cd-quote-status-expired--dark, .cd-priority-strip .cd-quote-status-cancelled--dark, .cd-priority-strip .cd-quote-status-closed--dark, .cd-priority-strip .cd-quote-urgency-urgent--dark, .cd-priority-strip .cd-quote-urgency-high--dark, .cd-priority-strip .cd-quote-urgency-medium--dark, .cd-priority-strip .cd-quote-urgency-low--dark, .cd-priority-strip .cd-priority-strip__lock-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    align-self: flex-start;
  }
  .cd-priority-strip__lock-badge {
    background-color: color-mix(in srgb, #d4af37 22%, transparent);
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: color-mix(in srgb, #d4af37 55%, transparent);
    border-radius: 0 0 0.5rem 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: color-mix(in srgb, #d4af37 30%, white);
  }
  .cd-membership-polar-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: linear-gradient(180deg, #c2410c 0%, #ea580c 100%);
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    font-size: 12px;
  }
  .cd-membership-polar-strip__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .cd-membership-polar-strip__count {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .cd-membership-polar-strip__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background-color 0.15s ease-in-out;
    cursor: pointer;
    border: none;
  }
  .cd-membership-polar-strip__cta:hover {
    background-color: rgba(255, 255, 255, 0.28);
  }
  .cd-membership-polar-strip--unknown {
    background: linear-gradient(180deg, #475569 0%, #64748b 100%);
  }
  .cd-priority-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: linear-gradient(180deg, #0f0f11 0%, #1d1d1f 100%);
    color: rgba(255, 255, 255, 0.95);
    font-size: 11px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  }
  .cd-priority-pill > i {
    font-size: 10px;
    color: rgba(147, 197, 253, 0.95);
  }
  .cd-priority-pill__label {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .cd-priority-pill__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.95);
    padding-left: 6px;
    margin-left: 2px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    white-space: nowrap;
  }
  .cd-priority-pill--locked > i {
    color: rgba(255, 255, 255, 0.85);
  }
  .cd-priority-pill--locked .cd-priority-pill__label {
    color: rgba(255, 255, 255, 0.88);
  }
  .cd-card-glass {
    backdrop-filter: blur(4px);
    border: 1px solid;
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-3);
    margin-top: var(--cd-space-4);
    background-color: var(--cd-text-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-on-dark) 10%, transparent);
    }
    border-color: var(--cd-text-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-text-on-dark) 20%, transparent);
    }
  }
  @media (min-width: 640px) {
    .cd-card-glass {
      padding: var(--cd-space-4);
    }
  }
  .cd-card-border-urgent, .cd-card-border-high, .cd-card-border-medium, .cd-card-border-low {
    border-right-width: 4px;
  }
  .cd-card-border-urgent {
    border-right-color: var(--cd-color-error);
  }
  .cd-card-border-high {
    border-right-color: var(--cd-color-warning);
  }
  .cd-card-border-medium {
    border-right-color: var(--cd-color-shark);
  }
  .cd-card-border-low {
    border-right-color: var(--cd-text-tertiary);
  }
  .cd-map-overlay {
    background: linear-gradient( 135deg, var(--cd-color-primary) 0%, var(--cd-color-accent) 50%, var(--cd-color-warning) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, color-mix(in srgb, var(--cd-color-primary) 60%, transparent) 0%, color-mix(in srgb, var(--cd-color-accent) 40%, transparent) 50%, color-mix(in srgb, var(--cd-color-warning) 50%, transparent) 100% );
    }
  }
  .cd-card-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--cd-radius-2xl);
    padding: 0;
    height: 100%;
    background-color: var(--cd-card-bg);
  }
  .cd-card-image-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2), transparent);
    border-radius: var(--cd-radius-2xl);
  }
  .cd-card-image-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    color: white;
    text-align: center;
  }
  .cd-card-image-title {
    font-size: var(--cd-text-3xl);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
  }
  .cd-card-image-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--cd-text-lg);
  }
  .cd-card-image-badge {
    display: inline-block;
    margin-bottom: var(--cd-space-6);
  }
  .cd-stat-card {
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    padding: var(--cd-space-4);
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    box-shadow: var(--cd-panel-shadow, 0 1px 3px 0 var(--cd-text-primary), 0 1px 2px 0 var(--cd-text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-panel-shadow, 0 1px 3px 0 color-mix(in srgb, var(--cd-text-primary) 10%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--cd-text-primary) 6%, transparent));
    }
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  @media (min-width: 640px) {
    .cd-stat-card {
      padding: var(--cd-space-6);
    }
  }
  .cd-stat-card:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, 0 4px 6px -1px var(--cd-text-primary), 0 2px 4px -1px var(--cd-text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-panel-hover-shadow, 0 4px 6px -1px color-mix(in srgb, var(--cd-text-primary) 10%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--cd-text-primary) 6%, transparent));
    }
  }
  .cd-stat-label {
    font-size: var(--cd-text-xs);
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--cd-text-secondary);
  }
  .cd-stat-value {
    font-family: var(--cd-font-numeral);
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.015em;
    line-height: 1.05;
    font-size: var(--cd-text-2xl);
    font-weight: 700;
    color: var(--cd-text-primary);
  }
  @media (min-width: 640px) {
    .cd-stat-value {
      font-size: var(--cd-text-3xl);
    }
  }
  .cd-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
  .cd-stat-card-premium {
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    padding: var(--cd-space-6);
    background: linear-gradient(135deg, var(--cd-card-bg) 0%, var(--cd-card-bg) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-card-bg) 0%, color-mix(in srgb, var(--cd-card-bg) 95%, var(--cd-science-blue) 5%) 100%);
    }
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    box-shadow: var(--cd-panel-shadow, 0 4px 6px -1px var(--cd-text-primary), 0 2px 4px -1px var(--cd-text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-panel-shadow, 0 4px 6px -1px color-mix(in srgb, var(--cd-text-primary) 10%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--cd-text-primary) 6%, transparent));
    }
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
  }
  .cd-stat-card-premium:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, 0 4px 6px -1px var(--cd-text-primary)));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, 0 4px 6px -1px color-mix(in srgb, var(--cd-text-primary) 10%, transparent)));
    }
  }
  .cd-stat-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cd-science-blue), var(--cd-emerald-green), var(--cd-deep-purple));
  }
  .cd-stat-card-secondary {
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: var(--cd-space-4);
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    box-shadow: var(--cd-panel-shadow, 0 1px 3px 0 var(--cd-text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-panel-shadow, 0 1px 3px 0 color-mix(in srgb, var(--cd-text-primary) 5%, transparent));
    }
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-stat-card-secondary:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, 0 1px 3px 0 var(--cd-text-primary)));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, 0 1px 3px 0 color-mix(in srgb, var(--cd-text-primary) 5%, transparent)));
    }
  }
  .cd-stat-icon-small {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
  .cd-stat-sublabel {
    font-size: var(--cd-text-xs);
    font-weight: 400;
    color: var(--cd-text-muted);
    margin-top: 0.125rem;
  }
  .cd-trend-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: var(--cd-text-xs);
    font-weight: 600;
  }
  .cd-trend-up {
    background-color: var(--cd-emerald-green);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-emerald-green) 10%, transparent);
    }
    color: var(--cd-emerald-green);
  }
  .cd-trend-down {
    background-color: var(--cd-red-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-red-accent) 10%, transparent);
    }
    color: var(--cd-red-accent);
  }
  .cd-trend-neutral {
    background-color: var(--cd-text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-secondary) 10%, transparent);
    }
    color: var(--cd-text-secondary);
  }
  .cd-card-has-quotes {
    border: 1px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-success) 35%, var(--cd-card-border));
    }
    background: linear-gradient(135deg, var(--cd-color-success) 0%, var(--cd-color-success) 50%, var(--cd-card-bg) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-success) 8%, var(--cd-card-bg)) 0%, color-mix(in srgb, var(--cd-color-success) 3%, var(--cd-card-bg)) 50%, var(--cd-card-bg) 100%);
    }
    box-shadow: 0 1px 3px 0 var(--cd-color-success), 0 1px 2px -1px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--cd-color-success) 12%, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px color-mix(in srgb, var(--cd-color-success) 8%, rgba(0, 0, 0, 0.1));
    }
    position: relative;
  }
  .cd-card-has-quotes:hover {
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 45%, var(--cd-card-border));
    }
    background: linear-gradient(135deg, var(--cd-color-success) 0%, var(--cd-color-success) 50%, var(--cd-card-bg) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-success) 12%, var(--cd-card-bg)) 0%, color-mix(in srgb, var(--cd-color-success) 5%, var(--cd-card-bg)) 50%, var(--cd-card-bg) 100%);
    }
    box-shadow: 0 4px 6px -1px var(--cd-color-success), 0 2px 4px -2px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--cd-color-success) 15%, rgba(0, 0, 0, 0.1)), 0 2px 4px -2px color-mix(in srgb, var(--cd-color-success) 10%, rgba(0, 0, 0, 0.05));
    }
    transform: translateY(-0.5px);
  }
  .cd-card-has-quotes .quote-count-container {
    color: var(--cd-color-success);
    font-weight: 600;
  }
  .cd-card-has-quotes .quote-count-number {
    color: var(--cd-color-success);
    text-shadow: 0 1px 2px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      text-shadow: 0 1px 2px color-mix(in srgb, var(--cd-color-success) 20%, transparent);
    }
  }
  .cd-card-tint-success {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 8%, var(--cd-card-bg));
    }
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 30%, var(--cd-card-border));
    }
  }
  .cd-card-tint-neutral {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
  }
  .card {
    background-color: var(--cd-card-bg);
    border: 1px solid var(--cd-card-border);
    color: var(--cd-text-primary);
    border-radius: var(--cd-radius-2xl);
    box-shadow: var(--cd-shadow-md);
    padding: var(--cd-space-6);
  }
  .cd-card-category {
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-card-category:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  .cd-card-category-header {
    padding: var(--cd-space-6);
    border-bottom: 1px solid var(--cd-border-secondary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-card-category-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--cd-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--cd-bg-card);
    transition: transform 0.3s ease;
  }
  .cd-card-category:hover .cd-card-category-icon {
    transform: scale(1.1);
  }
  .cd-card-category-icon i {
    color: var(--cd-color-primary);
  }
  .cd-card-category-title {
    font-size: var(--cd-text-2xl);
    font-weight: 700;
    margin-bottom: var(--cd-space-2);
    color: var(--cd-text-primary);
    transition: color 0.3s ease;
  }
  .cd-card-category:hover .cd-card-category-title {
    color: var(--cd-science-blue);
  }
  .cd-card-category-description {
    font-size: var(--cd-text-sm);
    margin-bottom: var(--cd-space-3);
    color: var(--cd-text-secondary);
  }
  .cd-card-category-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1-5);
    padding: var(--cd-space-1) var(--cd-space-3);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 500;
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-primary);
  }
  .cd-card-category-body {
    padding: var(--cd-space-6);
  }
  .cd-card-category-section-title {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    margin-bottom: var(--cd-space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-text-secondary);
  }
  .cd-card-category-profession-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-2xl);
    background-color: var(--cd-bg-secondary);
    transition: background-color 0.2s ease;
    text-decoration: none;
  }
  .cd-card-category-profession-link:hover {
    background-color: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-bg-secondary) 50%, var(--cd-bg-tertiary));
    }
  }
  .cd-card-category-profession-name {
    font-weight: 500;
    color: var(--cd-text-primary);
  }
  .cd-card-category-profession-icon {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-card-category-profession-count {
    font-size: var(--cd-text-xs);
    padding: var(--cd-space-1) var(--cd-space-2);
    border-radius: var(--cd-radius);
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-secondary);
  }
  .cd-card-category-profession-arrow {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  .cd-card-category-footer {
    padding: 0 var(--cd-space-6) var(--cd-space-6);
  }
  .cd-card-quick-link {
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, none);
    padding: var(--cd-space-8);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: block;
    text-decoration: none;
  }
  .cd-card-quick-link:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-shadow-lg));
    text-decoration: none;
  }
  .cd-card-quick-link-icon {
    font-size: var(--cd-text-4xl);
    margin-bottom: var(--cd-space-4);
    color: var(--cd-color-primary);
  }
  .cd-card-quick-link-title {
    font-size: var(--cd-text-lg);
    font-weight: 700;
    margin-bottom: var(--cd-space-2);
    color: var(--cd-text-primary);
  }
  .cd-card-quick-link-description {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-section-secondary {
    background-color: var(--cd-bg-secondary);
  }
  .cd-category-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--cd-radius-xl);
    background-color: var(--cd-bg-tertiary);
  }
  .cd-category-section-icon i {
    font-size: var(--cd-text-xl);
    color: var(--cd-color-primary);
  }
  .cd-category-section-title {
    font-size: var(--cd-text-2xl);
    font-weight: 700;
    color: var(--cd-text-primary);
  }
  .cd-category-section-description {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-card-featured {
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
  }
  .cd-featured-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);
    z-index: 5;
  }
  .cd-featured-badge i {
    font-size: 0.65rem;
    color: white;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  }
  .cd-card-featured:hover {
    box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.15), 0 6px 12px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
  }
  .cd-card-featured:hover .cd-featured-badge {
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.5);
  }
  [data-panel-style="brutal"] .cd-card-featured {
    box-shadow: 4px 4px 0 #d4af37 !important;
  }
  [data-panel-style="brutal"] .cd-card-featured:hover {
    box-shadow: 6px 6px 0 #d4af37 !important;
  }
  [data-panel-style="sharp"] .cd-card-featured {
    box-shadow: 4px 4px 0 #d4af37 !important;
  }
  [data-panel-style="sharp"] .cd-card-featured:hover {
    box-shadow: 6px 6px 0 #d4af37 !important;
  }
}
@layer components {
  .cd-card-interactive {
    display: block;
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    padding: var(--cd-space-4);
    transition: all 0.2s ease-in-out;
    height: 100%;
    background-color: var(--cd-bg-card);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    box-shadow: var(--cd-panel-shadow, none);
  }
  .cd-card-interactive:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-color-primary);
  }
  .cd-card-interactive:hover {
    border-color: var(--cd-color-primary);
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  .cd-card-selected {
    border-color: var(--cd-color-primary);
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-bg-secondary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 5%, transparent) 0%, color-mix(in srgb, var(--cd-bg-secondary) 10%, transparent) 100%);
    }
    box-shadow: 0 4px 6px -1px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
  }
  .cd-card-interactive-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-3);
  }
  .cd-card-interactive-icon {
    width: var(--cd-space-10);
    height: var(--cd-space-10);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cd-radius-lg);
    flex-shrink: 0;
  }
  .cd-card-interactive-icon-neutral {
    transition: all 0.2s ease-in-out;
    background-color: var(--cd-bg-secondary);
  }
  .cd-card-interactive-icon-primary {
    font-weight: 700;
    font-size: var(--cd-text-base);
    background-color: var(--cd-bg-secondary);
    color: var(--cd-color-primary);
  }
  .cd-card-interactive-content {
    flex: 1;
    min-width: 0;
  }
  .cd-card-interactive-title {
    font-size: var(--cd-text-base);
    font-weight: 600;
    margin-bottom: var(--cd-space-1);
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-primary);
  }
  .cd-card-interactive-description {
    font-size: var(--cd-text-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--cd-text-tertiary);
  }
  .cd-card-interactive-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--cd-text-xs);
  }
  .cd-card-interactive-meta-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1);
    white-space: nowrap;
    color: var(--cd-text-secondary);
  }
  .cd-card-interactive-meta-accent {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1);
    white-space: nowrap;
    font-weight: 500;
    color: var(--cd-color-accent);
  }
  .cd-card-interactive-arrow {
    flex-shrink: 0;
    margin-top: var(--cd-space-0-5);
  }
  .cd-card-interactive-arrow-icon {
    font-size: var(--cd-text-xs);
    transition: all 0.15s ease-in-out;
    color: var(--cd-text-tertiary);
  }
  .cd-card-interactive:hover .cd-card-interactive-icon-neutral {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
  }
  .cd-card-interactive:hover .cd-card-interactive-title {
    color: var(--cd-color-primary);
  }
  .cd-card-interactive:hover .cd-card-interactive-arrow-icon {
    color: var(--cd-color-primary);
  }
  .cd-theme-selection-card {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: var(--cd-panel-border-width, 2px) solid var(--cd-border-secondary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-lg));
    background-color: var(--cd-bg-card);
    box-shadow: var(--cd-panel-shadow, none);
  }
  .cd-theme-selection-card:focus {
    outline: none;
  }
  .cd-theme-selection-card:hover {
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 60%, var(--cd-border-secondary));
    }
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, 0 2px 4px -1px var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-panel-hover-shadow, 0 2px 4px -1px color-mix(in srgb, var(--cd-color-primary) 5%, transparent));
    }
  }
  .cd-theme-selection-card:focus {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-theme-selection-card.cd-card-selected {
    border-color: var(--cd-color-primary);
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-bg-secondary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 5%, transparent) 0%, color-mix(in srgb, var(--cd-bg-secondary) 10%, transparent) 100%);
    }
    box-shadow: 0 4px 6px -1px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
  }
  .cd-typography-card {
    padding: var(--cd-space-4);
    text-align: center;
  }
  .cd-typography-preview-container {
    margin-bottom: var(--cd-space-3);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }
  .cd-typography-card .cd-font-preview {
    font-size: var(--cd-text-2xl);
    transition: all 0.2s ease-in-out;
    color: var(--cd-text-primary);
    font-family: var(--cd-font-primary);
    margin: 0;
  }
  .cd-typography-card .cd-font-name {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    display: block;
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-primary);
  }
  .cd-typography-card .cd-font-description {
    font-size: var(--cd-text-xs);
    margin-top: var(--cd-space-0-5);
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-secondary);
  }
  .cd-theme-card {
    padding: var(--cd-space-4);
    text-align: center;
  }
  .cd-theme-preview-container {
    margin-bottom: var(--cd-space-3);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }
  .cd-theme-card .cd-color-palette {
    display: flex;
    gap: var(--cd-space-2);
    justify-content: center;
  }
  .cd-theme-card .cd-color-swatch {
    width: var(--cd-space-6);
    height: var(--cd-space-6);
    border-radius: var(--cd-radius-base);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
  }
  .cd-theme-card .cd-theme-info {
    text-align: center;
  }
  .cd-theme-card .cd-theme-name {
    font-weight: 600;
    font-size: var(--cd-text-sm);
    display: block;
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-primary);
  }
  .cd-theme-card .cd-theme-description {
    font-size: var(--cd-text-xs);
    margin-top: var(--cd-space-0-5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-secondary);
  }
  .cd-featured-theme-card {
    min-height: 180px;
  }
  .cd-featured-theme-card .cd-theme-preview-container {
    min-height: 70px;
  }
  .cd-featured-theme-card .cd-color-swatch {
    width: var(--cd-space-7);
    height: var(--cd-space-7);
  }
  .cd-theme-card .cd-theme-tagline {
    font-size: var(--cd-text-xs);
    font-weight: 600;
    margin-top: var(--cd-space-1);
    transition: color 0.2s ease-in-out;
    color: var(--cd-color-primary);
  }
  .cd-featured-theme-card .cd-theme-description {
    -webkit-line-clamp: 3;
    margin-top: var(--cd-space-1);
  }
  .cd-theme-card.cd-theme-dark .cd-theme-preview-container {
    background-color: #1e293b;
  }
  .cd-theme-card.cd-theme-dark .cd-color-swatch {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .cd-theme-card.cd-theme-dark .cd-theme-name {
    color: #f3f4f6;
  }
  .cd-theme-card.cd-theme-dark .cd-theme-description {
    color: #9ca3af;
  }
  .cd-font-size-card {
    padding: var(--cd-space-4);
    text-align: center;
  }
  .cd-font-size-preview-container {
    margin-bottom: var(--cd-space-3);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-1);
    min-height: 60px;
  }
  .cd-font-size-card .cd-size-icon {
    font-size: var(--cd-text-base);
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-tertiary);
  }
  .cd-font-size-card .cd-size-preview {
    transition: all 0.2s ease-in-out;
    color: var(--cd-text-primary);
    font-family: var(--cd-font-primary);
    margin: 0;
  }
  .cd-font-size-card .cd-size-name {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    display: block;
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-primary);
  }
  .cd-font-size-card .cd-size-description {
    font-size: var(--cd-text-xs);
    margin-top: var(--cd-space-0-5);
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-secondary);
  }
  .cd-font-size-card .cd-size-multiplier {
    font-size: var(--cd-text-xs);
    margin-top: var(--cd-space-1);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-tertiary);
  }
  .cd-button-shape-card {
    padding: var(--cd-space-4);
    text-align: center;
  }
  .cd-button-shape-card .cd-shape-preview-container {
    margin-bottom: var(--cd-space-3);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
  }
  .cd-button-shape-card .cd-shape-preview-btn {
    padding: var(--cd-space-2) var(--cd-space-4);
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
    border: none;
    font-size: var(--cd-text-sm);
    font-weight: 600;
    cursor: default;
    transition: border-radius 0.2s ease-in-out;
  }
  .cd-button-shape-card .cd-shape-name {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    display: block;
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-primary);
  }
  .cd-button-shape-card .cd-shape-description {
    font-size: var(--cd-text-xs);
    margin-top: var(--cd-space-0-5);
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-secondary);
  }
  .cd-button-shape-card .cd-shape-radius {
    font-size: var(--cd-text-xs);
    margin-top: var(--cd-space-1);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-tertiary);
  }
  .cd-shape-preview-btn-single {
    width: 100%;
    height: 36px;
    background-color: var(--cd-color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    transition: border-radius 0.2s ease-in-out, transform 0.2s ease;
  }
  .cd-button-shape-card:hover .cd-shape-preview-btn-single {
    transform: scale(1.02);
  }
  .cd-button-size-card {
    padding: var(--cd-space-4);
    text-align: center;
  }
  .cd-size-preview-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    margin-bottom: var(--cd-space-3);
    background-color: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-lg);
    padding: var(--cd-space-3);
  }
  .cd-size-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--cd-space-4);
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
    border-radius: var(--button-radius, 0.75rem);
    font-size: var(--cd-text-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.15s ease;
  }
  .cd-button-size-card:hover .cd-size-preview-btn {
    transform: scale(1.02);
  }
  .cd-theme-selection-indicator {
    position: absolute;
    top: var(--cd-space-2);
    right: var(--cd-space-2);
    width: var(--cd-space-4);
    height: var(--cd-space-4);
    color: white;
    border-radius: 9999px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    background-color: var(--cd-color-primary);
  }
  .cd-theme-selection-card.cd-card-selected .cd-theme-selection-indicator {
    display: flex;
  }
  .cd-theme-selection-indicator i {
    font-size: 0.625rem;
  }
  .cd-accessibility-indicator {
    position: absolute;
    top: var(--cd-space-2);
    left: var(--cd-space-2);
    width: var(--cd-space-4);
    height: var(--cd-space-4);
    background-color: #22c55e;
    color: white;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    z-index: 10;
  }
  .cd-accessibility-indicator i {
    font-size: 0.5rem;
  }
  .cd-theme-card.cd-theme-dark.cd-card-selected {
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, color-mix(in srgb, #483d8b 12%, #1e293b) 100%) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 8%, #1e293b) 0%, color-mix(in srgb, var(--color-midnight-purple) 12%, #1e293b) 100%) !important;
    }
  }
  .cd-panel-style-card {
    padding: var(--cd-space-4);
    text-align: center;
  }
  .cd-panel-preview-container {
    margin-bottom: var(--cd-space-3);
    display: flex;
    justify-content: center;
    padding: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
  }
  .cd-panel-preview-box {
    width: 100%;
    max-width: 80px;
    aspect-ratio: 4/3;
    background-color: var(--cd-card-bg);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-lg);
    padding: var(--cd-space-2);
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-1);
  }
  .cd-panel-preview-header {
    height: 6px;
    background-color: var(--cd-color-primary);
    border-radius: 2px;
    width: 60%;
  }
  .cd-panel-preview-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
  }
  .cd-panel-preview-line {
    height: 4px;
    background-color: var(--cd-bg-tertiary);
    border-radius: 2px;
  }
  .cd-panel-preview-line-short {
    width: 70%;
  }
  .cd-panel-preview-box[data-preview-style="clean"] {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-color: transparent;
    border-radius: 8px;
  }
  .cd-panel-preview-box[data-preview-style="elevated"] {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.03);
    border-radius: 10px;
  }
  .cd-panel-preview-box[data-preview-style="outlined"] {
    box-shadow: none;
    border: 2px solid var(--cd-color-primary);
    border-radius: 6px;
  }
  .cd-panel-preview-box[data-preview-style="brutal"] {
    box-shadow: 3px 3px 0 var(--cd-color-primary);
    border: 2px solid var(--cd-color-primary);
    border-radius: 0;
  }
  .cd-panel-preview-box[data-preview-style="soft"] {
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.02);
    border-radius: 12px;
    background-color: var(--cd-bg-secondary);
  }
  .cd-panel-preview-box[data-preview-style="sharp"] {
    box-shadow: 3px 3px 0 var(--cd-border-secondary);
    border: 1px solid var(--cd-border-secondary);
    border-radius: 2px;
  }
  .cd-menu-style-card {
    padding: var(--cd-space-4);
    text-align: center;
  }
  .cd-menu-layout-card {
    padding: var(--cd-space-4);
    text-align: center;
  }
  .cd-menu-layout-card .cd-shape-name {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    display: block;
    color: var(--cd-text-primary);
  }
  .cd-menu-layout-card .cd-shape-description {
    font-size: var(--cd-text-xs);
    margin-top: var(--cd-space-0-5);
    color: var(--cd-text-secondary);
  }
  .cd-menu-preview-container {
    display: flex;
    justify-content: center;
    padding: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
  }
  .cd-menu-preview {
    width: 100%;
    max-width: 90px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--cd-space-2);
    background-color: var(--cd-bg-card);
    border-radius: var(--cd-radius-base);
    border: 1px solid var(--cd-border-primary);
  }
  .cd-menu-preview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--cd-radius-base);
    transition: all 0.2s ease;
  }
  .cd-menu-preview-icon {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: var(--cd-text-tertiary);
    flex-shrink: 0;
  }
  .cd-menu-preview-text {
    height: 6px;
    flex: 1;
    background-color: var(--cd-text-tertiary);
    border-radius: 2px;
    opacity: 0.6;
  }
  .cd-menu-preview-item-hover {
    background-color: var(--cd-bg-secondary);
  }
  .cd-menu-preview-item-hover .cd-menu-preview-icon {
    background-color: var(--cd-color-primary);
  }
  .cd-menu-preview-item-active {
    background-color: var(--cd-color-primary);
  }
  .cd-menu-preview-item-active .cd-menu-preview-icon, .cd-menu-preview-item-active .cd-menu-preview-text {
    background-color: var(--cd-text-on-primary);
  }
  .cd-menu-preview[data-preview-menu-style="underline"] .cd-menu-preview-item {
    background-color: transparent;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }
  .cd-menu-preview[data-preview-menu-style="underline"] .cd-menu-preview-item-hover {
    border-bottom-color: var(--cd-color-primary);
  }
  .cd-menu-preview[data-preview-menu-style="underline"] .cd-menu-preview-item-active {
    background-color: transparent;
    border-bottom-color: var(--cd-color-primary);
  }
  .cd-menu-preview[data-preview-menu-style="underline"] .cd-menu-preview-item-active .cd-menu-preview-icon, .cd-menu-preview[data-preview-menu-style="underline"] .cd-menu-preview-item-active .cd-menu-preview-text {
    background-color: var(--cd-color-primary);
  }
  .cd-menu-preview[data-preview-menu-style="pill"] .cd-menu-preview-item {
    border-radius: 9999px;
  }
  .cd-menu-preview[data-preview-menu-style="brutal"] .cd-menu-preview-item {
    border: 1px solid transparent;
    border-radius: 0;
  }
  .cd-menu-preview[data-preview-menu-style="brutal"] .cd-menu-preview-item-hover {
    border-color: var(--cd-color-primary);
    box-shadow: 2px 2px 0 var(--cd-color-primary);
    transform: translate(-1px, -1px);
    background-color: var(--cd-bg-primary);
  }
  .cd-menu-preview[data-preview-menu-style="brutal"] .cd-menu-preview-item-active {
    border: 1px solid var(--cd-color-primary);
    box-shadow: 2px 2px 0 var(--cd-color-primary);
  }
  .cd-menu-preview[data-preview-menu-style="glow"] .cd-menu-preview-item-hover {
    box-shadow: 0 0 8px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 8px color-mix(in srgb, var(--cd-color-primary) 40%, transparent);
    }
  }
  .cd-menu-preview[data-preview-menu-style="glow"] .cd-menu-preview-item-active {
    box-shadow: 0 0 10px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 10px color-mix(in srgb, var(--cd-color-primary) 50%, transparent);
    }
  }
  .cd-menu-preview[data-preview-menu-style="slide"] .cd-menu-preview-item {
    border-left: 2px solid transparent;
    border-radius: 0;
  }
  .cd-menu-preview[data-preview-menu-style="slide"] .cd-menu-preview-item-hover {
    border-left-color: var(--cd-color-primary);
    padding-left: 12px;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
  }
  .cd-menu-preview[data-preview-menu-style="slide"] .cd-menu-preview-item-active {
    border-left-color: var(--cd-color-primary);
    padding-left: 12px;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 12%, transparent);
    }
  }
  .cd-menu-preview[data-preview-menu-style="slide"] .cd-menu-preview-item-active .cd-menu-preview-icon, .cd-menu-preview[data-preview-menu-style="slide"] .cd-menu-preview-item-active .cd-menu-preview-text {
    background-color: var(--cd-color-primary);
  }
  .cd-icon-animation-card {
    padding: var(--cd-space-4);
    text-align: center;
  }
  .cd-icon-animation-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
    min-height: 80px;
  }
  .cd-icon-animation-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    transition: all 0.2s ease;
  }
  .cd-icon-animation-demo i {
    transition: transform 0.2s ease-out;
  }
  .cd-icon-animation-card:hover .cd-icon-animation-demo[data-preview-animation="none"] i {
    transform: none;
  }
  .cd-icon-animation-card:hover .cd-icon-animation-demo[data-preview-animation="lift"] i {
    transform: scale(1.15) translateY(-2px);
  }
  .cd-icon-animation-card:hover .cd-icon-animation-demo[data-preview-animation="pop"] i {
    transform: scale(1.3);
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  @keyframes cd-preview-wiggle {
    0%, 100% {
      transform: translateX(0) rotate(0deg);
    }
    20% {
      transform: translateX(-3px) rotate(-5deg);
    }
    40% {
      transform: translateX(3px) rotate(5deg);
    }
    60% {
      transform: translateX(-2px) rotate(-3deg);
    }
    80% {
      transform: translateX(2px) rotate(3deg);
    }
  }
  .cd-icon-animation-card:hover .cd-icon-animation-demo[data-preview-animation="wiggle"] i {
    animation: cd-preview-wiggle 0.5s ease-in-out;
  }
  .cd-icon-animation-card:hover .cd-icon-animation-demo[data-preview-animation="spin"] i {
    transform: rotate(360deg);
    transition: transform 0.4s ease;
  }
  @keyframes cd-preview-bounce {
    0%, 100% {
      transform: translateY(0);
    }
    30% {
      transform: translateY(-6px);
    }
    50% {
      transform: translateY(-2px);
    }
    70% {
      transform: translateY(-4px);
    }
  }
  .cd-icon-animation-card:hover .cd-icon-animation-demo[data-preview-animation="bounce"] i {
    animation: cd-preview-bounce 0.5s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-icon-animation-card:hover .cd-icon-animation-demo i {
      transform: none !important;
      animation: none !important;
    }
  }
  .cd-tooltip-trigger {
    display: inline-flex;
    align-items: center;
  }
  .cd-tooltip {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: 50;
    padding: var(--cd-space-2) var(--cd-space-3);
    font-size: var(--cd-text-xs);
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: var(--cd-radius-base);
    background-color: var(--cd-bg-tooltip, #1e293b);
    color: var(--cd-text-tooltip, #f8fafc);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    pointer-events: none;
    max-width: 250px;
    white-space: normal;
  }
  .cd-tooltip-wide {
    display: none;
    max-width: min(32rem, calc(100vw - 2rem));
    width: max-content;
  }
  .cd-tooltip-trigger:hover .cd-tooltip-wide, .cd-tooltip-trigger:focus .cd-tooltip-wide {
    display: block;
  }
  .cd-tooltip::before {
    content: '';
    position: absolute;
    border: 5px solid transparent;
  }
  .cd-tooltip-top {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
  }
  .cd-tooltip-top::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--cd-bg-tooltip, #1e293b);
  }
  .cd-tooltip-bottom {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
  }
  .cd-tooltip-bottom::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--cd-bg-tooltip, #1e293b);
  }
  .cd-tooltip-trigger:hover .cd-tooltip, .cd-tooltip-trigger:focus .cd-tooltip {
    visibility: visible;
    opacity: 1;
  }
  .cd-profile-card:has(.cd-tooltip-trigger:hover), .cd-profile-card:has(.cd-tooltip-trigger:focus-visible) {
    z-index: var(--cd-z-topbar-dropdown);
  }
  .cd-icon-style-card {
    padding: var(--cd-space-4);
    text-align: center;
  }
  .cd-summary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cd-space-9);
    height: var(--cd-space-9);
    border-radius: var(--cd-radius-base);
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-primary);
    color: var(--cd-text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
  .cd-summary-badge i {
    font-size: var(--cd-text-sm);
  }
  .cd-summary-badge:hover {
    border-color: var(--cd-color-primary);
    color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    transform: translateY(-1px);
  }
  .cd-summary-badge:focus {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-summary-badge-modified {
    border-color: var(--cd-color-primary);
    color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
  }
  .cd-summary-badge-modified::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--cd-color-primary);
    border: 1.5px solid var(--cd-bg-card);
  }
  @media (max-width: 640px) {
    .cd-summary-badge {
      width: var(--cd-space-10);
      height: var(--cd-space-10);
    }
    .cd-summary-badge i {
      font-size: var(--cd-text-base);
    }
  }
}
@layer components {
  .cd-client-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem;
    padding: 1.25rem 0.125rem;
    border-bottom: 1px solid var(--cd-border-hairline);
    cursor: pointer;
    transition: transform 0.18s ease;
  }
  .cd-client-card:hover, .cd-client-card:focus-within {
    transform: translateY(-1px);
  }
  .cd-client-card:first-child {
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-client-card::before {
    content: "";
    position: absolute;
    inset: 0.5rem -0.625rem;
    z-index: -1;
    border-radius: 0.875rem;
    background: transparent;
    box-shadow: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
    pointer-events: none;
  }
  .cd-client-card:hover::before, .cd-client-card:focus-within::before {
    background: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-secondary) 70%, transparent);
    }
    box-shadow: var(--cd-shadow-md);
  }
  .cd-client-card__main {
    min-width: 0;
  }
  .cd-client-card__name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
  }
  .cd-client-card__name {
    color: var(--cd-color-primary, #1d1d1f);
    font-family: var(--cd-font-editorial);
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-client-card:hover .cd-client-card__name, .cd-client-card__name:hover {
    color: var(--cd-color-accent);
  }
  .cd-client-card__email {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.2rem;
    max-width: 100%;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-client-card__email i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.72rem;
  }
  .cd-client-card__note {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0.55rem;
    max-width: 30rem;
    color: var(--cd-text-secondary, #6b7280);
    font-family: var(--cd-font-editorial-body);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .cd-client-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.625rem;
  }
  .cd-client-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: 999px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .cd-client-card__tag:hover {
    border-color: var(--cd-color-primary);
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-client-card__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.625rem;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.72rem;
  }
  .cd-client-card__fact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .cd-client-card__fact i {
    font-size: 0.68rem;
  }
  .cd-client-card__fact--followup {
    color: var(--cd-color-warning);
    font-weight: 600;
  }
  .cd-client-card__rail {
    display: flex;
    min-width: 8rem;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    text-align: right;
  }
  .cd-client-card__figure {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
  }
  .cd-client-card__figure .cd-editorial-numeral {
    font-size: 1.5rem;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-client-card__figure-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-client-card__figure--revenue .cd-editorial-numeral {
    font-size: 1.7rem;
    color: var(--cd-color-success);
  }
  .cd-client-card__cents {
    color: var(--cd-color-success);
    font-size: 0.85rem;
  }
  .cd-client-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
  }
  .cd-client-card__actions .cd-btn-primary i {
    transition: transform 0.18s ease;
  }
  .cd-client-card:hover .cd-client-card__actions .cd-btn-primary i, .cd-client-card:focus-within .cd-client-card__actions .cd-btn-primary i {
    transform: translateX(2px);
  }
  @media (max-width: 640px) {
    .cd-client-card {
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.875rem 1rem;
    }
    .cd-client-card__rail {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
      text-align: left;
    }
    .cd-client-card__actions {
      margin-top: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-client-card:hover, .cd-client-card:focus-within {
      transform: none;
    }
    .cd-client-card:hover .cd-client-card__actions .cd-btn-primary i, .cd-client-card:focus-within .cd-client-card__actions .cd-btn-primary i {
      transform: none;
    }
  }
}
@layer components {
  .cd-crm-toolbar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .cd-crm-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 42px;
    padding: 0 1rem;
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 999px;
  }
  .cd-crm-search:focus-within {
    border-color: var(--cd-color-primary);
  }
  .cd-crm-search__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cd-text-tertiary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .cd-crm-search__go:hover {
    color: var(--cd-color-primary);
  }
  .cd-crm-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.88rem;
    font-family: var(--cd-font-primary);
    color: var(--cd-text-primary);
  }
  .cd-crm-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 1rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: 999px;
    background: var(--cd-bg-primary);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--cd-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .cd-crm-filters-btn:hover, .cd-crm-filters-btn[aria-expanded="true"] {
    border-color: var(--cd-color-primary);
    color: var(--cd-text-primary);
  }
  .cd-crm-filter-panel {
    margin-top: 0.875rem;
    padding: 1rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-xl);
    background: var(--cd-bg-primary);
  }
  .cd-crm-filter-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cd-text-secondary);
  }
  .cd-crm-tag-dropdown {
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-crm-tag-option {
    color: var(--cd-text-primary);
    transition: background-color 0.12s ease;
  }
  .cd-crm-tag-option:hover {
    background-color: var(--cd-bg-hover);
  }
  .cd-crm-pin-icon {
    color: var(--cd-color-warning);
  }
  .cd-crm-tagbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-crm-tagbar__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary);
  }
  .cd-crm-tagchip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: 999px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .cd-crm-tagchip:hover, .cd-crm-tagchip--active {
    border-color: var(--cd-color-primary);
    color: var(--cd-text-primary);
  }
  .cd-crm-tagchip__n {
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    color: var(--cd-text-tertiary);
  }
  .cd-crm-tagchip--clear {
    color: var(--cd-color-error);
    border-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-error) 35%, var(--cd-border-primary));
    }
  }
  .cd-crm-count {
    font-family: var(--cd-font-numeral);
    font-weight: 400;
    color: var(--cd-text-secondary);
  }
  .cd-crm-clients .cd-view-toggle {
    border-radius: 999px;
    padding: 0;
    overflow: hidden;
    background: var(--cd-bg-primary);
  }
  .cd-crm-clients .cd-view-toggle-btn {
    padding: 0.45rem 0.9rem;
    border-radius: 0;
    font-size: 0.76rem;
    font-weight: 600;
  }
  .cd-crm-clients .cd-view-toggle-btn + .cd-view-toggle-btn {
    border-left: 1px solid var(--cd-border-primary);
  }
  .cd-crm-clients .cd-view-toggle-active, .cd-crm-clients .cd-view-toggle-active:hover {
    background: var(--cd-color-primary);
    color: #fff;
  }
  .cd-crm-litem {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-crm-litem:first-child {
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-crm-litem__id {
    flex: 1;
    min-width: 0;
  }
  .cd-crm-litem__name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: 1rem;
    color: var(--cd-color-primary);
    text-decoration: none;
  }
  .cd-crm-litem__name:hover {
    color: var(--cd-color-accent);
  }
  .cd-crm-litem__email {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: var(--cd-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-crm-litem__stats {
    display: flex;
    align-items: baseline;
    gap: 1.6rem;
    flex-shrink: 0;
  }
  .cd-crm-litem__stat {
    text-align: right;
    min-width: 3.5rem;
  }
  .cd-crm-litem__stat .v {
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.015em;
    font-size: 1.1rem;
    color: var(--cd-text-primary);
  }
  .cd-crm-litem__stat .v.rev {
    color: var(--cd-color-success);
  }
  .cd-crm-litem__stat .k {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cd-text-tertiary);
    margin-top: 1px;
  }
  .cd-crm-litem__date {
    font-family: var(--cd-font-numeral);
    font-size: 0.74rem;
    color: var(--cd-text-tertiary);
    min-width: 4rem;
    text-align: right;
  }
  .cd-crm-litem__actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
  }
  @media (max-width: 720px) {
    .cd-crm-litem__stats, .cd-crm-litem__date {
      display: none;
    }
  }
  .cd-crm-table {
    width: 100%;
    border-collapse: collapse;
  }
  .cd-crm-table thead th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid var(--cd-color-primary);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cd-text-tertiary);
  }
  .cd-crm-table thead th.num {
    text-align: right;
  }
  .cd-crm-table thead th.center {
    text-align: center;
  }
  .cd-crm-table thead th a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
  }
  .cd-crm-table thead th a:hover {
    color: var(--cd-color-primary);
  }
  .cd-crm-table tbody td {
    padding: 0.875rem 0.75rem;
    border-bottom: 1px solid var(--cd-border-hairline);
    vertical-align: middle;
    font-size: 0.86rem;
  }
  .cd-crm-table tbody tr:hover {
    background: var(--cd-bg-secondary);
  }
  .cd-crm-table .cell-client {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }
  .cd-crm-table .cn {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: 0.96rem;
    color: var(--cd-color-primary);
  }
  .cd-crm-table .ce {
    font-size: 0.74rem;
    color: var(--cd-text-secondary);
  }
  .cd-crm-table td.num {
    text-align: right;
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.015em;
    font-size: 1.05rem;
    color: var(--cd-text-primary);
  }
  .cd-crm-table td.num.rev {
    color: var(--cd-color-success);
  }
  .cd-crm-table td.center {
    text-align: center;
  }
  .cd-crm-table td.date {
    font-family: var(--cd-font-numeral);
    color: var(--cd-text-tertiary);
    white-space: nowrap;
  }
  .cd-crm-table .row-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
  }
  .cd-crm-clients .cd-avatar-rounded-md.no-image, .cd-crm-clients .cd-avatar-rounded-sm.no-image, .cd-crm-clients .cd-avatar-rounded-xs.no-image {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
  }
}
@layer components {
  .cd-record__head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 2px solid var(--cd-color-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
  }
  .cd-record__head-n {
    font-size: 1rem;
    color: var(--cd-text-tertiary);
  }
  .cd-record__head-title {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary);
  }
  .cd-record__head-spacer {
    flex: 1;
  }
  .cd-record__head-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cd-color-accent);
    white-space: nowrap;
  }
  .cd-record__head-more:hover {
    text-decoration: underline;
  }
  .cd-record__head-more i {
    font-size: 0.72rem;
  }
  .cd-record:not(.cd-card) {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .cd-record__row {
    display: grid;
    grid-template-columns: 1.75rem 3.25rem minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    align-items: start;
    padding: 1rem 0.75rem;
    margin: 0 -0.75rem;
    border-bottom: 1px solid var(--cd-border-hairline);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
  }
  .cd-record > .cd-record__row:last-child {
    border-bottom: 0;
  }
  .cd-record__row:not(.cd-record__row--static):hover {
    background: var(--cd-bg-hover);
  }
  .cd-record__row.htmx-request {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
  }
  .cd-record__row.htmx-request .cd-record__amount, .cd-record__row.htmx-request .cd-record__date {
    visibility: hidden;
  }
  .cd-record__row.htmx-request::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.85rem;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: -0.575rem;
    border: 2px solid var(--cd-border-secondary);
    border-top-color: var(--cd-color-accent);
    border-radius: var(--cd-radius-full);
    animation: spin 1s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-record__row.htmx-request::after {
      animation: none;
      border-color: var(--cd-color-accent);
      opacity: 0.5;
    }
  }
  .cd-record__idx {
    font-size: 1.05rem;
    color: var(--cd-text-tertiary);
    padding-top: 0.35rem;
  }
  .cd-record__icon {
    width: 3.25rem;
    height: 3.25rem;
    align-self: start;
    flex-shrink: 0;
  }
  .cd-record__body {
    min-width: 0;
    padding-top: 0.15rem;
  }
  .cd-record__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }
  .cd-record__kicker--success {
    color: var(--cd-color-success);
  }
  .cd-record__kicker--message {
    color: var(--cd-color-accent);
  }
  .cd-record__kicker--review {
    color: var(--cd-color-warning);
  }
  .cd-record__kicker--visit {
    color: var(--cd-color-info);
  }
  .cd-record__kicker--warning {
    color: var(--cd-color-warning);
  }
  .cd-record__kicker--error {
    color: var(--cd-color-error);
  }
  .cd-record__kicker--neutral {
    color: var(--cd-text-secondary);
  }
  .cd-record__kicker--muted {
    color: var(--cd-text-tertiary);
  }
  .cd-record__title {
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cd-text-primary);
    word-break: break-word;
  }
  .cd-record__desc {
    font-family: var(--cd-font-editorial-body);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--cd-text-secondary);
    margin-top: 0.2rem;
  }
  .cd-record__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.85rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--cd-text-secondary);
  }
  .cd-record__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .cd-record__meta i {
    font-size: 0.7rem;
    color: var(--cd-text-tertiary);
  }
  .cd-record__tag {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-primary);
    color: var(--cd-text-secondary);
  }
  .cd-record__meta--alert, .cd-record__meta--alert i {
    color: var(--cd-color-warning);
  }
  .cd-record__meta--alert {
    font-weight: 600;
  }
  .cd-record__meta--ok, .cd-record__meta--ok i {
    color: var(--cd-color-success);
  }
  .cd-record__meta--ok {
    font-weight: 600;
  }
  .cd-record__meta--unread {
    color: var(--cd-color-accent);
    font-weight: 600;
  }
  .cd-record__dot {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--cd-color-accent);
  }
  .cd-record__amount {
    font-size: 1.15rem;
    color: var(--cd-text-primary);
    text-align: right;
    padding-top: 0.3rem;
    max-width: 8rem;
    line-height: 1.15;
  }
  .cd-record__amount--pos {
    color: var(--cd-color-success);
  }
  .cd-record__date {
    font-size: 0.72rem;
    color: var(--cd-text-tertiary);
    white-space: nowrap;
    text-align: right;
    padding-top: 0.45rem;
  }
}
@layer components {
  .cd-editorial-textarea {
    display: block;
    width: 100%;
    min-height: 84px;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
    background: #fff;
    padding: 0.6875rem 1rem;
    font-family: var(--cd-font-editorial-body, Georgia, serif);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--cd-text-primary, #1d1d1f);
    resize: vertical;
    outline: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .cd-editorial-textarea::placeholder {
    color: #b6b6bc;
  }
  .cd-editorial-textarea:focus {
    border-color: var(--cd-text-primary, #1d1d1f);
    box-shadow: 0 0 0 3px rgba(29,29,31,0.06);
  }
  .cd-details-tagrow {
    display: flex;
    gap: 0.625rem;
    align-items: stretch;
  }
  .cd-details-tagrow .cd-editorial-input-wrap {
    flex: 1;
    max-width: none;
  }
  .cd-contact-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
  }
  @media (max-width: 640px) {
    .cd-contact-choice-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-contact-choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 0.75rem;
    background: #fff;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
  }
  .cd-contact-choice:hover {
    border-color: #c7c7cc;
  }
  .cd-contact-choice input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .cd-contact-choice-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--cd-radius-sm, 8px);
    background: var(--cd-bg-soft, #fafafa);
    border: 1px solid var(--cd-border-hairline, #ececec);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .cd-contact-choice-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-contact-choice:has(input[type="radio"]:checked) {
    border-color: var(--cd-text-primary, #1d1d1f);
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-contact-choice:has(input[type="radio"]:checked) .cd-contact-choice-icon {
    background: var(--cd-text-primary, #1d1d1f);
    border-color: var(--cd-text-primary, #1d1d1f);
    color: #fff;
  }
  .cd-contact-choice:focus-within {
    box-shadow: 0 0 0 3px rgba(29,29,31,0.06);
  }
  .cd-contact-choice-none {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--cd-text-secondary, #6b7280);
    cursor: pointer;
  }
  .cd-contact-choice-none input[type="radio"] {
    accent-color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-time-choice-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.625rem;
  }
  @media (max-width: 860px) {
    .cd-time-choice-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 560px) {
    .cd-time-choice-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .cd-followup-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .cd-followup-row .cd-editorial-input-wrap {
    flex: 1 1 240px;
    max-width: 460px;
  }
  .cd-details-card input[data-calendar], .cd-details-card input[data-calendar] + .cd-icon-trail {
    cursor: pointer;
  }
  .cd-submit-card.cd-details-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .cd-details-card .cd-submit-hero {
    padding: 0 0 1.125rem;
  }
  .cd-details-card .cd-submit-section {
    padding: 1.25rem 0;
  }
  .cd-details-card .cd-section-head {
    margin-bottom: 0.875rem;
  }
  .cd-details-card .cd-submit-footer {
    padding: 1.125rem 0 0;
    background: transparent;
  }
}
@layer components {
  .cd-tab-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.125rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-tab-hero__text {
    min-width: 0;
  }
  .cd-tab-hero-title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 0.375rem;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-tab-hero-action {
    flex-shrink: 0;
  }
}
@layer components {
  .cd-dossier .cd-dossier__kicker {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cd-color-accent);
    margin-bottom: 0.15rem;
  }
  .cd-dossier .cd-dossier__kicker .cd-editorial-numeral {
    letter-spacing: 0.04em;
    font-size: 0.7rem;
  }
  .cd-dossier .cd-dossier__name {
    font-size: 1.5rem;
    line-height: 1.05;
    color: var(--cd-text-primary);
  }
  .cd-dossier .cd-dossier__sub {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--cd-text-secondary);
  }
  .cd-dossier .cd-dossier__dot {
    width: 3px;
    height: 3px;
    border-radius: 9999px;
    background: var(--cd-border-primary);
    flex-shrink: 0;
  }
  .cd-dossier .cd-ledger {
    align-items: stretch;
  }
  .cd-dossier .cd-ledger__cell {
    position: relative;
    padding: 0 1rem;
    text-align: right;
  }
  .cd-dossier .cd-ledger__cell + .cd-ledger__cell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 1px;
    background: var(--cd-border-hairline);
  }
  .cd-dossier .cd-ledger__label {
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cd-text-tertiary);
  }
  .cd-dossier .cd-ledger__value {
    display: flex;
    align-items: baseline;
    gap: 1px;
    justify-content: flex-end;
    font-size: 1.35rem;
    color: var(--cd-text-primary);
  }
  .cd-dossier .cd-ledger__pre {
    font-size: 0.82rem;
    color: var(--cd-text-tertiary);
  }
  .cd-dossier .cd-ledger__star {
    color: var(--cd-color-warning);
    font-size: 0.86rem;
  }
  .cd-dossier .cd-dossier__noteband {
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-dossier .cd-dossier__prose {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cd-text-secondary);
  }
  .cd-dossier .cd-dossier__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.7rem;
  }
  .cd-dossier .cd-dossier__tag {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    background: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-primary);
    color: var(--cd-text-secondary);
  }
  .cd-dossier .cd-dossier__routes-head {
    margin-top: 1.75rem;
  }
  .cd-dossier .cd-route-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .cd-dossier .cd-route-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: 0.625rem;
    background: var(--cd-bg-primary);
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .cd-dossier .cd-route-chip:hover {
    border-color: var(--cd-color-primary);
    transform: translateY(-1px);
  }
  .cd-dossier .cd-route-chip__lead {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    color: var(--cd-text-tertiary);
  }
  .cd-dossier .cd-route-chip__txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .cd-dossier .cd-route-chip__lbl {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-dossier .cd-route-chip__cnt {
    font-size: 0.66rem;
    color: var(--cd-text-tertiary);
  }
  .cd-dossier .cd-route-chip__arrow {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--cd-text-tertiary);
  }
  .cd-dossier .cd-route-chip--locked {
    opacity: 0.62;
  }
  .cd-dossier .cd-route-chip--locked .cd-route-chip__lead, .cd-dossier .cd-route-chip--locked .cd-route-chip__arrow {
    color: var(--cd-color-premium);
  }
  .cd-modal-client-detail .cd-modal-footer.cd-dossier__foot {
    justify-content: space-between;
    align-items: center;
  }
  .cd-dossier .cd-dossier__foot-hint {
    font-size: 0.72rem;
    color: var(--cd-text-tertiary);
  }
  @media (max-width: 640px) {
    .cd-dossier .cd-route-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .cd-dossier .cd-dossier__foot-hint {
      display: none;
    }
  }
}
@layer components {
  .cd-portfolio-editorial .cd-pf-toolbar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .cd-portfolio-editorial .cd-pf-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 42px;
    padding: 0 1rem;
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 999px;
  }
  .cd-portfolio-editorial .cd-pf-search:focus-within {
    border-color: var(--cd-color-primary);
  }
  .cd-portfolio-editorial .cd-pf-search__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cd-text-tertiary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .cd-portfolio-editorial .cd-pf-search__go:hover {
    color: var(--cd-color-primary);
  }
  .cd-portfolio-editorial .cd-pf-search input {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.88rem;
    font-family: var(--cd-font-primary);
    color: var(--cd-text-primary);
  }
  .cd-portfolio-editorial .cd-pf-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 1rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: 999px;
    background: var(--cd-bg-primary);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--cd-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .cd-portfolio-editorial .cd-pf-filters-btn:hover, .cd-portfolio-editorial .cd-pf-filters-btn[aria-expanded="true"] {
    border-color: var(--cd-color-primary);
    color: var(--cd-text-primary);
  }
  .cd-portfolio-editorial .cd-pf-filter-panel {
    margin-top: 0.875rem;
    padding: 1rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-xl);
    background: var(--cd-bg-primary);
  }
  .cd-portfolio-editorial .cd-pf-filter-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cd-text-secondary);
  }
  .cd-portfolio-editorial .cd-pf-count {
    font-family: var(--cd-font-numeral);
    font-weight: 400;
    color: var(--cd-text-secondary);
  }
}
@layer components {
  .cd-feed-panel {
    display: flex;
    flex-direction: column;
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-xl);
    padding: 1.125rem 1.125rem 1rem;
  }
  .cd-feed-panel__head {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-feed-panel__kicker {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary);
  }
  .cd-feed-panel__title {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--cd-text-primary);
  }
  .cd-feed-panel__spacer {
    flex: 1;
  }
  .cd-feed-panel__more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cd-color-accent);
    text-decoration: none;
    white-space: nowrap;
  }
  .cd-feed-panel__more:hover {
    text-decoration: underline;
  }
  .cd-feed-panel__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cd-color-warning);
  }
  .cd-feed-panel__meta--muted {
    color: var(--cd-text-tertiary);
  }
  .cd-feed-panel__meta .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .cd-feed-panel__list {
    display: flex;
    flex-direction: column;
  }
  .cd-feed-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 -0.625rem;
    padding: 0.75rem 0.625rem;
    text-decoration: none;
    transition: background-color 0.18s ease;
  }
  .cd-feed-row + .cd-feed-row {
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-feed-row:hover {
    background: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-secondary) 70%, transparent);
    }
  }
  .cd-feed-row__body {
    flex: 1;
    min-width: 0;
  }
  .cd-feed-row__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .cd-feed-row__name {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--cd-text-primary);
    transition: color 0.18s ease;
  }
  .cd-feed-row:hover .cd-feed-row__name {
    color: var(--cd-color-accent);
  }
  .cd-feed-row__time {
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--cd-text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cd-feed-row__time--urgent {
    color: var(--cd-color-error);
  }
  .cd-feed-row__sub {
    margin-top: 0.1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cd-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-feed-row__preview {
    margin-top: 0.2rem;
    font-family: var(--cd-font-editorial-body);
    font-size: 0.9rem;
    color: var(--cd-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-feed-row__sender {
    font-family: var(--cd-font-primary);
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-feed-row__flag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-color-error);
    background: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-error) 10%, transparent);
    }
  }
  .cd-feed-row__flag--today {
    color: var(--cd-color-warning);
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 12%, transparent);
    }
  }
  .cd-feed-row__trail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    align-self: center;
    color: var(--cd-text-tertiary);
  }
  .cd-feed-row__unread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 14%, transparent);
    }
    color: var(--cd-color-accent);
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-size: 0.72rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .cd-feed-row__chevron {
    font-size: 0.78rem;
    transition: transform 0.18s ease, color 0.18s ease;
  }
  .cd-feed-row:hover .cd-feed-row__chevron {
    transform: translateX(3px);
    color: var(--cd-color-primary);
  }
  .cd-feed-row--unread .cd-feed-row__name {
    font-weight: 700;
  }
  .cd-feed-row--unread .cd-feed-row__preview {
    color: var(--cd-text-primary);
  }
  .cd-feed-row--static {
    cursor: default;
  }
  .cd-feed-row--static:hover {
    background: transparent;
  }
  .cd-feed-row--static:hover .cd-feed-row__name {
    color: var(--cd-text-primary);
  }
  .cd-feed-row__note {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0.3rem;
    font-family: var(--cd-font-editorial-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--cd-text-secondary);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .cd-feed-panel__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-feed-panel__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
    text-align: center;
    color: var(--cd-text-secondary);
  }
}
@layer components {
  .cd-editorial-numeral {
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.015em;
    line-height: 1.05;
  }
  .cd-editorial-display {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
    letter-spacing: -0.015em;
    line-height: 1.05;
  }
  .cd-editorial-body {
    font-family: var(--cd-font-editorial-body);
    font-weight: 400;
    letter-spacing: normal;
  }
  .cd-editorial-unit {
    font-family: var(--cd-font-primary);
    font-weight: 600;
    letter-spacing: normal;
    color: var(--cd-text-secondary);
  }
  .cd-chart-numeral .apexcharts-datalabel-value {
    font-family: var(--cd-font-numeral) !important;
    font-weight: 700 !important;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.015em;
  }
}
@layer components {
  .cd-editorial-page-header {
    position: relative;
    margin-bottom: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 52);
    padding-bottom: calc(var(--spacing) * 4);
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-editorial-page-header__title {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: var(--cd-text-primary);
  }
  .cd-editorial-page-header__description {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--cd-text-secondary);
    line-height: 1.5;
  }
  .cd-editorial-page-header__media {
    pointer-events: none;
    position: absolute;
    right: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
  }
  .cd-editorial-page-header__media img {
    width: auto;
    object-fit: contain;
    height: 13rem;
  }
  @media (max-width: 640px) {
    .cd-editorial-page-header {
      padding-right: calc(var(--spacing) * 32);
    }
    .cd-editorial-page-header__media img {
      height: 7rem;
    }
  }
  .cd-editorial-form-section {
    padding-bottom: var(--cd-space-6);
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-editorial-form-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .cd-editorial-form-section__title {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--cd-text-primary);
  }
  .cd-editorial-form-section__icon {
    margin-right: calc(var(--spacing) * 2);
    color: var(--cd-text-tertiary);
  }
}
@layer components {
  .cd-editorial-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
  }
  @media (max-width: 768px) {
    .cd-editorial-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
    }
  }
  .cd-editorial-card {
    background: var(--cd-bg-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: 1.375rem 1.125rem 1.125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
    box-shadow: inset 0 0 0 1px var(--cd-border-primary), inset 0 1px 2px rgb(0 0 0 / 0.04);
    transition: background 0.18s ease;
  }
  a:hover .cd-editorial-card, button:hover .cd-editorial-card {
    background: var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-primary) 92%, var(--cd-text-primary));
    }
  }
  .cd-editorial-ring {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: var(--cd-radius-full);
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
  }
  .cd-editorial-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
  }
  .cd-editorial-value {
    font-size: 1.95rem;
    color: var(--cd-text-primary);
    margin-top: 0.125rem;
  }
  .cd-editorial-unit {
    font-size: 0.5em;
    margin-left: 0.125rem;
  }
  .cd-editorial-meta {
    font-size: 0.74rem;
    color: var(--cd-text-tertiary);
    margin-top: 0.25rem;
  }
  .cd-editorial-meta a {
    color: var(--cd-color-science-blue);
    font-weight: 600;
  }
  .cd-editorial-meta a:hover {
    text-decoration: underline;
  }
  .cd-editorial-card--warn .cd-editorial-ring {
    color: var(--cd-color-warning-orange);
    border-color: var(--cd-color-warning-orange);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning-orange) 30%, var(--cd-border-primary));
    }
  }
  .cd-editorial-card--save .cd-editorial-ring {
    color: var(--cd-color-forest-green);
    border-color: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-forest-green) 30%, var(--cd-border-primary));
    }
  }
  .cd-editorial-card--info .cd-editorial-ring {
    color: var(--cd-color-science-blue);
    border-color: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-science-blue) 30%, var(--cd-border-primary));
    }
  }
  .cd-editorial-card--danger .cd-editorial-ring {
    color: var(--cd-color-crimson-red);
    border-color: var(--cd-color-crimson-red);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-crimson-red) 30%, var(--cd-border-primary));
    }
  }
  .cd-editorial-card--gold .cd-editorial-ring {
    color: var(--cd-color-premium);
    border-color: var(--cd-color-premium);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-premium) 40%, var(--cd-border-primary));
    }
  }
  .cd-editorial-card--trial .cd-editorial-ring {
    color: var(--cd-color-deep-purple);
    border-color: var(--cd-color-deep-purple);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-deep-purple) 30%, var(--cd-border-primary));
    }
  }
}
@layer components {
  .cd-cw .cd-cw-card {
    display: block;
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-2xl);
    padding: 1.125rem 1.25rem;
    background: var(--cd-bg-primary);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .cd-cw a.cd-cw-card:hover {
    border-color: var(--cd-border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-border-primary) 50%, var(--cd-text-tertiary));
    }
    background: var(--cd-bg-secondary);
  }
  .cd-cw .cd-cw-card__name {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--cd-text-primary);
  }
  .cd-cw .cd-cw-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
  }
  .cd-cw .cd-cw-nextline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--cd-border-hairline);
    font-size: 0.84rem;
    color: var(--cd-text-secondary);
  }
  .cd-cw .cd-cw-nextline i {
    color: var(--cd-color-science-blue);
  }
  .cd-cw .cd-cw-nextline.warm i {
    color: var(--cd-color-forest-green);
  }
  .cd-cw .cd-cw-nextline b {
    color: var(--cd-text-primary);
    font-weight: 600;
  }
  .cd-cw .cd-cw-handoff {
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--cd-color-forest-green);
    background: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-forest-green) 12%, transparent);
    }
    padding: 0.25rem 0.65rem;
    border-radius: var(--cd-radius-full);
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    white-space: nowrap;
  }
  .cd-cw .cd-cw-funnel-mini {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    margin-top: 1rem;
  }
  .cd-cw .cd-cw-fm-step {
    flex: 1;
    text-align: center;
    min-width: 0;
  }
  .cd-cw .cd-cw-fm-bar {
    height: 2.5rem;
    border-radius: 0.4rem 0.4rem 0.25rem 0.25rem;
    background: var(--cd-bg-tertiary);
    position: relative;
    overflow: hidden;
  }
  .cd-cw .cd-cw-fm-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-science-blue) 65%, var(--cd-bg-primary));
    }
  }
  .cd-cw .cd-cw-fm-step.reg .cd-cw-fm-fill {
    background: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-forest-green) 60%, var(--cd-bg-primary));
    }
  }
  .cd-cw .cd-cw-fm-n {
    font-family: var(--cd-font-numeral);
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0.4rem;
    color: var(--cd-text-primary);
  }
  .cd-cw .cd-cw-fm-l {
    font-size: 0.62rem;
    color: var(--cd-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
  }
  .cd-cw .cd-cw-fb-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
  }
  .cd-cw .cd-cw-fb-l {
    width: 5.5rem;
    font-size: 0.74rem;
    color: var(--cd-text-secondary);
    font-weight: 600;
    flex-shrink: 0;
  }
  .cd-cw .cd-cw-fb-track {
    flex: 1;
    height: 1.35rem;
    border-radius: 0.375rem;
    background: var(--cd-bg-tertiary);
    overflow: hidden;
  }
  .cd-cw .cd-cw-fb-fill {
    height: 100%;
    border-radius: 0.375rem;
    background: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-science-blue) 65%, var(--cd-bg-primary));
    }
  }
  .cd-cw .cd-cw-fb-step.reg .cd-cw-fb-fill {
    background: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-forest-green) 60%, var(--cd-bg-primary));
    }
  }
  .cd-cw .cd-cw-fb-v {
    width: 5rem;
    text-align: right;
    font-size: 0.78rem;
    flex-shrink: 0;
    color: var(--cd-text-primary);
  }
  .cd-cw .cd-cw-fb-v b {
    font-family: var(--cd-font-numeral);
    font-size: 0.95rem;
  }
  .cd-cw .cd-cw-fb-pct {
    color: var(--cd-text-tertiary);
    font-size: 0.7rem;
    margin-left: 0.3rem;
  }
  .cd-cw .cd-cw-next {
    background: var(--cd-color-primary);
    color: var(--cd-bg-primary);
    border-radius: var(--cd-radius-2xl);
    padding: 1.25rem 1.375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .cd-cw .cd-cw-next__k {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-bg-primary) 60%, transparent);
    }
    font-weight: 700;
    margin-bottom: 0.45rem;
  }
  .cd-cw .cd-cw-next__t {
    font-family: var(--cd-font-editorial);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.9rem;
  }
  .cd-cw .cd-cw-next__row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
  }
  .cd-cw .cd-cw-lifecycle {
    display: flex;
    align-items: center;
    margin: 0 0 0.5rem;
  }
  .cd-cw .cd-cw-lc-step {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-text-tertiary);
    padding-bottom: 0.9rem;
  }
  .cd-cw .cd-cw-lc-step::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.3rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: var(--cd-radius-full);
    background: var(--cd-border-primary);
    transform: translateX(-50%);
    z-index: 1;
  }
  .cd-cw .cd-cw-lc-step::before {
    content: "";
    position: absolute;
    bottom: 0.62rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--cd-border-hairline);
  }
  .cd-cw .cd-cw-lc-step:first-child::before {
    display: none;
  }
  .cd-cw .cd-cw-lc-step.done {
    color: var(--cd-color-forest-green);
  }
  .cd-cw .cd-cw-lc-step.done::after {
    background: var(--cd-color-forest-green);
  }
  .cd-cw .cd-cw-lc-step.current {
    color: var(--cd-color-science-blue);
  }
  .cd-cw .cd-cw-lc-step.current::after {
    background: var(--cd-color-science-blue);
    box-shadow: 0 0 0 4px var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-color-science-blue) 18%, transparent);
    }
  }
  .cd-cw .cd-cw-bridge {
    background: linear-gradient( 115deg, var(--cd-color-forest-green), var(--cd-color-forest-green) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 115deg, color-mix(in srgb, var(--cd-color-forest-green) 32%, #0a120c), color-mix(in srgb, var(--cd-color-forest-green) 20%, #0a120c) );
    }
    color: #eaf5ee;
    border-radius: var(--cd-radius-2xl);
    padding: 1.375rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
  }
  .cd-cw .cd-cw-bridge__num {
    font-family: var(--cd-font-editorial);
    font-size: 3.25rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
  }
  .cd-cw .cd-cw-bridge__b {
    flex: 1;
    min-width: 14rem;
  }
  .cd-cw .cd-cw-bridge__k {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-forest-green) 55%, white);
    }
    font-weight: 700;
    margin-bottom: 0.3rem;
  }
  .cd-cw .cd-cw-bridge__t {
    font-family: var(--cd-font-editorial);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  .cd-cw .cd-cw-bridge__d {
    font-size: 0.82rem;
    color: #bfe0cb;
    line-height: 1.55;
    max-width: 52ch;
  }
  .cd-cw .cd-cw-bridge__go {
    border: none;
    background: #fff;
    color: #10341f;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: var(--cd-radius-lg);
    padding: 0.75rem 1.2rem;
    cursor: pointer;
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
  }
  .cd-cw .cd-cw-bridge__go:hover {
    background: #eafaf0;
  }
  .cd-cw .cd-cw-seqstat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
  @media (max-width: 760px) {
    .cd-cw .cd-cw-seqstat {
      grid-template-columns: 1fr;
    }
  }
  .cd-cw .cd-cw-ss {
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-xl);
    padding: 0.875rem 0.95rem;
    background: var(--cd-bg-primary);
  }
  .cd-cw .cd-cw-ss__h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
  }
  .cd-cw .cd-cw-ss__t {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--cd-text-primary);
  }
  .cd-cw .cd-cw-ss__subj {
    font-size: 0.78rem;
    color: var(--cd-text-secondary);
    margin-bottom: 0.7rem;
    line-height: 1.45;
  }
  .cd-cw .cd-cw-ss__metrics {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.85rem;
  }
  .cd-cw .cd-cw-ss__m {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
  }
  .cd-cw .cd-cw-ss__m .v {
    font-family: var(--cd-font-numeral);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--cd-text-primary);
  }
  .cd-cw .cd-cw-ss__m .l {
    font-size: 0.72rem;
    color: var(--cd-text-tertiary);
    font-weight: 600;
  }
  .cd-cw .cd-cw-ss__pending {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--cd-text-tertiary);
    margin-bottom: 0.85rem;
  }
  .cd-cw .cd-cw-ss__act {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
  }
  .cd-cw .cd-cw-workbtn {
    border: 1px solid var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-forest-green) 35%, var(--cd-border-primary));
    }
    background: var(--cd-bg-primary);
    color: var(--cd-color-forest-green);
    font-weight: 700;
    font-size: 0.74rem;
    border-radius: var(--cd-radius-lg);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    white-space: nowrap;
  }
  .cd-cw .cd-cw-workbtn:hover {
    background: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-forest-green) 10%, transparent);
    }
  }
  .cd-cw .cd-cw-dots {
    display: flex;
    gap: 0.3rem;
  }
  .cd-cw .cd-cw-dot {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--cd-radius-full);
    font-size: 0.62rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    background: var(--cd-bg-tertiary);
    color: var(--cd-text-tertiary);
  }
  .cd-cw .cd-cw-dot.on {
    background: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-forest-green) 14%, transparent);
    }
    color: var(--cd-color-forest-green);
  }
  .cd-cw .cd-cw-offer {
    background: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-xl);
    padding: 0.95rem 1.05rem;
    font-size: 0.98rem;
    line-height: 1.9;
    color: var(--cd-text-primary);
  }
  .cd-cw .cd-cw-offer select {
    font-weight: 700;
    color: var(--cd-color-science-blue);
    border: 1px solid var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-science-blue) 35%, var(--cd-border-primary));
    }
    background: var(--cd-bg-primary);
    border-radius: var(--cd-radius-lg);
    padding: 0.2rem 0.5rem;
    cursor: pointer;
  }
  .cd-cw .cd-cw-seq {
    position: relative;
    padding-left: 2.375rem;
  }
  .cd-cw .cd-cw-seq::before {
    content: "";
    position: absolute;
    left: 0.875rem;
    top: 0.5rem;
    bottom: 2.6rem;
    width: 2px;
    background: var(--cd-border-primary);
  }
  .cd-cw .cd-cw-estep {
    position: relative;
    margin-bottom: 0.875rem;
  }
  .cd-cw .cd-cw-node {
    position: absolute;
    left: -2.375rem;
    top: 0;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--cd-radius-full);
    background: var(--cd-color-primary);
    border: 2px solid var(--cd-color-primary);
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cd-bg-primary);
    z-index: 1;
  }
  .cd-cw .cd-cw-gap {
    height: 1.6rem;
    margin: -0.25rem 0 0.6rem 0;
    display: flex;
    align-items: center;
  }
  .cd-cw .cd-cw-gap .conn {
    font-size: 0.74rem;
    color: var(--cd-text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }
  .cd-cw .cd-cw-gap input, .cd-cw .cd-cw-expiry input {
    width: 3rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: 0.375rem;
    padding: 0.15rem 0.3rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.78rem;
    background: var(--cd-bg-primary);
    color: var(--cd-text-primary);
  }
  .cd-cw .cd-cw-expiry {
    position: relative;
    margin-top: 0.4rem;
  }
  .cd-cw .cd-cw-expiry .cd-cw-node {
    background: var(--cd-bg-primary);
    border: 2px dashed var(--cd-border-primary);
    color: var(--cd-text-tertiary);
  }
  .cd-cw .cd-cw-expiry .etxt {
    font-size: 0.8rem;
    color: var(--cd-text-secondary);
    padding-top: 0.2rem;
  }
  .cd-cw .cd-cw-rcheck {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.84rem;
    padding: 0.3rem 0;
  }
  .cd-cw .cd-cw-rcheck .ri {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: var(--cd-radius-full);
    display: grid;
    place-items: center;
    font-size: 0.58rem;
    flex-shrink: 0;
  }
  .cd-cw .cd-cw-rcheck.ok .ri {
    background: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-forest-green) 14%, transparent);
    }
    color: var(--cd-color-forest-green);
  }
  .cd-cw .cd-cw-rcheck.ok {
    color: var(--cd-text-primary);
  }
  .cd-cw .cd-cw-rcheck.no .ri {
    background: var(--cd-bg-tertiary);
    color: var(--cd-text-tertiary);
  }
  .cd-cw .cd-cw-rcheck.no {
    color: var(--cd-text-secondary);
  }
}
@layer components {
  .cd-report-tile__chart {
    position: relative;
    height: 13rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-report-tile__body {
    padding: 1.125rem 1.375rem 1.375rem;
  }
  .cd-report-tile__masthead {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
  }
  .cd-report-tile__index {
    font-size: 2rem;
    line-height: 0.9;
    color: var(--cd-text-primary);
    opacity: 0.9;
    flex-shrink: 0;
  }
  .cd-report-tile__title {
    font-size: 1.3rem;
    line-height: 1.1;
    color: var(--cd-text-primary);
    transition: color 0.2s ease;
  }
  .group:hover .cd-report-tile__title {
    color: var(--cd-color-accent);
  }
  .cd-report-tile__rule {
    height: 1px;
    background: var(--cd-border-hairline);
    margin: 0.75rem 0;
  }
  .cd-report-tile__desc {
    color: var(--cd-text-secondary);
    font-size: 0.86rem;
    line-height: 1.55;
  }
  .cd-report-tile__stat {
    margin-top: 0.875rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.9rem;
    color: var(--cd-text-secondary);
  }
  .cd-report-tile__metric {
    font-size: 1.4rem;
  }
  .cd-report-tile__divider {
    color: var(--cd-border-primary);
    margin: 0 0.25rem;
    font-size: 1rem;
  }
  .cd-report-switch-arrow {
    display: inline-flex;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--cd-text-secondary);
    background-color: transparent;
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-report-switch-arrow:hover {
    color: var(--cd-text-primary);
    border-color: var(--cd-text-tertiary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-report-switch-arrow--off {
    cursor: default;
    opacity: 30%;
    color: var(--cd-text-tertiary);
  }
  .cd-report-switch-arrow--off:hover {
    color: var(--cd-text-tertiary);
    border-color: var(--cd-border-secondary);
    background-color: transparent;
  }
  .cd-report-switch-trigger {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-primary);
  }
  .cd-report-switch-trigger:hover {
    border-color: var(--cd-text-tertiary);
  }
  .cd-report-switch-index {
    font-size: 1.05rem;
    color: var(--cd-color-accent);
    line-height: 1;
  }
  .cd-report-switch-name {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.1;
  }
  .cd-report-switch-menu {
    position: absolute;
    right: calc(var(--spacing) * 0);
    margin-top: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 64);
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    z-index: var(--cd-z-topbar-dropdown);
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-report-switch-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--cd-text-primary);
  }
  .cd-report-switch-item:hover {
    background-color: var(--cd-bg-secondary);
  }
  .cd-report-switch-item--active {
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 9%, transparent);
    }
  }
  .cd-report-switch-item-index {
    font-size: 0.9rem;
    color: var(--cd-text-tertiary);
    width: 1.4rem;
    flex-shrink: 0;
  }
  .cd-report-switch-item--active .cd-report-switch-item-index {
    color: var(--cd-color-accent);
  }
  .cd-report-switch-item-icon {
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--cd-text-tertiary);
  }
  .cd-report-switch-item-name {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .cd-report-switch-item-check {
    flex-shrink: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--cd-color-accent);
  }
  .cd-report-switch-divider {
    height: 1px;
    margin: 0.375rem 0;
    background: var(--cd-border-hairline);
  }
  .cd-report-switch-item--all .cd-report-switch-item-name {
    color: var(--cd-text-secondary);
  }
  .cd-period-control {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .cd-period-control-icon {
    pointer-events: none;
    position: absolute;
    left: calc(var(--spacing) * 3.5);
    color: var(--cd-text-tertiary);
    font-size: 0.85rem;
  }
  .cd-period-control-chev {
    pointer-events: none;
    position: absolute;
    right: calc(var(--spacing) * 3);
    color: var(--cd-text-tertiary);
    font-size: 0.7rem;
  }
  .cd-period-control-select {
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-lg);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    padding: 0.5rem 2rem 0.5rem 2.25rem;
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .cd-period-control-select:hover {
    border-color: var(--cd-text-tertiary);
  }
  .cd-period-control-select:focus {
    --tw-outline-style: none;
    outline-style: none;
    border-color: var(--cd-color-accent);
    box-shadow: 0 0 0 2px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 12%, transparent);
    }
  }
}
@layer components {
  .cd-analytics-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .group:hover .cd-analytics-card, .cd-analytics-card:hover {
    border-color: var(--cd-border-hover);
  }
  .cd-analytics-card__media {
    position: relative;
    height: 13rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow: hidden;
    border-bottom: 1px solid var(--cd-border-hairline);
    background: var(--cd-bg-primary);
  }
  .cd-analytics-card__media img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: var(--cd-bg-primary);
    transform: scale(1.06);
    transform-origin: center;
    transition: transform 0.22s ease, filter 0.22s ease;
    will-change: transform;
  }
  .group:hover .cd-analytics-card__media img {
    transform: scale(1.12);
    filter: saturate(1.03) contrast(1.02);
  }
  .cd-analytics-card__icon-fallback {
    position: relative;
    z-index: 0;
    color: var(--cd-color-accent);
    font-size: 3rem;
    opacity: 0.7;
  }
}
@layer components {
  .cd-perf__rows {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-5);
  }
  .cd-perf__row--low {
    opacity: 0.55;
  }
  .cd-perf__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cd-space-3);
    margin-bottom: var(--cd-space-2);
  }
  .cd-perf__label {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    font-size: var(--cd-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-secondary);
  }
  .cd-perf__tag {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
    border: 1px solid var(--cd-border-hairline);
    border-radius: var(--cd-radius-xs);
    padding: 0.05rem 0.3rem;
  }
  .cd-perf__value {
    font-family: var(--cd-font-numeral);
    font-size: var(--cd-text-xl);
    line-height: 1;
    font-feature-settings: "tnum" 1;
    color: var(--cd-text-tertiary);
  }
  .cd-perf__value--strong {
    color: var(--cd-color-success);
  }
  .cd-perf__value--mid {
    color: var(--cd-color-warning);
  }
  .cd-perf__track {
    position: relative;
    height: 0.375rem;
    background-color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-primary) 8%, transparent);
    }
    overflow: visible;
  }
  .cd-perf__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--cd-perf-fill, 0%);
    background-color: var(--cd-text-primary);
    transition: width 0.3s ease;
  }
  .cd-perf__baseline {
    position: absolute;
    inset-block: -0.1875rem;
    inset-inline-start: var(--cd-perf-mark, 0%);
    width: 1px;
    background-color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-primary) 55%, transparent);
    }
  }
  .cd-perf__meta {
    margin-top: var(--cd-space-2);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  .cd-perf__foot {
    margin-top: var(--cd-space-5);
    padding-top: var(--cd-space-4);
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-perf__legend {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  .cd-perf__legend-tick {
    display: inline-block;
    width: 1px;
    height: 0.75rem;
    background-color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-primary) 55%, transparent);
    }
  }
  .cd-perf__note {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-2);
    margin-top: var(--cd-space-3);
    font-size: var(--cd-text-sm);
    line-height: 1.45;
    color: var(--cd-text-primary);
  }
  .cd-perf__note i {
    margin-top: 0.15rem;
    color: var(--cd-text-tertiary);
  }
}
@layer components {
  .cd-mom-wrap {
    overflow-x: auto;
  }
  .cd-mom {
    width: 100%;
    min-width: 22rem;
    border-collapse: collapse;
    table-layout: fixed;
  }
  .cd-mom th, .cd-mom td {
    padding: var(--cd-space-3);
  }
  .cd-mom th:first-child, .cd-mom td:first-child {
    padding-inline-start: 0;
  }
  .cd-mom th:last-child, .cd-mom td:last-child {
    padding-inline-end: 0;
  }
  .cd-mom__corner {
    width: 30%;
  }
  .cd-mom__label {
    text-align: start;
    font-size: var(--cd-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-mom__month {
    text-align: end;
    font-family: var(--cd-font-editorial-body);
    font-weight: 600;
    font-size: var(--cd-text-base);
    color: var(--cd-text-primary);
    border-bottom: 1px solid var(--cd-border-primary);
    white-space: nowrap;
  }
  .cd-mom__chip {
    display: inline-block;
    margin-inline-start: var(--cd-space-2);
    padding: 0.1rem 0.45rem;
    font-family: var(--cd-font-primary);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-hairline);
    border-radius: var(--cd-radius-full);
    vertical-align: middle;
  }
  .cd-mom__cell {
    text-align: end;
    font-size: var(--cd-text-lg);
    color: var(--cd-text-primary);
    border-bottom: 1px solid var(--cd-border-hairline);
    white-space: nowrap;
  }
  .cd-mom tbody tr:last-child .cd-mom__label, .cd-mom tbody tr:last-child .cd-mom__cell {
    border-bottom: 0;
  }
  .cd-mom__current {
    background-color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-primary) 5%, transparent);
    }
  }
}
@layer components {
  .cd-quiet-card {
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  a:hover .cd-quiet-card, button:hover .cd-quiet-card {
    transform: translateY(-1px);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-quiet-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cd-text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
  }
  .cd-quiet-head i {
    font-size: 0.85rem;
    color: var(--cd-text-tertiary);
  }
  .cd-quiet-value-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.25rem;
  }
  .cd-quiet-value {
    font-size: 1.8rem;
    color: var(--cd-text-primary);
  }
  .cd-quiet-value.cd-quiet-value--empty {
    color: var(--cd-text-tertiary);
    font-weight: 500;
  }
  .cd-quiet-unit {
    font-size: 0.55em;
    margin-left: 0.125rem;
  }
  .cd-quiet-value-icon {
    font-size: 1.4rem;
    color: var(--cd-text-primary);
    line-height: 1;
    vertical-align: -0.05em;
  }
  .cd-quiet-stars {
    display: flex;
    gap: 0.125rem;
    font-size: 0.78rem;
    line-height: 1;
  }
  .cd-quiet-stars .fa-star {
    color: var(--cd-color-warning-orange);
  }
  .cd-quiet-stars .far.fa-star {
    color: var(--cd-color-warning-orange);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-warning-orange) 25%, var(--cd-border-hairline));
    }
  }
  .cd-quiet-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--cd-text-tertiary);
    margin-top: 0.25rem;
    min-height: 1.1em;
  }
  .cd-quiet-meta a {
    color: var(--cd-color-science-blue);
    font-weight: 600;
  }
  .cd-quiet-meta a:hover {
    text-decoration: underline;
  }
  .cd-quiet-meta--progress {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .cd-quiet-progress-track {
    width: 100%;
    height: 0.375rem;
    background: color-mix(in srgb, color-mix(in srgb, var(--cd-border-primary) 50%, transparent) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-border-hairline) 60%, transparent);
    }
    border-radius: var(--cd-radius-full);
    overflow: hidden;
  }
  .cd-quiet-progress-bar {
    height: 100%;
    border-radius: inherit;
    transition: width 0.3s ease;
    background: var(--cd-text-tertiary);
  }
  .cd-quiet-progress-bar--success {
    background: var(--cd-color-forest-green);
  }
  .cd-quiet-progress-bar--warn {
    background: var(--cd-color-warning-orange);
  }
  .cd-quiet-progress-bar--danger, .cd-quiet-progress-bar--critical {
    background: var(--cd-color-crimson-red);
  }
  .cd-quiet-progress-label {
    font-size: 0.72rem;
    color: var(--cd-text-tertiary);
    text-align: center;
    font-weight: 500;
  }
  .cd-quiet-trend {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
  }
  .cd-quiet-trend--up {
    color: var(--cd-color-forest-green);
  }
  .cd-quiet-trend--down {
    color: var(--cd-color-crimson-red);
  }
  .cd-quiet-trend--neutral {
    color: var(--cd-text-tertiary);
  }
  .cd-quiet-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1.2;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
  }
  .cd-quiet-chip i {
    font-size: 0.68rem;
  }
  .cd-quiet-chip--up, .cd-quiet-chip--positive {
    background: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-forest-green) 12%, transparent);
    }
    color: var(--cd-color-forest-green);
  }
  .cd-quiet-chip--down, .cd-quiet-chip--negative {
    background: var(--cd-color-crimson-red);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-crimson-red) 12%, transparent);
    }
    color: var(--cd-color-crimson-red);
  }
  .cd-quiet-chip--neutral, .cd-quiet-chip--flat {
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
  }
  .cd-quiet-ctx {
    color: var(--cd-text-tertiary);
  }
  .cd-quiet-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--cd-color-science-blue);
    font-weight: 600;
  }
  .cd-quiet-cta i {
    font-size: 0.7rem;
  }
  .cd-spark {
    width: 78px;
    height: 28px;
    flex: none;
    overflow: visible;
  }
  .cd-spark-line {
    fill: none;
    stroke: var(--cd-text-secondary);
    stroke-width: 1.75;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .cd-spark-line--green {
    stroke: var(--cd-color-forest-green);
  }
  .cd-spark-line--blue {
    stroke: var(--cd-color-science-blue);
  }
  .cd-spark-line--orange {
    stroke: var(--cd-color-warning-orange);
  }
  .cd-spark-area {
    stroke: none;
    fill: var(--cd-text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--cd-text-secondary) 12%, transparent);
    }
  }
  .cd-spark-area--green {
    fill: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--cd-color-forest-green) 15%, transparent);
    }
  }
  .cd-spark-area--blue {
    fill: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--cd-color-science-blue) 15%, transparent);
    }
  }
  .cd-spark-area--orange {
    fill: var(--cd-color-warning-orange);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--cd-color-warning-orange) 15%, transparent);
    }
  }
  .cd-spark-dot {
    fill: var(--cd-text-secondary);
    stroke: var(--cd-bg-primary);
    stroke-width: 1.4;
  }
  .cd-spark-dot--green {
    fill: var(--cd-color-forest-green);
  }
  .cd-spark-dot--blue {
    fill: var(--cd-color-science-blue);
  }
  .cd-spark-dot--orange {
    fill: var(--cd-color-warning-orange);
  }
  .cd-quiet-capsule {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    background: var(--cd-text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-text-secondary) 10%, transparent);
    }
    color: var(--cd-text-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    vertical-align: middle;
  }
  .cd-quiet-capsule--warn {
    background: var(--cd-color-warning-orange);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning-orange) 10%, transparent);
    }
    color: var(--cd-color-warning-orange);
  }
  .cd-quiet-capsule--save {
    background: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-forest-green) 10%, transparent);
    }
    color: var(--cd-color-forest-green);
  }
  .cd-quiet-capsule--info {
    background: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-science-blue) 10%, transparent);
    }
    color: var(--cd-color-science-blue);
  }
  .cd-quiet-capsule--danger {
    background: var(--cd-color-crimson-red);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-crimson-red) 10%, transparent);
    }
    color: var(--cd-color-crimson-red);
  }
  .cd-quiet-capsule--gold {
    background: var(--cd-color-premium);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-premium) 12%, transparent);
    }
    color: var(--cd-color-premium);
  }
  .cd-quiet-capsule--trial {
    background: var(--cd-color-deep-purple);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-deep-purple) 10%, transparent);
    }
    color: var(--cd-color-deep-purple);
  }
  @media (max-width: 767px) {
    .cd-quiet-card {
      padding: 0.875rem 1rem;
      gap: 0.25rem;
    }
    .cd-quiet-head {
      font-size: 0.72rem;
    }
    .cd-quiet-head i {
      font-size: 0.78rem;
    }
    .cd-quiet-value-row {
      margin-top: 0.375rem;
    }
    .cd-quiet-value {
      font-size: 1.55rem;
    }
    .cd-quiet-meta {
      font-size: 0.68rem;
      line-height: 1.3;
    }
    .cd-quiet-card--mobile-inline:not(:has(.cd-quiet-stars)):not(:has(.cd-quiet-meta--progress)) {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas: "head head" "value meta";
      align-items: baseline;
      column-gap: 0.5rem;
      row-gap: 0.125rem;
      padding: 0.625rem 0.75rem;
    }
    .cd-quiet-card--mobile-inline:not(:has(.cd-quiet-stars)):not(:has(.cd-quiet-meta--progress)) .cd-quiet-head {
      grid-area: head;
      font-size: 0.7rem;
    }
    .cd-quiet-card--mobile-inline:not(:has(.cd-quiet-stars)):not(:has(.cd-quiet-meta--progress)) .cd-quiet-head i {
      font-size: 0.75rem;
    }
    .cd-quiet-card--mobile-inline:not(:has(.cd-quiet-stars)):not(:has(.cd-quiet-meta--progress)) .cd-quiet-value-row, .cd-quiet-card--mobile-inline:not(:has(.cd-quiet-stars)):not(:has(.cd-quiet-meta--progress)) .cd-quiet-value {
      grid-area: value;
      margin: 0;
    }
    .cd-quiet-card--mobile-inline:not(:has(.cd-quiet-stars)):not(:has(.cd-quiet-meta--progress)) .cd-quiet-value {
      font-size: 1.4rem;
    }
    .cd-quiet-card--mobile-inline:not(:has(.cd-quiet-stars)):not(:has(.cd-quiet-meta--progress)) .cd-quiet-meta {
      grid-area: meta;
      justify-content: flex-end;
      flex-wrap: nowrap;
      font-size: 0.66rem;
      margin: 0;
      line-height: 1.25;
      min-width: 0;
      overflow: hidden;
    }
    .cd-quiet-card--mobile-inline:not(:has(.cd-quiet-stars)):not(:has(.cd-quiet-meta--progress)) .cd-quiet-ctx {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }
  }
}
@layer components {
  .cd-language-card {
    position: relative;
    overflow: hidden;
  }
  .cd-language-card-glyph {
    position: absolute;
    bottom: -1.25rem;
    right: 0.75rem;
    font-size: 5.5rem;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--cd-text-primary);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  .cd-language-card-content {
    position: relative;
    z-index: 1;
  }
  .cd-language-card-add {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--cd-border-primary);
    border-radius: var(--cd-radius-lg, 0.75rem);
    background-color: transparent;
    color: var(--cd-text-tertiary);
    text-align: center;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  }
  .cd-language-card-add:hover {
    border-color: var(--cd-color-primary);
    color: var(--cd-color-primary);
    background-color: var(--cd-bg-tertiary);
    transform: translateY(-2px);
  }
  .cd-language-card-add-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-secondary);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .cd-language-card-add:hover .cd-language-card-add-icon {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary, #ffffff);
  }
}
@layer components {
  .cd-preset-eyebrow {
    font-family: var(--cd-font-editorial);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-color-primary);
  }
  .cd-preset-heading {
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--cd-text-primary);
    margin-top: 0.25rem;
  }
  .cd-preset-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 1.125rem;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .cd-preset-card:hover {
    transform: translateY(-2px);
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 45%, var(--cd-border-primary));
    }
    box-shadow: 0 10px 24px -16px rgb(0 0 0 / 0.35);
  }
  .cd-preset-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-bg-primary), 0 0 0 4px var(--cd-color-primary);
  }
  .cd-preset-card.is-selected {
    border-color: var(--cd-color-primary);
    box-shadow: inset 0 0 0 1px var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 6%, var(--cd-bg-primary));
    }
  }
  .cd-preset-card__icon {
    display: inline-flex;
  }
  .cd-preset-card__icon .cd-icon-tile {
    background-color: var(--cd-bg-secondary);
  }
  .cd-preset-card__freq {
    font-family: var(--cd-font-editorial);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-color-primary);
  }
  .cd-preset-card__title {
    display: block;
    font-size: 1.0625rem;
    line-height: 1.2;
    color: var(--cd-text-primary);
    margin-top: 0.15rem;
  }
  .cd-preset-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cd-border-hairline);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--cd-text-secondary);
  }
  .cd-preset-search {
    position: relative;
    max-width: 26rem;
  }
  .cd-preset-search__icon {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--cd-text-secondary);
    pointer-events: none;
  }
  .cd-preset-search__input {
    width: 100%;
    padding: 0.625rem 2.25rem 0.625rem 2.5rem;
    font-size: 0.875rem;
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-lg, 0.625rem);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .cd-preset-search__input::placeholder {
    color: var(--cd-text-secondary);
  }
  .cd-preset-search__input:focus {
    outline: none;
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 3px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 18%, transparent);
    }
  }
  .cd-preset-search__clear {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    color: var(--cd-text-secondary);
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .cd-preset-search__clear:hover {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-preset-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    text-align: center;
  }
  .cd-preset-empty__icon {
    font-size: 1.5rem;
    color: var(--cd-text-secondary);
    opacity: 0.6;
  }
  .cd-preset-empty__text {
    font-size: 0.9rem;
    color: var(--cd-text-secondary);
  }
  .cd-preset-empty__reset {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cd-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .cd-preset-rail {
    margin-top: 1.75rem;
  }
  .cd-preset-rail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
  }
  .cd-preset-rail__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 9%, var(--cd-bg-primary));
    }
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 26%, var(--cd-bg-primary));
    }
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
  }
  .cd-preset-rail__sub {
    font-size: 0.85rem;
    color: var(--cd-text-secondary);
  }
  .cd-preset-groups-head {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    margin-top: 2.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--cd-color-shark);
  }
  .cd-preset-groups-head h3 {
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary);
  }
  .cd-preset-groups-head__count {
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-preset-group {
    margin-top: 1.75rem;
  }
  .cd-preset-group__label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
  }
  .cd-preset-group__icon {
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.5rem;
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 0.82rem;
  }
  .cd-preset-group__title {
    font-size: 1.02rem;
    color: var(--cd-text-primary);
  }
  .cd-preset-group__count {
    margin-left: auto;
    font-size: 0.74rem;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-preset-card--custom {
    margin-top: 1.75rem;
    border-style: dashed;
  }
  .cd-preset-card--custom:hover {
    border-color: var(--cd-color-shark);
  }
  .cd-preset-card.cd-preset-card--custom .cd-icon-tile {
    background-color: var(--cd-color-shark);
  }
  .cd-preset-card.cd-preset-card--custom .cd-icon-glyph {
    color: var(--cd-text-on-primary, #fff);
  }
  .cd-schedule-summary-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    background-color: var(--cd-bg-primary);
  }
  .cd-schedule-summary-bar__step {
    flex-shrink: 0;
    font-family: var(--cd-font-editorial);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-schedule-summary-bar__icon {
    flex-shrink: 0;
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-hairline);
  }
  .cd-schedule-summary-bar__text {
    min-width: 0;
  }
  .cd-schedule-summary-bar__name {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--cd-text-primary);
  }
  .cd-schedule-summary-bar__meta {
    font-size: 0.8rem;
    color: var(--cd-text-secondary);
  }
  .cd-schedule-summary-bar__change {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cd-text-secondary);
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: 9999px;
    background-color: var(--cd-bg-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .cd-schedule-summary-bar__change:hover {
    border-color: var(--cd-color-shark);
    color: var(--cd-text-primary);
  }
  .cd-schedule-panel {
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    overflow: hidden;
    background-color: var(--cd-card-bg, var(--cd-bg-primary));
  }
  .cd-schedule-panel__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-schedule-panel__step {
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 9999px;
    background-color: var(--cd-color-shark);
    color: var(--cd-text-on-primary, #fff);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .cd-schedule-panel__title {
    font-size: 1.2rem;
    color: var(--cd-text-primary);
  }
  .cd-schedule-panel__body {
    padding: 1.5rem;
  }
  .cd-schedule-date .cd-calendar-input {
    border-color: var(--cd-color-shark);
  }
  .cd-quick-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  .cd-quick-dates button {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    border: 1px solid var(--cd-border-primary);
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-secondary);
    cursor: pointer;
    transition: border-color 0.14s ease, color 0.14s ease;
  }
  .cd-quick-dates button:hover {
    border-color: var(--cd-color-shark);
    color: var(--cd-text-primary);
  }
  .cd-schedule-optional {
    padding-top: 1.25rem;
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-assign-pro-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: border-color 0.14s ease, color 0.14s ease;
  }
  .cd-assign-pro-trigger:hover {
    border-color: var(--cd-color-primary);
    color: var(--cd-color-primary);
  }
  .cd-assign-pro-trigger i {
    color: var(--cd-color-primary);
  }
  .cd-selected-pro {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.625rem 0.75rem;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 0.75rem;
  }
  .cd-selected-pro__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--cd-color-shark);
    border-radius: 0.625rem;
  }
  .cd-selected-pro__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cd-selected-pro__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .cd-selected-pro__name {
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-selected-pro__meta {
    font-size: 0.8rem;
    color: var(--cd-text-secondary);
  }
  .cd-selected-pro__change {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cd-color-primary);
    cursor: pointer;
  }
  .cd-selected-pro__change:hover {
    text-decoration: underline;
  }
  .cd-selected-pro__remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    border-radius: 0.5rem;
    cursor: pointer;
    transition: color 0.14s ease, background-color 0.14s ease;
  }
  .cd-selected-pro__remove:hover {
    color: var(--cd-color-crimson-red, #dc143c);
    background-color: var(--cd-bg-secondary, rgb(0 0 0 / 0.04));
  }
  .cd-schedule-actions {
    position: sticky;
    bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 1.25rem;
    box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.22);
  }
  .cd-schedule-actions__note {
    font-size: 0.85rem;
    color: var(--cd-text-secondary);
    min-width: 0;
  }
  .cd-schedule-actions__buttons {
    margin-left: auto;
    display: flex;
    gap: 0.75rem;
  }
  .cd-schedule-create {
    padding-bottom: 3rem;
  }
}
@layer components {
  [class*="cd-checkbox-"] {
    appearance: none;
    position: relative;
    border-style: solid;
    transition: all 200ms ease;
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
  }
  [class*="cd-checkbox-"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3e%3c/svg%3e");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
  }
  [class*="cd-checkbox-"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .cd-checkbox-form {
    width: var(--cd-space-4);
    height: var(--cd-space-4);
    border-radius: var(--cd-radius-base);
    border-width: 1px;
    border-color: var(--cd-border-secondary);
    background-color: var(--cd-bg-primary);
  }
  .cd-checkbox-form:checked {
    border-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
  }
  .cd-checkbox-form:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-color-primary), 0 0 0 4px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px var(--cd-color-primary), 0 0 0 4px color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
  }
  .cd-checkbox-form:hover:not(:disabled) {
    border-color: var(--cd-color-primary);
  }
  .cd-checkbox-service {
    width: var(--cd-space-5);
    height: var(--cd-space-5);
    border-radius: var(--cd-radius-base);
    border-width: 2px;
    border-color: var(--cd-border-secondary);
    background-color: white;
  }
  .cd-checkbox-service:checked {
    border-color: var(--cd-color-success);
    background-color: var(--cd-color-success);
  }
  .cd-checkbox-service:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-checkbox-service:hover:not(:disabled) {
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 2px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
  }
  .cd-checkbox-sm {
    width: var(--cd-space-3);
    height: var(--cd-space-3);
  }
  .cd-checkbox-sm:checked {
    background-size: 8px 8px;
  }
  .cd-checkbox-group > * + * {
    margin-top: var(--cd-space-3);
  }
  .cd-checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
  }
  .cd-checkbox-item label {
    cursor: pointer;
    user-select: none;
    color: var(--cd-text-primary);
    font-family: var(--cd-font-primary);
  }
  .cd-checkbox-item:has(input:disabled) label {
    opacity: 0.5;
    cursor: not-allowed;
  }
  @media (max-width: 640px) {
    .cd-checkbox-group > * + * {
      margin-top: var(--cd-space-2);
    }
  }
  @media (prefers-contrast: high) {
    [class*="cd-checkbox-"] {
      border-width: 2px;
    }
    [class*="cd-checkbox-"]:checked {
      border-color: currentColor;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [class*="cd-checkbox-"] {
      transition: none;
    }
  }
}
@layer components {
  .cd-toggle {
    appearance: none;
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #e5e7eb;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    flex-shrink: 0;
    outline: none;
  }
  .cd-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .cd-toggle:checked {
    background-color: #10b981;
  }
  .cd-toggle:checked::before {
    transform: translateX(20px);
  }
  .cd-toggle:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #10b981;
  }
  .cd-toggle:focus:checked {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #10b981;
  }
  .cd-toggle:hover:not(:disabled) {
    background-color: #d1d5db;
  }
  .cd-toggle:hover:checked:not(:disabled) {
    background-color: #059669;
  }
  .cd-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .cd-toggle:disabled::before {
    box-shadow: none;
  }
  .cd-toggle-sm {
    width: 32px;
    height: 18px;
    border-radius: 9px;
  }
  .cd-toggle-sm::before {
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
  }
  .cd-toggle-sm:checked::before {
    transform: translateX(14px);
  }
  .cd-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
  }
  .cd-toggle-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.25;
  }
  .cd-toggle-description {
    font-size: 0.75rem;
    color: #4b5563;
    margin-top: 2px;
    line-height: 1.33;
  }
  .cd-toggle-success:checked {
    background-color: #10b981;
  }
  .cd-toggle-success:hover:checked:not(:disabled) {
    background-color: #059669;
  }
  .cd-toggle-success:focus:checked {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #10b981;
  }
  .cd-toggle-warning:checked {
    background-color: #f59e0b;
  }
  .cd-toggle-warning:hover:checked:not(:disabled) {
    background-color: #d97706;
  }
  .cd-toggle-warning:focus:checked {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #f59e0b;
  }
  .cd-toggle-danger:checked {
    background-color: #ef4444;
  }
  .cd-toggle-danger:hover:checked:not(:disabled) {
    background-color: #dc2626;
  }
  .cd-toggle-danger:focus:checked {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #ef4444;
  }
  @media (max-width: 640px) {
    .cd-toggle-wrapper {
      gap: 8px;
    }
    .cd-toggle-label {
      font-size: 0.8125rem;
    }
  }
  @media (prefers-color-scheme: dark) {
    .cd-toggle {
      background-color: #4b5563;
    }
    .cd-toggle:hover:not(:disabled) {
      background-color: #6b7280;
    }
    .cd-toggle-label {
      color: #f3f4f6;
    }
    .cd-toggle-description {
      color: #9ca3af;
    }
  }
  .cd-toggle-sm:checked::before {
    animation: cd-toggle-bounce-sm 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  @keyframes cd-toggle-bounce-sm {
    0% {
      transform: translateX(0px) scale(1);
    }
    50% {
      transform: translateX(7px) scale(1.1);
    }
    100% {
      transform: translateX(14px) scale(1);
    }
  }
  .cd-toggle-track {
    appearance: none;
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #e5e7eb;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    flex-shrink: 0;
    outline: none;
    display: block;
  }
  .cd-toggle-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .cd-toggle input[type="checkbox"]:checked + .cd-toggle-track, .cd-toggle-primary input[type="checkbox"]:checked + .cd-toggle-track, .cd-toggle-success input[type="checkbox"]:checked + .cd-toggle-track {
    background-color: #10b981;
  }
  .cd-toggle input[type="checkbox"]:checked + .cd-toggle-track::before, .cd-toggle-primary input[type="checkbox"]:checked + .cd-toggle-track::before, .cd-toggle-success input[type="checkbox"]:checked + .cd-toggle-track::before {
    transform: translateX(20px);
  }
  .cd-toggle-danger input[type="checkbox"]:checked + .cd-toggle-track {
    background-color: #ef4444;
  }
  .cd-toggle-danger input[type="checkbox"]:checked + .cd-toggle-track::before {
    transform: translateX(20px);
  }
  .cd-toggle-warning input[type="checkbox"]:checked + .cd-toggle-track {
    background-color: #f59e0b;
  }
  .cd-toggle-warning input[type="checkbox"]:checked + .cd-toggle-track::before {
    transform: translateX(20px);
  }
  .cd-toggle input[type="checkbox"]:focus + .cd-toggle-track {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #10b981;
  }
  .cd-toggle-track:hover:not(:has(input:disabled)) {
    background-color: #d1d5db;
  }
  .cd-toggle input[type="checkbox"]:checked + .cd-toggle-track:hover, .cd-toggle-primary input[type="checkbox"]:checked + .cd-toggle-track:hover, .cd-toggle-success input[type="checkbox"]:checked + .cd-toggle-track:hover {
    background-color: #059669;
  }
  .cd-toggle-danger input[type="checkbox"]:checked + .cd-toggle-track:hover {
    background-color: #dc2626;
  }
  .cd-toggle-warning input[type="checkbox"]:checked + .cd-toggle-track:hover {
    background-color: #d97706;
  }
  .cd-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  @media (prefers-contrast: high) {
    .cd-toggle {
      border: 2px solid;
    }
    .cd-toggle::before {
      border: 1px solid #000;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-toggle, .cd-toggle::before {
      transition: none;
    }
    .cd-toggle:checked::before {
      animation: none;
    }
  }
}
@layer components {
  .cd-view-toggle {
    display: inline-flex;
    border-radius: var(--cd-radius-lg);
    padding: var(--cd-space-0-5);
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-primary);
  }
  .cd-view-toggle-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    color: var(--cd-text-secondary);
    cursor: pointer;
  }
  .cd-view-toggle-btn:hover {
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-hover);
  }
  .cd-view-toggle-active {
    background-color: var(--cd-color-primary);
    color: white;
  }
  .cd-view-toggle-active:hover {
    background-color: var(--cd-color-primary);
    color: white;
    opacity: 0.9;
  }
}
@layer components {
  .cd-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 2px;
    user-select: none;
  }
  .cd-lang-toggle-tick {
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    min-width: 20px;
    text-align: center;
    padding: 5px 7px;
    border-radius: 9999px;
    color: var(--cd-text-secondary);
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: color 200ms ease, background-color 200ms ease, transform 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .cd-lang-toggle-tick[aria-checked="true"] {
    color: var(--cd-text-primary);
  }
  .cd-lang-toggle-tick:hover:not([aria-checked="true"]) {
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-lang-toggle-tick:active {
    transform: scale(0.94);
  }
  .cd-lang-toggle-tick:focus-visible {
    outline: 2px solid var(--cd-accent-primary, #3b82f6);
    outline-offset: 2px;
  }
  .cd-lang-toggle-knob {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: radial-gradient( circle at 35% 30%, #4a4640 0%, #1d1a16 70% ),  repeating-conic-gradient( from 0deg, #2a2620 0deg, #1d1a16 2deg, #2a2620 4deg );
    background-blend-mode: overlay, normal;
    box-shadow: inset 0 1px 1px rgba(255, 235, 200, 0.18),  inset 0 -2px 3px rgba(0, 0, 0, 0.7),  0 0 0 1.5px #0a0907,  0 3px 6px rgba(0, 0, 0, 0.6),  0 8px 18px -4px rgba(0, 0, 0, 0.65);
    transition: transform 250ms cubic-bezier(0.34, 1.35, 0.64, 1), box-shadow 300ms ease;
    transform: rotate(-60deg);
    will-change: transform;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cd-lang-toggle-knob:active {
    transform: rotate(-60deg) scale(0.94);
  }
  .cd-lang-toggle[data-lang="fr"] .cd-lang-toggle-knob:active {
    transform: rotate(60deg) scale(0.94);
  }
  .cd-lang-toggle[data-lang="fr"] .cd-lang-toggle-knob {
    transform: rotate(60deg);
  }
  .cd-lang-toggle-knob::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: screen;
    opacity: 0.65;
    pointer-events: none;
  }
  .cd-lang-toggle-knob::after {
    content: "";
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 40%;
    border-radius: 1px;
    background: linear-gradient( 180deg, #f5ecd8 0%, #e8dcc0 60%, #c9b896 100% );
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.7), inset -0.5px 0 0 rgba(0, 0, 0, 0.25);
  }
  .cd-lang-toggle:hover .cd-lang-toggle-knob {
    box-shadow: inset 0 1px 1px rgba(255, 235, 200, 0.22), inset 0 -2px 3px rgba(0, 0, 0, 0.75), 0 0 0 1.5px #0a0907, 0 4px 8px rgba(0, 0, 0, 0.65), 0 10px 22px -4px rgba(0, 0, 0, 0.7);
  }
  .cd-lang-toggle:hover .cd-lang-toggle-knob::after {
    background: linear-gradient( 180deg, #fdf5e2 0%, #f0e4c8 60%, #d5c5a3 100% );
    box-shadow: 0 0 2px rgba(245, 236, 216, 0.5), inset -0.5px 0 0 rgba(0, 0, 0, 0.25);
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-lang-toggle-knob, .cd-lang-toggle-tick {
      transition: none;
    }
  }
}
@layer components {
  .cd-input, .cd-form-input, .cd-select, .cd-textarea {
    display: block;
    width: 100%;
    padding: var(--cd-input-padding-y) var(--cd-input-padding-x);
    border-radius: var(--cd-radius-xl);
    border: 1px solid var(--cd-border-input);
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-primary);
    font-family: var(--cd-font-primary);
    font-size: var(--cd-text-base);
    transition: var(--cd-transition);
  }
  .cd-input::placeholder, .cd-form-input::placeholder {
    color: var(--cd-text-tertiary);
  }
  .cd-input:focus, .cd-form-input:focus {
    outline: none;
    border-color: var(--cd-color-primary);
  }
  .cd-form-file-input {
    display: block;
    width: 100%;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-form-file-input:focus {
    outline: none;
  }
  .cd-form-file-input::file-selector-button {
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border-radius: var(--cd-radius-md);
    border: 0;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-primary);
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-form-file-input:hover::file-selector-button {
    background-color: var(--cd-bg-hover);
  }
  .cd-input-error {
    border-color: var(--cd-color-error);
  }
  .cd-input-error:focus {
    border-color: var(--cd-color-error);
  }
  .cd-input-success {
    border-color: var(--cd-color-success);
  }
  .cd-input-success:focus {
    border-color: var(--cd-color-success);
  }
  .cd-input-warning {
    border-color: var(--cd-color-warning);
  }
  .cd-input-warning:focus {
    border-color: var(--cd-color-warning);
  }
  .cd-input-readonly {
    background-color: var(--cd-bg-secondary);
    cursor: default;
    border-color: var(--cd-border-secondary);
    color: var(--cd-text-primary);
  }
  .cd-input-readonly:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--cd-border-secondary);
  }
  .cd-autofill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--cd-text-xs);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-primary);
    font-weight: 500;
  }
  .cd-input-small {
    padding-left: var(--cd-space-3);
    padding-right: var(--cd-space-3);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-sm);
  }
  .cd-input-large {
    padding-left: var(--cd-space-5);
    padding-right: var(--cd-space-5);
    padding-top: var(--cd-space-4);
    padding-bottom: var(--cd-space-4);
    border-radius: var(--cd-radius-2xl);
    font-size: var(--cd-text-lg);
  }
  .cd-input-hero {
    display: block;
    width: 100%;
    border-radius: var(--cd-radius-2xl);
    padding-top: var(--cd-space-5);
    padding-bottom: var(--cd-space-5);
    padding-left: var(--cd-space-6);
    padding-right: var(--cd-space-16);
    box-shadow: var(--cd-shadow-sm);
    font-size: var(--cd-text-base);
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-primary);
    color: var(--cd-text-primary);
    transition: var(--cd-transition);
  }
  .cd-input-hero:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-color-primary);
  }
  @media (min-width: 640px) {
    .cd-input-hero {
      padding-top: var(--cd-space-6);
      padding-bottom: var(--cd-space-6);
      padding-left: var(--cd-space-8);
      padding-right: var(--cd-space-20);
    }
  }
  @media (min-width: 640px) {
    .cd-input-hero {
      font-size: var(--cd-text-lg);
    }
  }
  .cd-input-hero::placeholder {
    color: var(--cd-text-tertiary);
  }
  .cd-input-hero:focus {
    --tw-ring-color: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
  }
  .cd-input-search {
    display: block;
    border-radius: var(--cd-radius-lg);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    padding-left: var(--cd-space-3);
    padding-right: var(--cd-space-3);
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    color: var(--cd-text-primary);
    transition: var(--cd-transition);
  }
  .cd-input-search:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--cd-color-primary);
  }
  .cd-input-search-with-icon {
    padding-left: var(--cd-space-10);
  }
  .cd-input-search::placeholder {
    color: var(--cd-text-tertiary);
  }
  .cd-input-search:focus {
    border-color: var(--cd-color-primary);
    --tw-ring-color: var(--cd-color-primary);
  }
  .cd-form-label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--cd-space-2);
    color: var(--cd-text-primary);
    font-family: var(--cd-font-primary);
    font-size: var(--cd-text-sm);
  }
  .cd-form-help {
    margin-top: var(--cd-space-1);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
  }
  .cd-form-error {
    font-weight: 500;
    margin-top: var(--cd-space-1);
    font-size: var(--cd-text-sm);
    color: var(--cd-color-error);
  }
  .cd-form-warning {
    font-weight: 500;
    margin-top: var(--cd-space-1);
    font-size: var(--cd-text-sm);
    color: var(--cd-color-warning);
  }
  .cd-form-success {
    font-weight: 500;
    margin-top: var(--cd-space-1);
    font-size: var(--cd-text-sm);
    color: var(--cd-color-success);
  }
  .cd-toggle {
    appearance: none;
    position: relative;
    width: 44px;
    height: 24px;
    background-color: var(--cd-bg-tertiary);
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    flex-shrink: 0;
    outline: none;
  }
  .cd-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .cd-toggle:checked {
    background-color: var(--cd-color-success, #10b981);
  }
  .cd-toggle:checked::before {
    transform: translateX(20px);
  }
  .cd-toggle:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--cd-color-success, #10b981);
  }
  .cd-toggle:hover:not(:disabled) {
    background-color: var(--cd-bg-quaternary);
  }
  .cd-toggle:hover:checked:not(:disabled) {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 85%, #000);
    }
  }
  .cd-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .cd-toggle:disabled::before {
    box-shadow: none;
  }
  .cd-toggle-sm {
    width: 32px;
    height: 18px;
    border-radius: 9px;
  }
  .cd-toggle-sm::before {
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
  }
  .cd-toggle-sm:checked::before {
    transform: translateX(14px);
  }
  .cd-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
  }
  .cd-toggle-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cd-text-primary);
    line-height: 1.25;
  }
  .cd-toggle-description {
    font-size: 0.75rem;
    color: var(--cd-text-secondary);
    margin-top: 2px;
    line-height: 1.33;
  }
  .cd-toggle-success:checked {
    background-color: var(--cd-color-success, #10b981);
  }
  .cd-toggle-success:hover:checked:not(:disabled) {
    background-color: var(--cd-color-success, #059669);
  }
  .cd-toggle-warning:checked {
    background-color: var(--cd-color-warning, #f59e0b);
  }
  .cd-toggle-warning:hover:checked:not(:disabled) {
    background-color: var(--cd-color-warning, #d97706);
  }
  .cd-toggle-danger:checked {
    background-color: var(--cd-color-error, #ef4444);
  }
  .cd-toggle-danger:hover:checked:not(:disabled) {
    background-color: var(--cd-color-error, #dc2626);
  }
  .cd-toggle-primary:checked {
    background-color: var(--cd-color-primary, #3b82f6);
  }
  .cd-toggle-primary:hover:checked:not(:disabled) {
    background-color: var(--cd-color-primary, #2563eb);
  }
  .cd-password-toggle {
    position: absolute;
    right: var(--cd-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--cd-text-tertiary);
    background: transparent;
    border: none;
    padding: 0;
    z-index: 10;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
  }
  .cd-password-toggle:hover {
    color: var(--cd-text-secondary);
  }
  .cd-password-toggle:focus {
    outline: none;
  }
  .cd-form-required {
    color: var(--cd-color-error);
  }
  .cd-form-group {
    display: block;
  }
  .cd-form-section {
    border-radius: var(--cd-radius-lg);
    padding: var(--cd-space-6);
    margin-bottom: var(--cd-space-6);
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
  }
  .cd-form-section-title {
    font-weight: 600;
    margin-bottom: var(--cd-space-4);
    font-size: var(--cd-text-lg);
    color: var(--cd-text-primary);
  }
  .cd-form-actions {
    display: flex;
    align-items: center;
    gap: var(--cd-space-4);
    margin-top: var(--cd-space-6);
  }
  .cd-input-icon {
    position: relative;
  }
  .cd-input-icon-left {
    position: absolute;
    left: var(--cd-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
  }
  .cd-input-icon-right {
    position: absolute;
    right: var(--cd-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
  }
  .cd-input-icon input.cd-input {
    padding-left: var(--cd-space-10);
  }
  .cd-input-icon input.cd-input:has(+ .cd-input-icon-right) {
    padding-right: var(--cd-space-10);
  }
  .cd-input.cd-input-with-icon {
    padding-left: var(--cd-space-10);
  }
  .cd-form-radio {
    width: var(--cd-space-4);
    height: var(--cd-space-4);
    accent-color: var(--cd-color-primary);
    border-color: var(--cd-border-secondary);
  }
  .cd-form-radio:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-color-accent), 0 0 0 4px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px var(--cd-color-accent), 0 0 0 4px color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
  }
  .cd-form-select {
    display: block;
    width: 100%;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-3);
    padding-bottom: var(--cd-space-3);
    border-radius: var(--cd-radius-xl);
    appearance: none;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-input);
    color: var(--cd-text-primary);
    font-family: var(--cd-font-primary);
    font-size: var(--cd-text-sm);
    transition: var(--cd-transition);
  }
  .cd-form-select:focus {
    outline: none;
    border-color: var(--cd-color-accent);
  }
  .cd-form-select::placeholder {
    color: var(--cd-text-primary);
  }
  .cd-form-select-compact {
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    padding-left: var(--cd-space-3);
    padding-right: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-xs);
  }
  @media (min-width: 640px) {
    .cd-form-select-compact {
      padding-top: var(--cd-space-2_5);
      padding-bottom: var(--cd-space-2_5);
      padding-left: var(--cd-space-4);
      padding-right: var(--cd-space-4);
      font-size: var(--cd-text-sm);
    }
  }
  .cd-form-textarea {
    display: block;
    width: 100%;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-3);
    padding-bottom: var(--cd-space-3);
    border-radius: var(--cd-radius-xl);
    resize: vertical;
    min-height: 100px;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-input);
    color: var(--cd-text-primary);
    transition: var(--cd-transition);
  }
  .cd-form-textarea:focus {
    outline: none;
    border-color: var(--cd-color-accent);
  }
  .cd-form-textarea::placeholder {
    color: var(--cd-text-tertiary);
  }
  .cd-form-optional {
    font-weight: 400;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-tertiary);
  }
  .cd-form-label-inline {
    margin-left: var(--cd-space-3);
    font-weight: 500;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
  }
  .cd-form-upload {
    border: 2px dashed;
    border-radius: var(--cd-radius-lg);
    padding: var(--cd-space-6);
    text-align: center;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
    border-color: var(--cd-border-secondary);
  }
  .cd-form-upload:hover {
    border-color: var(--cd-border-primary);
  }
  .cd-form-file {
    display: none;
  }
  .cd-dropzone {
    position: relative;
    border: 2px dashed;
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-8);
    text-align: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border-color: var(--cd-border-secondary);
    background-color: var(--cd-bg-primary);
  }
  .cd-dropzone:hover, .cd-dropzone[data-upload-active="true"] {
    border-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 5%, var(--cd-bg-primary));
    }
  }
  .cd-dropzone .upload-content {
    pointer-events: none;
  }
  .cd-dropzone .upload-content i {
    margin-bottom: var(--cd-space-3);
    display: block;
    color: var(--cd-color-primary);
  }
  .cd-dropzone .upload-content p {
    margin-bottom: var(--cd-space-1);
    color: var(--cd-text-primary);
  }
  .cd-dropzone .upload-content .text-sm, .cd-dropzone .upload-content .text-xs {
    color: var(--cd-text-secondary);
  }
  .cd-urgency-card-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cd-space-3);
  }
  @media (min-width: 768px) {
    .cd-urgency-card-group {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .cd-urgency-card {
    position: relative;
    display: block;
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-urgency-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-xl);
    border: 2px solid var(--cd-border-primary);
    background-color: var(--cd-bg-primary);
    text-align: center;
    transition: var(--cd-transition);
    height: 100%;
  }
  .cd-urgency-card:hover .cd-urgency-card-content {
    border-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 5%, var(--cd-bg-primary));
    }
  }
  .cd-urgency-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    z-index: var(--cd-z-behind);
  }
  .cd-urgency-card-icon {
    width: var(--cd-space-8);
    height: var(--cd-space-8);
    margin-bottom: var(--cd-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cd-text-lg);
    color: var(--cd-text-secondary);
    transition: var(--cd-transition);
  }
  .cd-urgency-card-title {
    font-weight: 600;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-1);
  }
  .cd-urgency-card-description {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
    line-height: 1.3;
  }
  .cd-urgency-card input[type="radio"]:checked + .cd-urgency-card-content {
    border-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, var(--cd-bg-primary));
    }
    box-shadow: 0 0 0 1px var(--cd-color-primary);
  }
  .cd-urgency-card input[type="radio"]:checked + .cd-urgency-card-content .cd-urgency-card-icon {
    color: var(--cd-color-primary);
  }
  .cd-urgency-card input[type="radio"]:focus + .cd-urgency-card-content {
    outline: none;
    box-shadow: 0 0 0 3px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
  }
  .cd-urgency-card-urgent .cd-urgency-card-content {
    border-color: var(--cd-color-error);
  }
  .cd-urgency-card-urgent:hover .cd-urgency-card-content {
    border-color: var(--cd-color-error);
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 5%, var(--cd-bg-primary));
    }
  }
  .cd-urgency-card-urgent input[type="radio"]:checked + .cd-urgency-card-content {
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 10%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-error);
    box-shadow: 0 0 0 1px var(--cd-color-error);
  }
  .cd-urgency-card-urgent input[type="radio"]:checked + .cd-urgency-card-content .cd-urgency-card-icon {
    color: var(--cd-color-error);
  }
  .cd-urgency-card-high .cd-urgency-card-content {
    border-color: var(--cd-color-warning);
  }
  .cd-urgency-card-high:hover .cd-urgency-card-content {
    border-color: var(--cd-color-warning);
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 5%, var(--cd-bg-primary));
    }
  }
  .cd-urgency-card-high input[type="radio"]:checked + .cd-urgency-card-content {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 10%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-warning);
    box-shadow: 0 0 0 1px var(--cd-color-warning);
  }
  .cd-urgency-card-high input[type="radio"]:checked + .cd-urgency-card-content .cd-urgency-card-icon {
    color: var(--cd-color-warning);
  }
  .cd-urgency-card-medium .cd-urgency-card-content {
    border-color: #fbbf24;
  }
  .cd-urgency-card-medium:hover .cd-urgency-card-content {
    border-color: #fbbf24;
    background-color: #fbbf24;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, #fbbf24 5%, var(--cd-bg-primary));
    }
  }
  .cd-urgency-card-medium input[type="radio"]:checked + .cd-urgency-card-content {
    background-color: #fbbf24;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, #fbbf24 10%, var(--cd-bg-primary));
    }
    border-color: #fbbf24;
    box-shadow: 0 0 0 1px #fbbf24;
  }
  .cd-urgency-card-medium input[type="radio"]:checked + .cd-urgency-card-content .cd-urgency-card-icon {
    color: #fbbf24;
  }
  .cd-urgency-card-low .cd-urgency-card-content {
    border-color: var(--cd-color-success);
  }
  .cd-urgency-card-low:hover .cd-urgency-card-content {
    border-color: var(--cd-color-success);
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 5%, var(--cd-bg-primary));
    }
  }
  .cd-urgency-card-low input[type="radio"]:checked + .cd-urgency-card-content {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 10%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-success);
    box-shadow: 0 0 0 1px var(--cd-color-success);
  }
  .cd-urgency-card-low input[type="radio"]:checked + .cd-urgency-card-content .cd-urgency-card-icon {
    color: var(--cd-color-success);
  }
  @media (max-width: 639px) {
    .cd-urgency-card-group {
      gap: var(--cd-space-2);
    }
    .cd-urgency-card-content {
      padding: var(--cd-space-2);
    }
    .cd-urgency-card-icon {
      width: var(--cd-space-6);
      height: var(--cd-space-6);
      margin-bottom: var(--cd-space-1);
      font-size: var(--cd-text-base);
    }
  }
  .cd-contact-method-field {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
  }
  .cd-contact-method-legend {
    padding: 0;
  }
  .cd-contact-method-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cd-space-2);
  }
  .cd-contact-method-card {
    position: relative;
    display: block;
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-contact-method-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cd-space-1);
    padding: var(--cd-space-3) var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    border: 2px solid var(--cd-border-primary);
    background-color: var(--cd-bg-primary);
    text-align: center;
    transition: var(--cd-transition);
    height: 100%;
  }
  .cd-contact-method-card:hover .cd-contact-method-card-content {
    border-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 5%, var(--cd-bg-primary));
    }
  }
  .cd-contact-method-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    z-index: var(--cd-z-behind);
  }
  .cd-contact-method-card-icon {
    font-size: var(--cd-text-lg);
    color: var(--cd-text-secondary);
    transition: var(--cd-transition);
  }
  .cd-contact-method-card-label {
    font-weight: 600;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
  }
  .cd-contact-method-card input[type="radio"]:checked + .cd-contact-method-card-content {
    border-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, var(--cd-bg-primary));
    }
    box-shadow: 0 0 0 1px var(--cd-color-primary);
  }
  .cd-contact-method-card input[type="radio"]:checked + .cd-contact-method-card-content .cd-contact-method-card-icon {
    color: var(--cd-color-primary);
  }
  .cd-contact-method-card input[type="radio"]:focus-visible + .cd-contact-method-card-content {
    outline: none;
    box-shadow: 0 0 0 3px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
  }
  .cd-contact-method-none {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    margin-top: var(--cd-space-2);
    padding: var(--cd-space-1) var(--cd-space-2);
    border-radius: var(--cd-radius-md);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-contact-method-none:hover {
    color: var(--cd-text-secondary);
  }
  .cd-contact-method-none input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .cd-contact-method-none:has(input:checked) {
    color: var(--cd-text-secondary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-contact-method-none:has(input:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 3px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
  }
  .cd-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
  }
  .cd-radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-3);
    padding: var(--cd-space-4);
    border: 1px solid var(--cd-border-secondary);
    border-radius: var(--cd-radius-lg);
    cursor: pointer;
    transition: var(--cd-transition);
    background-color: var(--cd-bg-primary);
  }
  .cd-radio-option:hover {
    border-color: var(--cd-border-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-radio-option:has(input[type="radio"]:checked) {
    border-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 5%, transparent);
    }
    box-shadow: 0 0 0 2px var(--cd-color-primary);
  }
  .cd-radio-option:has(input[type="radio"]:checked):hover {
    border-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    box-shadow: 0 0 0 2px var(--cd-color-primary);
  }
  .cd-radio-option input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    margin-top: 0.125rem;
  }
  .cd-radio-option input[type="radio"]:checked + .cd-radio-content {
    color: var(--cd-color-primary);
  }
  .cd-radio-content {
    flex: 1;
    min-width: 0;
  }
  .cd-radio-content .font-medium {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--cd-text-primary);
  }
  .cd-radio-content .text-sm {
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-sm);
  }
  .cd-checkbox-option {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    cursor: pointer;
    padding: var(--cd-space-2);
    border-radius: var(--cd-radius-md);
    transition: var(--cd-transition);
  }
  .cd-checkbox-option:hover {
    background-color: var(--cd-bg-secondary);
  }
  .cd-checkbox-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
  }
  .cd-checkbox-option .text-sm {
    color: var(--cd-text-primary);
    font-size: var(--cd-text-sm);
    user-select: none;
  }
  .cd-form-label {
    display: block;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--cd-text-primary);
  }
  .cd-form-help {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    margin-top: 0.25rem;
  }
  .cd-form-error {
    font-size: var(--cd-text-sm);
    color: var(--cd-color-error);
    margin-top: 0.25rem;
  }
  .field-error input, .field-error select, .field-error textarea {
    border-color: var(--cd-color-error);
    border-width: 2px;
  }
  .field-error input:focus, .field-error select:focus, .field-error textarea:focus {
    border-color: var(--cd-color-error);
    outline-color: var(--cd-color-error);
  }
  .field-error .cd-form-label {
    color: var(--cd-color-error);
  }
  .field-error .cd-calendar-input {
    border-color: var(--cd-color-error);
    border-width: 2px;
  }
  .ck-editor-container > textarea {
    display: none;
  }
  .ck-editor__editable h2 {
    font-size: var(--cd-text-2xl) !important;
    font-weight: 700 !important;
    margin-top: var(--cd-space-6) !important;
    margin-bottom: var(--cd-space-3) !important;
    color: var(--cd-text-primary) !important;
  }
  .ck-editor__editable h3 {
    font-size: var(--cd-text-xl) !important;
    font-weight: 600 !important;
    margin-top: var(--cd-space-5) !important;
    margin-bottom: var(--cd-space-2) !important;
    color: var(--cd-text-primary) !important;
  }
  .ck-editor__editable h4 {
    font-size: var(--cd-text-lg) !important;
    font-weight: 600 !important;
    margin-top: var(--cd-space-4) !important;
    margin-bottom: var(--cd-space-2) !important;
    color: var(--cd-text-primary) !important;
  }
  .ck-editor__editable p {
    margin-bottom: var(--cd-space-4) !important;
  }
  .ck-editor__editable ul, .ck-editor__editable ol {
    margin-bottom: var(--cd-space-4) !important;
    padding-left: var(--cd-space-6) !important;
  }
  .ck-editor__editable ul li {
    list-style-type: disc !important;
    margin-bottom: var(--cd-space-2) !important;
  }
  .ck-editor__editable ol li {
    list-style-type: decimal !important;
    margin-bottom: var(--cd-space-2) !important;
  }
  .ck-editor__editable blockquote {
    border-left: 4px solid var(--cd-color-primary) !important;
    padding-left: var(--cd-space-4) !important;
    margin: var(--cd-space-4) 0 !important;
    font-style: italic !important;
    color: var(--cd-text-secondary) !important;
  }
  .ck-editor__editable a {
    color: var(--cd-color-primary) !important;
    text-decoration: underline !important;
  }
  [data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable, [data-theme="darker-than-black"] .ck.ck-editor__main > .ck-editor__editable {
    background: var(--cd-bg-secondary) !important;
    color: var(--cd-text-primary) !important;
    border-color: var(--cd-border-secondary) !important;
  }
  [data-theme="dark"] .ck.ck-editor__editable:not(.ck-focused), [data-theme="darker-than-black"] .ck.ck-editor__editable:not(.ck-focused) {
    border-color: var(--cd-border-secondary) !important;
  }
  [data-theme="dark"] .ck.ck-editor__editable.ck-focused, [data-theme="darker-than-black"] .ck.ck-editor__editable.ck-focused {
    border-color: var(--cd-color-accent) !important;
    box-shadow: 0 0 0 2px var(--cd-color-accent) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 20%, transparent) !important;
    }
  }
  [data-theme="dark"] .ck.ck-toolbar, [data-theme="darker-than-black"] .ck.ck-toolbar {
    background: var(--cd-bg-tertiary) !important;
    border-color: var(--cd-border-secondary) !important;
  }
  [data-theme="dark"] .ck.ck-toolbar .ck-toolbar__separator, [data-theme="darker-than-black"] .ck.ck-toolbar .ck-toolbar__separator {
    background: var(--cd-border-secondary) !important;
  }
  [data-theme="dark"] .ck.ck-button, [data-theme="darker-than-black"] .ck.ck-button {
    color: var(--cd-text-primary) !important;
  }
  [data-theme="dark"] .ck.ck-button:not(.ck-disabled):hover, [data-theme="darker-than-black"] .ck.ck-button:not(.ck-disabled):hover {
    background: var(--cd-bg-secondary) !important;
  }
  [data-theme="dark"] .ck.ck-button.ck-on, [data-theme="darker-than-black"] .ck.ck-button.ck-on {
    background: var(--cd-color-accent) !important;
    color: white !important;
  }
  [data-theme="dark"] .ck.ck-dropdown__panel, [data-theme="darker-than-black"] .ck.ck-dropdown__panel {
    background: var(--cd-bg-secondary) !important;
    border-color: var(--cd-border-secondary) !important;
  }
  [data-theme="dark"] .ck.ck-list__item .ck-button, [data-theme="darker-than-black"] .ck.ck-list__item .ck-button {
    color: var(--cd-text-primary) !important;
  }
  [data-theme="dark"] .ck.ck-list__item .ck-button:hover:not(.ck-disabled), [data-theme="darker-than-black"] .ck.ck-list__item .ck-button:hover:not(.ck-disabled) {
    background: var(--cd-bg-tertiary) !important;
  }
  [data-theme="dark"] .ck.ck-editor__editable > .ck-placeholder::before, [data-theme="darker-than-black"] .ck.ck-editor__editable > .ck-placeholder::before {
    color: var(--cd-text-tertiary) !important;
  }
  [data-theme="dark"] .ck.ck-balloon-panel, [data-theme="darker-than-black"] .ck.ck-balloon-panel {
    background: var(--cd-bg-secondary) !important;
    border-color: var(--cd-border-secondary) !important;
  }
  [data-theme="dark"] .ck.ck-input, [data-theme="darker-than-black"] .ck.ck-input {
    background: var(--cd-bg-primary) !important;
    color: var(--cd-text-primary) !important;
    border-color: var(--cd-border-secondary) !important;
  }
  [data-theme="dark"] .ck.ck-labeled-field-view > .ck-labeled-field-view__status, [data-theme="darker-than-black"] .ck.ck-labeled-field-view > .ck-labeled-field-view__status {
    color: var(--cd-text-secondary) !important;
  }
}
@layer components {
  .cd-platform-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: var(--cd-space-3);
  }
  .cd-platform-tile {
    position: relative;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    border-radius: var(--cd-radius-md);
    border: 1px solid var(--cd-border-primary);
    background-color: var(--cd-bg-card);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  }
  .cd-platform-tile:hover:not(.cd-platform-tile-disabled):not(.cd-platform-tile-selected) {
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--cd-color-primary) 40%, transparent);
    }
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--cd-color-primary) 5%, transparent);
    }
  }
  .cd-platform-tile:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-platform-tile-icon {
    font-size: 1.625rem;
    color: var(--cd-text-secondary);
    transition: color 0.15s ease;
    line-height: 1;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="linkedin"] .cd-platform-tile-icon {
    color: #0a66c2;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="twitter"] .cd-platform-tile-icon {
    color: #1d9bf0;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="instagram"] .cd-platform-tile-icon {
    color: #e1306c;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="facebook"] .cd-platform-tile-icon {
    color: #1877f2;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="youtube"] .cd-platform-tile-icon {
    color: #ff0000;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="tiktok"] .cd-platform-tile-icon {
    color: #010101;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="website"] .cd-platform-tile-icon {
    color: #0d9488;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="whatsapp"] .cd-platform-tile-icon {
    color: #25d366;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="pinterest"] .cd-platform-tile-icon {
    color: #e60023;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="discord"] .cd-platform-tile-icon {
    color: #5865f2;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="snapchat"] .cd-platform-tile-icon {
    color: #e0a800;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="reddit"] .cd-platform-tile-icon {
    color: #ff4500;
  }
  .cd-platform-tile:not(.cd-platform-tile-disabled)[data-platform="telegram"] .cd-platform-tile-icon {
    color: #229ed9;
  }
  .cd-platform-tile-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--cd-text-primary);
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-platform-tile-selected {
    border-color: var(--cd-color-primary);
    border-width: 2px;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--cd-color-primary) 10%, transparent);
    }
    padding: calc(0.75rem - 1px) calc(0.5rem - 1px);
  }
  .cd-platform-tile-check {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: var(--cd-color-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    line-height: 1;
  }
  .cd-platform-tile-disabled {
    cursor: not-allowed;
    border-style: dashed;
    background-color: var(--cd-border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--cd-border-primary) 20%, transparent);
    }
    opacity: 0.72;
  }
  .cd-platform-tile-disabled .cd-platform-tile-icon {
    color: var(--cd-text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--cd-text-secondary) 45%, transparent);
    }
  }
  .cd-platform-tile-disabled .cd-platform-tile-label {
    color: var(--cd-text-tertiary);
  }
  .cd-platform-tile-connected-badge {
    position: absolute;
    bottom: 0.375rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--cd-text-tertiary);
    background-color: var(--cd-bg-card);
    padding: 0.125rem 0.4rem;
    border-radius: 9999px;
    border: 1px solid var(--cd-border-primary);
    white-space: nowrap;
  }
  .cd-platform-tile-locked {
    display: flex;
    align-items: center;
    gap: var(--cd-space-4);
    padding: var(--cd-space-4);
    border-radius: var(--cd-radius-lg);
    border: 1px solid var(--cd-border-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-platform-tile-locked-badge {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--cd-radius-md);
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cd-platform-tile-locked-badge i {
    font-size: 1.5rem;
    color: var(--cd-color-primary);
  }
  .cd-platform-tile-locked-body {
    flex: 1;
    min-width: 0;
  }
  .cd-platform-tile-locked-name {
    font-weight: 600;
    color: var(--cd-text-primary);
    font-size: 0.9375rem;
  }
  .cd-platform-tile-locked-hint {
    font-size: 0.8125rem;
    color: var(--cd-text-tertiary);
    margin-top: 0.125rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-platform-tile {
      transition: none;
    }
  }
}
@layer components {
  .cd-form-geocoder {
    width: 100%;
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder {
    width: 100%;
    max-width: none;
    width: 100% !important;
    max-width: none !important;
    font-size: var(--cd-text-base);
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    font-family: var(--cd-font-primary);
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder--input {
    width: 100%;
    border-radius: var(--radius-xl);
    padding: var(--cd-input-padding-y) var(--cd-input-padding-x) var(--cd-input-padding-y) 2.75rem !important;
    border: 1px solid var(--cd-border-input) !important;
    background-color: var(--cd-bg-primary) !important;
    color: var(--cd-text-primary) !important;
    font-family: var(--cd-font-primary);
    font-size: 1rem !important;
    line-height: normal !important;
    height: auto !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease-in-out !important;
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder--input::placeholder {
    color: var(--cd-text-tertiary);
    opacity: 1;
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder--input:focus {
    border-color: var(--cd-color-primary);
    outline: none;
    box-shadow: none !important;
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder--icon, .cd-form-geocoder .mapboxgl-ctrl-geocoder--icon-search {
    width: 18px !important;
    height: 18px !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    fill: var(--cd-text-tertiary) !important;
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder--icon-loading {
    right: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    top: 50%;
    transform: translateY(-50%);
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder--button {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder--button:hover {
    background-color: var(--cd-bg-secondary);
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder--icon-close {
    fill: var(--cd-text-secondary);
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder .suggestions-wrapper {
    position: absolute;
    width: 100%;
  }
  .cd-form-geocoder .suggestions, .cd-form-geocoder .mapboxgl-ctrl-geocoder .suggestions {
    border-radius: 0.75rem !important;
    border: 1px solid var(--cd-border-primary) !important;
    background-color: var(--cd-bg-card) !important;
    margin-top: 0.25rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    overflow: visible !important;
  }
  .cd-form-geocoder .suggestions > li, .cd-form-geocoder .mapboxgl-ctrl-geocoder .suggestions > li {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--cd-border-secondary) !important;
    background-color: var(--cd-bg-card) !important;
    color: var(--cd-text-primary) !important;
    font-size: 0.875rem !important;
  }
  .cd-form-geocoder .suggestions > li:last-child, .cd-form-geocoder .mapboxgl-ctrl-geocoder .suggestions > li:last-child {
    border-bottom: none !important;
    border-bottom-left-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
  }
  .cd-form-geocoder .suggestions > li:first-child, .cd-form-geocoder .mapboxgl-ctrl-geocoder .suggestions > li:first-child {
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
  }
  .cd-form-geocoder .suggestions > li:hover, .cd-form-geocoder .suggestions > li.active, .cd-form-geocoder .mapboxgl-ctrl-geocoder .suggestions > .active > a, .cd-form-geocoder .mapboxgl-ctrl-geocoder .suggestions > li:hover {
    background-color: var(--cd-bg-secondary) !important;
    color: var(--cd-text-primary);
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder--pin-right > * {
    padding-right: calc(var(--spacing) * 10);
  }
  .cd-form-geocoder .mapboxgl-ctrl-geocoder--suggestion-icon {
    right: calc(var(--spacing) * 3);
  }
  .cd-form-geocoder.is-invalid .mapboxgl-ctrl-geocoder--input {
    border-color: var(--cd-color-error);
  }
  .cd-form-geocoder.is-invalid .mapboxgl-ctrl-geocoder--input:focus {
    box-shadow: 0 0 0 3px var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-error) 10%, transparent);
    }
  }
  .cd-form-geocoder.is-valid .mapboxgl-ctrl-geocoder--input {
    border-color: var(--cd-color-success);
  }
  .cd-form-geocoder.is-valid .mapboxgl-ctrl-geocoder--input:focus {
    box-shadow: 0 0 0 3px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-success) 10%, transparent);
    }
  }
  @media (max-width: 768px) {
    .cd-form-geocoder .mapboxgl-ctrl-geocoder--input {
      font-size: 0.875rem !important;
      padding: 0.625rem 0.75rem 0.625rem 2.5rem !important;
      min-height: 44px !important;
    }
    .cd-form-geocoder .mapboxgl-ctrl-geocoder--icon {
      left: 10px !important;
      width: 16px !important;
      height: 16px !important;
    }
    .cd-form-geocoder .mapboxgl-ctrl-geocoder--button {
      right: 10px !important;
      width: 20px !important;
      height: 20px !important;
    }
    .cd-form-geocoder .mapboxgl-ctrl-geocoder .suggestions {
      max-height: 300px;
      overflow-y: auto;
    }
  }
}
@layer components {
  .cd-calendar-input {
    display: block;
    width: 100%;
    padding: var(--cd-input-padding-y) var(--cd-input-padding-x);
    border-radius: var(--cd-radius-xl);
    border: 1px solid var(--cd-border-input);
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-primary);
    font-family: var(--cd-font-primary);
    font-size: var(--cd-text-base);
    line-height: 1.5;
    min-height: 2.75rem;
    box-sizing: border-box;
    transition: var(--cd-transition);
    cursor: pointer;
    position: relative;
  }
  .cd-calendar-input::placeholder {
    color: var(--cd-text-tertiary);
  }
  .cd-calendar-input:focus {
    outline: none;
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 3px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
  }
  .cd-calendar-input:hover {
    border-color: var(--cd-border-primary);
  }
  input.cd-calendar-input, input[data-calendar], .cd-calendar-with-icon input, input[type="text"].cd-calendar-input, input[type="date"].cd-calendar-input, input[type="datetime-local"].cd-calendar-input {
    display: block !important;
    width: 100% !important;
    padding: var(--cd-input-padding-y) var(--cd-input-padding-x) !important;
    border-radius: var(--cd-radius-xl) !important;
    border: 1px solid var(--cd-border-input) !important;
    color: var(--cd-text-primary) !important;
    background-color: var(--cd-bg-primary) !important;
    font-family: var(--cd-font-primary) !important;
    font-size: var(--cd-text-base) !important;
    line-height: 1.5 !important;
    min-height: 2.75rem !important;
    box-sizing: border-box !important;
    transition: var(--cd-transition) !important;
    cursor: pointer !important;
    position: relative !important;
  }
  input.cd-calendar-input::placeholder, input[data-calendar]::placeholder, .cd-calendar-with-icon input::placeholder, input[type="text"].cd-calendar-input::placeholder, input[type="date"].cd-calendar-input::placeholder, input[type="datetime-local"].cd-calendar-input::placeholder {
    color: var(--cd-text-tertiary) !important;
  }
  input.cd-calendar-input:focus, input[data-calendar]:focus, .cd-calendar-with-icon input:focus, input[type="text"].cd-calendar-input:focus, input[type="date"].cd-calendar-input:focus, input[type="datetime-local"].cd-calendar-input:focus {
    outline: none !important;
    border-color: var(--cd-color-primary) !important;
    box-shadow: 0 0 0 3px var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 10%, transparent) !important;
    }
  }
  input.cd-calendar-input:hover, input[data-calendar]:hover, .cd-calendar-with-icon input:hover, input[type="text"].cd-calendar-input:hover, input[type="date"].cd-calendar-input:hover, input[type="datetime-local"].cd-calendar-input:hover {
    border-color: var(--cd-border-primary) !important;
  }
  .cd-calendar-input:read-only {
    cursor: pointer;
    background-color: var(--cd-bg-primary);
  }
  .cd-calendar-with-icon {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  .cd-calendar-icon {
    position: absolute;
    right: var(--cd-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--cd-text-secondary);
    pointer-events: none;
    z-index: 1;
  }
  .cd-calendar-with-icon input {
    padding-right: var(--cd-space-12) !important;
  }
  .cd-calendar-icon {
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-calendar-icon:hover {
    color: var(--cd-color-primary);
  }
  .flatpickr-calendar {
    background: var(--cd-bg-card) !important;
    border: 1px solid var(--cd-border-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-border-primary) 15%, transparent) !important;
    }
    border-radius: var(--cd-radius-2xl) !important;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.12), 0 8px 10px -6px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.02) !important;
    font-family: var(--cd-font-primary) !important;
    overflow: hidden !important;
  }
  .flatpickr-calendar.open {
    z-index: 10050 !important;
  }
  .flatpickr-months {
    background: var(--cd-bg-card) !important;
    border-bottom: 1px solid var(--cd-border-secondary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--cd-border-secondary) 20%, transparent) !important;
    }
    padding: var(--cd-space-5) var(--cd-space-6) !important;
  }
  .flatpickr-month {
    background: transparent !important;
    color: var(--cd-text-primary) !important;
    fill: var(--cd-text-primary) !important;
  }
  .flatpickr-current-month {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--cd-text-primary) !important;
  }
  .flatpickr-current-month .cur-month {
    font-weight: 600 !important;
    color: var(--cd-text-primary) !important;
  }
  .flatpickr-current-month .numInputWrapper {
    color: var(--cd-text-primary) !important;
  }
  .flatpickr-current-month input.cur-year {
    background: transparent !important;
    color: var(--cd-text-primary) !important;
    font-weight: 600 !important;
  }
  .flatpickr-prev-month, .flatpickr-next-month {
    color: var(--cd-text-secondary) !important;
    fill: var(--cd-text-secondary) !important;
    padding: var(--cd-space-2_5) !important;
    border-radius: var(--cd-radius-lg) !important;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .flatpickr-prev-month:hover, .flatpickr-next-month:hover {
    color: var(--cd-color-primary) !important;
    fill: var(--cd-color-primary) !important;
    background: var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent) !important;
    }
    transform: scale(1.08) !important;
  }
  .flatpickr-weekdays {
    background: var(--cd-bg-card) !important;
    border-bottom: 1px solid var(--cd-border-secondary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--cd-border-secondary) 20%, transparent) !important;
    }
  }
  .flatpickr-weekday {
    background: transparent !important;
    color: var(--cd-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: var(--cd-space-3) 0 !important;
  }
  .flatpickr-days {
    background: var(--cd-bg-card) !important;
    padding: var(--cd-space-3) 0 var(--cd-space-4) 0 !important;
  }
  .flatpickr-day {
    background: transparent !important;
    border: none !important;
    color: var(--cd-text-primary) !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    border-radius: var(--cd-radius-xl) !important;
    margin: 0.5px !important;
    height: 40px !important;
    line-height: 40px !important;
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
  }
  .flatpickr-day:hover, .flatpickr-day:focus {
    background: var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 10%, transparent) !important;
    }
    color: var(--cd-text-primary) !important;
    border-color: transparent !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.06) !important;
  }
  .flatpickr-day.today {
    background: var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 12%, transparent) !important;
    }
    color: var(--cd-color-primary) !important;
    border: 2px solid var(--cd-color-primary) !important;
    font-weight: 600 !important;
    position: relative !important;
  }
  .flatpickr-day.today::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--cd-color-primary) !important;
  }
  .flatpickr-day.today:hover {
    background: var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 20%, transparent) !important;
    }
    color: var(--cd-color-primary) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 2px 8px color-mix(in srgb, var(--cd-color-primary) 20%, transparent) !important;
    }
  }
  .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 100%) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-primary) 0%, color-mix(in srgb, var(--cd-color-primary) 90%, black) 100%) !important;
    }
    color: white !important;
    border-color: transparent !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px var(--cd-color-primary), 0 0 0 2px var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-color-primary) 35%, transparent), 0 0 0 2px color-mix(in srgb, var(--cd-color-primary) 15%, transparent) !important;
    }
    transform: scale(1.02) !important;
  }
  .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 100%) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 92%, black) 0%, color-mix(in srgb, var(--cd-color-primary) 82%, black) 100%) !important;
    }
    color: white !important;
    transform: scale(1.06) !important;
    box-shadow: 0 6px 16px var(--cd-color-primary), 0 0 0 2px var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 6px 16px color-mix(in srgb, var(--cd-color-primary) 40%, transparent), 0 0 0 2px color-mix(in srgb, var(--cd-color-primary) 20%, transparent) !important;
    }
  }
  .flatpickr-day.inRange {
    background: var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 20%, transparent) !important;
    }
    color: var(--cd-color-primary) !important;
    border-color: transparent !important;
  }
  .flatpickr-day.disabled, .flatpickr-day.disabled:hover {
    background: transparent !important;
    color: var(--cd-text-tertiary) !important;
    cursor: not-allowed !important;
  }
  .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
    color: var(--cd-text-tertiary) !important;
  }
  .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover {
    background: var(--cd-bg-secondary) !important;
    color: var(--cd-text-secondary) !important;
  }
  .flatpickr-time {
    background: var(--cd-bg-card) !important;
    border-top: 1px solid var(--cd-border-secondary) !important;
    padding: var(--cd-space-4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--cd-space-2) !important;
    min-height: 60px !important;
  }
  .flatpickr-time-separator, .flatpickr-am-pm {
    color: var(--cd-text-primary) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    margin: 0 var(--cd-space-2) !important;
  }
  .flatpickr-time input {
    background: var(--cd-bg-primary) !important;
    color: var(--cd-text-primary) !important;
    border: 1px solid var(--cd-border-secondary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-border-secondary) 30%, transparent) !important;
    }
    border-radius: var(--cd-radius-xl) !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    padding: var(--cd-space-3) var(--cd-space-4) !important;
    min-width: 70px !important;
    height: 46px !important;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .flatpickr-time input:hover {
    border-color: var(--cd-border-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-border-primary) 50%, transparent) !important;
    }
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.04) !important;
  }
  .flatpickr-time input:focus {
    border-color: var(--cd-color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px var(--cd-color-primary), 0 2px 12px rgb(0 0 0 / 0.06) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-color-primary) 12%, transparent), 0 2px 12px rgb(0 0 0 / 0.06) !important;
    }
    transform: scale(1.02) !important;
  }
  .flatpickr-am-pm {
    background: var(--cd-bg-secondary) !important;
    border: 1px solid var(--cd-border-secondary) !important;
    border-radius: var(--cd-radius-lg) !important;
    padding: var(--cd-space-2) var(--cd-space-3) !important;
    cursor: pointer !important;
    transition: var(--cd-transition) !important;
    min-width: 50px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .flatpickr-am-pm:hover {
    background: var(--cd-bg-tertiary) !important;
    border-color: var(--cd-border-primary) !important;
  }
  .flatpickr-calendar.hasTime .flatpickr-time {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .flatpickr-time .arrowUp, .flatpickr-time .arrowDown {
    color: var(--cd-text-secondary) !important;
    border: none !important;
    background: transparent !important;
    padding: var(--cd-space-1) !important;
    border-radius: var(--cd-radius-sm) !important;
    transition: var(--cd-transition) !important;
  }
  .flatpickr-time .arrowUp:hover, .flatpickr-time .arrowDown:hover {
    background: var(--cd-bg-secondary) !important;
    color: var(--cd-color-primary) !important;
  }
  @media (max-width: 768px) {
    .flatpickr-calendar {
      font-size: 1rem !important;
    }
    .flatpickr-day {
      height: 2.5rem !important;
      line-height: 2.5rem !important;
    }
    .flatpickr-months {
      padding: var(--cd-space-3) !important;
    }
    .flatpickr-current-month {
      font-size: 1rem !important;
    }
    .flatpickr-time {
      padding: var(--cd-space-3) !important;
      min-height: 50px !important;
      flex-wrap: wrap !important;
    }
    .flatpickr-time input {
      min-width: 50px !important;
      height: 35px !important;
      font-size: 1rem !important;
    }
    .flatpickr-am-pm {
      min-width: 45px !important;
      height: 35px !important;
      font-size: 1rem !important;
    }
  }
  @media (prefers-color-scheme: dark) {
    .flatpickr-calendar {
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
    }
  }
  .flatpickr-calendar {
    animation: cd-calendar-fade-in 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  @keyframes cd-calendar-fade-in {
    from {
      opacity: 0;
      transform: translateY(-12px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .cd-calendar-input.cd-input-error {
    border-color: var(--cd-color-error) !important;
  }
  .cd-calendar-input.cd-input-success {
    border-color: var(--cd-color-success) !important;
  }
}
@layer components {
  .cd-progress-container {
    position: relative;
    border-radius: var(--cd-radius-full);
    margin-bottom: var(--cd-space-8);
    overflow: visible;
    background-color: var(--cd-border-primary);
  }
  .cd-progress-container-thin {
    height: var(--cd-space-2);
  }
  .cd-progress-container-medium {
    height: var(--cd-space-3);
  }
  .cd-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: var(--cd-radius-full);
    transition: all 0.5s ease;
  }
  .cd-progress-fill-primary {
    background-color: var(--cd-color-primary);
  }
  .cd-progress-fill-success {
    background-color: var(--cd-color-success);
  }
  .cd-progress-fill-warning {
    background-color: var(--cd-color-warning);
  }
  .cd-progress-fill-danger {
    background-color: var(--cd-color-error);
  }
  .cd-progress-gradient-primary {
    background: linear-gradient(to right, var(--cd-color-primary), var(--cd-color-info));
  }
  .cd-progress-step {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    position: relative;
    z-index: 10;
    border: 2px solid white;
    box-shadow: var(--cd-shadow-sm);
    transition: var(--cd-transition);
  }
  .cd-progress-step-medium {
    width: var(--cd-space-6);
    height: var(--cd-space-6);
    margin-top: calc(-1 * var(--cd-space-1_5));
    font-size: var(--cd-text-sm);
  }
  .cd-progress-step-large {
    width: var(--cd-space-8);
    height: var(--cd-space-8);
    margin-top: calc(-1 * var(--cd-space-2));
    font-size: var(--cd-text-sm);
  }
  .cd-progress-step-circle {
    border-radius: var(--cd-radius-full);
  }
  .cd-progress-section {
    margin-bottom: var(--cd-space-8);
  }
  .cd-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--cd-space-2);
  }
  .cd-progress-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--cd-space-2);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
}
@layer components {
  .cd-status-dot {
    display: inline-block;
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
  }
  .cd-status-active {
    color: var(--cd-color-success);
  }
  .cd-status-inactive {
    color: var(--cd-text-tertiary);
  }
  .cd-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.5rem;
    font-size: var(--cd-text-xs);
    font-weight: 500;
  }
  .cd-status-available {
    background-color: var(--cd-color-success);
    color: white;
  }
  .cd-status-busy {
    background-color: var(--cd-color-warning);
    color: white;
  }
  .cd-status-emergency-only, .cd-status-emergency_only {
    background-color: var(--cd-color-error);
    color: white;
  }
  .cd-status-away {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-status-custom {
    background-color: var(--cd-color-accent);
    color: white;
  }
  .cd-status-dot {
    display: inline-block;
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    border-radius: calc(infinity * 1px);
  }
  .cd-status-dot.cd-status-available {
    background-color: var(--cd-color-success);
  }
  .cd-status-dot.cd-status-busy {
    background-color: var(--cd-color-warning);
  }
  .cd-status-dot.cd-status-emergency-only, .cd-status-dot.cd-status-emergency_only {
    background-color: var(--cd-color-error);
  }
  .cd-status-dot.cd-status-away {
    background-color: var(--cd-bg-tertiary);
  }
  .cd-status-dot.cd-status-custom {
    background-color: var(--cd-color-accent);
  }
  .cd-quote-status-draft {
    background-color: var(--cd-color-warning);
    color: var(--cd-text-on-warning);
  }
  .cd-quote-status-active {
    background-color: var(--cd-color-success);
    color: var(--cd-text-on-success);
  }
  .cd-quote-status-paused {
    background-color: var(--cd-text-secondary);
    color: var(--cd-text-on-dark);
  }
  .cd-quote-status-completed {
    background-color: var(--cd-color-info);
    color: var(--cd-text-on-info);
  }
  .cd-quote-status-expired {
    background-color: var(--cd-color-platinum-silver);
    color: var(--cd-color-shark);
  }
  .cd-quote-status-cancelled {
    background-color: var(--cd-color-error);
    color: var(--cd-text-on-error);
  }
  .cd-quote-status-closed {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-quote-status-won {
    background-color: var(--cd-color-success);
    color: var(--cd-text-on-success);
  }
  .cd-quote-urgency-urgent {
    background-color: var(--cd-color-error);
    color: var(--cd-text-on-error);
  }
  .cd-quote-urgency-high {
    background-color: var(--cd-color-warning);
    color: var(--cd-text-on-warning);
  }
  .cd-quote-urgency-medium {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-quote-urgency-low {
    background-color: var(--cd-text-tertiary);
    color: var(--cd-text-on-dark);
  }
  .cd-quote-status-active--dark, .cd-quote-status-draft--dark, .cd-quote-status-paused--dark, .cd-quote-status-completed--dark, .cd-quote-status-expired--dark, .cd-quote-status-cancelled--dark, .cd-quote-status-closed--dark {
    border-width: 0 1px 1px 0;
    border-style: solid;
  }
  .cd-quote-status-active--dark {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 22%, transparent);
    }
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 55%, transparent);
    }
    color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-success) 30%, white);
    }
  }
  .cd-quote-status-draft--dark {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 22%, transparent);
    }
    border-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning) 55%, transparent);
    }
    color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-warning) 30%, white);
    }
  }
  .cd-quote-status-paused--dark {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(226, 232, 240, 0.95);
  }
  .cd-quote-status-completed--dark {
    background-color: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-info) 22%, transparent);
    }
    border-color: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-info) 55%, transparent);
    }
    color: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-info) 30%, white);
    }
  }
  .cd-quote-status-expired--dark {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(203, 213, 225, 0.95);
  }
  .cd-quote-status-cancelled--dark {
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 22%, transparent);
    }
    border-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-error) 55%, transparent);
    }
    color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-error) 30%, white);
    }
  }
  .cd-quote-status-closed--dark {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 22%, transparent);
    }
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 55%, transparent);
    }
    color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-primary) 30%, white);
    }
  }
  .cd-quote-urgency-urgent--dark, .cd-quote-urgency-high--dark, .cd-quote-urgency-medium--dark, .cd-quote-urgency-low--dark {
    border-width: 0 0 1px 1px;
    border-style: solid;
  }
  .cd-quote-urgency-urgent--dark {
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 22%, transparent);
    }
    border-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-error) 55%, transparent);
    }
    color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-error) 30%, white);
    }
  }
  .cd-quote-urgency-high--dark {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 22%, transparent);
    }
    border-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning) 55%, transparent);
    }
    color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-warning) 30%, white);
    }
  }
  .cd-quote-urgency-medium--dark {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 22%, transparent);
    }
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 55%, transparent);
    }
    color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-primary) 30%, white);
    }
  }
  .cd-quote-urgency-low--dark {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(203, 213, 225, 0.9);
  }
  @keyframes pulse-slow {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.85;
      transform: scale(1.03);
    }
  }
  .animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
  }
  .backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}
@layer components {
  .cd-project-request-status, .cd-project-scope-status, .cd-project-bid-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .cd-project-request-status-draft {
    background-color: var(--cd-color-warning);
    color: var(--cd-text-on-warning);
  }
  .cd-project-request-status-open_for_bids {
    background-color: var(--cd-color-success);
    color: var(--cd-text-on-success);
  }
  .cd-project-request-status-in_progress {
    background-color: var(--cd-color-info);
    color: var(--cd-text-on-info);
  }
  .cd-project-request-status-completed {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-project-request-status-cancelled {
    background-color: var(--cd-color-error);
    color: var(--cd-text-on-error);
  }
  .cd-project-scope-status-open_for_bids {
    background-color: var(--cd-color-success);
    color: var(--cd-text-on-success);
  }
  .cd-project-scope-status-awarded {
    background-color: var(--cd-color-info);
    color: var(--cd-text-on-info);
  }
  .cd-project-scope-status-completed {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-project-scope-status-cancelled {
    background-color: var(--cd-color-error);
    color: var(--cd-text-on-error);
  }
  .cd-project-bid-status-draft {
    background-color: var(--cd-color-warning);
    color: var(--cd-text-on-warning);
  }
  .cd-project-bid-status-pending {
    background-color: var(--cd-text-secondary);
    color: var(--cd-text-on-dark);
  }
  .cd-project-bid-status-awarded {
    background-color: var(--cd-color-success);
    color: var(--cd-text-on-success);
  }
  .cd-project-bid-status-rejected {
    background-color: var(--cd-color-error);
    color: var(--cd-text-on-error);
  }
  .cd-project-bid-status-withdrawn {
    background-color: var(--cd-color-platinum-silver);
    color: var(--cd-color-shark);
  }
  .cd-project-request-status-draft--dark, .cd-project-request-status-open_for_bids--dark, .cd-project-request-status-in_progress--dark, .cd-project-request-status-completed--dark, .cd-project-request-status-cancelled--dark, .cd-project-scope-status-open_for_bids--dark, .cd-project-scope-status-awarded--dark, .cd-project-scope-status-completed--dark, .cd-project-scope-status-cancelled--dark, .cd-project-bid-status-draft--dark, .cd-project-bid-status-pending--dark, .cd-project-bid-status-awarded--dark, .cd-project-bid-status-rejected--dark, .cd-project-bid-status-withdrawn--dark {
    border-width: 0 1px 1px 0;
    border-style: solid;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(226, 232, 240, 0.95);
  }
}
@layer components {
  .cd-timeline {
    position: relative;
    padding-left: var(--cd-space-6);
  }
  .cd-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: var(--cd-space-2);
    bottom: var(--cd-space-2);
    width: 2px;
    background-color: var(--cd-border-primary);
    border-radius: var(--cd-radius-full);
  }
  .cd-timeline-item {
    position: relative;
    padding-bottom: var(--cd-space-4);
  }
  .cd-timeline-item:last-child {
    padding-bottom: 0;
  }
  .cd-timeline-marker {
    position: absolute;
    left: calc(-1 * var(--cd-space-6));
    top: var(--cd-space-0_5);
    width: 12px;
    height: 12px;
    border-radius: var(--cd-radius-full);
    z-index: 1;
    border: 2px solid var(--cd-bg-primary);
  }
  .cd-timeline-marker-info {
    background-color: var(--cd-color-info);
    box-shadow: 0 0 0 2px var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-info) 20%, transparent);
    }
  }
  .cd-timeline-marker-success {
    background-color: var(--cd-color-success);
    box-shadow: 0 0 0 2px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-success) 20%, transparent);
    }
  }
  .cd-timeline-marker-error {
    background-color: var(--cd-color-error);
    box-shadow: 0 0 0 2px var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-error) 20%, transparent);
    }
  }
  .cd-timeline-marker-warning {
    background-color: var(--cd-color-warning);
    box-shadow: 0 0 0 2px var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
  }
  .cd-timeline-content {
    min-width: 0;
  }
  .cd-timeline-action {
    font-weight: 600;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
  }
  .cd-timeline-date {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  .cd-timeline-actor {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
    margin-top: var(--cd-space-0_5);
  }
  .cd-timeline-details {
    margin-top: var(--cd-space-1_5);
    padding: var(--cd-space-2);
    background-color: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-md);
    border-left: 3px solid var(--cd-color-error);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
  }
  .cd-activity-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cd-border-primary);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    transition: border-color 0.15s ease;
    background-color: var(--cd-bg-primary);
  }
  .cd-activity-icon[data-category="quotes"] {
    background-color: rgb(0 102 204 / 0.1);
    border-color: rgb(0 102 204 / 0.25);
  }
  .cd-activity-icon[data-category="messages"] {
    background-color: rgb(99 102 241 / 0.1);
    border-color: rgb(99 102 241 / 0.25);
  }
  .cd-activity-icon[data-category="membership"] {
    background-color: rgb(255 107 53 / 0.1);
    border-color: rgb(255 107 53 / 0.25);
  }
  .cd-activity-icon[data-category="verification"] {
    background-color: rgb(34 139 34 / 0.1);
    border-color: rgb(34 139 34 / 0.25);
  }
  .cd-activity-icon[data-category="content"] {
    background-color: rgb(14 165 233 / 0.1);
    border-color: rgb(14 165 233 / 0.25);
  }
  .cd-activity-icon[data-category="ratings"] {
    background-color: rgb(245 158 11 / 0.1);
    border-color: rgb(245 158 11 / 0.25);
  }
  .cd-activity-icon[data-category="emails"] {
    background-color: rgb(107 114 128 / 0.1);
    border-color: rgb(107 114 128 / 0.25);
  }
  .cd-activity-icon[data-category="account"] {
    background-color: rgb(156 163 175 / 0.1);
    border-color: rgb(156 163 175 / 0.25);
  }
  .cd-activity-icon[data-category="received_quotes"] {
    background-color: rgb(16 185 129 / 0.1);
    border-color: rgb(16 185 129 / 0.25);
  }
  .cd-activity-link {
    font-weight: 600;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-activity-link:hover {
    color: var(--color-science-blue);
    text-decoration: underline;
  }
  .cd-activity-time-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 500;
    cursor: pointer;
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-secondary);
    transition: all 0.15s ease;
  }
  .cd-activity-time-chip:hover {
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-primary);
  }
  .cd-activity-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: var(--cd-text-xs);
    font-weight: 500;
    color: var(--cd-text-secondary);
    background-color: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-lg);
    border: 1px solid var(--cd-border-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
  }
  .cd-activity-sort-toggle:hover {
    background-color: rgb(0 102 204 / 0.1);
    color: var(--color-science-blue);
    border-color: rgb(0 102 204 / 0.3);
  }
  .cd-activity-time-chip:has(input:checked) {
    background-color: var(--cd-color-primary);
    color: #fff;
    border-color: var(--cd-color-primary);
  }
}
@layer components {
  .cd-quote-brief {
    position: relative;
    overflow: hidden;
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-md, 0 4px 12px -2px rgba(0,0,0,0.06));
  }
  .cd-quote-brief-body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem 2rem;
    padding: 1.75rem 2rem 1.5rem;
    align-items: start;
  }
  .cd-quote-brief-title-block {
    min-width: 0;
  }
  .cd-quote-brief-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
  }
  .cd-quote-brief-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-quote-brief-urgency-chip > div {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.62rem;
    line-height: 1;
  }
  .cd-quote-brief-urgency-chip > .cd-quote-urgency-urgent {
    background: var(--cd-color-crimson-red, #dc143c);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-crimson-red, #dc143c) 12%, transparent);
    }
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-quote-brief-urgency-chip > .cd-quote-urgency-high {
    background: var(--cd-color-warning-orange, #ff6b35);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning-orange, #ff6b35) 12%, transparent);
    }
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-quote-brief-urgency-chip > .cd-quote-urgency-medium {
    background: var(--cd-text-primary, #1d1d1f);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-text-primary, #1d1d1f) 8%, transparent);
    }
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-brief-urgency-chip > .cd-quote-urgency-low {
    background: var(--cd-text-secondary, #6b7280);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-text-secondary, #6b7280) 10%, transparent);
    }
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-brief-icon-slot {
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-quote-brief-title-row {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
  }
  .cd-quote-brief-title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--cd-text-primary, #1d1d1f);
    word-break: break-word;
    margin-bottom: 0.25rem;
  }
  .cd-quote-brief-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-quote-brief-title a:hover {
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-brief-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    font-size: 0.875rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-brief-subtitle i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.75rem;
    margin-right: 0.25rem;
  }
  .cd-quote-brief-budget {
    text-align: right;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
    border-left: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-quote-brief-budget-amount {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-brief-budget-amount--empty {
    font-family: var(--cd-font-primary, system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-quote-brief-budget-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 0.125rem;
  }
  .cd-quote-brief-fact-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-brief-fact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .cd-quote-brief-fact i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.75rem;
  }
  .cd-quote-brief-fact--warning {
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-quote-brief-fact--warning i {
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-quote-brief-pullquote {
    grid-column: 1 / -1;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--cd-text-primary, #1d1d1f);
    white-space: pre-wrap;
  }
  .cd-quote-brief-pullquote::before {
    content: "\201C";
  }
  .cd-quote-brief-pullquote::after {
    content: "\201D";
  }
  .cd-quote-brief-notice {
    grid-column: 1 / -1;
    margin-top: 1.25rem;
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--cd-radius-md, 10px);
    background: rgba(0, 102, 204, 0.04);
    border: 1px solid rgba(0, 102, 204, 0.15);
    font-size: 0.875rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-brief-notice i {
    color: var(--cd-color-science-blue, #0066cc);
    margin-top: 0.125rem;
  }
  .cd-quote-brief-notice strong {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
  }
  .cd-quote-brief-notice a {
    color: var(--cd-color-science-blue, #0066cc);
    font-weight: 600;
    text-decoration: none;
  }
  .cd-quote-brief-notice a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  .cd-quote-brief-actions {
    grid-column: 1 / -1;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .cd-quote-brief-actions-meta {
    font-size: 0.8rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-quote-brief-actions-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .cd-quote-brief-selected-pro {
    grid-column: 1 / -1;
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: var(--cd-radius-md, 10px);
    background: rgba(0, 102, 204, 0.04);
    border: 1px solid rgba(0, 102, 204, 0.15);
    display: flex;
    align-items: center;
    gap: 0.875rem;
  }
  .cd-quote-brief-selected-pro-meta {
    flex: 1;
    min-width: 0;
  }
  .cd-quote-brief-selected-pro-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-bottom: 0.25rem;
  }
  .cd-quote-brief-selected-pro-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-brief-selected-pro-price {
    font-size: 0.85rem;
    color: var(--cd-text-secondary, #6b7280);
    margin-top: 0.125rem;
  }
  .cd-pulse-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.125rem;
    padding: 0.75rem 1.5rem;
    background: var(--cd-bg-soft, #fafafa);
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
    font-size: 0.8rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-pulse-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
  }
  .cd-pulse-item strong {
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-pulse-item a, .cd-pulse-item.is-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
  }
  .cd-pulse-item a:hover, .cd-pulse-item.is-link:hover {
    color: var(--cd-color-science-blue, #0066cc);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .cd-pulse-item i {
    font-size: 0.78rem;
  }
  .cd-pulse-divider {
    width: 1px;
    height: 0.875rem;
    background: var(--cd-border-primary, #e5e5e7);
  }
  .cd-pulse-spacer {
    flex: 1;
  }
  .cd-pulse-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--cd-text-tertiary, #9ca3af);
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.15);
    animation: cd-pulse-halo 2.4s ease-in-out infinite;
  }
  .cd-pulse-dot--active {
    background: var(--cd-color-forest-green, #228b22);
    box-shadow: 0 0 0 3px rgba(34, 139, 34, 0.18);
  }
  .cd-pulse-dot--paused {
    background: var(--cd-color-warning-orange, #ff6b35);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
  }
  .cd-pulse-dot--draft {
    background: var(--cd-color-science-blue, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
  }
  .cd-pulse-dot--expired {
    background: var(--cd-color-crimson-red, #dc143c);
    box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.18);
    animation: none;
  }
  .cd-pulse-dot--completed {
    background: var(--cd-color-science-blue, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
    animation: none;
  }
  .cd-pulse-dot--closed, .cd-pulse-dot--cancelled {
    background: var(--cd-text-tertiary, #9ca3af);
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.15);
    animation: none;
  }
  .cd-pulse-countdown {
    color: var(--cd-color-warning-orange, #ff6b35);
    font-weight: 600;
  }
  .cd-pulse-countdown--expired {
    color: var(--cd-color-crimson-red, #dc143c);
  }
  @keyframes cd-pulse-halo {
    0%, 100% {
      box-shadow: 0 0 0 3px rgba(34, 139, 34, 0.18);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(34, 139, 34, 0.05);
    }
  }
  @media (max-width: 720px) {
    .cd-pulse-strip {
      padding: 0.625rem 1.25rem;
      column-gap: 0.85rem;
      row-gap: 0.45rem;
    }
    .cd-pulse-strip .cd-pulse-divider {
      display: none;
    }
    .cd-pulse-strip > .cd-pulse-item:first-child {
      order: 1;
    }
    .cd-pulse-strip > .cd-pulse-countdown {
      order: 2;
      margin-left: auto;
    }
    .cd-pulse-strip > .cd-pulse-spacer {
      order: 3;
      flex: 0 0 100%;
      height: 0;
    }
    .cd-pulse-strip > .cd-pulse-item:not(:first-child):not(.cd-pulse-countdown) {
      order: 4;
    }
  }
  .cd-lifecycle-rail {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-lifecycle-rail-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .cd-lifecycle-rail-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-lifecycle-rail-progress {
    font-size: 0.8rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-lifecycle-rail-progress strong {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
  }
  .cd-rail-track {
    position: relative;
    height: 2.5rem;
  }
  .cd-rail-line {
    position: absolute;
    top: 1.1rem;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--cd-border-primary, #e5e5e7);
    border-radius: 1px;
  }
  .cd-rail-progress {
    position: absolute;
    top: 1.1rem;
    left: 0;
    height: 2px;
    background: linear-gradient( 90deg, var(--cd-color-forest-green, #228b22) 0%, var(--cd-color-warning-orange, #ff6b35) 100% );
    border-radius: 1px;
    transition: width 0.4s ease;
  }
  .cd-rail-progress--expired {
    background: linear-gradient( 90deg, var(--cd-color-forest-green, #228b22) 0%, var(--cd-color-crimson-red, #dc143c) 100% );
  }
  .cd-rail-progress--terminal {
    background: var(--cd-color-science-blue, #0066cc);
  }
  .cd-rail-progress--paused {
    background: linear-gradient( 90deg, var(--cd-color-forest-green, #228b22) 0%, var(--cd-color-warning-orange, #ff6b35) 100% );
    opacity: 0.55;
  }
  .cd-rail-node {
    position: absolute;
    top: 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
  }
  .cd-rail-node--start {
    left: 0;
    transform: none;
  }
  .cd-rail-node--end {
    right: 0;
    left: auto;
    transform: none;
  }
  .cd-rail-node-marker {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--cd-bg-card, #ffffff);
    border: 2px solid var(--cd-text-tertiary, #9ca3af);
    transition: background 0.2s, border-color 0.2s;
  }
  .cd-rail-node--completed .cd-rail-node-marker {
    background: var(--cd-color-forest-green, #228b22);
    border-color: var(--cd-color-forest-green, #228b22);
  }
  .cd-rail-node--current .cd-rail-node-marker {
    width: 1rem;
    height: 1rem;
    background: var(--cd-bg-card, #ffffff);
    border: 3px solid var(--cd-color-science-blue, #0066cc);
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12);
    margin-top: -1px;
  }
  .cd-rail-node--expired .cd-rail-node-marker {
    background: var(--cd-color-crimson-red, #dc143c);
    border-color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-rail-node--terminal .cd-rail-node-marker {
    background: var(--cd-color-science-blue, #0066cc);
    border-color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-rail-node-caption {
    position: absolute;
    top: 1.25rem;
    white-space: nowrap;
    font-size: 0.72rem;
    color: var(--cd-text-secondary, #6b7280);
    left: 50%;
    transform: translateX(-50%);
  }
  .cd-rail-node--start .cd-rail-node-caption {
    left: 0;
    transform: none;
  }
  .cd-rail-node--end .cd-rail-node-caption {
    left: auto;
    right: 0;
    transform: none;
  }
  .cd-rail-node:not(.cd-rail-node--start):not(.cd-rail-node--end) .cd-rail-node-caption {
    display: none;
  }
  .cd-rail-node--current .cd-rail-node-caption {
    color: var(--cd-color-science-blue, #0066cc);
    font-weight: 600;
  }
  .cd-rail-node--expired .cd-rail-node-caption {
    color: var(--cd-color-crimson-red, #dc143c);
    font-weight: 600;
  }
  .cd-rail-label-row {
    display: none;
  }
  .cd-market-pulse {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.125rem 1.5rem;
    background: var(--cd-bg-card, #ffffff);
    border-radius: var(--cd-radius-xl, 20px);
    border: 1px solid var(--cd-border-hairline, #ececec);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  }
  .cd-market-pulse-stats {
    display: flex;
    align-items: baseline;
    gap: 1rem;
  }
  .cd-market-pulse-stat {
    display: flex;
    flex-direction: column;
  }
  .cd-market-pulse-stat-value {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .cd-market-pulse-stat--low .cd-market-pulse-stat-value {
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-market-pulse-stat--avg .cd-market-pulse-stat-value {
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-market-pulse-stat--high .cd-market-pulse-stat-value {
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-market-pulse-stat-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 0.25rem;
  }
  .cd-market-pulse-arrow {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
    align-self: center;
  }
  .cd-market-pulse-distribution {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .cd-market-pulse-distribution-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-market-pulse-distribution-label .within-budget {
    color: var(--cd-color-science-blue, #0066cc);
    font-weight: 700;
  }
  .cd-market-pulse-bar {
    position: relative;
    height: 1.5rem;
    background: var(--cd-bg-soft, #fafafa);
    border-radius: var(--cd-radius-full, 999px);
    overflow: hidden;
  }
  .cd-market-pulse-range {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 0.375rem;
    border-radius: 0.1875rem;
    background: linear-gradient( 90deg, var(--cd-color-forest-green, #228b22), var(--cd-color-warning-orange, #ff6b35), var(--cd-color-crimson-red, #dc143c) );
    left: 8%;
    right: 8%;
  }
  .cd-market-pulse-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--cd-bg-card, #ffffff);
    border: 2px solid var(--cd-text-primary, #1d1d1f);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
  }
  .cd-market-pulse-budget-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: rgba(0, 102, 204, 0.5);
    border-radius: 1px;
    pointer-events: none;
  }
  .cd-market-pulse-budget-caption {
    font-size: 0.7rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-market-pulse-budget-caption strong {
    color: var(--cd-color-science-blue, #0066cc);
    font-weight: 600;
  }
  .cd-your-quote-card {
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
    padding: 1.5rem 1.75rem;
  }
  .cd-your-quote-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.875rem;
    margin-bottom: 1.125rem;
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-your-quote-head-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
  }
  .cd-your-quote-title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-your-quote-submitted {
    font-size: 0.78rem;
    color: var(--cd-text-tertiary, #9ca3af);
    white-space: nowrap;
  }
  .cd-outcome-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--cd-radius-full, 999px);
    font-size: 0.76rem;
    line-height: 1;
    font-weight: 700;
    border: 1px solid transparent;
  }
  .cd-outcome-chip--success {
    color: var(--cd-color-forest-green, #228b22);
    background: rgba(34, 139, 34, 0.08);
    border-color: rgba(34, 139, 34, 0.18);
  }
  .cd-outcome-chip--info {
    color: var(--cd-color-science-blue, #0066cc);
    background: rgba(0, 102, 204, 0.08);
    border-color: rgba(0, 102, 204, 0.18);
  }
  .cd-outcome-chip--danger {
    color: var(--cd-color-crimson-red, #dc143c);
    background: rgba(220, 20, 60, 0.07);
    border-color: rgba(220, 20, 60, 0.18);
  }
  .cd-outcome-chip--warning {
    color: var(--cd-color-warning-orange, #ff6b35);
    background: rgba(255, 107, 53, 0.08);
    border-color: rgba(255, 107, 53, 0.2);
  }
  .cd-outcome-chip--muted {
    color: var(--cd-text-secondary, #6b7280);
    background: var(--cd-bg-soft, #fafafa);
    border-color: var(--cd-border-primary, #e5e5e7);
  }
  .cd-rejection-feedback {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    border-radius: var(--cd-radius-md, 10px);
    background: rgba(220, 20, 60, 0.04);
    border: 1px solid rgba(220, 20, 60, 0.15);
  }
  .cd-rejection-feedback blockquote {
    margin: 0.45rem 0 0;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.9rem;
    font-style: italic;
  }
  .cd-quote-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--cd-border-hairline, #ececec);
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
    margin-bottom: 1.25rem;
  }
  .cd-quote-stat {
    padding: 1rem;
    border-right: 1px solid var(--cd-border-hairline, #ececec);
    min-width: 0;
  }
  .cd-quote-stat:last-child {
    border-right: none;
  }
  .cd-quote-stat .label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .cd-quote-stat .value {
    color: var(--cd-text-primary, #1d1d1f);
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    overflow-wrap: anywhere;
  }
  .cd-quote-stat .footnote {
    margin-top: 0.25rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.78rem;
  }
  .cd-quote-section-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .cd-quote-notes {
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.92rem;
    line-height: 1.65;
  }
  .cd-quote-terms-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
  }
  .cd-quote-term {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem;
    border-radius: var(--cd-radius-md, 10px);
    background: var(--cd-bg-soft, #fafafa);
    border: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-quote-term--on {
    background: rgba(34, 139, 34, 0.05);
    border-color: rgba(34, 139, 34, 0.18);
  }
  .cd-quote-term .icon {
    width: 1.55rem;
    height: 1.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cd-radius-full, 999px);
    color: var(--cd-text-tertiary, #9ca3af);
    background: var(--cd-bg-card, #ffffff);
    flex-shrink: 0;
  }
  .cd-quote-term--on .icon {
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-term .icon:has(img) {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
  }
  .cd-quote-term .title {
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.9rem;
    font-weight: 700;
  }
  .cd-quote-term .sub {
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.78rem;
    line-height: 1.35;
    margin-top: 0.15rem;
  }
  .cd-quote-pdf-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.8rem;
    border-radius: var(--cd-radius-md, 10px);
    background: rgba(0, 102, 204, 0.04);
    border: 1px solid rgba(0, 102, 204, 0.16);
  }
  .cd-quote-pdf-pill .icon {
    color: var(--cd-color-crimson-red, #dc143c);
    font-size: 1.35rem;
  }
  .cd-quote-pdf-pill .body {
    flex: 1;
    min-width: 0;
  }
  .cd-quote-pdf-pill .title {
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.88rem;
    font-weight: 700;
  }
  .cd-quote-pdf-pill .sub {
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-client-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-lg, 14px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  }
  .cd-client-strip--compact {
    padding: 0.65rem 0.8rem;
  }
  .cd-client-strip__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }
  .cd-client-strip__avatar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .cd-client-strip__info {
    min-width: 0;
  }
  .cd-client-strip__name {
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
  }
  .cd-client-strip__meta {
    display: flex;
    gap: 0.4rem 0.75rem;
    flex-wrap: wrap;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .cd-client-strip__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .cd-client-strip__meta i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.72rem;
  }
  .cd-client-strip__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .cd-client-strip__lock {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cd-radius-md, 10px);
    color: var(--cd-text-tertiary, #9ca3af);
    background: var(--cd-bg-soft, #fafafa);
    flex-shrink: 0;
  }
  .cd-client-strip--locked {
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-compact-card {
    overflow: hidden;
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  }
  .cd-compact-pulse {
    display: flex;
    align-items: center;
    gap: 0.65rem 1rem;
    flex-wrap: wrap;
    padding: 0.7rem 1rem;
    background: var(--cd-bg-soft, #fafafa);
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.78rem;
  }
  .cd-compact-status, .cd-compact-fact {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    white-space: nowrap;
  }
  .cd-compact-fact i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.72rem;
  }
  .cd-compact-status {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 700;
  }
  .cd-compact-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: var(--cd-radius-full, 999px);
    background: var(--cd-text-tertiary, #9ca3af);
    flex-shrink: 0;
  }
  .cd-compact-status--success::before {
    background: var(--cd-color-forest-green, #228b22);
  }
  .cd-compact-status--info::before {
    background: var(--cd-color-science-blue, #0066cc);
  }
  .cd-compact-status--warning::before {
    background: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-compact-status--danger::before {
    background: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-compact-status--muted::before {
    background: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-compact-micro-rail {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
  }
  .cd-compact-micro-caption {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .cd-compact-micro-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--cd-radius-full, 999px);
    background: var(--cd-border-primary, #e5e5e7);
    flex-shrink: 0;
  }
  .cd-compact-micro-dot--completed {
    background: var(--cd-color-forest-green, #228b22);
  }
  .cd-compact-micro-dot--current {
    width: 0.62rem;
    height: 0.62rem;
    background: var(--cd-color-science-blue, #0066cc);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
  }
  .cd-compact-micro-dot--future {
    background: var(--cd-border-primary, #e5e5e7);
  }
  .cd-compact-micro-dot--terminal {
    background: var(--cd-color-science-blue, #0066cc);
  }
  .cd-compact-micro-dot--expired {
    background: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-compact-micro-bar {
    width: 1.55rem;
    height: 2px;
    background: var(--cd-border-primary, #e5e5e7);
    border-radius: 2px;
    flex-shrink: 0;
  }
  .cd-compact-body {
    padding: 1.125rem 1.375rem 0.875rem;
  }
  .cd-compact-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.85rem;
  }
  .cd-compact-title-left {
    min-width: 0;
  }
  .cd-compact-title {
    color: var(--cd-text-primary, #1d1d1f);
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    margin-bottom: 0.25rem;
    overflow-wrap: anywhere;
  }
  .cd-compact-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.8rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.78rem;
  }
  .cd-compact-subtitle span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .cd-compact-subtitle i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
  }
  .cd-compact-price {
    text-align: right;
    flex-shrink: 0;
  }
  .cd-compact-price .amount {
    color: var(--cd-text-primary, #1d1d1f);
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
  }
  .cd-compact-price .label {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .cd-compact-quote-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0.9rem 0;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-compact-quote-row .item {
    padding: 0.8rem;
    border-right: 1px solid var(--cd-border-hairline, #ececec);
    min-width: 0;
  }
  .cd-compact-quote-row .item:first-child {
    padding-left: 0;
  }
  .cd-compact-quote-row .item:last-child {
    border-right: none;
    padding-right: 0;
  }
  .cd-compact-quote-row .label {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
  }
  .cd-compact-quote-row .value {
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.88rem;
    font-weight: 700;
    overflow-wrap: anywhere;
  }
  .cd-compact-notes {
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.88rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cd-compact-notes--open {
    display: block;
    overflow: visible;
  }
  .cd-compact-notes :is(p, ul, ol, blockquote) {
    margin: 0;
  }
  .cd-compact-notes--open :is(p, ul, ol, blockquote) + :is(p, ul, ol, blockquote) {
    margin-top: 0.5rem;
  }
  .cd-compact-notes--open :is(ul, ol) {
    padding-left: 1.25rem;
    list-style: revert;
  }
  .cd-compact-notes-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
    color: var(--cd-color-science-blue, #0066cc);
    font-size: 0.78rem;
    font-weight: 700;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .cd-compact-client-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding-top: 0.9rem;
    margin-top: 0.9rem;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-compact-client-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
  }
  .cd-compact-client-info {
    min-width: 0;
  }
  .cd-compact-client-name {
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.88rem;
    font-weight: 700;
  }
  .cd-compact-client-meta {
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-compact-actions, .cd-compact-inline-action {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
  }
  .cd-compact-inline-action {
    padding-top: 0.9rem;
    margin-top: 0.9rem;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-compact-expand {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem;
    color: var(--cd-text-secondary, #6b7280);
    background: var(--cd-bg-soft, #fafafa);
    border: 0;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
  }
  .cd-compact-expand:hover {
    color: var(--cd-text-primary, #1d1d1f);
    background: var(--cd-bg-secondary, #f5f5f5);
  }
  .cd-compact-siblings {
    padding: 0 1rem 1rem;
  }
  .cd-tips-card, .cd-competition-card {
    height: 100%;
  }
  .cd-sibling-card {
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
    padding: 1.375rem 1.625rem;
  }
  .cd-sibling-card-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
    color: var(--cd-text-primary, #1d1d1f);
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .cd-sibling-card-title i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.9rem;
  }
  .cd-question-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--cd-bg-soft, #fafafa);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
  }
  .cd-footer-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
  }
  .cd-quote-card-compact {
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-quote-card-compact:hover {
    border-color: var(--cd-border-primary, #e5e5e7);
    box-shadow: var(--cd-shadow-md, 0 4px 12px -2px rgba(0,0,0,0.06));
  }
  .cd-quote-card-compact--draft {
    background: linear-gradient(180deg, #fffaf5 0%, #ffffff 35%);
  }
  .cd-quote-card-compact--paused {
    background: linear-gradient(180deg, #f9f9fa 0%, #ffffff 35%);
  }
  .cd-quote-card-compact--expired {
    background: linear-gradient(180deg, #fcfafa 0%, #ffffff 35%);
  }
  .cd-quote-card-compact--completed {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 35%);
  }
  .cd-quote-card-compact--closed {
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 35%);
  }
  .cd-quote-card-compact__inline-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem 0;
    font-size: 0.78rem;
    color: var(--cd-text-secondary, #6b7280);
    flex-wrap: wrap;
  }
  .cd-quote-card-compact__inline-countdown {
    margin-left: auto;
  }
  .cd-quote-card-compact__inline-break {
    display: none;
  }
  .cd-quote-card-compact__inline-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
  }
  .cd-quote-card-compact__inline-metric.is-link {
    transition: color 0.15s ease;
  }
  .cd-quote-card-compact__inline-metric.is-link:hover {
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-card-compact__inline-metric i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
  }
  .cd-quote-card-compact__inline-metric strong {
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-card-compact__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--cd-radius-full, 999px);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-card-compact__status-pill--active {
    background: rgba(34, 139, 34, 0.1);
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-card-compact__status-pill--draft {
    background: rgba(255, 107, 53, 0.12);
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-quote-card-compact__status-pill--paused {
    background: rgba(156, 163, 175, 0.18);
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-card-compact__status-pill--expired {
    background: rgba(220, 20, 60, 0.12);
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-quote-card-compact__status-pill--completed {
    background: rgba(0, 102, 204, 0.12);
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-card-compact__status-pill--closed, .cd-quote-card-compact__status-pill--cancelled {
    background: rgba(29, 29, 31, 0.08);
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-card-compact__body {
    padding: 1rem 1.25rem 0.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    align-items: flex-start;
  }
  .cd-quote-card-compact__title-block {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    min-width: 0;
  }
  .cd-quote-card-compact__icon {
    width: 2.375rem;
    height: 2.375rem;
    font-size: 1.15rem;
    flex-shrink: 0;
  }
  .cd-quote-card-compact__title-text {
    min-width: 0;
  }
  .cd-quote-card-compact__title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--cd-text-primary, #1d1d1f);
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
  }
  .cd-quote-card-compact__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-quote-card-compact__title a:hover {
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-card-compact__meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.85rem;
    font-size: 0.78rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-card-compact__meta-line span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .cd-quote-card-compact__meta-line i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
  }
  .cd-quote-card-compact__budget {
    text-align: right;
    padding-left: 1.25rem;
    border-left: 1px solid var(--cd-border-hairline, #ececec);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 7rem;
  }
  .cd-quote-card-compact__budget-amount {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-card-compact__budget-amount--empty {
    font-family: var(--cd-font-primary, system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: normal;
    white-space: normal;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-quote-card-compact__budget-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 0.2rem;
  }
  .cd-quote-card-compact__description {
    padding: 0.5rem 1.25rem 0;
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-style: italic;
    color: #333;
    font-size: 0.85rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cd-quote-card-compact__notice {
    margin: 0.75rem 1.25rem 0;
    padding: 0.55rem 0.75rem;
    background: rgba(0, 102, 204, 0.04);
    border: 1px solid rgba(0, 102, 204, 0.15);
    border-radius: var(--cd-radius-md, 10px);
    font-size: 0.8rem;
    color: var(--cd-text-secondary, #6b7280);
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
  }
  .cd-quote-card-compact__notice i {
    color: var(--cd-color-science-blue, #0066cc);
    margin-top: 0.15rem;
    font-size: 0.85rem;
  }
  .cd-quote-card-compact__notice strong {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
  }
  .cd-quote-card-compact__notice a {
    color: var(--cd-color-science-blue, #0066cc);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .cd-quote-card-compact__actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1.25rem 1rem;
  }
  .cd-quote-card-compact .cd-quote-brief-actions {
    margin-top: 0.75rem;
    padding: 0.75rem 1.25rem 1rem;
    gap: 0.5rem 0.75rem;
  }
  .cd-quote-card-compact .cd-quote-brief-actions-meta {
    width: 100%;
    order: -1;
  }
  .cd-quote-card-compact .cd-quote-brief-actions-buttons {
    width: 100%;
    justify-content: flex-end;
  }
  .cd-quote-card-compact--inline-actions .cd-quote-brief-actions-meta, .cd-quote-card-compact--inline-actions .cd-quote-brief-actions-buttons {
    width: auto;
  }
  .cd-quote-card-list {
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1.125rem;
    padding: 1rem 1.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-quote-card-list:hover {
    border-color: var(--cd-border-primary, #e5e5e7);
    box-shadow: var(--cd-shadow-md, 0 4px 12px -2px rgba(0,0,0,0.06));
  }
  .cd-quote-card-list--draft {
    background: linear-gradient(90deg, #fffaf5 0%, #ffffff 25%);
  }
  .cd-quote-card-list--paused {
    background: linear-gradient(90deg, #f9f9fa 0%, #ffffff 25%);
  }
  .cd-quote-card-list--expired {
    background: linear-gradient(90deg, #fcfafa 0%, #ffffff 25%);
  }
  .cd-quote-card-list--completed {
    background: linear-gradient(90deg, #f8fafc 0%, #ffffff 25%);
  }
  .cd-quote-card-list--closed {
    background: linear-gradient(90deg, #fafafa 0%, #ffffff 25%);
  }
  .cd-quote-card-list__icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.2rem;
    flex-shrink: 0;
  }
  .cd-quote-card-list__body {
    min-width: 0;
  }
  .cd-quote-card-list__meta-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-bottom: 0.25rem;
  }
  .cd-quote-card-list__meta-dot {
    color: var(--cd-border-primary, #e5e5e7);
  }
  .cd-quote-card-list__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-card-list__meta-item i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
  }
  .cd-quote-card-list__meta-item strong {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
  }
  .cd-quote-card-list__meta-countdown {
    font-size: 0.72rem;
  }
  .cd-quote-card-list__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--cd-radius-full, 999px);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-card-list__status-pill--active {
    background: rgba(34, 139, 34, 0.1);
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-card-list__status-pill--draft {
    background: rgba(255, 107, 53, 0.12);
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-quote-card-list__status-pill--paused {
    background: rgba(156, 163, 175, 0.18);
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-card-list__status-pill--expired {
    background: rgba(220, 20, 60, 0.12);
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-quote-card-list__status-pill--completed {
    background: rgba(0, 102, 204, 0.12);
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-card-list__status-pill--closed, .cd-quote-card-list__status-pill--cancelled {
    background: rgba(29, 29, 31, 0.08);
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-card-list__title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.075rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 0.2rem;
    color: var(--cd-text-primary, #1d1d1f);
    overflow-wrap: anywhere;
  }
  .cd-quote-card-list__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-quote-card-list__title a:hover {
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-card-list__sub {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-card-list__sub i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
    margin-right: 0.25rem;
  }
  .cd-quote-card-list__budget {
    padding-left: 1.125rem;
    border-left: 1px solid var(--cd-border-hairline, #ececec);
    text-align: right;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .cd-quote-card-list__budget-amount {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.075rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-card-list__budget-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 0.15rem;
  }
  .cd-quote-card-list__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
  .cd-quote-requests-table {
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-lg, 14px);
    overflow: hidden;
  }
  .cd-quote-requests-table__head, .cd-quote-requests-table__row {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.125rem;
  }
  .cd-quote-requests-table__head {
    background: var(--cd-bg-soft, #fafafa);
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-quote-requests-table__head-cell {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-quote-requests-table__row {
    border-top: 1px solid var(--cd-border-hairline, #ececec);
    transition: background-color 0.12s ease;
  }
  .cd-quote-requests-table__row:first-of-type {
    border-top: none;
  }
  .cd-quote-requests-table__row:hover {
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-quote-requests-table__row--draft {
    background: linear-gradient(90deg, #fffaf5 0%, #ffffff 50%);
  }
  .cd-quote-requests-table__row--paused {
    background: linear-gradient(90deg, #f9f9fa 0%, #ffffff 50%);
  }
  .cd-quote-requests-table__row--expired {
    background: linear-gradient(90deg, #fcfafa 0%, #ffffff 50%);
  }
  .cd-quote-requests-table__row--completed {
    background: linear-gradient(90deg, #f8fafc 0%, #ffffff 50%);
  }
  .cd-quote-requests-table__row--closed {
    background: linear-gradient(90deg, #fafafa 0%, #ffffff 50%);
  }
  .cd-quote-requests-table__cell {
    min-width: 0;
    font-size: 0.85rem;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-requests-table__cell--request {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .cd-quote-requests-table__icon {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 1rem;
    flex-shrink: 0;
  }
  .cd-quote-requests-table__request-text {
    min-width: 0;
  }
  .cd-quote-requests-table__title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--cd-text-primary, #1d1d1f);
    overflow-wrap: anywhere;
  }
  .cd-quote-requests-table__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-quote-requests-table__title a:hover {
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-requests-table__sub {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--cd-text-secondary, #6b7280);
    margin-top: 0.15rem;
  }
  .cd-quote-requests-table__sub i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.65rem;
    margin-right: 0.2rem;
  }
  .cd-quote-requests-table__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--cd-radius-full, 999px);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-primary, #1d1d1f);
    white-space: nowrap;
  }
  .cd-quote-requests-table__status-pill--active {
    background: rgba(34, 139, 34, 0.1);
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-requests-table__status-pill--draft {
    background: rgba(255, 107, 53, 0.12);
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-quote-requests-table__status-pill--paused {
    background: rgba(156, 163, 175, 0.18);
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-requests-table__status-pill--expired {
    background: rgba(220, 20, 60, 0.12);
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-quote-requests-table__status-pill--completed {
    background: rgba(0, 102, 204, 0.12);
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-requests-table__status-pill--closed, .cd-quote-requests-table__status-pill--cancelled {
    background: rgba(29, 29, 31, 0.08);
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-requests-table__metric {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-requests-table__metric i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.72rem;
  }
  .cd-quote-requests-table__metric strong {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
  }
  .cd-quote-requests-table__budget {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary, #1d1d1f);
    white-space: nowrap;
  }
  .cd-quote-requests-table__cell--actions {
    display: flex;
    justify-content: flex-end;
  }
  @media (max-width: 740px) {
    .cd-quote-card-compact__body {
      grid-template-columns: 1fr;
    }
    .cd-quote-card-compact__budget {
      border-left: none;
      border-top: 1px solid var(--cd-border-hairline, #ececec);
      padding: 0.75rem 0 0;
      text-align: left;
    }
    .cd-quote-card-compact__inline-status {
      row-gap: 0.4rem;
    }
    .cd-quote-card-compact__status-pill {
      order: 1;
    }
    .cd-quote-card-compact__inline-countdown {
      order: 2;
    }
    .cd-quote-card-compact__inline-break {
      order: 3;
      display: block;
      flex: 0 0 100%;
      height: 0;
    }
    .cd-quote-card-compact__inline-metric {
      order: 4;
    }
    .cd-quote-card-compact .cd-quote-brief-actions-buttons > .cd-btn, .cd-quote-card-compact .cd-quote-brief-actions-form {
      flex: 1 1 8rem;
    }
    .cd-quote-card-compact .cd-quote-brief-actions-form .cd-btn {
      width: 100%;
    }
    .cd-quote-card-list {
      grid-template-columns: auto 1fr;
    }
    .cd-quote-card-list__budget {
      grid-column: 1 / -1;
      border-left: none;
      border-top: 1px solid var(--cd-border-hairline, #ececec);
      padding: 0.5rem 0 0;
      margin-top: 0.25rem;
      text-align: left;
    }
    .cd-quote-card-list__actions {
      grid-column: 1 / -1;
    }
    .cd-quote-requests-table {
      overflow-x: auto;
    }
    .cd-quote-requests-table__head, .cd-quote-requests-table__row {
      min-width: 42rem;
    }
  }
  @media (max-width: 640px) {
    .cd-quote-brief-body {
      grid-template-columns: 1fr;
      padding: 1.25rem;
      gap: 1rem;
    }
    .cd-quote-brief-budget {
      border-left: none;
      border-top: 1px solid var(--cd-border-hairline, #ececec);
      padding: 0.875rem 0 0;
      text-align: left;
      align-items: flex-start;
    }
    .cd-quote-brief-actions {
      flex-direction: column;
      align-items: flex-start;
    }
    .cd-quote-brief-actions-buttons {
      width: 100%;
    }
    .cd-lifecycle-rail-header {
      flex-direction: column;
      align-items: flex-start;
    }
    .cd-rail-track {
      height: 1.75rem;
    }
    .cd-rail-node-caption {
      display: none;
    }
    .cd-rail-label-row {
      display: flex;
      justify-content: space-between;
      gap: 0.75rem;
      margin-top: 0.125rem;
    }
    .cd-rail-label {
      min-width: 0;
      flex: 1 1 0;
      color: var(--cd-text-secondary, #6b7280);
      font-size: 0.72rem;
      line-height: 1.2;
      overflow-wrap: anywhere;
      text-align: center;
    }
    .cd-rail-label--start {
      text-align: left;
    }
    .cd-rail-label--end {
      text-align: right;
    }
    .cd-rail-label:not(.cd-rail-label--start):not(.cd-rail-label--end) {
      display: none;
    }
    .cd-rail-label--current {
      color: var(--cd-color-science-blue, #0066cc);
      font-weight: 600;
    }
    .cd-rail-label--expired {
      color: var(--cd-color-crimson-red, #dc143c);
      font-weight: 600;
    }
    .cd-market-pulse {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .cd-your-quote-card {
      padding: 1rem;
    }
    .cd-your-quote-head, .cd-client-strip, .cd-compact-title-row, .cd-compact-client-row {
      flex-direction: column;
      align-items: flex-start;
    }
    .cd-your-quote-submitted, .cd-compact-price {
      text-align: left;
    }
    .cd-quote-stats, .cd-quote-terms-row, .cd-compact-quote-row {
      grid-template-columns: 1fr;
    }
    .cd-quote-stat, .cd-compact-quote-row .item {
      border-right: none;
      border-bottom: 1px solid var(--cd-border-hairline, #ececec);
      padding: 0.85rem 0;
    }
    .cd-quote-stat:last-child, .cd-compact-quote-row .item:last-child {
      border-bottom: none;
    }
    .cd-client-strip__actions, .cd-compact-actions {
      width: 100%;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .cd-compact-micro-rail {
      margin-left: 0;
      width: 100%;
    }
  }
  .cd-empty-state--editorial {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 2.25rem 1rem;
    text-align: center;
    margin-top: 1rem;
  }
  .cd-empty-state--editorial .cd-empty-state-title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cd-text-primary, #1d1d1f);
    margin-bottom: 0.5rem;
    line-height: 1.2;
  }
  .cd-empty-state--editorial .cd-empty-state-body {
    color: var(--cd-text-secondary, #6b7280);
    margin-bottom: 1.5rem;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
  }
  .cd-section-toggle {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
  }
  .cd-section-toggle-group {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--cd-bg-soft, #fafafa);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: 9999px;
  }
  .cd-section-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cd-text-secondary, #6b7280);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .cd-section-toggle-btn:hover {
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-section-toggle-btn.is-active {
    background: var(--cd-bg-card, #ffffff);
    color: var(--cd-text-primary, #1d1d1f);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  }
  .cd-section-toggle-btn i {
    font-size: 0.75rem;
  }
  @media (max-width: 640px) {
    .cd-empty-state--editorial {
      padding: 1.75rem 1.25rem;
    }
  }
}
@layer components {
  .cd-icon-box {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    border: 1px solid;
  }
  .cd-icon-box-icon {
    flex-shrink: 0;
    font-size: var(--cd-text-lg);
  }
  .cd-icon-box-label {
    font-weight: 500;
    opacity: 0.75;
    font-size: var(--cd-text-xs);
  }
  .cd-icon-box-value {
    font-weight: 600;
    font-size: var(--cd-text-sm);
  }
  .cd-icon-box-small {
    padding: var(--cd-space-2);
    gap: var(--cd-space-2);
  }
  .cd-icon-box-small .cd-icon-box-icon {
    font-size: var(--cd-text-base);
  }
  .cd-icon-box-small .cd-icon-box-label {
    font-size: var(--cd-text-xs);
  }
  .cd-icon-box-small .cd-icon-box-value {
    font-size: var(--cd-text-xs);
  }
  .cd-icon-box-large {
    padding: var(--cd-space-4);
    gap: var(--cd-space-4);
  }
  .cd-icon-box-large .cd-icon-box-icon {
    font-size: var(--cd-text-xl);
  }
  .cd-icon-box-large .cd-icon-box-value {
    font-size: var(--cd-text-base);
  }
  .cd-icon-box-primary {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 5%, transparent);
    }
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
    color: var(--cd-color-primary);
  }
  .cd-icon-box-success {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 5%, transparent);
    }
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 20%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-icon-box-warning {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 5%, transparent);
    }
    border-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
    color: var(--cd-color-warning);
  }
  .cd-icon-box-accent {
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 5%, transparent);
    }
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
    color: var(--cd-color-accent);
  }
}
@layer components {
  .cd-section-header {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    margin-bottom: var(--cd-space-4);
  }
  .cd-section-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-section-title {
    font-family: var(--cd-font-display);
    font-size: var(--cd-text-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--cd-text-primary);
  }
  .cd-section-subtitle {
    font-size: var(--cd-text-sm);
    line-height: 1.25;
    color: var(--cd-text-secondary);
  }
}
@layer components {
  .cd-btn-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    outline: none;
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-secondary);
    transition: var(--cd-transition);
    cursor: pointer;
  }
  .cd-btn-filter:hover {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
    color: var(--cd-text-primary);
  }
  .cd-btn-filter:focus {
    --tw-ring-color: var(--cd-color-primary);
  }
  .cd-btn-filter-active {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    outline: none;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    color: var(--cd-color-primary);
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 30%, transparent);
    }
    transition: var(--cd-transition);
    cursor: pointer;
  }
  .cd-btn-filter-active:hover {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 40%, transparent);
    }
  }
  .cd-btn-filter-active:focus {
    --tw-ring-color: var(--cd-color-primary);
  }
  .cd-btn-compact {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: var(--cd-text-sm);
  }
  .cd-filter-toggle {
    cursor: pointer;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    background-color: var(--cd-bg-athens-gray);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-filter-toggle:hover {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
    box-shadow: 0 1px 3px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 3px color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
    }
  }
  .cd-filter-form {
    overflow: visible;
    border-radius: var(--radius-xl);
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    box-shadow: 0 1px 3px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 3px color-mix(in srgb, var(--cd-text-primary) 5%, transparent);
    }
  }
  .cd-filter-form-search {
    padding: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 6);
    }
    border-bottom: 1px solid var(--cd-border-secondary);
  }
  .cd-filter-form-options {
    padding: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 6);
    }
    border-bottom: 1px solid var(--cd-border-secondary);
  }
  .cd-filter-form-actions {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 6);
    }
    background-color: var(--cd-bg-secondary);
  }
  .cd-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    outline: none;
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-secondary);
    transition: var(--cd-transition);
    cursor: pointer;
    white-space: nowrap;
  }
  .cd-filter-pill:hover {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
    color: var(--cd-text-primary);
  }
  .cd-filter-pill-active {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    outline: none;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    color: var(--cd-color-primary);
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 30%, transparent);
    }
    transition: var(--cd-transition);
    cursor: pointer;
    white-space: nowrap;
  }
  .cd-filter-pill-active:hover {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 40%, transparent);
    }
  }
  .cd-quick-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .cd-filter-pill--attention .cd-service-filter-pill-count {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 22%, transparent);
    }
    color: var(--cd-color-warning);
  }
  .cd-filter-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 10rem;
    border-radius: 0.5rem;
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    box-shadow: 0 4px 12px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-text-primary) 12%, transparent);
    }
    z-index: 50;
    padding: 0.25rem;
  }
  .cd-filter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--cd-transition);
  }
  .cd-filter-dropdown-item:hover {
    background-color: var(--cd-bg-hover);
    color: var(--cd-text-primary);
  }
  .cd-filter-dropdown-item-active {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: var(--cd-text-sm);
    color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    border: none;
    cursor: pointer;
    text-align: left;
    font-weight: 500;
    transition: var(--cd-transition);
  }
  .cd-filter-dropdown-item-active:hover {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 12%, transparent);
    }
  }
  .cd-sort-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    outline: none;
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-secondary);
    transition: var(--cd-transition);
    cursor: pointer;
    white-space: nowrap;
  }
  .cd-sort-pill:hover {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
    color: var(--cd-text-primary);
  }
  .cd-filter-scroll-container {
    position: relative;
    width: 100%;
  }
  .cd-filter-scroll-wrapper {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 0.75rem 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .cd-filter-fade-left, .cd-filter-fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3rem;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
  }
  .cd-filter-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--cd-bg-primary) 0%, transparent 100%);
  }
  .cd-filter-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--cd-bg-primary) 0%, transparent 100%);
  }
  .cd-filter-scroll-wrapper .cd-btn-filter, .cd-filter-scroll-wrapper .cd-btn-filter-active {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .cd-attention-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-success) 22%, transparent);
    }
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 8%, var(--cd-bg-primary));
    }
    flex-wrap: wrap;
  }
  .cd-attention-banner-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }
  .cd-attention-banner-info {
    border-color: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-science-blue) 22%, transparent);
    }
    background-color: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-science-blue) 8%, var(--cd-bg-primary));
    }
  }
  .cd-filter-bar-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .cd-filter-bar-inline select {
    flex: 0 0 auto;
    width: auto;
  }
  .cd-filter-bar-inline .cd-dropdown {
    flex: 0 0 auto;
    width: auto;
  }
  .cd-filter-bar-divider {
    width: 1px;
    height: 1.5rem;
    background-color: var(--cd-border-secondary);
    flex-shrink: 0;
  }
  @media (max-width: 1023px) {
    .cd-filter-bar-inline {
      flex-direction: column;
      align-items: stretch;
    }
    .cd-filter-bar-inline select {
      flex-shrink: initial;
    }
    .cd-filter-bar-divider {
      display: none;
    }
  }
  .cd-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .cd-results-toolbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .cd-results-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
}
@layer components {
  .cd-slider {
    height: calc(var(--spacing) * 2);
    width: 100%;
    appearance: none;
    border-radius: calc(infinity * 1px);
    --tw-outline-style: none;
    outline-style: none;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 20%, var(--cd-bg-tertiary));
    }
  }
  .cd-slider::-webkit-slider-thumb {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    cursor: pointer;
    appearance: none;
    border-radius: calc(infinity * 1px);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-color-primary);
    border: 2px solid white;
  }
  .cd-slider::-moz-range-thumb {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-color-primary);
    border: 2px solid white;
  }
  .cd-slider-small {
    height: calc(var(--spacing) * 1);
    width: 100%;
    appearance: none;
    border-radius: calc(infinity * 1px);
    --tw-outline-style: none;
    outline-style: none;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 20%, var(--cd-bg-tertiary));
    }
  }
  .cd-slider-small::-webkit-slider-thumb {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    cursor: pointer;
    appearance: none;
    border-radius: calc(infinity * 1px);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-color-primary);
    border: 2px solid white;
  }
  .cd-slider-small::-moz-range-thumb {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-color-primary);
    border: 2px solid white;
  }
  .cd-slider-large {
    height: calc(var(--spacing) * 3);
    width: 100%;
    appearance: none;
    border-radius: calc(infinity * 1px);
    --tw-outline-style: none;
    outline-style: none;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 20%, var(--cd-bg-tertiary));
    }
  }
  .cd-slider-large::-webkit-slider-thumb {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    cursor: pointer;
    appearance: none;
    border-radius: calc(infinity * 1px);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-color-primary);
    border: 2px solid white;
  }
  .cd-slider-large::-moz-range-thumb {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-color-primary);
    border: 2px solid white;
  }
  .cd-slider:disabled, .cd-slider-small:disabled, .cd-slider-large:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .cd-slider:disabled::-webkit-slider-thumb, .cd-slider-small:disabled::-webkit-slider-thumb, .cd-slider-large:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
    background-color: var(--cd-text-tertiary);
  }
  .cd-slider:disabled::-moz-range-thumb, .cd-slider-small:disabled::-moz-range-thumb, .cd-slider-large:disabled::-moz-range-thumb {
    cursor: not-allowed;
    background-color: var(--cd-text-tertiary);
  }
  .cd-slider-success::-webkit-slider-thumb, .cd-slider-success::-moz-range-thumb, .cd-slider-dark::-webkit-slider-thumb, .cd-slider-dark::-moz-range-thumb, .cd-slider-vertical::-webkit-slider-thumb, .cd-slider-vertical::-moz-range-thumb {
    background-color: var(--cd-color-accent) !important;
  }
}
@layer components {
  .cd-dropdown {
    position: relative;
    width: 100%;
  }
  .cd-dropdown-trigger {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-primary);
    transition: var(--cd-transition);
  }
  .cd-dropdown-trigger:focus {
    --tw-outline-style: none;
    outline-style: none;
    border-color: var(--cd-color-accent);
    box-shadow: 0 0 0 2px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 10%, transparent);
    }
  }
  .cd-dropdown-trigger.active {
    border-color: var(--cd-color-accent);
    box-shadow: 0 0 0 2px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 10%, transparent);
    }
  }
  .cd-dropdown-trigger.disabled {
    cursor: not-allowed;
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary);
  }
  .cd-dropdown-trigger.disabled:hover {
    border-color: var(--cd-border-secondary);
  }
  .cd-dropdown-icon {
    color: var(--cd-text-tertiary);
    transition: transform 0.2s ease;
  }
  .cd-dropdown-trigger.active .cd-dropdown-icon {
    transform: rotate(180deg);
  }
  .cd-dropdown-panel {
    position: absolute;
    top: 100%;
    left: calc(var(--spacing) * 0);
    margin-top: calc(var(--spacing) * 2);
    overflow: visible;
    border-radius: var(--radius-lg);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    z-index: var(--cd-z-topbar-dropdown);
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    transform: translateY(-10px);
    transition: all 0.2s ease;
    min-width: 100%;
    width: max-content;
    max-width: 600px;
  }
  .cd-dropdown-priority {
    z-index: 9998;
  }
  .cd-dropdown-priority .cd-dropdown-panel {
    z-index: 9999 !important;
  }
  .cd-dropdown-panel.opacity-0 {
    opacity: 0;
  }
  .cd-dropdown-panel.opacity-100 {
    opacity: 1 !important;
  }
  .cd-dropdown-panel.invisible {
    visibility: hidden;
  }
  .cd-dropdown-panel.visible {
    visibility: visible !important;
    transform: translateY(0);
  }
  .cd-dropdown-search {
    padding: calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-dropdown-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: var(--cd-text-sm);
    outline: none;
    border: 2px solid transparent;
  }
  .cd-dropdown-search:focus {
    box-shadow: 0 0 0 2px rgba(var(--cd-color-primary), 0.2), 0 0 0 4px rgba(var(--cd-color-primary), 0.1);
  }
  border: 1px solid var(--cd-border-secondary);
  background-color: var(--cd-bg-primary);
  color: var(--cd-text-primary);
}
.cd-dropdown-search-input:focus {
  --tw-ring-color: var(--cd-color-accent);
}
.cd-dropdown-options {
  max-height: 350px;
  overflow-y: auto;
}
.cd-dropdown-option {
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.15s ease-in-out;
  border: none;
  background-color: transparent;
  width: 100%;
  text-align: left;
  font-size: var(--cd-text-sm);
  border-radius: 0;
  color: var(--cd-text-primary);
}
.cd-dropdown-option:hover {
  background-color: var(--cd-bg-secondary);
}
.cd-dropdown-option.selected {
  background-color: var(--cd-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
  }
  color: var(--cd-color-primary);
}
.cd-dropdown-option.hidden {
  display: none;
}
.cd-dropdown-option.highlighted {
  background-color: var(--cd-bg-secondary);
}
.cd-dropdown-option-check {
  opacity: 0%;
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--cd-color-primary);
}
.cd-dropdown-option.selected .cd-dropdown-option-check {
  opacity: 1 !important;
}
.cd-service-task-option {
  padding: 0.875rem 1rem !important;
  line-height: 1.3 !important;
  align-items: flex-start !important;
  min-height: 3.5rem;
}
.cd-service-task-option .cd-dropdown-option-check {
  margin-top: 0.5rem;
}
.cd-service-task-option:hover {
  background-color: var(--cd-bg-secondary) !important;
}
.cd-service-task-option.selected {
  background-color: var(--cd-color-primary) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent) !important;
  }
}
.cd-dropdown-no-results {
  padding: 1rem;
  text-align: center;
  font-size: var(--cd-text-sm);
  font-style: italic;
  color: var(--cd-text-tertiary);
}
.cd-dropdown-dependent {
  opacity: 50%;
}
.cd-dropdown-dependent .cd-dropdown-trigger {
  cursor: not-allowed;
  background-color: var(--cd-bg-secondary);
  color: var(--cd-text-tertiary);
}
.cd-dropdown-dependent .cd-dropdown-icon {
  color: var(--cd-border-secondary);
}
.cd-city-selector-wrapper {
  position: relative;
}
.cd-city-selector-display {
  position: relative;
}
.cd-city-search-input {
  width: 100%;
  cursor: pointer;
  border-radius: var(--radius-xl);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  padding-right: calc(var(--spacing) * 10);
  background-color: var(--cd-bg-primary);
  border: 1px solid var(--cd-border-input);
  color: var(--cd-text-primary);
  transition: var(--cd-transition);
}
.cd-city-search-input:disabled {
  cursor: not-allowed;
  opacity: 50%;
  background-color: var(--cd-bg-secondary);
}
.cd-city-search-input:not(:disabled):hover {
  border-color: var(--cd-border-secondary);
}
.cd-city-selector-arrow {
  pointer-events: none;
  position: absolute;
  top: calc(1/2 * 100%);
  right: calc(var(--spacing) * 3);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cd-city-dropdown {
  position: absolute;
  top: 100%;
  left: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 1);
  width: 100%;
  border-radius: var(--radius-md);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  background-color: var(--cd-bg-card);
  border: 1px solid var(--cd-border-secondary);
  max-height: 400px;
  z-index: var(--cd-z-topbar-dropdown);
}
.cd-city-search-box {
  width: 100%;
  border-radius: var(--radius-md);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  background-color: var(--cd-bg-primary);
  border: 1px solid var(--cd-border-secondary);
  color: var(--cd-text-primary);
  font-size: var(--cd-text-sm);
  transition: var(--cd-transition);
}
.cd-city-search-box:focus {
  --tw-outline-style: none;
  outline-style: none;
  border-color: var(--cd-color-primary);
  box-shadow: 0 0 0 3px var(--cd-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
  }
}
.cd-city-list {
  max-height: calc(var(--spacing) * 60);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cd-border-secondary) transparent;
}
.cd-city-list::-webkit-scrollbar {
  width: calc(var(--spacing) * 1.5);
}
.cd-city-list::-webkit-scrollbar-track {
  background-color: transparent;
}
.cd-city-list::-webkit-scrollbar-thumb {
  background-color: var(--cd-border-secondary);
  border-radius: 0.25rem;
}
.cd-city-option {
  cursor: pointer;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--cd-text-primary);
  font-size: var(--cd-text-sm);
}
.cd-city-option:hover {
  background-color: var(--cd-bg-secondary);
}
.cd-city-option-highlighted {
  background-color: var(--cd-bg-hover);
}
.cd-city-no-results {
  padding: 0.75rem;
  text-align: center;
  color: var(--cd-text-tertiary);
  font-size: var(--cd-text-sm);
}
.cd-city-loading {
  padding: 0.75rem;
  text-align: center;
  color: var(--cd-text-tertiary);
  font-size: var(--cd-text-sm);
}
.city-select-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--cd-bg-secondary);
}
.cd-profession-group {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  &:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  border-color: var(--cd-border-primary);
  padding: 0.75rem 1rem;
}
.cd-profession-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
}
.cd-profession-header .cd-checkbox-item {
  margin: calc(var(--spacing) * 0);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.cd-task-list {
  margin-top: calc(var(--spacing) * 2);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }
  padding-left: calc(var(--spacing) * 8);
}
.cd-task-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  transition: background-color 0.15s ease;
}
.cd-task-item:hover {
  background-color: var(--cd-bg-secondary);
  border-radius: var(--cd-radius-base);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
input[type="checkbox"]:indeterminate {
  background-color: var(--cd-color-primary);
  border-color: var(--cd-color-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M2 8a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1z'/%3e%3c/svg%3e");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
input[type="checkbox"]:indeterminate:hover:not(:disabled) {
  box-shadow: 0 0 0 2px var(--cd-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
  }
}
@layer components {
  .cd-secret-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-primary);
  }
  .cd-secret-masked {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--cd-text-muted);
    letter-spacing: 0.05em;
  }
  .cd-secret-revealed {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--cd-text-primary);
    word-break: break-all;
  }
}
@layer components {
  .cd-wizard-container {
    position: relative;
    margin: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    padding-inline: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
    max-width: 72rem;
    z-index: 20;
    border-radius: 0;
    background-color: transparent;
    isolation: isolate;
    height: calc(100dvh - var(--cd-total-navbar-offset));
  }
  @media (max-width: 767px) {
    .cd-wizard-container {
      height: calc(100dvh - var(--cd-navbar-height) - env(safe-area-inset-bottom));
    }
    body:has(.cd-bottom-nav) .cd-wizard-container {
      height: calc(100dvh - var(--cd-navbar-height) - var(--cd-space-4) - 90px - env(safe-area-inset-bottom));
    }
  }
  @media (min-width: 768px) {
    .cd-content-panel:has(#wizard-swap-target) {
      height: calc(100dvh - var(--cd-total-navbar-offset) - 1.5rem);
      overflow: hidden;
      padding-bottom: 0;
    }
    .cd-content-panel #wizard-swap-target {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .cd-content-panel .cd-wizard-container {
      flex: 1;
      min-height: 0;
      height: 100%;
    }
    .cd-content-panel .cd-wizard-content-area {
      flex: 1;
      min-height: 0;
    }
  }
  .cd-wizard-scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cd-wizard-container-title {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 5);
    max-width: var(--container-4xl);
  }
  .cd-wizard-content-area {
    margin-inline: auto;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    padding-inline: calc(var(--spacing) * 0);
  }
  .cd-wizard-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
  }
  .cd-step-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cd-step-content:has(.cd-wizard-scroll-area-wrapper), .cd-step-content:has(.cd-wizard-scroll-area-wrapper-question) {
    overflow: hidden;
    -webkit-overflow-scrolling: unset;
  }
  .cd-wizard-navigation-wrapper {
    background: var(--cd-bg-card);
    flex-shrink: 0;
    margin-block: calc(var(--spacing) * 2);
  }
  .cd-glass-card {
    border-radius: var(--cd-radius-2xl);
    padding: var(--cd-space-2);
    background: var(--cd-bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-card) 95%, transparent);
    }
    border: 1px solid var(--cd-border-primary);
  }
  @media (min-width: 640px) {
    .cd-glass-card {
      padding: var(--cd-space-3);
    }
  }
  @media (min-width: 768px) {
    .cd-glass-card {
      padding: var(--cd-space-5);
    }
  }
  .cd-wizard-step-card {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-2);
    height: 100%;
    width: 100%;
    padding-block: calc(var(--spacing) * 2);
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .cd-wizard-scroll-area-wrapper {
    margin: 0;
    padding: 0.25rem 0.25rem;
    border-radius: 12pt;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
    touch-action: pan-y;
  }
  @media (min-width: 640px) {
    .cd-wizard-scroll-area-wrapper {
      padding: 0.25rem 0.75rem;
    }
  }
  .cd-wizard-scroll-area-wrapper::-webkit-scrollbar {
    width: 6px;
  }
  .cd-wizard-scroll-area-wrapper::-webkit-scrollbar-track {
    background: var(--cd-bg-secondary);
    border-radius: 3px;
  }
  .cd-wizard-scroll-area-wrapper::-webkit-scrollbar-thumb {
    background: var(--cd-border-primary);
    border-radius: 3px;
  }
  .cd-wizard-scroll-area-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--cd-color-primary);
  }
  .cd-wizard-scroll-area-wrapper::after {
    content: '';
    top: calc(100% - 4rem);
    position: absolute;
    left: 0.25rem;
    height: 2rem;
    background: linear-gradient(to top, var(--cd-bg-card), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms;
    width: calc(100% - 0.5rem);
    border-radius: 0 0 var(--cd-radius-xl) var(--cd-radius-xl);
    z-index: var(--cd-z-behind);
    filter: invert(4%);
  }
  .cd-wizard-scroll-area-wrapper.has-scroll::after {
    opacity: 1;
  }
  .cd-wizard-scroll-area-wrapper.at-scroll-bottom::after {
    opacity: 0;
  }
  .cd-wizard-scroll-area-wrapper-question {
    width: 100%;
    margin: 0;
    padding: 1rem 0;
    border-radius: 12pt;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .cd-wizard-scroll-area-wrapper-question::after {
    content: '';
    top: calc(100% - 8.5rem);
    background: linear-gradient(to top, var(--cd-bg-card), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms;
    width: 100%;
    border-radius: 0 0 var(--cd-radius-xl) var(--cd-radius-xl);
    z-index: var(--cd-z-behind);
    filter: invert(4%);
    position: absolute;
    left: calc(var(--spacing) * 0);
    height: 2rem;
  }
  .cd-wizard-scroll-area-wrapper-question::-webkit-scrollbar {
    width: 6px;
  }
  .cd-wizard-scroll-area-wrapper-question::-webkit-scrollbar-track {
    background: var(--cd-bg-secondary);
    border-radius: 3px;
  }
  .cd-wizard-scroll-area-wrapper-question::-webkit-scrollbar-thumb {
    background: var(--cd-border-primary);
    border-radius: 3px;
  }
  .cd-wizard-scroll-area-wrapper-question::-webkit-scrollbar-thumb:hover {
    background: var(--cd-color-primary);
  }
  .cd-wizard-scroll-area-wrapper-question.has-scroll::after {
    opacity: 1;
  }
  .cd-wizard-scroll-area-wrapper-question.at-scroll-bottom::after {
    opacity: 0;
  }
  .cd-wizard-step-header {
    display: flex;
    align-items: center;
    gap: var(--cd-space-4);
    margin-bottom: var(--cd-space-8);
  }
  .cd-wizard-back-btn {
    color: var(--cd-text-tertiary);
    transition: colors 150ms;
    padding: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    cursor: pointer;
  }
  .cd-wizard-back-btn:hover {
    color: var(--cd-text-secondary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-wizard-step-title {
    margin-bottom: var(--cd-space-1);
    text-align: center;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    @media (width >= 48rem) {
      margin-bottom: var(--cd-space-2);
    }
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    color: var(--cd-text-primary);
  }
  .cd-wizard-step-subtitle {
    display: none;
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    @media (width >= 40rem) {
      display: block;
    }
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    color: var(--cd-text-secondary);
  }
}
@layer components {
  .cd-wizard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-space-2);
  }
  @media (min-width: 768px) {
    .cd-wizard-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1280px) {
    .cd-wizard-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .cd-wizard-card {
    display: block;
    position: relative;
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-3);
    cursor: pointer;
    transition: all 300ms;
    background: linear-gradient(135deg, var(--cd-bg-card) 0%, var(--cd-bg-secondary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-bg-card) 95%, transparent) 0%, color-mix(in srgb, var(--cd-bg-secondary) 95%, transparent) 100%);
    }
    border: 2px solid var(--cd-border-primary);
  }
  .cd-wizard-card:hover {
    border-color: var(--cd-color-primary);
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-wizard-card:focus-visible, .cd-wizard-card:has(input:focus-visible) {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: -2px;
  }
  .cd-wizard-card-selected, .cd-wizard-card:has(input:checked) {
    border-color: var(--cd-color-primary);
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 5%, transparent) 0%, color-mix(in srgb, var(--cd-color-primary) 10%, transparent) 100%);
    }
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
  }
  .cd-wizard-card-match:not(.cd-wizard-card-selected) {
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-accent) 55%, var(--cd-border-primary));
    }
    background: linear-gradient(135deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-accent) 5%, transparent) 0%, color-mix(in srgb, var(--cd-color-accent) 9%, transparent) 100%);
    }
  }
  .cd-wizard-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 300ms;
    background: linear-gradient(to bottom right, var(--cd-bg-secondary), var(--cd-bg-tertiary));
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-lg);
  }
  .cd-wizard-card:hover .cd-wizard-card-icon, .cd-wizard-card-selected .cd-wizard-card-icon, .cd-wizard-card:has(input:checked) .cd-wizard-card-icon {
    background: linear-gradient(to bottom right, var(--cd-color-primary), var(--cd-color-accent));
    color: var(--cd-text-on-primary);
  }
  .cd-wizard-card-badge {
    position: absolute;
    top: var(--cd-space-3);
    right: var(--cd-space-3);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary);
  }
  .cd-wizard-card-badge i {
    font-size: var(--cd-text-sm);
  }
  .cd-wizard-card-selected .cd-wizard-card-badge, .cd-wizard-card:has(input:checked) .cd-wizard-card-badge {
    background: var(--cd-color-success);
    color: var(--cd-text-on-primary);
  }
  .cd-wizard-card-badge .fa-check {
    display: none !important;
  }
  .cd-wizard-card-badge .fa-plus {
    display: inline !important;
  }
  .cd-wizard-card-selected .cd-wizard-card-badge .fa-check, .cd-wizard-card:has(input:checked) .cd-wizard-card-badge .fa-check {
    display: inline !important;
  }
  .cd-wizard-card-selected .cd-wizard-card-badge .fa-plus, .cd-wizard-card:has(input:checked) .cd-wizard-card-badge .fa-plus {
    display: none !important;
  }
  .cd-wizard-card-name {
    font-weight: 600;
    color: var(--cd-text-primary);
    font-size: var(--cd-text-base);
    margin-bottom: var(--cd-space-1);
  }
  .cd-wizard-card-description {
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-sm);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .cd-category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-space-2);
  }
  @media (min-width: 640px) {
    .cd-category-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .cd-category-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .cd-category-card {
    position: relative;
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-3);
    cursor: pointer;
    transition: all 300ms;
    background: linear-gradient(135deg, var(--cd-bg-card) 0%, var(--cd-bg-secondary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-bg-card) 95%, transparent) 0%, color-mix(in srgb, var(--cd-bg-secondary) 95%, transparent) 100%);
    }
    border: 2px solid var(--cd-border-primary);
  }
  .cd-category-card:hover {
    border-color: var(--cd-color-primary);
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-category-card-selected {
    border-color: var(--cd-color-primary);
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 5%, transparent) 0%, color-mix(in srgb, var(--cd-color-primary) 10%, transparent) 100%);
    }
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
  }
  .cd-category-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--cd-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--cd-space-4);
    transition: all 300ms;
    background: linear-gradient(to bottom right, var(--cd-bg-secondary), var(--cd-bg-tertiary));
    color: var(--cd-text-secondary);
  }
  .cd-category-card:hover .cd-category-icon, .cd-category-card-selected .cd-category-icon {
    background: linear-gradient(to bottom right, var(--cd-color-primary), var(--cd-color-accent));
    color: var(--cd-text-on-primary);
  }
  .cd-category-icon i {
    font-size: var(--cd-text-2xl);
  }
  .cd-category-icon-sm {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 300ms;
    background: linear-gradient(to bottom right, var(--cd-bg-secondary), var(--cd-bg-tertiary));
    color: var(--cd-text-secondary);
  }
  .cd-category-card:hover .cd-category-icon-sm, .cd-category-card-selected .cd-category-icon-sm {
    background: linear-gradient(to bottom right, var(--cd-color-primary), var(--cd-color-accent));
    color: var(--cd-text-on-primary);
  }
  .cd-category-icon-sm i {
    font-size: var(--cd-text-lg);
  }
  .cd-category-icon-sm:has(img) {
    background: transparent;
  }
  .cd-category-card:hover .cd-category-icon-sm:has(img), .cd-category-card-selected .cd-category-icon-sm:has(img) {
    background: transparent;
  }
  .cd-category-name {
    font-weight: 700;
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-1);
    font-size: var(--cd-text-lg);
  }
  .cd-category-description {
    color: var(--cd-text-secondary);
    margin-bottom: var(--cd-space-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--cd-text-sm);
  }
  .cd-category-badge {
    position: absolute;
    top: var(--cd-space-3);
    right: var(--cd-space-3);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary);
  }
  .cd-category-badge i {
    font-size: var(--cd-text-sm);
  }
  .cd-category-card-selected .cd-category-badge {
    background: var(--cd-color-success);
    color: var(--cd-text-on-primary);
  }
  .cd-search-match-indicator {
    display: flex;
    align-items: center;
    gap: var(--cd-space-1);
    font-size: var(--cd-text-xs);
    color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    border-radius: var(--cd-radius-md);
    padding: var(--cd-space-1) var(--cd-space-2);
    margin-top: var(--cd-space-2);
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
  }
  .cd-search-match-text {
    font-weight: 500;
    line-height: 1.2;
  }
  .cd-profession-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-space-2);
  }
  @media (min-width: 768px) {
    .cd-profession-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1280px) {
    .cd-profession-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .cd-profession-card {
    position: relative;
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-3);
    cursor: pointer;
    transition: all 300ms;
    background: linear-gradient(135deg, var(--cd-bg-card) 0%, var(--cd-bg-secondary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-bg-card) 95%, transparent) 0%, color-mix(in srgb, var(--cd-bg-secondary) 95%, transparent) 100%);
    }
    border: 2px solid var(--cd-border-primary);
  }
  .cd-profession-card:hover {
    border-color: var(--cd-color-primary);
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-profession-card-selected {
    border-color: var(--cd-color-primary);
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 5%, transparent) 0%, color-mix(in srgb, var(--cd-color-primary) 10%, transparent) 100%);
    }
  }
  .cd-profession-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--cd-space-2);
  }
  .cd-profession-badge {
    position: absolute;
    top: var(--cd-space-3);
    right: var(--cd-space-3);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary);
  }
  .cd-profession-badge i {
    font-size: var(--cd-text-sm);
  }
  .cd-profession-card-selected .cd-profession-badge {
    background: var(--cd-color-success);
    color: var(--cd-text-on-primary);
  }
  .cd-profession-icon-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms;
    background: linear-gradient(to bottom right, var(--cd-bg-secondary), var(--cd-bg-tertiary));
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-lg);
  }
  .cd-profession-card:hover .cd-profession-icon-box, .cd-profession-card-selected .cd-profession-icon-box {
    background: linear-gradient(to bottom right, var(--cd-color-primary), var(--cd-color-accent));
    color: var(--cd-text-on-primary);
  }
  .cd-profession-icon-box:has(img) {
    background: transparent;
  }
  .cd-profession-card:hover .cd-profession-icon-box:has(img), .cd-profession-card-selected .cd-profession-icon-box:has(img) {
    background: transparent;
  }
  .cd-profession-name {
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: 0.25rem;
    font-size: var(--cd-text-base);
  }
  .cd-profession-description {
    color: var(--cd-text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--cd-text-sm);
    line-height: 1.5;
  }
  .cd-profession-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--cd-text-xs);
  }
  .cd-profession-services-count {
    color: var(--cd-text-tertiary);
  }
  .cd-profession-select-indicator {
    position: relative;
    font-size: var(--cd-text-lg);
  }
  .cd-profession-select-indicator .cd-existing-badge {
    position: static;
    display: inline-flex;
  }
  .cd-service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-space-2);
  }
  @media (min-width: 768px) {
    .cd-service-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1280px) {
    .cd-service-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .cd-service-grid::-webkit-scrollbar {
    width: var(--cd-space-2);
  }
  .cd-service-grid::-webkit-scrollbar-track {
    background-color: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-full);
  }
  .cd-service-grid::-webkit-scrollbar-thumb {
    background-color: var(--cd-bg-tertiary);
    border-radius: var(--cd-radius-full);
  }
  .cd-service-grid::-webkit-scrollbar-thumb:hover {
    background-color: var(--cd-text-tertiary);
  }
  .cd-service-card-wizard {
    position: relative;
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-3);
    cursor: pointer;
    transition: all 300ms;
    background: linear-gradient(135deg, var(--cd-bg-card) 0%, var(--cd-bg-secondary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-bg-card) 95%, transparent) 0%, color-mix(in srgb, var(--cd-bg-secondary) 95%, transparent) 100%);
    }
    border: 2px solid var(--cd-border-primary);
  }
  .cd-service-card-wizard:hover {
    border-color: var(--cd-color-primary);
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-service-card-selected {
    border-color: var(--cd-color-primary);
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 5%, transparent) 0%, color-mix(in srgb, var(--cd-color-primary) 10%, transparent) 100%);
    }
  }
  .cd-service-card-title {
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: 0.25rem;
    font-size: var(--cd-text-base);
  }
  .cd-service-card-description {
    color: var(--cd-text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--cd-text-sm);
    line-height: 1.5;
  }
  .cd-service-select-indicator {
    position: relative;
    font-size: var(--cd-text-lg);
  }
  .cd-service-select-indicator .cd-existing-badge {
    position: static;
    display: inline-flex;
  }
  .cd-service-icon-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms;
    background: linear-gradient(to bottom right, var(--cd-bg-secondary), var(--cd-bg-tertiary));
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-lg);
  }
  .cd-service-card-wizard:hover .cd-service-icon-box, .cd-service-card-selected .cd-service-icon-box {
    background: linear-gradient(to bottom right, var(--cd-color-primary), var(--cd-color-accent));
    color: var(--cd-text-on-primary);
  }
  .cd-service-icon-box:has(img) {
    background: transparent;
  }
  .cd-service-card-wizard:hover .cd-service-icon-box:has(img), .cd-service-card-selected .cd-service-icon-box:has(img) {
    background: transparent;
  }
  .cd-service-icon {
    font-size: var(--cd-text-lg);
    color: var(--cd-text-secondary);
  }
  .cd-wizard-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .cd-icon-add {
    transition: all 300ms;
    color: var(--cd-color-primary);
  }
  .cd-icon-selected {
    color: var(--cd-color-success);
  }
  .cd-service-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-2);
  }
  .cd-service-card-profession {
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-xs);
  }
  .cd-service-card-meta {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
  }
  .cd-service-popularity {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--cd-color-accent);
    font-size: var(--cd-text-xs);
  }
  .cd-input-search {
    width: 100%;
  }
  .cd-existing-badge {
    position: absolute;
    top: var(--cd-space-2);
    right: var(--cd-space-2);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-left: var(--cd-space-2);
    padding-right: var(--cd-space-2);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: var(--cd-radius-full);
    font-weight: 700;
    z-index: 20;
    font-size: var(--cd-text-xs);
    background: linear-gradient(135deg, var(--cd-color-success), var(--cd-color-success));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-success), color-mix(in srgb, var(--cd-color-success) 80%, var(--cd-color-forest-green)));
    }
    color: var(--cd-text-on-primary);
    border: 2px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--cd-color-success) 90%, white);
    }
    box-shadow: 0 3px 12px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 3px 12px color-mix(in srgb, var(--cd-color-success) 35%, transparent);
    }
    animation: subtle-pulse 2s ease-in-out infinite;
    transform: scale(1);
    transition: transform 0.2s ease-in-out;
  }
  .cd-existing-badge:hover {
    transform: scale(1.05);
    animation: none;
  }
  .cd-existing-badge i {
    font-size: var(--cd-text-xs);
  }
  .cd-existing-badge-complete {
    background: linear-gradient(135deg, var(--cd-color-success), var(--cd-color-success));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-success), color-mix(in srgb, var(--cd-color-success) 90%, var(--cd-color-forest-green)));
    }
    border: 2px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--cd-color-success) 95%, white);
    }
    box-shadow: 0 4px 16px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 16px color-mix(in srgb, var(--cd-color-success) 45%, transparent);
    }
    animation: completion-pulse 3s ease-in-out infinite;
  }
  .cd-existing-badge-complete:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 6px 20px color-mix(in srgb, var(--cd-color-success) 55%, transparent);
    }
  }
  @keyframes completion-pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.02);
      opacity: 0.95;
    }
  }
  .cd-service-card-existing .cd-checkbox-service:disabled {
    cursor: not-allowed;
  }
  .cd-service-card-existing {
    background: linear-gradient(135deg, var(--cd-color-success) 0%, var(--cd-color-success) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-success) 12%, transparent) 0%, color-mix(in srgb, var(--cd-color-success) 8%, transparent) 100%);
    }
    border: 2px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--cd-color-success) 40%, transparent);
    }
  }
  .cd-service-card-existing:hover {
    box-shadow: 0 4px 16px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 16px color-mix(in srgb, var(--cd-color-success) 25%, transparent);
    }
    border: 2px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--cd-color-success) 40%, transparent);
    }
  }
  .cd-service-card-existing .cd-checkbox-service:disabled:checked {
    opacity: 0.9;
  }
  @keyframes subtle-pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.05);
      opacity: 0.9;
    }
  }
  @media (max-width: 640px) {
    .cd-existing-badge {
      padding-left: 0.375rem;
      padding-right: 0.375rem;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      font-size: var(--cd-text-tiny);
      min-width: 1.5rem;
    }
    .cd-existing-badge:hover {
      transform: scale(1.1);
    }
    .cd-service-card-existing .cd-checkbox-service:disabled:checked {
      opacity: 1;
    }
  }
}
@layer components {
  .cd-wizard-navigation {
    text-align: center;
  }
  .cd-btn-wizard {
    min-height: 2.75rem;
  }
  .cd-btn-wizard-back {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }
  .cd-wizard-progress-header {
    margin: 0;
    padding: 0;
    padding-top: var(--cd-space-2);
    position: relative;
    z-index: var(--cd-z-sticky);
    background-color: transparent;
    overflow: visible;
  }
  @media (min-width: 640px) {
    .cd-wizard-progress-header {
      padding-top: var(--cd-space-4);
    }
  }
  .cd-wizard-container .cd-wizard-progress-header {
    max-width: 100%;
    border-radius: 0;
    width: 100%;
    isolation: isolate;
  }
  @media (max-width: 1023px) {
    .cd-wizard-progress-header .flex.items-center.gap-4 {
      gap: var(--cd-space-2);
    }
    .cd-wizard-progress-header {
      padding-bottom: var(--cd-space-1);
      padding-left: 0;
      padding-right: 0;
    }
  }
  @media (max-width: 991px) {
    .cd-wizard-progress-header .flex.items-center.gap-4 {
      gap: var(--cd-space-1);
    }
    .cd-wizard-progress-header .cd-progress-step-large {
      width: 2.25rem;
      height: 2.25rem;
      font-size: var(--cd-text-xs);
    }
    .cd-wizard-back-btn {
      min-width: 2.75rem;
      min-height: 2.75rem;
    }
  }
  .cd-progress-step-active {
    background-color: var(--cd-color-shark);
    color: white;
  }
  .cd-progress-step-completed {
    background-color: var(--cd-color-forest-green);
    color: white;
  }
  .cd-progress-step-pending {
    background-color: var(--cd-color-athens-gray);
    color: var(--cd-color-shark);
    border: 1px solid var(--cd-border-primary);
  }
  .cd-step-label-completed {
    color: var(--cd-color-forest-green);
  }
  .cd-step-label-active {
    color: var(--cd-color-shark);
  }
  .cd-step-label-pending {
    color: var(--cd-text-secondary);
  }
  .cd-step-label-mobile-hidden {
    display: none;
  }
  @media (min-width: 640px) {
    .cd-step-label-mobile-hidden {
      display: block;
    }
  }
  .cd-wizard-header-mobile-steps {
    gap: 0.25rem;
  }
  @media (min-width: 640px) {
    .cd-wizard-header-mobile-steps {
      gap: 0.75rem;
    }
  }
  .cd-wizard-section-title {
    font-weight: 600;
    color: var(--cd-text-primary);
    font-size: var(--cd-text-lg);
    margin-bottom: var(--cd-space-4);
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
  }
  .cd-wizard-form.htmx-request .cd-btn-wizard:disabled {
    position: relative;
    color: transparent;
  }
  .cd-wizard-form.htmx-request .cd-btn-wizard:disabled::after {
    content: '';
    position: absolute;
    width: var(--cd-space-4);
    height: var(--cd-space-4);
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: var(--cd-radius-full);
    animation: spin 1s linear infinite;
    top: 50%;
    left: 50%;
    margin-left: calc(-1 * var(--cd-space-2));
    margin-top: calc(-1 * var(--cd-space-2));
    color: white;
  }
  .cd-wizard-progress-bar-track {
    height: 0.5rem;
    background-color: var(--cd-border-primary);
    border-radius: var(--cd-radius-full);
    overflow: hidden;
  }
  .cd-wizard-progress-bar-fill {
    height: 100%;
    background-color: var(--cd-color-forest-green);
    border-radius: var(--cd-radius-full);
    transition: width 0.4s ease;
    min-width: 0.5rem;
  }
  @media (max-width: 640px) {
    .cd-btn-wizard {
      width: 100%;
    }
  }
}
@layer components {
  .cd-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-6);
    padding: var(--cd-space-6);
    border-radius: var(--cd-radius-xl);
    background: var(--cd-bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-card) 80%, transparent);
    }
    backdrop-filter: blur(8px);
    border: 1px solid var(--cd-border-primary);
  }
  .cd-form-section:hover {
    border-color: var(--cd-border-primary);
    box-shadow: none;
  }
  .cd-form-section-title {
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: 0.25rem;
    font-size: var(--cd-text-lg);
  }
  @media (max-width: 639px) {
    .cd-wizard-step-card .cd-conversation-header {
      padding: 0.5rem 0.75rem;
    }
    .cd-wizard-step-card .cd-notice-box {
      padding: var(--cd-space-3);
      gap: var(--cd-space-2);
    }
  }
}
@layer components {
  .cd-questionnaire-question {
    width: 100%;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  }
  .cd-question-input {
    margin-top: var(--cd-space-2);
  }
  .cd-radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    border: 1px solid var(--cd-border-primary);
    cursor: pointer;
    transition: all 200ms;
  }
  .cd-radio-option:hover {
    border-color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 3%, transparent);
    }
  }
  .cd-radio-option-large {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3) var(--cd-space-4);
    border-radius: var(--cd-radius-lg);
    border: 1px solid var(--cd-border-primary);
    cursor: pointer;
    transition: all 300ms;
    background: var(--cd-bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-card) 95%, transparent);
    }
  }
  .cd-radio-option-large:hover {
    border-color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
  }
  .cd-checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    border: 1px solid var(--cd-border-primary);
    cursor: pointer;
    transition: all 200ms;
  }
  .cd-checkbox-option:hover {
    border-color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 3%, transparent);
    }
  }
  .cd-checkbox-option-large {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3) var(--cd-space-4);
    border-radius: var(--cd-radius-lg);
    border: 1px solid var(--cd-border-primary);
    cursor: pointer;
    transition: all 300ms;
    background: var(--cd-bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-card) 95%, transparent);
    }
  }
  .cd-checkbox-option-large:hover {
    border-color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
  }
  .cd-radio-label, .cd-checkbox-label {
    flex: 1;
    color: var(--cd-text-primary);
    font-weight: 500;
  }
  .cd-question-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cd-space-2);
  }
  @media (min-width: 1280px) {
    .cd-question-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .cd-question-card-icon-tile {
    width: 100%;
    max-width: 128px;
    aspect-ratio: 1;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cd-question-card-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cd-question-card-icon-tile picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .cd-question-card-icon-empty {
    opacity: 0.7;
  }
  .cd-question-card-label {
    font-size: var(--cd-text-base);
    font-weight: 500;
    line-height: 1.3;
    color: var(--cd-text-primary);
    text-align: center;
  }
  .cd-question-card-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
  }
  .cd-wizard-card .cd-radio-text-input, .cd-wizard-card .cd-checkbox-text-input, .cd-wizard-card .cd-select-text-input {
    width: 100%;
    margin-top: var(--cd-space-3);
    padding: var(--cd-space-3);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 4%, transparent);
    }
    border: none;
    border-top: 1px solid var(--cd-border-primary);
    border-radius: 0;
  }
  .cd-wizard-card .cd-radio-text-input input, .cd-wizard-card .cd-checkbox-text-input input, .cd-wizard-card .cd-select-text-input input {
    background: var(--cd-bg-card);
  }
  .cd-question-fade-out {
    opacity: 0;
  }
  .cd-question-slide-left {
    transform: translateX(-20px);
  }
  .cd-question-slide-right {
    transform: translateX(20px);
  }
  .cd-question-fade-in {
    animation: questionFadeIn 0.3s ease-out forwards;
  }
  .cd-question-slide-from-right {
    animation: questionSlideFromRight 0.3s ease-out forwards;
  }
  .cd-question-slide-from-left {
    animation: questionSlideFromLeft 0.3s ease-out forwards;
  }
  @keyframes questionFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes questionSlideFromRight {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes questionSlideFromLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .cd-question-progress {
    margin-bottom: var(--cd-space-4);
  }
  .cd-question-progress-bar {
    height: 0.5rem;
    background-color: var(--cd-bg-tertiary);
    border-radius: var(--cd-radius-full);
    overflow: hidden;
  }
  .cd-question-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cd-color-primary), var(--cd-color-accent));
    border-radius: var(--cd-radius-full);
    transition: width 0.3s ease-out;
  }
  .cd-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--cd-bg-tertiary) !important;
    color: var(--cd-text-tertiary) !important;
  }
  .cd-question-counter {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-question-counter-current {
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-question-wizard {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .cd-question-wizard {
      display: flex;
      flex-direction: column;
    }
  }
  .cd-number-stepper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--cd-space-6);
  }
  .cd-number-stepper-btn {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cd-radius-xl);
    border: 2px solid var(--cd-border-primary);
    background: var(--cd-bg-primary);
    color: var(--cd-text-primary);
    font-size: var(--cd-text-xl);
    cursor: pointer;
    transition: all 200ms;
    user-select: none;
  }
  .cd-number-stepper-btn:hover:not(:disabled) {
    border-color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
  }
  .cd-number-stepper-btn:active:not(:disabled) {
    transform: scale(0.95);
  }
  .cd-number-stepper-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .cd-number-stepper-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    min-width: 3rem;
    text-align: center;
    user-select: none;
    cursor: pointer;
    border-radius: var(--cd-radius-md);
    padding: var(--cd-space-1) var(--cd-space-2);
    transition: background-color 200ms;
    border-bottom: 2px dashed var(--cd-border-primary);
    position: relative;
  }
  .cd-number-stepper-value:hover {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    border-bottom-color: var(--cd-color-primary);
  }
  .cd-number-stepper-value:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-number-stepper-edit-icon {
    font-size: 0.65rem;
    position: absolute;
    top: 2px;
    right: -2px;
    color: var(--cd-text-tertiary);
    opacity: 0;
    transition: opacity 200ms;
  }
  .cd-number-stepper-value:hover .cd-number-stepper-edit-icon {
    opacity: 1;
  }
  .cd-number-stepper-unit {
    font-size: 1rem;
    font-weight: 500;
    color: var(--cd-text-tertiary);
    margin-left: var(--cd-space-2);
  }
  .cd-number-stepper-input {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    text-align: center;
    width: 7rem;
    border: 2px solid var(--cd-color-primary);
    border-radius: var(--cd-radius-md);
    background: var(--cd-bg-primary);
    padding: var(--cd-space-1) var(--cd-space-2);
    outline: none;
  }
}
@layer components {
  .cd-review-section {
    padding: var(--cd-space-6);
    border-radius: var(--cd-radius-xl);
    background: var(--cd-bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-card) 80%, transparent);
    }
    border: 1px solid var(--cd-border-primary);
  }
  .cd-review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--cd-space-4);
    padding-bottom: var(--cd-space-3);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-review-title {
    font-weight: 600;
    color: var(--cd-text-primary);
    font-size: var(--cd-text-lg);
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
  }
  .cd-review-edit-btn {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    padding: var(--cd-space-2) var(--cd-space-4);
    border-radius: var(--cd-radius-lg);
    border: 1px solid var(--cd-border-primary);
    background: linear-gradient(135deg, var(--cd-bg-secondary), var(--cd-bg-tertiary));
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 300ms;
    text-decoration: none;
  }
  .cd-review-edit-btn:hover {
    border-color: var(--cd-color-primary);
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 10%, transparent), color-mix(in srgb, var(--cd-color-primary) 15%, transparent));
    }
    color: var(--cd-color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 2px 8px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-review-edit-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 4px color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
  }
  .cd-review-content {
    color: var(--cd-text-primary);
  }
  .cd-review-label {
    font-weight: 500;
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-sm);
    margin-bottom: var(--cd-space-1);
  }
  .cd-review-value {
    color: var(--cd-text-primary);
    font-size: var(--cd-text-base);
  }
  .cd-review-hierarchy {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    flex-wrap: wrap;
  }
  .cd-review-hierarchy-item {
    display: flex;
    align-items: center;
    gap: var(--cd-space-1);
    padding: var(--cd-space-1) var(--cd-space-3);
    border-radius: var(--cd-radius-md);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    color: var(--cd-color-primary);
    font-weight: 500;
    font-size: var(--cd-text-sm);
  }
  .cd-review-hierarchy-arrow {
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-sm);
  }
  .cd-review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-space-4);
  }
  @media (min-width: 768px) {
    .cd-review-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .cd-review-question {
    padding: var(--cd-space-3);
    border-left: 3px solid var(--cd-color-accent);
    background: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-secondary) 50%, transparent);
    }
    border-radius: 0 var(--cd-radius-lg) var(--cd-radius-lg) 0;
  }
  .cd-review-question-label {
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-1);
    font-size: var(--cd-text-sm);
  }
  .cd-review-question-answer {
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-sm);
    line-height: 1.5;
  }
  .cd-review-section-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, var(--cd-color-primary), var(--cd-color-accent));
    color: var(--cd-text-on-primary);
    font-size: var(--cd-text-sm);
  }
  .cd-review-section-icon-large {
    width: 4rem;
    height: 4rem;
    border-radius: var(--cd-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, var(--cd-color-primary), var(--cd-color-accent));
    color: var(--cd-text-on-primary);
    font-size: var(--cd-text-2xl);
    margin: 0 auto var(--cd-space-4);
  }
  .cd-review-page-title {
    font-size: var(--cd-text-2xl);
    font-weight: 700;
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-2);
  }
  .cd-review-page-subtitle {
    font-size: var(--cd-text-lg);
    color: var(--cd-text-secondary);
  }
  .cd-review-section-title {
    font-weight: 600;
    color: var(--cd-text-primary);
    font-size: var(--cd-text-base);
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
  }
  .cd-urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-2_5) var(--cd-space-3);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 600;
    transition: var(--cd-transition);
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }
  .cd-urgency-badge.high {
    background: linear-gradient(135deg, var(--cd-color-error), var(--cd-color-error) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-error), color-mix(in srgb, var(--cd-color-error) 85%, black) );
    }
    color: var(--cd-text-on-dark);
    border-color: var(--cd-color-error);
    box-shadow: 0 2px 4px var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 2px 4px color-mix(in srgb, var(--cd-color-error) 25%, transparent);
    }
  }
  .cd-urgency-badge.medium {
    background: linear-gradient(135deg, var(--cd-color-warning), var(--cd-color-warning) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-warning), color-mix(in srgb, var(--cd-color-warning) 85%, black) );
    }
    color: var(--cd-text-on-dark);
    border-color: var(--cd-color-warning);
    box-shadow: 0 2px 4px var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 2px 4px color-mix(in srgb, var(--cd-color-warning) 25%, transparent);
    }
  }
  .cd-urgency-badge.low {
    background: linear-gradient(135deg, var(--cd-color-success), var(--cd-color-success) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-success), color-mix(in srgb, var(--cd-color-success) 85%, black) );
    }
    color: var(--cd-text-on-dark);
    border-color: var(--cd-color-success);
    box-shadow: 0 2px 4px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 2px 4px color-mix(in srgb, var(--cd-color-success) 25%, transparent);
    }
  }
  .cd-urgency-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 8px color-mix(in srgb, currentColor 30%, transparent);
    }
  }
  .cd-urgency-badge i {
    font-size: var(--cd-text-xs);
    opacity: 0.9;
  }
  .cd-budget-amount {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1);
    font-size: var(--cd-text-lg);
    font-weight: 600;
  }
  .cd-budget-amount.minimum {
    color: var(--cd-color-emerald);
  }
  .cd-budget-amount.maximum {
    color: var(--cd-color-science-blue);
  }
  .cd-budget-range-display {
    margin-top: var(--cd-space-4);
    padding: var(--cd-space-4);
    background: linear-gradient(135deg, var(--cd-color-emerald), var(--cd-color-science-blue));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-emerald) 5%, transparent), color-mix(in srgb, var(--cd-color-science-blue) 5%, transparent));
    }
    border-radius: var(--cd-radius-lg);
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    text-align: center;
  }
  .cd-budget-range-display .cd-review-value {
    font-size: var(--cd-text-xl);
    font-weight: 700;
    color: var(--cd-text-primary);
  }
  .cd-notice-box {
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-6);
    display: flex;
    gap: var(--cd-space-4);
  }
  .cd-notice-info {
    background: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-science-blue) 5%, transparent);
    }
    border: 1px solid var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-science-blue) 20%, transparent);
    }
  }
  .cd-notice-warning {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 5%, transparent);
    }
    border: 1px solid var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
  }
  .cd-notice-warning .cd-notice-icon {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 10%, transparent);
    }
    color: var(--cd-color-warning);
  }
  .cd-permit-note {
    background: var(--cd-bg-secondary);
    border-left: 2px solid var(--cd-color-primary);
    border-radius: 0 var(--cd-radius-md) var(--cd-radius-md) 0;
    padding: var(--cd-space-3) var(--cd-space-4);
  }
  .cd-permit-note-header {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    margin-bottom: var(--cd-space-1);
  }
  .cd-permit-note-icon {
    color: var(--cd-color-primary);
    font-size: 0.875rem;
  }
  .cd-permit-note-title {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-permit-note-body {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    margin: 0 0 var(--cd-space-2) 0;
    line-height: 1.5;
  }
  .cd-permit-note-link {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1);
    font-size: var(--cd-text-sm);
    font-weight: 500;
    color: var(--cd-color-primary);
  }
  .cd-permit-note-link:hover {
    text-decoration: underline;
  }
  .cd-permit-note-link i {
    font-size: 0.75rem;
  }
  .cd-permit-note-hint {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
    margin: 0;
  }
  .cd-notice-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cd-color-science-blue);
    color: var(--cd-text-on-primary);
    flex-shrink: 0;
  }
  .cd-notice-content {
    flex: 1;
  }
  .cd-notice-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--cd-text-primary);
  }
  .cd-notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
    space-y: var(--cd-space-1);
  }
  .cd-notice-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-2);
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-sm);
    margin-bottom: var(--cd-space-1);
  }
  .cd-image-preview-item {
    transition: all 300ms ease;
  }
  .cd-image-preview-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-image-preview-item img {
    transition: all 300ms ease;
  }
  .cd-image-preview-item:hover img {
    transform: scale(1.02);
  }
  .cd-image-preview-item .text-center {
    background: linear-gradient(135deg, var(--cd-bg-secondary), var(--cd-bg-tertiary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-bg-secondary) 50%, transparent), color-mix(in srgb, var(--cd-bg-tertiary) 30%, transparent));
    }
  }
  @media (max-width: 640px) {
    .cd-review-section {
      padding: var(--cd-space-4);
    }
    .cd-notice-box {
      padding: var(--cd-space-4);
      flex-direction: row;
      text-align: left;
    }
    .cd-notice-icon {
      align-self: flex-start;
    }
  }
}
@layer components {
  .cd-service-task-card {
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-3);
    cursor: pointer;
    transition: all 300ms;
    background: linear-gradient(135deg, var(--cd-bg-card) 0%, var(--cd-bg-secondary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-bg-card) 95%, transparent) 0%, color-mix(in srgb, var(--cd-bg-secondary) 95%, transparent) 100%);
    }
    border: 2px solid var(--cd-border-primary);
  }
  @media (hover: hover) {
    .cd-service-task-card:hover {
      border-color: var(--cd-color-primary);
      box-shadow: 0 4px 20px var(--cd-color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
      }
      transform: translateY(-1px);
    }
  }
  .cd-service-task-card-selected {
    border-color: var(--cd-color-primary);
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 8%, transparent) 0%, color-mix(in srgb, var(--cd-color-primary) 12%, transparent) 100%);
    }
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
    transform: translateY(-1px);
  }
  .cd-service-task-any-option {
    background: linear-gradient(135deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-accent) 5%, transparent) 0%, color-mix(in srgb, var(--cd-color-accent) 10%, transparent) 100%);
    }
    border: 2px dashed var(--cd-color-accent);
  }
  .cd-service-task-any-option:hover {
    border-color: var(--cd-color-accent);
    background: linear-gradient(135deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-accent) 10%, transparent) 0%, color-mix(in srgb, var(--cd-color-accent) 15%, transparent) 100%);
    }
    box-shadow: 0 4px 20px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
  }
  .cd-service-task-any-option.cd-service-task-card-selected {
    border-style: solid;
    background: linear-gradient(135deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-accent) 15%, transparent) 0%, color-mix(in srgb, var(--cd-color-accent) 20%, transparent) 100%);
    }
  }
  .cd-service-task-badge {
    position: absolute;
    top: var(--cd-space-3);
    right: var(--cd-space-3);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary);
  }
  .cd-service-task-card-selected .cd-service-task-badge {
    background: var(--cd-color-success);
    color: var(--cd-text-on-primary);
  }
  .cd-service-task-content {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-1);
  }
  .cd-service-task-name {
    font-weight: 600;
    color: var(--cd-text-primary);
    font-size: var(--cd-text-base);
  }
  .cd-service-task-description {
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-sm);
    line-height: 1.5;
  }
  .cd-service-task-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    background: linear-gradient(to bottom right, var(--cd-bg-secondary), var(--cd-bg-tertiary));
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-lg);
  }
  .cd-service-task-card:hover .cd-service-task-icon, .cd-service-task-card-selected .cd-service-task-icon {
    background: linear-gradient(to bottom right, var(--cd-color-primary), var(--cd-color-accent));
    color: var(--cd-text-on-primary);
  }
  .cd-service-task-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-2);
    margin-top: var(--cd-space-2);
  }
  .cd-benefit-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--cd-radius-md);
    font-size: var(--cd-text-xs);
    font-weight: 500;
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 10%, transparent);
    }
    color: var(--cd-color-accent);
    border: 1px solid var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
  }
  .cd-service-task-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-2);
    margin-top: var(--cd-space-2);
  }
  .cd-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--cd-radius-md);
    font-size: var(--cd-text-xs);
    font-weight: 500;
    background: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-science-blue) 10%, transparent);
    }
    color: var(--cd-color-science-blue);
    border: 1px solid var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-science-blue) 20%, transparent);
    }
  }
  .cd-feature-questionnaire {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 10%, transparent);
    }
    color: var(--cd-color-warning);
    border-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
  }
  .cd-budget-decision-card {
    position: relative;
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-2);
    cursor: pointer;
    transition: all 300ms;
    background: linear-gradient( 135deg, var(--cd-bg-card) 0%, var(--cd-bg-secondary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, color-mix(in srgb, var(--cd-bg-card) 95%, transparent) 0%, color-mix(in srgb, var(--cd-bg-secondary) 95%, transparent) 100% );
    }
    border: 2px solid var(--cd-border-primary);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (hover: hover) {
    .cd-budget-decision-card:hover {
      border-color: var(--cd-color-primary);
      box-shadow: 0 4px 20px var(--cd-color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
      }
      transform: translateY(-2px);
    }
  }
  .cd-budget-decision-card-selected {
    border-color: var(--cd-color-primary);
    background: linear-gradient( 135deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, color-mix(in srgb, var(--cd-color-primary) 8%, transparent) 0%, color-mix(in srgb, var(--cd-color-primary) 12%, transparent) 100% );
    }
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
    transform: translateY(-2px);
  }
  .cd-budget-decision-badge {
    position: absolute;
    top: var(--cd-space-3);
    right: var(--cd-space-3);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-sm);
  }
  .cd-budget-decision-card-selected .cd-budget-decision-badge {
    background: var(--cd-color-success);
    color: var(--cd-text-on-primary);
  }
  .cd-budget-decision-icon {
    width: 5rem;
    height: 5rem;
    border-radius: var(--cd-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, var(--cd-bg-secondary), var(--cd-bg-tertiary));
    color: var(--cd-text-secondary);
    transition: all 300ms;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .cd-budget-decision-card:hover .cd-budget-decision-icon, .cd-budget-decision-card-selected .cd-budget-decision-icon {
    background: linear-gradient(to bottom right, var(--cd-color-primary), var(--cd-color-accent));
    color: var(--cd-text-on-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }
  .cd-budget-decision-title {
    color: var(--cd-text-primary);
    transition: color 300ms;
  }
  .cd-budget-decision-card-selected .cd-budget-decision-title {
    color: var(--cd-color-primary);
  }
  .cd-budget-decision-description {
    color: var(--cd-text-secondary);
    line-height: 1.5;
  }
  @media (max-width: 640px) {
    .cd-budget-decision-card {
      min-height: auto;
      align-items: flex-start;
      justify-content: flex-start;
    }
    .cd-budget-decision-icon {
      width: 3rem;
      height: 3rem;
    }
  }
}
@layer components {
  .cd-wizard-submit-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overscroll-behavior: contain;
    touch-action: none;
  }
  .cd-wizard-submit-loading-backdrop {
    position: absolute;
    inset: 0;
    background: var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-primary) 85%, transparent);
    }
    backdrop-filter: blur(8px);
  }
  .cd-wizard-submit-loading-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--cd-space-8);
    max-width: 420px;
    width: 90%;
  }
  .cd-wizard-submit-loading-image {
    width: 180px;
    height: auto;
    margin-bottom: var(--cd-space-6);
    animation: gentleBounce 3s ease-in-out infinite;
  }
  @keyframes gentleBounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }
  .cd-wizard-submit-loading-title {
    font-size: var(--cd-text-xl);
    font-weight: 700;
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-6);
  }
  .cd-wizard-submit-loading-steps {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
    width: 100%;
    margin-bottom: var(--cd-space-6);
  }
  .cd-wizard-submit-loading-step {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3) var(--cd-space-4);
    border-radius: var(--cd-radius-lg);
    background: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-primary);
    transition: all 300ms ease;
  }
  .cd-wizard-submit-loading-step.active {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    border-color: var(--cd-color-primary);
  }
  .cd-wizard-submit-loading-step.complete {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 8%, transparent);
    }
    border-color: var(--cd-color-success);
  }
  .cd-wizard-submit-loading-step-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cd-wizard-submit-loading-step-icon i {
    font-size: var(--cd-text-base);
    color: var(--cd-text-tertiary);
    transition: color 300ms ease;
  }
  .cd-wizard-submit-loading-step.active .cd-wizard-submit-loading-step-icon i {
    color: var(--cd-color-primary);
  }
  .cd-wizard-submit-loading-step.complete .cd-wizard-submit-loading-step-icon i {
    color: var(--cd-color-success);
  }
  .cd-wizard-submit-loading-step span {
    font-size: var(--cd-text-sm);
    font-weight: 500;
    color: var(--cd-text-secondary);
    transition: color 300ms ease;
  }
  .cd-wizard-submit-loading-step.active span {
    color: var(--cd-text-primary);
  }
  .cd-wizard-submit-loading-step.complete span {
    color: var(--cd-color-success);
  }
  .cd-wizard-submit-loading-message {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-tertiary);
    margin: 0;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-backdrop {
    background: radial-gradient(circle at 50% 18%, var(--cd-color-primary), transparent 30%), var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--cd-color-primary) 12%, transparent), transparent 30%), color-mix(in srgb, var(--cd-bg-primary) 88%, transparent);
    }
    backdrop-filter: blur(12px);
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-content {
    padding: 28px;
    max-width: 560px;
    width: min(92vw, 560px);
    background: var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-primary) 96%, transparent);
    }
    border: 1px solid var(--cd-border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-border-primary) 84%, transparent);
    }
    border-radius: 20px;
    box-shadow: 0 24px 70px rgb(15 23 42 / 0.18);
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-image {
    width: 128px;
    margin-bottom: var(--cd-space-4);
    filter: drop-shadow(0 12px 22px rgb(15 23 42 / 0.10));
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-title {
    font-size: var(--cd-text-2xl);
    line-height: 1.18;
    font-weight: 750;
    margin: 0 0 var(--cd-space-6);
    letter-spacing: 0;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-steps {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
    isolation: isolate;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-steps::before, .cd-wv2-submit-loading .cd-wizard-submit-loading-steps::after {
    content: "";
    position: absolute;
    top: 17px;
    left: calc((100% / var(--wv2-submit-step-count, 4)) / 2);
    right: calc((100% / var(--wv2-submit-step-count, 4)) / 2);
    height: 3px;
    border-radius: var(--cd-radius-full);
    pointer-events: none;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-steps::before {
    z-index: 0;
    background: var(--cd-bg-tertiary);
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-steps::after {
    z-index: 1;
    background: linear-gradient(90deg, var(--cd-color-success), var(--cd-color-primary));
    transform: scaleX(var(--wv2-submit-progress-scale, 0));
    transform-origin: left center;
    transition: transform 360ms ease;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-step {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
    padding: 0 6px;
    background: transparent;
    border: 0;
    border-radius: 0;
    transition: color 300ms ease;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-step.active, .cd-wv2-submit-loading .cd-wizard-submit-loading-step.complete {
    background: transparent;
    border-color: transparent;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-step-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--cd-radius-full);
    background: var(--cd-bg-primary);
    border: 2px solid var(--cd-border-primary);
    color: var(--cd-text-tertiary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 6px var(--cd-bg-primary);
    transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease, transform 260ms ease;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-step-icon i {
    color: currentColor;
    font-size: 13px;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-step.active .cd-wizard-submit-loading-step-icon {
    background: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
    color: var(--cd-color-white, #fff);
    transform: scale(1.06);
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-step.active .cd-wizard-submit-loading-step-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: var(--cd-radius-full);
    border: 2px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--cd-color-primary) 28%, transparent);
    }
    animation: wizardSubmitStepPulse 1.4s ease-in-out infinite;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-step.complete .cd-wizard-submit-loading-step-icon {
    background: var(--cd-color-success);
    border-color: var(--cd-color-success);
    color: var(--cd-color-white, #fff);
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-step span {
    max-width: 118px;
    min-height: 34px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    text-wrap: balance;
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-step.complete span {
    color: var(--cd-text-primary);
  }
  .cd-wv2-submit-loading .cd-wizard-submit-loading-message {
    width: 100%;
    padding-top: var(--cd-space-4);
    border-top: 1px solid var(--cd-border-primary);
  }
  @media (max-width: 520px) {
    .cd-wv2-submit-loading .cd-wizard-submit-loading-content {
      padding: 24px 16px;
      border-radius: 16px;
    }
    .cd-wv2-submit-loading .cd-wizard-submit-loading-image {
      width: 104px;
    }
    .cd-wv2-submit-loading .cd-wizard-submit-loading-steps::before, .cd-wv2-submit-loading .cd-wizard-submit-loading-steps::after {
      top: 15px;
    }
    .cd-wv2-submit-loading .cd-wizard-submit-loading-step {
      padding: 0 3px;
      gap: 8px;
    }
    .cd-wv2-submit-loading .cd-wizard-submit-loading-step-icon {
      width: 32px;
      height: 32px;
      box-shadow: 0 0 0 4px var(--cd-bg-primary);
      font-size: 12px;
    }
    .cd-wv2-submit-loading .cd-wizard-submit-loading-step span {
      max-width: 86px;
      font-size: 11px;
    }
  }
  @keyframes wizardSubmitStepPulse {
    0%, 100% {
      opacity: 0.32;
      transform: scale(0.92);
    }
    50% {
      opacity: 0.72;
      transform: scale(1.08);
    }
  }
  .cd-guest-modal-illustration {
    display: flex;
    justify-content: center;
    margin-bottom: var(--cd-space-3);
  }
  .cd-guest-modal-illustration img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgb(0 0 0 / 0.08));
  }
  .cd-guest-modal-icon-circle {
    margin: 0 auto var(--cd-space-3);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cd-bg-secondary);
  }
  .cd-guest-modal-icon-circle.is-info {
    color: var(--cd-color-science-blue);
  }
  .cd-guest-modal-icon-circle.is-warning {
    color: var(--cd-color-warning);
  }
  .cd-guest-modal-icon-circle.is-danger {
    color: var(--cd-color-error);
  }
  .cd-guest-modal-icon-circle i {
    font-size: 1.25rem;
  }
}
@layer components {
  .cd-slide-enter {
    transition: all 500ms ease-out;
  }
  .cd-slide-enter-start {
    opacity: 0;
    transform: translateY(2rem);
  }
  .cd-slide-enter-end {
    opacity: 1;
    transform: translateY(0);
  }
  .cd-badge-pulse {
    animation: badgePulse 2s ease-in-out infinite;
  }
  @keyframes badgePulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
}
@layer components {
  @media (prefers-reduced-motion: reduce) {
    .cd-wizard-step, .cd-wizard-content, .cd-profession-card, .cd-profession-icon-box, .cd-province-card, .cd-image-preview-item, .cd-image-preview-item img, .cd-service-task-card, .cd-service-task-icon, .cd-benefit-tag, .cd-feature-tag {
      transition: none !important;
    }
    .cd-profession-card:hover, .cd-image-preview-item:hover, .cd-image-preview-item:hover img {
      transform: none !important;
    }
    .cd-wizard-step.cd-step-active, .cd-wizard-step.cd-step-completed {
      opacity: 1 !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-questionnaire-question {
      transition: none !important;
    }
    .cd-question-fade-out, .cd-question-fade-in, .cd-question-slide-from-right, .cd-question-slide-from-left {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .cd-question-progress-fill {
      transition: none !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-wizard-submit-loading-image {
      animation: none;
    }
    .cd-wizard-submit-loading-step {
      transition: none;
    }
    .cd-wizard-submit-loading-step-icon, .cd-wizard-submit-loading-step-icon i, .cd-wizard-submit-loading-step.active .cd-wizard-submit-loading-step-icon::after, .cd-wizard-submit-loading-steps::after {
      animation: none;
      transition: none;
    }
    .cd-wizard-submit-loading-step span {
      transition: none;
    }
  }
}
@layer components {
  .cd-icon-tile {
    background: transparent;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }
  .cd-icon-tile img {
    width: 82%;
    height: 82%;
    object-fit: contain;
  }
  .cd-icon-tile.tile-xs {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .cd-icon-tile.tile-sm {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }
  .cd-icon-tile.tile-card {
    width: 56px;
    height: 56px;
    border-radius: 12px;
  }
  .cd-icon-tile.tile-md {
    width: 72px;
    height: 72px;
    border-radius: 14px;
  }
  .cd-icon-tile.tile-lg {
    width: 112px;
    height: 112px;
    border-radius: 18px;
  }
  .cd-icon-tile.tile-xl {
    width: 160px;
    height: 160px;
    border-radius: 22px;
  }
  .cd-icon-tile .cd-icon-glyph {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-icon-tile.tile-xs .cd-icon-glyph {
    font-size: 20px;
  }
  .cd-icon-tile.tile-sm .cd-icon-glyph {
    font-size: 28px;
  }
  .cd-icon-tile.tile-card .cd-icon-glyph {
    font-size: 34px;
  }
  .cd-icon-tile.tile-md .cd-icon-glyph {
    font-size: 44px;
  }
  .cd-icon-tile.tile-lg .cd-icon-glyph {
    font-size: 72px;
  }
  .cd-icon-tile.tile-xl .cd-icon-glyph {
    font-size: 108px;
  }
  .cd-icon-naked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cd-icon-naked img {
    object-fit: contain;
  }
  .cd-icon-naked.naked-md img {
    width: 80px;
    height: 80px;
  }
  .cd-icon-naked.naked-lg img {
    width: 120px;
    height: 120px;
  }
  .cd-icon-naked.naked-xl img {
    width: 160px;
    height: 160px;
  }
}
@layer components {
  .cd-trade-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cd-space-3, 0.75rem);
    width: 100%;
    padding: 0.8rem 1rem;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-xl, 1rem);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  }
  .cd-trade-option:hover {
    transform: translateY(-1px);
    border-color: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--cd-color-science-blue) 45%, var(--cd-border-primary) );
    }
    box-shadow: 0 8px 22px -16px rgb(0 0 0 / 0.4);
  }
  .cd-trade-option:has(input:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-bg-primary), 0 0 0 4px var(--cd-color-science-blue);
  }
  .cd-trade-option.is-selected {
    border-color: var(--cd-color-science-blue);
    box-shadow: inset 0 0 0 1px var(--cd-color-science-blue);
    background-color: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix( in srgb, var(--cd-color-science-blue) 6%, var(--cd-bg-primary) );
    }
  }
  .cd-trade-option.is-selected:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px var(--cd-color-science-blue);
  }
  .cd-trade-option__name {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-trade-option__check {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: var(--cd-radius-full, 9999px);
    background-color: var(--cd-color-science-blue);
    color: #fff;
    font-size: 0.72rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .cd-trade-option.is-selected .cd-trade-option__check {
    opacity: 1;
    transform: scale(1);
  }
}
@layer components {
  .cd-svc-selector {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .cd-svc-search {
    position: relative;
  }
  .cd-svc-search__icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--cd-text-tertiary);
    pointer-events: none;
  }
  .cd-svc-search__input {
    width: 100%;
    padding: 0.55rem 0.85rem 0.55rem 2.25rem;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-lg, 0.5rem);
    color: var(--cd-text-primary);
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-svc-search__input::placeholder {
    color: var(--cd-text-tertiary);
  }
  .cd-svc-search__input:focus {
    outline: none;
    border-color: var(--cd-color-science-blue);
    box-shadow: 0 0 0 3px var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-science-blue) 18%, transparent);
    }
  }
  .cd-svc-selected {
    min-height: 2.75rem;
    padding: 0.6rem 0.7rem;
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-hairline, var(--cd-border-primary));
    border-radius: var(--cd-radius-lg, 0.5rem);
  }
  .cd-svc-selected__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
  }
  .cd-svc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem 0.25rem 0.7rem;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-full, 9999px);
    color: var(--cd-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .cd-svc-chip__remove {
    display: grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: var(--cd-radius-full, 9999px);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--cd-text-tertiary);
    font-size: 0.7rem;
    transition: color 0.15s ease, background-color 0.15s ease;
  }
  .cd-svc-chip__remove:hover {
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-tertiary);
  }
  .cd-svc-grid-wrap {
    max-height: 18rem;
    overflow-y: auto;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-lg, 0.5rem);
  }
  .cd-svc-grid {
    padding: 0.375rem;
  }
  .cd-svc-group + .cd-svc-group {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--cd-border-hairline, var(--cd-border-primary));
  }
  .cd-svc-group__header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.5rem 0.15rem;
  }
  .cd-svc-group__icon {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: var(--cd-radius-md, 0.375rem);
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 0.72rem;
  }
  .cd-svc-group__img {
    width: 1.05rem;
    height: 1.05rem;
    object-fit: contain;
  }
  .cd-svc-kicker {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary);
  }
  .cd-svc-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cd-space-3, 0.75rem);
    width: 100%;
    padding: 0.3rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--cd-radius-md, 0.375rem);
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  }
  .cd-svc-option:hover {
    background-color: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix( in srgb, var(--cd-color-science-blue) 5%, var(--cd-bg-primary) );
    }
  }
  .cd-svc-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-bg-primary), 0 0 0 4px var(--cd-color-science-blue);
  }
  .cd-svc-option.is-selected {
    background-color: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix( in srgb, var(--cd-color-science-blue) 6%, var(--cd-bg-primary) );
    }
  }
  .cd-svc-option__name {
    flex: 1 1 auto;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cd-text-primary);
  }
  .cd-svc-option__check {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: var(--cd-radius-full, 9999px);
    background-color: var(--cd-color-science-blue);
    color: #fff;
    font-size: 0.62rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .cd-svc-option.is-selected .cd-svc-option__check {
    opacity: 1;
    transform: scale(1);
  }
  .cd-svc-empty {
    display: block;
    padding: 0.35rem 0.25rem;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--cd-text-tertiary);
  }
}
@layer components {
  .cd-wv2-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 16px 80px;
  }
  @media (min-width: 768px) {
    .cd-wv2-container {
      padding: 40px 32px 120px;
    }
  }
  .cd-wv2-frame {
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--cd-shadow-lg);
  }
  @media (max-width: 640px) {
    .cd-wv2-container {
      padding: 12px 0 64px;
    }
    .cd-wv2-frame {
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
  }
  .cd-wv2-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--cd-bg-primary);
    border-bottom: 1px solid var(--cd-border-primary, #e5e5e7);
    flex-wrap: wrap;
  }
  @media (max-width: 640px) {
    .cd-wv2-header {
      padding: 10px 14px;
    }
  }
  .cd-wv2-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--cd-bg-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary, #9ca3af);
    flex-shrink: 0;
    text-decoration: none;
    transition: var(--cd-transition);
  }
  .cd-wv2-close-btn:hover {
    background: var(--cd-bg-tertiary);
    color: var(--cd-text-primary);
  }
  .cd-wv2-exit-modal-shell .cd-modal-content {
    max-width: 31rem;
  }
  .cd-wv2-exit-modal-shell .cd-modal-header {
    padding: 24px 28px 20px;
  }
  .cd-wv2-exit-modal-shell .cd-modal-title {
    font-family: var(--cd-font-primary);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
  }
  .cd-wv2-exit-modal-shell .cd-modal-body {
    padding: 24px 28px 26px;
  }
  .cd-wv2-exit-modal-shell .cd-modal-footer {
    padding: 18px 28px;
    background: var(--cd-bg-secondary);
  }
  .cd-wv2-exit-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cd-wv2-exit-modal__intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .cd-wv2-exit-modal__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary, #8b949e);
    font-size: 17px;
    flex-shrink: 0;
  }
  .cd-wv2-exit-modal__copy {
    min-width: 0;
  }
  .cd-wv2-exit-modal__lead {
    color: var(--cd-text-primary);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.45;
    margin: 0 0 4px;
  }
  .cd-wv2-exit-modal__sub {
    color: var(--cd-text-secondary);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
  }
  .cd-wv2-exit-modal__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
  }
  .cd-wv2-exit-modal__note i {
    color: var(--cd-text-tertiary, #8b949e);
    margin-top: 2px;
  }
  .cd-wv2-exit-modal__error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-error) 8%, var(--cd-bg-primary));
    }
    color: var(--cd-color-error);
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-error) 32%, var(--cd-border-primary, #e5e5e7));
    }
  }
  .cd-wv2-exit-modal__error i {
    margin-top: 2px;
  }
  .cd-wv2-exit-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
  }
  .cd-wv2-exit-modal__actions .cd-btn {
    white-space: nowrap;
  }
  .cd-wv2-exit-modal__clear {
    background: transparent;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    color: var(--cd-text-secondary);
  }
  .cd-wv2-exit-modal__clear:hover:not(:disabled) {
    border-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-error) 34%, var(--cd-border-primary));
    }
    background: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-error) 7%, var(--cd-bg-primary));
    }
    color: var(--cd-color-error);
    box-shadow: none;
  }
  .cd-wv2-exit-modal__save {
    box-shadow: var(--cd-shadow-sm);
  }
  @media (max-width: 520px) {
    .cd-wv2-exit-modal-shell .cd-modal-header, .cd-wv2-exit-modal-shell .cd-modal-body, .cd-wv2-exit-modal-shell .cd-modal-footer {
      padding-left: 20px;
      padding-right: 20px;
    }
    .cd-wv2-exit-modal__intro {
      gap: 12px;
    }
    .cd-wv2-exit-modal__actions {
      flex-direction: column-reverse;
    }
    .cd-wv2-exit-modal__actions .cd-btn {
      width: 100%;
      justify-content: center;
    }
  }
  .cd-wv2-confirm-modal-shell .cd-modal-content {
    max-width: 32rem;
  }
  .cd-wv2-confirm-modal-shell .cd-modal-header {
    padding: 24px 28px 18px;
  }
  .cd-wv2-confirm-modal-shell .cd-modal-title {
    font-family: var(--cd-font-primary);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
  }
  .cd-wv2-confirm-modal-shell .cd-modal-body {
    padding: 22px 28px 24px;
  }
  .cd-wv2-confirm-modal-shell .cd-modal-footer {
    padding: 18px 28px;
    background: var(--cd-bg-secondary);
  }
  .cd-wv2-confirm-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cd-wv2-confirm-modal__intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .cd-wv2-confirm-modal__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
  }
  .cd-wv2-confirm-modal__icon.is-submit {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 12%, var(--cd-bg-primary));
    }
    color: var(--cd-color-success);
  }
  .cd-wv2-confirm-modal__icon.is-draft {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 10%, var(--cd-bg-primary));
    }
    color: var(--cd-color-primary);
  }
  .cd-wv2-confirm-modal__copy {
    min-width: 0;
  }
  .cd-wv2-confirm-modal__lead {
    color: var(--cd-text-primary);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.45;
    margin: 0 0 4px;
  }
  .cd-wv2-confirm-modal__sub {
    color: var(--cd-text-secondary);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
  }
  .cd-wv2-confirm-modal__list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cd-wv2-confirm-modal__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--cd-text-secondary);
    font-size: 13px;
    line-height: 1.4;
  }
  .cd-wv2-confirm-modal__list i {
    color: var(--cd-color-success);
    margin-top: 2px;
    font-size: 12px;
  }
  .cd-wv2-confirm-modal__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 13px;
    line-height: 1.45;
  }
  .cd-wv2-confirm-modal__note i {
    color: var(--cd-color-primary);
    margin-top: 2px;
  }
  .cd-wv2-confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
  }
  .cd-wv2-confirm-modal__actions .cd-btn {
    white-space: nowrap;
  }
  @media (max-width: 520px) {
    .cd-wv2-confirm-modal-shell .cd-modal-header, .cd-wv2-confirm-modal-shell .cd-modal-body, .cd-wv2-confirm-modal-shell .cd-modal-footer {
      padding-left: 20px;
      padding-right: 20px;
    }
    .cd-wv2-confirm-modal__actions {
      flex-direction: column-reverse;
    }
    .cd-wv2-confirm-modal__actions .cd-btn {
      width: 100%;
      justify-content: center;
    }
  }
  .cd-wv2-project-anchor {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
  }
  .cd-wv2-project-anchor.is-empty {
    opacity: 0.45;
    gap: 8px;
  }
  .cd-wv2-project-anchor.is-empty .pa-icon {
    width: 32px;
    height: 32px;
  }
  .cd-wv2-project-anchor.is-empty .pa-icon .cd-icon-glyph {
    font-size: 18px;
  }
  .cd-wv2-project-anchor.is-empty .pa-text {
    line-height: 1;
  }
  .cd-wv2-project-anchor .pa-icon {
    width: 48px;
    height: 48px;
    background: transparent;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
  }
  .cd-wv2-project-anchor .pa-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
  }
  .cd-wv2-project-anchor .pa-icon .cd-icon-glyph {
    font-size: 30px;
  }
  .cd-wv2-project-anchor .pa-text {
    flex: 1;
    min-width: 0;
  }
  .cd-wv2-project-anchor .pa-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--cd-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-wv2-project-anchor .pa-sub {
    font-size: 11px;
    color: var(--cd-text-tertiary, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-wv2-phase-pills {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 4px;
  }
  .cd-wv2-phase-pill {
    width: 80px;
    height: 6px;
    border-radius: 9999px;
    background: var(--cd-bg-tertiary);
    position: relative;
  }
  .cd-wv2-phase-pill.is-active {
    background: var(--cd-color-accent);
  }
  .cd-wv2-phase-pill.is-done {
    background: var(--cd-color-success);
  }
  .cd-wv2-phase-pill .lbl {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 10px;
    color: var(--cd-text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
  }
  .cd-wv2-phase-pill.is-active .lbl {
    color: var(--cd-color-accent);
  }
  .cd-wv2-phase-pill.is-done .lbl {
    color: var(--cd-color-success);
  }
  @media (max-width: 640px) {
    .cd-wv2-phase-pills {
      order: 3;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 18px;
    }
    .cd-wv2-phase-pill {
      flex: 1;
    }
  }
  .cd-wv2-body {
    padding: 32px 24px 32px;
    background: var(--cd-bg-primary);
  }
  @media (min-width: 768px) {
    .cd-wv2-body {
      padding: 32px 40px 40px;
    }
  }
  @media (max-width: 640px) {
    .cd-wv2-body {
      padding: 12px 14px 28px;
    }
  }
  .cd-wv2-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--cd-bg-primary);
    border-top: 1px solid var(--cd-border-primary, #e5e5e7);
    flex-wrap: wrap;
  }
  .cd-wv2-footer-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .cd-wv2-step-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    color: var(--cd-text-primary);
  }
  @media (min-width: 768px) {
    .cd-wv2-step-title {
      font-size: 26px;
    }
  }
  .cd-wv2-step-sub {
    color: var(--cd-text-secondary);
    margin-bottom: 24px;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.55;
  }
  @media (min-width: 768px) {
    .cd-wv2-step-sub {
      margin-bottom: 28px;
    }
  }
  @media (max-width: 640px) {
    .cd-wv2-step-sub {
      margin-bottom: 16px;
    }
  }
  .cd-wv2-subsection {
    margin-top: 24px;
  }
  @media (max-width: 640px) {
    .cd-wv2-subsection {
      margin-top: 14px;
    }
  }
  .cd-wv2-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: var(--cd-transition), transform 150ms;
    text-decoration: none;
  }
  .cd-wv2-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-wv2-btn-primary:disabled, .cd-wv2-btn-primary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .cd-wv2-btn-primary.is-loading {
    opacity: 0.78;
    pointer-events: none;
    transform: none;
    box-shadow: none;
  }
  .cd-wv2-btn-primary.is-loading i {
    width: 1em;
    text-align: center;
  }
  .cd-wv2-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cd-text-secondary);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: var(--cd-transition);
    text-decoration: none;
  }
  .cd-wv2-btn-back:hover {
    background: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-wv2-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cd-text-secondary);
    margin-bottom: 16px;
  }
  @media (max-width: 640px) {
    .cd-wv2-breadcrumb {
      display: none;
    }
  }
  .cd-wv2-breadcrumb-link {
    color: var(--cd-text-secondary);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: var(--cd-transition);
  }
  .cd-wv2-breadcrumb-link:hover {
    background: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-wv2-breadcrumb-current {
    color: var(--cd-text-primary);
    font-weight: 600;
    padding: 4px 8px;
  }
  .cd-wv2-breadcrumb-sep {
    font-size: 10px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-wv2-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: var(--cd-transition);
    text-decoration: none;
  }
  .cd-wv2-btn-ghost:hover {
    background: var(--cd-bg-tertiary);
  }
  .cd-wv2-input, .cd-wv2-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    background: var(--cd-bg-primary);
    color: var(--cd-text-primary);
    font-size: 15px;
    transition: var(--cd-transition);
  }
  .cd-wv2-input:focus, .cd-wv2-textarea:focus {
    outline: none;
    border-color: var(--cd-color-accent);
    box-shadow: 0 0 0 4px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-color-accent) 12%, transparent);
    }
  }
  .cd-wv2-input.is-invalid, .cd-wv2-textarea.is-invalid {
    border-color: var(--cd-color-error);
  }
  .cd-wv2-input.is-invalid:focus, .cd-wv2-textarea.is-invalid:focus {
    border-color: var(--cd-color-error);
    box-shadow: 0 0 0 4px var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-color-error) 12%, transparent);
    }
  }
  .cd-wv2-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
  }
  .cd-wv2-input[type="number"] {
    -moz-appearance: textfield;
  }
  .cd-wv2-input[type="number"]::-webkit-outer-spin-button, .cd-wv2-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .cd-wv2-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: 6px;
  }
  .cd-wv2-field-help {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 6px;
  }
  .cd-wv2-field-error {
    font-size: 12px;
    color: var(--cd-color-error);
    margin-top: 6px;
  }
  .cd-wv2-postal-block .cd-wv2-field-help {
    margin-top: 0;
    margin-bottom: 6px;
  }
  .cd-wv2-postal-status {
    min-height: 1.5rem;
    margin-top: 6px;
    line-height: 1.5rem;
  }
  .cd-wv2-contact-card {
    margin-top: 24px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    background: var(--cd-bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cd-wv2-contact-card .cd-wv2-field-label {
    margin-bottom: -2px;
  }
  .cd-wv2-contact-card .cd-wv2-field-help {
    margin-top: -2px;
  }
  .cd-wv2-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--cd-text-secondary);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    margin-top: 4px;
  }
  .cd-wv2-consent-row .cd-checkbox-form {
    margin-top: 1px;
  }
  .cd-wv2-login-row {
    color: var(--cd-text-secondary);
    font-size: 13px;
    line-height: 1.4;
  }
  .cd-wv2-login-link {
    font-weight: 650;
    text-decoration: none;
  }
  .cd-wv2-login-link:hover {
    text-decoration: underline;
  }
  .cd-wv2-login-button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
  }
  .cd-wv2-login-button:focus-visible {
    outline: 2px solid var(--cd-accent, currentColor);
    outline-offset: 2px;
    border-radius: 2px;
  }
  .cd-wv2-contact-account-error {
    margin-top: 0;
  }
  .cd-wv2-char-counter {
    display: inline-block;
    font-size: 11px;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 6px;
  }
  .cd-wv2-char-counter.is-over {
    color: var(--cd-color-error);
  }
  .cd-wv2-match-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 8%, var(--cd-bg-primary));
    }
    border: 1px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-success) 28%, transparent);
    }
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
  }
  .cd-wv2-match-banner .mb-icon {
    width: 44px;
    height: 44px;
    background: var(--cd-color-success);
    color: var(--cd-text-on-success);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .cd-wv2-match-banner .mb-text {
    color: var(--cd-text-primary);
    min-width: 0;
  }
  .cd-wv2-match-banner .mb-text b {
    display: block;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin-bottom: 3px;
  }
  .cd-wv2-match-banner .mb-text span {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cd-text-secondary);
  }
  @media (min-width: 768px) {
    .cd-wv2-match-banner .mb-text b {
      font-size: 16px;
    }
  }
  .cd-wv2-q-block {
    margin-bottom: 32px;
  }
  .cd-wv2-q-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
  }
  .cd-wv2-q-index {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--cd-transition);
  }
  .cd-wv2-q-index.is-answered {
    background: var(--cd-color-success);
    color: var(--cd-text-on-success, #ffffff);
  }
  .cd-wv2-q-prompt {
    font-size: 18px;
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1.3;
  }
  .cd-wv2-q-prompt .req {
    color: var(--cd-color-error);
  }
  .cd-wv2-q-prompt-help {
    font-size: 13px;
    color: var(--cd-text-secondary);
    margin-bottom: 20px;
  }
  .cd-wv2-accordion {
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 14px;
    margin-bottom: 16px;
    background: var(--cd-bg-primary);
    overflow: hidden;
  }
  .cd-wv2-accordion.has-error {
    border-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-error) 45%, var(--cd-border-primary, #e5e5e7));
    }
  }
  .cd-wv2-accordion-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    background: var(--cd-bg-primary);
    list-style: none;
  }
  .cd-wv2-accordion-summary::-webkit-details-marker {
    display: none;
  }
  .cd-wv2-accordion-summary .acc-title {
    font-weight: 600;
    color: var(--cd-text-primary);
    font-size: 14px;
    min-width: 0;
  }
  .cd-wv2-accordion-summary .acc-meta {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
    justify-self: center;
    text-align: center;
    white-space: nowrap;
  }
  .cd-wv2-accordion-summary .acc-meta.is-error {
    color: var(--cd-color-error);
    font-weight: 600;
  }
  .cd-wv2-accordion-summary .acc-caret {
    transition: transform 200ms ease;
    color: var(--cd-text-tertiary, #9ca3af);
    justify-self: end;
  }
  .cd-wv2-accordion[open] .cd-wv2-accordion-summary .acc-caret {
    transform: rotate(180deg);
  }
  .cd-wv2-accordion-body {
    padding: 4px 18px 18px;
  }
  .cd-wv2-budget-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .cd-wv2-dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
  }
  @media (max-width: 640px) {
    .cd-wv2-accordion-summary {
      grid-template-columns: minmax(0, 1fr) auto auto;
    }
    .cd-wv2-accordion-summary .acc-meta {
      justify-self: end;
    }
    .cd-wv2-budget-grid {
      grid-template-columns: 1fr;
    }
    .cd-wv2-dates-grid {
      grid-template-columns: 1fr;
    }
  }
}
@layer components {
  .cd-wv2-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary, #9ca3af);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: var(--cd-transition);
  }
  .cd-wv2-card-badge.is-selected {
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-wv2-number-stepper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }
  .cd-wv2-number-stepper-native {
    display: none;
  }
  .cd-wv2-number-stepper-btn {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    background: var(--cd-bg-primary);
    color: var(--cd-text-primary);
    font-size: 18px;
    cursor: pointer;
    transition: var(--cd-transition), transform 150ms;
    user-select: none;
  }
  .cd-wv2-number-stepper-btn:hover:not(:disabled) {
    border-color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
  }
  .cd-wv2-number-stepper-btn:active:not(:disabled) {
    transform: scale(0.95);
  }
  .cd-wv2-number-stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .cd-wv2-number-stepper-value {
    position: relative;
    min-width: 3rem;
    padding: 4px 8px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--cd-text-primary);
    cursor: pointer;
    user-select: none;
    border-radius: 8px;
    border-bottom: 2px dashed var(--cd-border-primary, #e5e5e7);
    transition: var(--cd-transition);
  }
  .cd-wv2-number-stepper-value:hover {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    border-bottom-color: var(--cd-color-primary);
  }
  .cd-wv2-number-stepper-value:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-wv2-number-stepper-value.is-empty {
    color: var(--cd-text-tertiary, #9ca3af);
    font-weight: 500;
  }
  .cd-wv2-number-stepper-edit-icon {
    position: absolute;
    top: 2px;
    right: -2px;
    font-size: 0.65rem;
    color: var(--cd-text-tertiary, #9ca3af);
    opacity: 0;
    transition: opacity 200ms;
  }
  .cd-wv2-number-stepper-value:hover .cd-wv2-number-stepper-edit-icon {
    opacity: 1;
  }
  .cd-wv2-number-stepper-edit {
    width: 7rem;
    padding: 4px 8px;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: var(--cd-text-primary);
    background: var(--cd-bg-primary);
    border: 2px solid var(--cd-color-primary);
    border-radius: 8px;
    outline: none;
  }
  .cd-wv2-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }
  @media (max-width: 900px) {
    .cd-wv2-cat-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 640px) {
    .cd-wv2-cat-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-wv2-cat-card {
    background: var(--cd-bg-primary);
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    cursor: pointer;
    transition: var(--cd-transition), transform 150ms;
    min-height: 124px;
    text-decoration: none;
    color: inherit;
  }
  .cd-wv2-cat-card:hover {
    border-color: var(--cd-color-primary);
    transform: translateY(-1px);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-wv2-cat-card.is-selected {
    border-color: var(--cd-color-primary);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-wv2-cat-card .cat-icon-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .cd-wv2-cat-card .cat-icon-col .count {
    font-size: 11px;
    color: var(--cd-text-tertiary, #9ca3af);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .cd-wv2-cat-card .cat-body {
    flex: 1;
    min-width: 0;
    padding-right: 32px;
  }
  .cd-wv2-cat-card .cat-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    color: var(--cd-text-primary);
  }
  .cd-wv2-cat-card .cat-desc {
    font-size: 13px;
    color: var(--cd-text-secondary);
    line-height: 1.45;
  }
  @media (max-width: 640px) {
    .cd-wv2-cat-card {
      padding: 14px;
      gap: 12px;
      min-height: 0;
    }
    .cd-wv2-cat-card .cat-body {
      padding-right: 28px;
    }
    .cd-wv2-cat-card .cat-icon-col {
      gap: 4px;
    }
    .cd-wv2-cat-card .cat-icon-col .count {
      font-size: 10px;
    }
  }
  .cd-wv2-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  @media (max-width: 900px) {
    .cd-wv2-svc-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 540px) {
    .cd-wv2-svc-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-wv2-svc-card {
    background: var(--cd-bg-primary);
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    cursor: pointer;
    transition: var(--cd-transition), transform 150ms;
    min-height: 124px;
    text-align: left;
    text-decoration: none;
    color: inherit;
  }
  .cd-wv2-svc-card:hover {
    border-color: var(--cd-color-primary);
    transform: translateY(-1px);
  }
  .cd-wv2-svc-card.is-selected {
    border-color: var(--cd-color-primary);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-wv2-svc-card .svc-body {
    flex: 1;
    min-width: 0;
    padding-right: 32px;
  }
  .cd-wv2-svc-card .svc-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 4px;
    color: var(--cd-text-primary);
  }
  .cd-wv2-svc-card .svc-desc {
    font-size: 13px;
    color: var(--cd-text-secondary);
    line-height: 1.45;
  }
  .cd-wv2-svc-card .svc-meta {
    font-size: 11px;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 4px;
  }
  .cd-wv2-svc-card .svc-meta i {
    color: var(--cd-color-success);
  }
  @media (max-width: 640px) {
    .cd-wv2-svc-card {
      padding: 14px;
      gap: 12px;
      min-height: 0;
    }
    .cd-wv2-svc-card .svc-body {
      padding-right: 28px;
    }
  }
  .cd-wv2-opt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  @media (max-width: 900px) {
    .cd-wv2-opt-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 480px) {
    .cd-wv2-opt-grid {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
  }
  .cd-wv2-opt-card {
    background: var(--cd-bg-primary);
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 16px;
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: var(--cd-transition), transform 180ms;
    min-height: 220px;
    gap: 14px;
  }
  .cd-wv2-opt-card:hover {
    border-color: var(--cd-color-primary);
    transform: translateY(-2px);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-wv2-opt-card.is-selected {
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 2px var(--cd-color-primary), var(--cd-shadow-md);
  }
  .cd-wv2-opt-card .opt-img-wrap {
    width: 120px;
    height: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cd-wv2-opt-card .opt-img-wrap picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .cd-wv2-opt-card .opt-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cd-wv2-opt-card .opt-label {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cd-text-primary);
  }
  .cd-wv2-opt-card .cd-wv2-card-badge {
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .cd-wv2-opt-grid.compact .cd-wv2-opt-card {
    min-height: 140px;
    padding: 16px 12px;
    gap: 8px;
  }
  .cd-wv2-opt-grid.compact .cd-wv2-opt-card .opt-img-wrap {
    width: 64px;
    height: 64px;
  }
  .cd-wv2-opt-grid.compact .cd-wv2-opt-card .opt-label {
    font-size: 13px;
  }
  .cd-wv2-segmented {
    display: inline-flex;
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    overflow: hidden;
    background: var(--cd-bg-primary);
  }
  .cd-wv2-seg-btn {
    appearance: none;
    border: none;
    border-right: 1.5px solid var(--cd-border-primary, #e5e5e7);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--cd-text-secondary);
    padding: 11px 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--cd-transition);
  }
  .cd-wv2-seg-btn:last-child {
    border-right: none;
  }
  .cd-wv2-seg-btn:hover {
    background: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-wv2-seg-btn.is-selected {
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-wv2-tl-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  @media (max-width: 720px) {
    .cd-wv2-tl-row {
      grid-template-columns: 1fr 1fr;
    }
  }
  .cd-wv2-tl-card {
    background: var(--cd-bg-primary);
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 16px;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    cursor: pointer;
    transition: var(--cd-transition);
    position: relative;
  }
  .cd-wv2-tl-card:hover {
    border-color: var(--cd-color-primary);
  }
  .cd-wv2-tl-card.is-selected {
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 2px var(--cd-color-primary);
  }
  .cd-wv2-tl-card .tl-img {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cd-wv2-tl-card .tl-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cd-wv2-tl-card .tl-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-wv2-tl-card .tl-sub {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-wv2-tl-card .tl-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: -4px;
  }
  .cd-wv2-tl-card[data-urgency="URGENT"] .tl-dot {
    background: var(--cd-color-error);
  }
  .cd-wv2-tl-card[data-urgency="HIGH"] .tl-dot {
    background: var(--cd-color-warning);
  }
  .cd-wv2-tl-card[data-urgency="MEDIUM"] .tl-dot {
    background: var(--cd-color-accent);
  }
  .cd-wv2-tl-card[data-urgency="LOW"] .tl-dot {
    background: var(--cd-color-success);
  }
  .cd-wv2-review-card {
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
  }
  .cd-wv2-review-card .rv-body {
    flex: 1;
    min-width: 0;
  }
  .cd-wv2-review-card .rv-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-bottom: 3px;
  }
  .cd-wv2-review-card .rv-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-wv2-review-card .rv-meta {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 2px;
  }
  .cd-wv2-review-card .rv-edit {
    font-size: 12px;
    color: var(--cd-color-accent);
    font-weight: 600;
    background: transparent;
    border: none;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--cd-transition);
  }
  .cd-wv2-review-card .rv-edit:hover {
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 8%, transparent);
    }
  }
}
@layer components {
  .cd-wv2-search-shell {
    background: var(--cd-bg-primary);
    border: 2px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 20px;
    overflow: hidden;
    transition: var(--cd-transition);
  }
  .cd-wv2-search-shell.is-focused {
    border-color: var(--cd-color-shark);
    box-shadow: 0 0 0 4px var(--cd-color-shark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-color-shark) 12%, transparent);
    }
  }
  .cd-wv2-search-shell.is-selected {
    border-color: var(--cd-color-success);
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 6%, var(--cd-bg-primary));
    }
    box-shadow: 0 0 0 4px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-color-success) 18%, transparent);
    }
  }
  .cd-wv2-search-input-row .cd-wv2-selected-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 14px;
  }
  .cd-wv2-search-input-row .cd-wv2-selected-icon .cd-icon-tile {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .cd-wv2-search-input-row .cd-wv2-selected-icon .cd-icon-tile .cd-icon-glyph {
    font-size: 20px;
  }
  .cd-wv2-search-input-row {
    display: flex;
    align-items: center;
    padding: 8px 8px 8px 20px;
  }
  .cd-wv2-search-input-row .si-mag {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 18px;
    margin-right: 14px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
  }
  .cd-wv2-search-input-row input {
    flex: 1;
    border: none;
    outline: none;
    padding: 16px 0;
    font-size: 17px;
    background: transparent;
    color: var(--cd-text-primary);
  }
  .cd-wv2-search-input-row input::placeholder {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-wv2-search-results {
    border-top: 1px solid var(--cd-border-primary, #e5e5e7);
  }
  .cd-wv2-search-results:empty {
    display: none;
  }
  .cd-wv2-sr-group {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--cd-text-tertiary, #9ca3af);
    padding: 14px 20px 6px;
  }
  .cd-wv2-sr-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--cd-border-primary, #e5e5e7);
    transition: background 120ms ease;
    text-decoration: none;
    color: inherit;
  }
  .cd-wv2-sr-row:last-child {
    border-bottom: none;
  }
  .cd-wv2-sr-row:hover, .cd-wv2-sr-row:focus-visible {
    background: var(--cd-bg-secondary);
    outline: none;
  }
  .cd-wv2-sr-row.top {
    padding: 18px 20px;
    background: linear-gradient( 90deg, var(--cd-color-accent) 0%, transparent 60% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 90deg, color-mix(in srgb, var(--cd-color-accent) 12%, transparent) 0%, transparent 60% );
    }
  }
  .cd-wv2-sr-row.top .cd-icon-tile {
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
  }
  .cd-wv2-sr-row .sr-body {
    flex: 1;
    min-width: 0;
  }
  .cd-wv2-sr-row .sr-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--cd-text-primary);
    margin-bottom: 4px;
  }
  .cd-wv2-sr-row .sr-name mark {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 35%, transparent);
    }
    padding: 0 2px;
    border-radius: 3px;
    color: inherit;
  }
  .cd-wv2-sr-row .sr-path {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .cd-wv2-sr-row .sr-path .sep {
    font-size: 8px;
  }
  .cd-wv2-sr-row .cd-wv2-sr-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .cd-wv2-sr-meta .nearby {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 10%, transparent);
    }
    color: var(--cd-color-success);
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
  }
  .cd-wv2-sr-meta .nearby .dot {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
  }
  .cd-wv2-sr-meta .nearby.is-quiet {
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-wv2-sr-empty {
    padding: 24px 20px;
    text-align: center;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 14px;
  }
  .cd-wv2-resolved-path {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 9999px;
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 8%, var(--cd-bg-primary));
    }
    color: var(--cd-text-secondary, #4b5563);
    font-size: 13px;
    line-height: 1.4;
  }
  .cd-wv2-resolved-path .cd-wv2-rp-tick {
    color: var(--cd-color-success);
    font-size: 14px;
  }
  .cd-wv2-resolved-path .cd-wv2-rp-label {
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-wv2-resolved-path .cd-wv2-rp-seg {
    font-weight: 500;
    color: var(--cd-text-primary);
  }
  .cd-wv2-resolved-path .cd-wv2-rp-sep {
    font-size: 9px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  @media (max-width: 640px) {
    .cd-wv2-search-shell {
      border-radius: 16px;
    }
    .cd-wv2-search-input-row {
      padding: 4px 8px 4px 14px;
    }
    .cd-wv2-search-input-row .si-mag {
      margin-right: 10px;
      width: 24px;
      font-size: 16px;
    }
    .cd-wv2-search-input-row .cd-wv2-selected-icon {
      margin-right: 10px;
    }
    .cd-wv2-search-input-row input {
      font-size: 16px;
      padding: 10px 0;
    }
    .cd-wv2-sr-group {
      padding: 12px 14px 4px;
    }
    .cd-wv2-sr-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 12px;
      row-gap: 4px;
      align-items: start;
      padding: 12px 14px;
    }
    .cd-wv2-sr-row.top {
      padding: 14px;
    }
    .cd-wv2-sr-row > .cd-icon-tile {
      grid-row: 1 / span 2;
      align-self: center;
    }
    .cd-wv2-sr-row .sr-body {
      grid-column: 2;
      min-width: 0;
    }
    .cd-wv2-sr-row .cd-wv2-sr-meta {
      grid-column: 2;
      justify-self: start;
      margin-top: 2px;
    }
    .cd-wv2-sr-row.top .cd-icon-tile {
      width: 72px;
      height: 72px;
      border-radius: 14px;
    }
    .cd-wv2-sr-row.top .cd-icon-tile .cd-icon-glyph {
      font-size: 44px;
    }
  }
}
@layer components {
  .cd-onb-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 16px 80px;
  }
  @media (min-width: 768px) {
    .cd-onb-container {
      padding: 40px 32px 120px;
    }
  }
  .cd-onb-frame {
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--cd-shadow-lg);
  }
  @media (max-width: 640px) {
    .cd-onb-container {
      padding: 12px 0 64px;
    }
    .cd-onb-frame {
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
  }
  .cd-onb-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: var(--cd-bg-primary);
    border-bottom: 1px solid var(--cd-border-primary, #e5e5e7);
    flex-wrap: wrap;
  }
  @media (max-width: 640px) {
    .cd-onb-header {
      padding: 10px 14px;
    }
  }
  .cd-onb-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--cd-bg-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary, #9ca3af);
    flex-shrink: 0;
    text-decoration: none;
    transition: var(--cd-transition);
  }
  .cd-onb-close-btn:hover {
    background: var(--cd-bg-tertiary);
    color: var(--cd-text-primary);
  }
  .cd-onb-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
  }
  .cd-onb-brand-icon {
    color: var(--cd-color-success);
    font-size: 17px;
  }
  .cd-onb-brand-text {
    font-size: 14px;
    font-weight: 650;
    color: var(--cd-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-onb-phase-pills {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 4px;
  }
  .cd-onb-phase-pill {
    width: 60px;
    height: 6px;
    border-radius: 9999px;
    background: var(--cd-bg-tertiary);
    position: relative;
  }
  .cd-onb-phase-pill.is-active {
    background: var(--cd-color-accent);
  }
  .cd-onb-phase-pill.is-done {
    background: var(--cd-color-success);
  }
  .cd-onb-phase-pill .lbl {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 10px;
    color: var(--cd-text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    white-space: nowrap;
  }
  .cd-onb-phase-pill.is-active .lbl {
    color: var(--cd-color-accent);
  }
  .cd-onb-phase-pill.is-done .lbl {
    color: var(--cd-color-success);
  }
  @media (max-width: 768px) {
    .cd-onb-phase-pills {
      order: 3;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 18px;
    }
    .cd-onb-phase-pill {
      flex: 1;
      width: auto;
    }
  }
  .cd-onb-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 0;
    background: var(--cd-bg-primary);
  }
  @media (max-width: 900px) {
    .cd-onb-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .cd-onb-body {
    padding: 32px 32px 40px;
    min-width: 0;
  }
  @media (max-width: 640px) {
    .cd-onb-body {
      padding: 18px 14px 28px;
    }
  }
  .cd-onb-rail {
    padding: 32px 28px 40px;
    background: var(--cd-bg-secondary);
    border-left: 1px solid var(--cd-border-primary, #e5e5e7);
  }
  @media (max-width: 900px) {
    .cd-onb-rail {
      border-left: none;
      border-top: 1px solid var(--cd-border-primary, #e5e5e7);
      padding: 24px 18px 32px;
    }
  }
  .cd-onb-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    color: var(--cd-text-primary);
    line-height: 1.2;
  }
  @media (min-width: 768px) {
    .cd-onb-title {
      font-size: 28px;
    }
  }
  .cd-onb-sub {
    color: var(--cd-text-secondary);
    margin-bottom: 28px;
    max-width: 540px;
    font-size: 14px;
    line-height: 1.55;
  }
  .cd-onb-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 520px;
  }
  .cd-onb-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (max-width: 520px) {
    .cd-onb-field-row {
      grid-template-columns: 1fr;
    }
  }
  .cd-onb-field {
    display: flex;
    flex-direction: column;
  }
  .cd-onb-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: 6px;
  }
  .cd-onb-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    background: var(--cd-bg-primary);
    color: var(--cd-text-primary);
    font-size: 15px;
    transition: var(--cd-transition);
  }
  .cd-onb-input:focus {
    outline: none;
    border-color: var(--cd-color-accent);
    box-shadow: 0 0 0 4px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-color-accent) 12%, transparent);
    }
  }
  .cd-onb-field-help {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 6px;
  }
  .cd-onb-field-error {
    font-size: 12px;
    color: var(--cd-color-error);
    margin-top: 6px;
  }
  .cd-onb-form-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-error) 8%, var(--cd-bg-primary));
    }
    color: var(--cd-color-error);
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-error) 30%, var(--cd-border-primary, #e5e5e7));
    }
  }
  .cd-onb-input.is-invalid {
    border-color: var(--cd-color-error);
  }
  .cd-onb-input.is-invalid:focus {
    border-color: var(--cd-color-error);
    box-shadow: 0 0 0 4px var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-color-error) 12%, transparent);
    }
  }
  .cd-onb-char-counter {
    display: inline-block;
    font-size: 11px;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 6px;
  }
  .cd-onb-char-counter.is-over {
    color: var(--cd-color-error);
  }
  .cd-onb-password-wrap {
    position: relative;
  }
  .cd-onb-password-wrap .cd-onb-input {
    padding-right: 44px;
  }
  .cd-onb-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--cd-text-tertiary, #9ca3af);
    border-radius: 0 12px 12px 0;
    transition: var(--cd-transition);
  }
  .cd-onb-password-toggle:hover {
    color: var(--cd-text-primary);
  }
  .cd-onb-password-toggle:focus-visible {
    outline: none;
    color: var(--cd-color-accent);
    box-shadow: 0 0 0 3px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-accent) 18%, transparent);
    }
  }
  .cd-onb-strength {
    margin-top: 8px;
  }
  .cd-onb-strength[hidden] {
    display: none;
  }
  .cd-onb-strength-track {
    display: flex;
    gap: 4px;
  }
  .cd-onb-strength-seg {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--cd-border-primary, #e5e5e7);
    transition: background 150ms;
  }
  .cd-onb-strength-label {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-onb-strength[data-strength="weak"] .cd-onb-strength-seg.is-on {
    background: var(--cd-color-error);
  }
  .cd-onb-strength[data-strength="weak"] .cd-onb-strength-label {
    color: var(--cd-color-error);
  }
  .cd-onb-strength[data-strength="fair"] .cd-onb-strength-seg.is-on {
    background: var(--cd-color-warning, #d97706);
  }
  .cd-onb-strength[data-strength="fair"] .cd-onb-strength-label {
    color: var(--cd-color-warning, #d97706);
  }
  .cd-onb-strength[data-strength="strong"] .cd-onb-strength-seg.is-on {
    background: var(--cd-color-success);
  }
  .cd-onb-strength[data-strength="strong"] .cd-onb-strength-label {
    color: var(--cd-color-success);
  }
  .cd-onb-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 6px;
  }
  .cd-onb-actions--split {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .cd-onb-actions--split:empty {
    display: none;
  }
  .cd-onb-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: var(--cd-transition), transform 150ms;
    text-decoration: none;
  }
  .cd-onb-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-onb-btn-primary:disabled, .cd-onb-btn-primary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .cd-onb-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: var(--cd-transition);
    text-decoration: none;
  }
  .cd-onb-btn-secondary:hover {
    background: var(--cd-bg-tertiary);
  }
  .cd-onb-btn-primary.is-loading, .cd-onb-btn-secondary.is-loading {
    opacity: 0.78;
    pointer-events: none;
    transform: none;
    box-shadow: none;
  }
  .cd-onb-btn-primary.is-loading i, .cd-onb-btn-secondary.is-loading i {
    width: 1em;
    text-align: center;
  }
  .cd-onb-sample-card {
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--cd-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cd-profile-card-editorial.cd-onb-preview-card {
    height: auto;
  }
  .cd-profile-card-editorial.cd-onb-preview-card:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 30px -18px rgba(0, 0, 0, 0.18);
  }
  .cd-onb-preview-avatar {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 14px;
    background: var(--cd-bg-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .cd-onb-preview-avatar .cd-icon-glyph {
    font-size: 1.6rem;
    color: var(--cd-text-secondary);
  }
  .cd-onb-sample-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--cd-bg-tertiary);
    color: var(--cd-text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .cd-onb-sample-badge i {
    color: var(--cd-color-accent);
    font-size: 11px;
  }
  .cd-onb-sample-head {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .cd-onb-sample-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--cd-bg-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .cd-onb-sample-avatar img {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }
  .cd-onb-sample-avatar .cd-icon-glyph {
    font-size: 26px;
    color: var(--cd-text-secondary);
  }
  .cd-onb-sample-id {
    min-width: 0;
  }
  .cd-onb-sample-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-onb-sample-meta {
    font-size: 13px;
    color: var(--cd-text-secondary);
    margin-top: 2px;
  }
  .cd-onb-sample-rating {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cd-onb-sample-stars {
    color: var(--cd-color-warning, #f59e0b);
    font-size: 13px;
    letter-spacing: 1px;
  }
  .cd-onb-sample-rating-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--cd-text-primary);
  }
  .cd-onb-sample-rating-count {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-onb-sample-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--cd-border-primary, #e5e5e7);
    border-bottom: 1px solid var(--cd-border-primary, #e5e5e7);
  }
  .cd-onb-sample-stat {
    text-align: center;
    min-width: 0;
  }
  .cd-onb-sample-stat .val {
    font-size: 18px;
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1.1;
  }
  .cd-onb-sample-stat .lbl {
    font-size: 11px;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 3px;
  }
  .cd-onb-sample-creds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cd-onb-sample-cred {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cd-text-secondary);
    background: var(--cd-bg-secondary);
    padding: 5px 10px;
    border-radius: 8px;
  }
  .cd-onb-sample-cred i {
    color: var(--cd-color-success);
    font-size: 11px;
  }
  .cd-onb-sample-foot {
    font-size: 12px;
    line-height: 1.5;
    color: var(--cd-text-tertiary, #9ca3af);
    margin: 0;
  }
  .cd-onb-address-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 560px;
  }
  .cd-onb-hidden-fields {
    display: none;
  }
  .cd-onb-geocoder {
    width: 100%;
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: 1.5px solid var(--cd-border-primary, #e5e5e7) !important;
    border-radius: 12px !important;
    background: var(--cd-bg-primary) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }
  .cd-onb-geocoder:focus-within .mapboxgl-ctrl-geocoder {
    border-color: var(--cd-color-accent) !important;
    box-shadow: 0 0 0 4px var(--cd-color-accent) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-color-accent) 12%, transparent) !important;
    }
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder--input {
    height: 52px !important;
    padding: 14px 16px 14px 44px !important;
    color: var(--cd-text-primary) !important;
    font-size: 16px !important;
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder--input::placeholder {
    color: var(--cd-text-tertiary, #9ca3af);
    opacity: 1;
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder--input:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder--icon-search {
    top: 50% !important;
    left: 14px !important;
    transform: translateY(-50%) !important;
    fill: var(--cd-text-tertiary, #9ca3af) !important;
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder--button {
    background: transparent !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder--icon-close {
    fill: var(--cd-text-tertiary, #9ca3af) !important;
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder--button:hover .mapboxgl-ctrl-geocoder--icon-close {
    fill: var(--cd-text-primary) !important;
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder--icon-loading {
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
  }
  .cd-onb-geocoder .suggestions, .cd-onb-geocoder .mapboxgl-ctrl-geocoder .suggestions {
    margin-top: 6px !important;
    background: var(--cd-bg-primary) !important;
    border: 1px solid var(--cd-border-primary, #e5e5e7) !important;
    border-radius: 12px !important;
    box-shadow: var(--cd-shadow-lg) !important;
    overflow: hidden !important;
  }
  .cd-onb-geocoder .suggestions > li > a, .cd-onb-geocoder .mapboxgl-ctrl-geocoder .suggestions > li > a {
    padding: 10px 14px !important;
    color: var(--cd-text-primary) !important;
    font-size: 14px !important;
  }
  .cd-onb-geocoder .suggestions > li > a:hover, .cd-onb-geocoder .suggestions > .active > a, .cd-onb-geocoder .mapboxgl-ctrl-geocoder .suggestions > li:hover > a, .cd-onb-geocoder .mapboxgl-ctrl-geocoder .suggestions > .active > a {
    background: var(--cd-bg-secondary) !important;
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder--suggestion-title {
    font-weight: 600;
  }
  .cd-onb-geocoder .mapboxgl-ctrl-geocoder--suggestion-address {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 12px;
  }
  .cd-onb-address-readback {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-secondary, #ececef);
  }
  @media (max-width: 520px) {
    .cd-onb-address-readback {
      grid-template-columns: 1fr;
      gap: 8px;
    }
  }
  .cd-onb-readback-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .cd-onb-readback-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-onb-readback-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--cd-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-onb-readback-empty {
    color: var(--cd-text-tertiary, #9ca3af);
    font-weight: 400;
  }
  .cd-onb-radius-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .cd-onb-radius-head .cd-onb-field-label {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .cd-onb-radius-head .cd-onb-field-label i, .cd-onb-radius-note i {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-onb-radius-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--cd-color-accent);
  }
  .cd-onb-radius-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--cd-bg-tertiary);
    outline: none;
    cursor: pointer;
  }
  .cd-onb-radius-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cd-color-accent);
    border: 3px solid var(--cd-bg-primary);
    box-shadow: var(--cd-shadow-sm);
    cursor: pointer;
    transition: transform 120ms;
  }
  .cd-onb-radius-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
  }
  .cd-onb-radius-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cd-color-accent);
    border: 3px solid var(--cd-bg-primary);
    box-shadow: var(--cd-shadow-sm);
    cursor: pointer;
  }
  .cd-onb-radius-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-onb-radius-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--cd-text-secondary);
  }
  .cd-onb-radius-note strong {
    color: var(--cd-text-primary);
  }
  .cd-onb-map-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--cd-border-secondary, #ececef);
  }
  .cd-onb-map {
    width: 100%;
    height: 300px;
  }
  @media (max-width: 640px) {
    .cd-onb-map {
      height: 240px;
    }
  }
  .cd-onb-map-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .cd-onb-map-hint.hidden {
    display: none;
  }
  .cd-onb-map-hint span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-primary) 92%, transparent);
    }
    backdrop-filter: blur(4px);
    box-shadow: var(--cd-shadow-sm);
    font-size: 13px;
    color: var(--cd-text-secondary);
  }
  .cd-onb-map-hint span i {
    color: var(--cd-color-accent);
  }
  .cd-onb-textarea {
    resize: vertical;
    min-height: 104px;
    line-height: 1.55;
    font-family: inherit;
  }
  .cd-onb-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ca3af'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
  }
  .cd-onb-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cd-onb-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    background: var(--cd-bg-primary);
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-onb-toggle-row:hover {
    border-color: var(--cd-color-accent);
  }
  .cd-onb-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--cd-color-accent);
    flex-shrink: 0;
    cursor: pointer;
  }
  .cd-onb-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .cd-onb-toggle-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-onb-toggle-help {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-onb-skip {
    background: transparent;
    color: var(--cd-text-secondary);
    padding-left: 4px;
    padding-right: 4px;
  }
  .cd-onb-skip:hover {
    background: transparent;
    color: var(--cd-text-primary);
    text-decoration: underline;
  }
  .cd-onb-sample-bio {
    border-top: 1px solid var(--cd-border-primary, #e5e5e7);
    padding-top: 14px;
  }
  .cd-onb-sample-bio-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--cd-text-secondary);
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .cd-onb-sample-bio-text.is-empty {
    display: none;
  }
  .cd-onb-sample-bio-placeholder {
    font-size: 13px;
    line-height: 1.55;
    color: var(--cd-text-tertiary, #9ca3af);
    font-style: italic;
    margin: 0;
  }
  .cd-onb-sample-bio-placeholder.is-hidden {
    display: none;
  }
  .cd-onb-finish-hero {
    margin-bottom: 28px;
  }
  .cd-onb-finish-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 14%, var(--cd-bg-primary));
    }
    color: var(--cd-color-success);
    font-size: 22px;
    margin-bottom: 16px;
  }
  .cd-onb-review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 560px;
    margin-bottom: 28px;
  }
  .cd-onb-review-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 14px;
    background: var(--cd-bg-primary);
  }
  .cd-onb-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 15px;
    flex-shrink: 0;
  }
  .cd-onb-review-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
  }
  .cd-onb-review-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-onb-review-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-onb-review-meta {
    font-size: 13px;
    color: var(--cd-text-secondary);
    overflow-wrap: anywhere;
  }
  .cd-onb-review-check {
    color: var(--cd-color-success);
    font-size: 18px;
    flex-shrink: 0;
  }
  .cd-onb-review-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
  }
  .cd-onb-review-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cd-text-tertiary, #9ca3af);
    background: var(--cd-bg-secondary);
    padding: 4px 9px;
    border-radius: 8px;
  }
  .cd-onb-review-chip.is-on {
    color: var(--cd-color-success);
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 12%, var(--cd-bg-primary));
    }
  }
  .cd-onb-review-chip i {
    font-size: 10px;
  }
  .cd-onb-finish-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 560px;
  }
  .cd-onb-btn-golive {
    padding: 14px 32px;
    font-size: 15px;
    background: var(--cd-color-success);
  }
  .cd-onb-finish-note {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
    margin: 0;
    max-width: 420px;
  }
  .cd-onb-interstitial {
    padding: 8px;
  }
  .cd-onb-interstitial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 28px;
    align-items: center;
  }
  @media (min-width: 860px) {
    .cd-onb-interstitial-grid {
      grid-template-columns: 1.2fr 0.8fr;
      padding: 48px 44px;
    }
  }
  .cd-onb-interstitial-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cd-color-primary, #2563eb);
    margin: 0 0 12px;
  }
  .cd-onb-interstitial-title {
    font-family: var(--cd-font-display, "Fraunces", Georgia, serif);
    font-size: 30px;
    line-height: 1.15;
    color: var(--cd-text-primary, #1d1d1f);
    margin: 0 0 12px;
  }
  .cd-onb-interstitial-lede {
    font-size: 16px;
    line-height: 1.55;
    color: var(--cd-text-secondary, #4b5563);
    margin: 0 0 20px;
    max-width: 52ch;
  }
  .cd-onb-interstitial-offer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--cd-color-success-soft, #ecfdf5);
    color: var(--cd-color-success-strong, #047857);
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 20px;
  }
  .cd-onb-interstitial-points {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cd-onb-interstitial-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--cd-text-secondary, #4b5563);
  }
  .cd-onb-interstitial-points i {
    color: var(--cd-color-primary, #2563eb);
    width: 18px;
    text-align: center;
  }
  .cd-onb-interstitial-cta {
    margin: 0 0 14px;
  }
  .cd-onb-interstitial-fallback {
    font-size: 13px;
    color: var(--cd-text-tertiary, #9ca3af);
    margin: 0;
  }
  .cd-onb-interstitial-fallback a {
    color: var(--cd-color-primary, #2563eb);
    font-weight: 600;
  }
  .cd-onb-interstitial-aside {
    display: flex;
    justify-content: center;
  }
  .cd-onb-interstitial-points-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 24px;
  }
  .cd-onb-interstitial-points-row .cd-onb-interstitial-points {
    margin: 0;
    flex: 1;
    min-width: 0;
  }
  .cd-onb-interstitial-illus {
    display: block;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
  }
  @media (min-width: 860px) {
    .cd-onb-interstitial-illus {
      width: 140px;
      height: 140px;
    }
  }
  @media (max-width: 520px) {
    .cd-onb-interstitial-illus {
      display: none;
    }
  }
  .cd-onb-interstitial-offer-band {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--cd-color-success-soft, #ecfdf5);
  }
  .cd-onb-offer-band-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex-shrink: 0;
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 18%, transparent);
    }
    color: var(--cd-color-success-strong, #047857);
    font-size: 16px;
  }
  .cd-onb-offer-band-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cd-color-success-strong, #047857);
  }
  .cd-onb-faq {
    max-width: 720px;
    margin: 32px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cd-onb-faq-head {
    font-family: var(--cd-font-display, "Fraunces", Georgia, serif);
    font-size: 22px;
    line-height: 1.2;
    color: var(--cd-text-primary, #1d1d1f);
    margin: 0 0 4px;
    text-align: center;
  }
  .cd-onb-faq-item {
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 14px;
    padding: 4px 18px;
    background: var(--cd-bg-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-onb-faq-item:hover, .cd-onb-faq-item[open] {
    border-color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-text-primary) 16%, var(--cd-border-primary, #e5e5e7));
    }
    box-shadow: var(--cd-shadow-sm);
  }
  .cd-onb-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
  }
  .cd-onb-faq-item summary::-webkit-details-marker {
    display: none;
  }
  .cd-onb-faq-q {
    font-size: 15px;
    font-weight: 600;
    color: var(--cd-text-primary);
    line-height: 1.35;
  }
  .cd-onb-faq-chevron {
    flex-shrink: 0;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 13px;
    transition: transform 0.2s ease;
  }
  .cd-onb-faq-item[open] .cd-onb-faq-chevron {
    transform: rotate(180deg);
  }
  .cd-onb-faq-a {
    border-top: 1px solid var(--cd-border-primary, #e5e5e7);
    padding: 14px 0 16px;
  }
  .cd-onb-faq-a p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cd-text-secondary, #4b5563);
  }
}
@layer components {
  .cd-sw-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 16px 80px;
  }
  @media (min-width: 768px) {
    .cd-sw-container {
      padding: 40px 32px 120px;
    }
  }
  .cd-sw-frame {
    background: var(--cd-bg-primary, #fff);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 20px;
    box-shadow: var(--cd-shadow-lg);
    padding: 24px;
  }
  @media (min-width: 768px) {
    .cd-sw-frame {
      padding: 40px;
    }
  }
  @media (max-width: 640px) {
    .cd-sw-container {
      padding: 12px 0 64px;
    }
    .cd-sw-frame {
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
  }
  .cd-sw-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }
  .cd-sw-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    color: var(--cd-text-secondary, #6b7280);
    background: var(--cd-bg-secondary, #f5f5f7);
    font-size: 16px;
    text-decoration: none;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .cd-sw-close-btn:hover {
    color: var(--cd-text-primary, #111);
    background: var(--cd-bg-primary, #fff);
    border-color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-sw-close-btn:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-sw-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--cd-text-primary, #111);
    flex: 1;
  }
  .cd-sw-pills {
    display: flex;
    gap: 8px;
  }
  .cd-sw-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--cd-text-tertiary, #9ca3af);
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-sw-pill.is-active {
    color: var(--cd-text-on-primary);
    background: var(--cd-color-primary);
  }
  .cd-sw-pill.is-done {
    color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 12%, transparent);
    }
  }
  .cd-sw-step-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--cd-text-primary, #111);
    margin-bottom: 4px;
  }
  .cd-sw-step-sub {
    font-size: 14px;
    color: var(--cd-text-secondary, #6b7280);
    margin-bottom: 20px;
  }
  .cd-sw-search-shell {
    position: relative;
    margin-bottom: 20px;
  }
  .cd-sw-search-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    background: var(--cd-bg-primary, #fff);
  }
  .cd-sw-search-shell.is-focused .cd-sw-search-input-row {
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 3px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-sw-search-mag {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-sw-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    background: transparent;
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    background: var(--cd-bg-primary, #fff);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    max-height: 360px;
    overflow-y: auto;
  }
  .cd-sw-search-results:empty {
    display: none;
  }
  .cd-sw-sr-group {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cd-text-tertiary, #9ca3af);
    padding: 10px 14px 4px;
  }
  .cd-sw-sr-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
  }
  .cd-sw-sr-row:hover {
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-sw-sr-row.is-incart {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
  }
  .cd-sw-sr-row.is-offered {
    opacity: 0.55;
    cursor: default;
  }
  .cd-sw-sr-body {
    flex: 1;
    min-width: 0;
  }
  .cd-sw-sr-name {
    font-weight: 600;
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-sr-path {
    font-size: 12px;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-sw-sr-meta, .cd-sw-sr-badge {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-sw-sr-badge.is-offered {
    color: var(--cd-color-primary);
  }
  .cd-sw-sr-empty {
    padding: 16px;
    text-align: center;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 14px;
  }
  .cd-sw-cart {
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--cd-bg-secondary, #f9fafb);
  }
  .cd-sw-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .cd-sw-cart-count {
    font-weight: 600;
    font-size: 13px;
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-cart-clear {
    font-size: 12px;
    color: var(--cd-text-secondary, #6b7280);
    background: none;
    border: none;
    cursor: pointer;
  }
  .cd-sw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cd-sw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    background: var(--cd-bg-primary, #fff);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-chip-x {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-secondary, #6b7280);
    cursor: pointer;
  }
  .cd-sw-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 13px;
  }
  .cd-sw-crumb {
    border: none;
    background: none;
    color: var(--cd-color-primary);
    cursor: pointer;
    padding: 0;
  }
  .cd-sw-crumb.is-current {
    color: var(--cd-text-secondary, #6b7280);
    cursor: default;
  }
  .cd-sw-crumb-sep {
    font-size: 10px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-sw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 12px;
  }
  .cd-sw-cat-card, .cd-sw-prof-card, .cd-sw-svc-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 16px;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    background: var(--cd-bg-primary, #fff);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .cd-sw-cat-card:hover, .cd-sw-prof-card:hover, .cd-sw-svc-card:hover {
    border-color: var(--cd-color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
  .cd-sw-svc-card.is-selected {
    border-color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 7%, transparent);
    }
  }
  .cd-sw-svc-card.is-disabled {
    opacity: 0.55;
    cursor: default;
  }
  .cd-sw-card-body {
    flex: 1;
    min-width: 0;
  }
  .cd-sw-card-name {
    font-weight: 600;
    color: var(--cd-text-primary, #111);
    line-height: 1.3;
  }
  .cd-sw-card-desc {
    font-size: 12px;
    color: var(--cd-text-secondary, #6b7280);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cd-sw-card-chevron {
    align-self: center;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-sw-card-badge {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-sw-card-badge.is-selected {
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-sw-already-badge {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cd-text-tertiary, #9ca3af);
    white-space: nowrap;
  }
  .cd-sw-count-badge {
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
  }
  .cd-sw-grid-empty {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-sw-apply-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-bulk-section, .cd-sw-pricing-card {
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
  }
  .cd-sw-pricing-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .cd-sw-section {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
  .cd-sw-pricing-form .cd-form-section-head {
    margin-bottom: 16px;
  }
  .cd-sw-pricing-fields--single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  @media (min-width: 1024px) {
    .cd-sw-pricing-fields--single {
      grid-template-columns: 2fr 1fr;
    }
  }
  .cd-sw-preview-aside {
    position: static;
  }
  @media (min-width: 1024px) {
    .cd-sw-preview-aside {
      position: sticky;
      top: 24px;
    }
  }
  .cd-sw-preview-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-bottom: 8px;
  }
  .cd-sw-preview-extra {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-sw-preview-extra .fa-plus {
    color: var(--cd-color-primary);
    font-size: 10px;
  }
  .cd-sw-preview-extra-amt {
    font-weight: 600;
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cd-sw-rail-card {
    padding: 14px 16px;
    border: 1px solid var(--cd-border-primary, #eef0f2);
    border-radius: 12px;
    background: var(--cd-bg-secondary, #f9fafb);
  }
  .cd-sw-rail-tip {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-sw-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-sw-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-sw-check-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--cd-border-primary, #d1d5db);
    background: transparent;
    color: transparent;
    font-size: 10px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .cd-sw-check-item.is-done {
    font-weight: 600;
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-check-item.is-done .cd-sw-check-mark {
    background: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-sw-check-req {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-sw-description {
    min-height: 140px;
    resize: vertical;
  }
  .cd-sw-writing-tips {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--cd-bg-secondary, #f9fafb);
    border: 1px solid var(--cd-border-primary, #eef0f2);
  }
  .cd-sw-writing-tips-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cd-color-accent, #d97706);
    margin-bottom: 12px;
  }
  .cd-sw-writing-tips-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    font-size: 13px;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-sw-writing-tips-grid span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .cd-sw-writing-tips-grid .fa-arrow-right {
    font-size: 10px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  @media (max-width: 480px) {
    .cd-sw-writing-tips-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-sw-rate-fields {
    margin-top: 16px;
  }
  .cd-sw-field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-top: 4px;
    color: var(--cd-color-error);
  }
  .cd-sw-input-error, .cd-sw-input-error:focus {
    border-color: var(--cd-color-error) !important;
  }
  .cd-sw-price-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--cd-bg-secondary, #f5f5f7);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
  }
  .cd-sw-price-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-sw-price-main {
    font-size: 18px;
    font-weight: 700;
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-price-add {
    font-size: 12px;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-sw-price-add::before {
    content: "·";
    margin-right: 8px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-sw-review-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }
  .cd-sw-review-card {
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    padding: 16px;
  }
  .cd-sw-review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .cd-sw-review-name {
    font-weight: 600;
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-review-prof {
    font-size: 12px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-sw-review-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin: 0;
  }
  .cd-sw-review-pricing dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-sw-review-pricing dd {
    margin: 0;
    font-weight: 600;
    color: var(--cd-text-primary, #111);
  }
  .cd-sw-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--cd-border-primary, #e5e5e7);
  }
  .cd-sw-btn-primary, .cd-sw-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .cd-sw-btn-primary {
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-sw-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .cd-sw-btn-secondary {
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-primary, #111);
    border-color: var(--cd-border-primary, #e5e5e7);
  }
  .cd-sw-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cd-sw-footer-back {
    display: contents;
  }
  .cd-sw-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    background: none;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-sw-btn-ghost:hover {
    color: var(--cd-text-primary, #111);
  }
}
@layer components {
  .cd-pw-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 80px;
  }
  @media (min-width: 768px) {
    .cd-pw-container {
      padding: 40px 32px 120px;
    }
  }
  .cd-pw-frame {
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--cd-shadow-lg);
  }
  @media (max-width: 640px) {
    .cd-pw-container {
      padding: 12px 0 64px;
    }
    .cd-pw-frame {
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
  }
  .cd-pw-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--cd-bg-primary);
    border-bottom: 1px solid var(--cd-border-primary, #e5e5e7);
    flex-wrap: wrap;
  }
  @media (max-width: 640px) {
    .cd-pw-header {
      padding: 10px 14px;
    }
  }
  .cd-pw-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--cd-bg-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary, #9ca3af);
    flex-shrink: 0;
    text-decoration: none;
    transition: var(--cd-transition);
  }
  .cd-pw-close-btn:hover {
    background: var(--cd-bg-tertiary);
    color: var(--cd-text-primary);
  }
  .cd-pw-type-anchor {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 9999px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .cd-pw-type-anchor.is-empty {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-pw-type-anchor .pa-icon {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-color-accent);
    flex-shrink: 0;
  }
  .cd-pw-type-anchor.is-empty .pa-icon {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-pw-type-anchor .pa-icon img {
    width: 150%;
    height: 150%;
    max-width: none;
    object-fit: contain;
  }
  .cd-pw-type-anchor .pa-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
  }
  .cd-pw-type-anchor .pa-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-pw-type-anchor .pa-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cd-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-pw-phase-pills {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 4px;
  }
  .cd-pw-phase-pill {
    width: 64px;
    height: 6px;
    border-radius: 9999px;
    background: var(--cd-bg-tertiary);
    position: relative;
  }
  .cd-pw-phase-pill.is-active {
    background: var(--cd-color-accent);
  }
  .cd-pw-phase-pill.is-done {
    background: var(--cd-color-success);
  }
  .cd-pw-phase-pill .lbl {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 10px;
    color: var(--cd-text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
  }
  .cd-pw-phase-pill.is-active .lbl {
    color: var(--cd-color-accent);
  }
  .cd-pw-phase-pill.is-done .lbl {
    color: var(--cd-color-success);
  }
  @media (max-width: 640px) {
    .cd-pw-phase-pills {
      order: 3;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 18px;
    }
    .cd-pw-phase-pill {
      flex: 1;
      width: auto;
    }
  }
  .cd-pw-body {
    padding: 32px 20px 32px;
    background: var(--cd-bg-primary);
  }
  @media (min-width: 768px) {
    .cd-pw-body {
      padding: 32px 20px 40px;
    }
  }
  @media (max-width: 640px) {
    .cd-pw-body {
      padding: 16px 14px 28px;
    }
  }
  .cd-pw-step-head {
    margin-bottom: 24px;
  }
  .cd-pw-step-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    color: var(--cd-text-primary);
  }
  @media (min-width: 768px) {
    .cd-pw-step-title {
      font-size: 26px;
    }
  }
  .cd-pw-step-sub {
    color: var(--cd-text-secondary);
    max-width: 640px;
    font-size: 14px;
    line-height: 1.55;
  }
  .cd-pw-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--cd-border-primary, #e5e5e7);
    flex-wrap: wrap;
  }
  .cd-pw-footer [data-pw-submit-button].is-loading {
    opacity: 0.7;
    pointer-events: none;
  }
  .cd-pw-type-card {
    cursor: pointer;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    background: var(--cd-bg-primary);
    border-radius: 14px;
    overflow: hidden;
    transition: var(--cd-transition);
  }
  .cd-pw-type-card:hover {
    box-shadow: var(--cd-shadow-lg);
    border-color: var(--cd-color-accent);
  }
  .cd-pw-type-card.is-selected {
    border-color: var(--cd-color-accent);
    box-shadow: var(--cd-shadow-lg);
  }
  .cd-pw-type-grid.is-selecting .cd-pw-type-card:not(.is-selected) {
    opacity: 0.45;
    pointer-events: none;
  }
  .cd-pw-review {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .cd-pw-review-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cd-pw-review-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cd-bg-secondary);
    border-radius: 12px;
  }
  .cd-pw-review-card .rv-body {
    min-width: 0;
  }
  .cd-pw-review-card .rv-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-bottom: 2px;
  }
  .cd-pw-review-card .rv-value {
    font-size: 15px;
    color: var(--cd-text-primary);
    word-break: break-word;
  }
  .cd-pw-review-card .rv-edit {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--cd-color-accent);
    text-decoration: none;
    white-space: nowrap;
  }
  .cd-pw-review-card .rv-edit:hover {
    text-decoration: underline;
  }
  .cd-pw-thumbs-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-bottom: 10px;
  }
  .cd-pw-thumbs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
  }
  .cd-pw-thumb {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
  }
  .cd-pw-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cd-pw-thumb-pdf {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--cd-color-accent);
  }
  .cd-pw-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px 16px;
    max-width: 520px;
    margin: 0 auto;
  }
  .cd-pw-success-art {
    width: 320px;
    height: auto;
    max-width: 78vw;
    margin-bottom: 20px;
    animation: cd-pw-success-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  @media (min-width: 768px) {
    .cd-pw-success-art {
      width: 380px;
    }
  }
  @keyframes cd-pw-success-pop {
    0% {
      transform: scale(0.6);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-pw-success-art {
      animation: none;
    }
  }
  .cd-pw-success-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary);
    margin-bottom: 8px;
  }
  @media (min-width: 768px) {
    .cd-pw-success-title {
      font-size: 26px;
    }
  }
  .cd-pw-success-sub {
    color: var(--cd-text-secondary);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 28px;
  }
  .cd-pw-success-item {
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-pw-success-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cd-pw-success-meta {
    margin-top: 20px;
    font-size: 13px;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
}
@layer components {
  .cd-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
  }
  .cd-tier-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    position: relative;
    transition: box-shadow 150ms ease, transform 150ms ease;
  }
  .cd-tier-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  .cd-tier-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .cd-tier-card-handle {
    cursor: grab;
    color: var(--cd-text-tertiary);
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: opacity 150ms ease;
  }
  .cd-tier-card:hover .cd-tier-card-handle, .cd-tier-card-handle:focus-visible {
    opacity: 1;
  }
  .cd-tier-card-handle:active {
    cursor: grabbing;
  }
  .cd-tier-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-tier-card-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
  }
  .cd-tier-priority-pill {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: var(--cd-bg-tertiary);
    color: var(--cd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .cd-tier-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cd-tier-card-timer {
    font-size: 0.8125rem;
    color: var(--cd-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
  }
  .cd-tier-member-preview {
    display: flex;
    align-items: center;
    gap: -0.5rem;
    flex-wrap: wrap;
    min-height: 2rem;
  }
  .cd-tier-member-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: var(--cd-bg-tertiary);
    color: var(--cd-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid var(--cd-bg-primary);
    margin-left: -0.5rem;
  }
  .cd-tier-member-avatar:first-child {
    margin-left: 0;
  }
  .cd-tier-member-overflow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 9999px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.25rem;
  }
  .cd-tier-member-empty {
    font-size: 0.8125rem;
    color: var(--cd-text-tertiary);
    margin: 0;
  }
  .cd-tier-card-link {
    font-size: 0.8125rem;
    color: var(--cd-accent-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
    margin-top: 0.25rem;
  }
  .cd-tier-card-link:hover {
    text-decoration: underline;
  }
  .cd-tier-card.sortable-ghost {
    opacity: 0.4;
    background: var(--cd-bg-tertiary);
  }
  .cd-tier-card.sortable-chosen {
    cursor: grabbing;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  .cd-member-picker-results {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 24rem;
    overflow-y: auto;
  }
  .cd-member-picker-result {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: 0.5rem;
    background: var(--cd-bg-primary);
  }
  .cd-tier-form-modal {
    position: fixed;
    inset: 0;
    z-index: var(--cd-z-section-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
}
@layer components {
  .cd-permit-results {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-6);
    padding: var(--cd-space-2) var(--cd-space-1);
  }
  @media (min-width: 640px) {
    .cd-permit-results {
      padding: var(--cd-space-3) var(--cd-space-2);
    }
  }
  .cd-permit-results__hero {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
    padding-bottom: var(--cd-space-4);
    border-bottom: 1px solid var(--cd-border-secondary);
  }
  @media (min-width: 640px) {
    .cd-permit-results__hero {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--cd-space-6);
    }
  }
  .cd-permit-results__hero-meta {
    min-width: 0;
  }
  .cd-permit-results__hero-actions {
    flex-shrink: 0;
  }
  .cd-permit-results__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    margin-bottom: 0.5rem;
  }
  .cd-permit-results__eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
  }
  .cd-permit-results__title {
    font-family: var(--cd-font-editorial);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cd-text-primary);
    letter-spacing: -0.015em;
    font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
  }
  @media (min-width: 768px) {
    .cd-permit-results__title {
      font-size: 2.5rem;
    }
  }
  .cd-permit-results__location {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--cd-text-secondary);
  }
  .cd-permit-results__location i {
    color: var(--cd-color-primary);
  }
  .cd-permit-results__metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    border-top: 1px solid var(--cd-border-primary);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-permit-results__metric {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--cd-space-4) var(--cd-space-4);
    border-left: 1px solid var(--cd-border-hairline, var(--cd-border-secondary));
  }
  .cd-permit-results__metric:first-child {
    border-left: 0;
  }
  .cd-permit-results__metric-count {
    font-size: 2rem;
    line-height: 1;
    color: var(--cd-text-primary);
  }
  .cd-permit-results__metric-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-permit-results__sections {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-5);
  }
  .cd-permit-section {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
  }
  .cd-permit-section__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cd-border-secondary);
  }
  .cd-permit-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    flex-shrink: 0;
  }
  .cd-permit-section--required .cd-permit-section__icon {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
  }
  .cd-permit-section--conditional .cd-permit-section__icon {
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
  }
  .cd-permit-section--varies .cd-permit-section__icon {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
  }
  .cd-permit-section--none .cd-permit-section__icon {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
  }
  .cd-permit-section__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    letter-spacing: -0.005em;
  }
  .cd-permit-section__count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
  }
  .cd-permit-results__group {
    display: flex;
    flex-direction: column;
  }
  .cd-permit-results__group-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: var(--cd-space-2);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-permit-results__group-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
  }
  .cd-permit-results__group-count {
    margin-left: auto;
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .cd-permit-results__permit {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cd-space-4);
    padding: var(--cd-space-3) 0;
    border-bottom: 1px solid var(--cd-border-hairline, var(--cd-border-secondary));
  }
  .cd-permit-results__permit-main {
    min-width: 0;
  }
  .cd-permit-results__permit-name {
    font-family: var(--cd-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cd-text-primary);
    letter-spacing: -0.01em;
  }
  .cd-permit-results__permit-meta {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    line-height: 1.4;
  }
  .cd-permit-results__permit-apply {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cd-color-primary);
    text-decoration: none;
    transition: color 150ms ease;
    white-space: nowrap;
  }
  .cd-permit-results__permit-apply:hover {
    text-decoration: underline;
  }
  .cd-permit-results__permit-apply i {
    font-size: 0.6875rem;
  }
  .cd-permit-results__info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-space-4);
  }
  @media (min-width: 1024px) {
    .cd-permit-results__info-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .cd-permit-info-card {
    background: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-4);
  }
  .cd-permit-info-card--accent {
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 35%, var(--cd-border-primary));
    }
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 4%, var(--cd-bg-card));
    }
  }
  .cd-permit-info-card__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .cd-permit-info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 0.875rem;
  }
  .cd-permit-info-card__icon--accent {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 14%, transparent);
    }
    color: var(--cd-color-primary);
  }
  .cd-permit-info-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cd-text-primary);
  }
  .cd-permit-info-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
  }
  .cd-permit-info-card__body--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-space-4);
  }
  @media (min-width: 640px) {
    .cd-permit-info-card__body--split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .cd-permit-info-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .cd-permit-info-row__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-permit-info-row__value {
    font-size: 0.9rem;
    color: var(--cd-text-primary);
    line-height: 1.45;
  }
  .cd-permit-info-row__value--required {
    color: #dc2626;
    font-weight: 600;
  }
  .cd-permit-info-row__value--conditional {
    color: #b45309;
    font-weight: 600;
  }
  .cd-permit-info-row__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cd-color-primary);
    text-decoration: none;
    transition: color 150ms ease;
  }
  .cd-permit-info-row__link:hover {
    color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-primary) 75%, #000);
    }
    text-decoration: underline;
  }
  .cd-permit-info-row__list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--cd-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    list-style: disc;
  }
  .cd-permit-info-row__list li + li {
    margin-top: 0.25rem;
  }
  .cd-permit-info-row__action {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--cd-radius-lg);
    background: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    color: var(--cd-text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
    align-self: flex-start;
  }
  .cd-permit-info-row__action:hover {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 5%, var(--cd-bg-card));
    }
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 30%, var(--cd-border-primary));
    }
    transform: translateY(-1px);
    text-decoration: none;
  }
  .cd-permit-info-row__action-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 14%, transparent);
    }
    color: var(--cd-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .cd-permit-info-row__action:hover .cd-permit-info-row__action-icon {
    background: var(--cd-color-primary);
    color: #ffffff;
  }
  .cd-permit-notes {
    display: flex;
    gap: var(--cd-space-3);
    padding: var(--cd-space-4);
    border-radius: var(--cd-radius-xl);
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.32);
  }
  .cd-permit-notes__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(234, 179, 8, 0.18);
    color: #b45309;
    font-size: 0.875rem;
  }
  .cd-permit-notes__body {
    flex: 1;
    min-width: 0;
  }
  .cd-permit-notes__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    margin-bottom: 0.25rem;
  }
  .cd-permit-notes__body p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cd-text-secondary);
    line-height: 1.5;
  }
  .cd-permit-notes--warning {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.28);
  }
  .cd-permit-notes--warning .cd-permit-notes__icon {
    background: rgba(220, 38, 38, 0.14);
    color: #b91c1c;
  }
  .cd-permit-results__detail {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
  }
  .cd-permit-results__detail-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: var(--cd-space-2);
    border-bottom: 1px solid var(--cd-border-primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
  }
  .cd-permit-results__detail-eyebrow i {
    font-size: 0.8rem;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-permit-results__detail-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .cd-permit-results__detail-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-permit-results__detail-value {
    font-size: 0.9rem;
    color: var(--cd-text-primary);
    line-height: 1.5;
  }
  .cd-permit-results__detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cd-color-primary);
    text-decoration: none;
    transition: color 150ms ease;
  }
  .cd-permit-results__detail-link:hover {
    text-decoration: underline;
  }
  .cd-permit-results__detail-link i {
    font-size: 0.7rem;
  }
  .cd-permit-results__detail-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--cd-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    list-style: disc;
  }
  .cd-permit-results__detail-list li + li {
    margin-top: 0.25rem;
  }
  .cd-permit-results__note {
    border-top: 1px solid var(--cd-border-primary);
    padding-top: var(--cd-space-4);
  }
  .cd-permit-results__note-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
    margin-bottom: var(--cd-space-2);
  }
  .cd-permit-results__note-eyebrow i {
    font-size: 0.8rem;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-permit-results__note-body {
    font-family: var(--cd-font-editorial);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cd-text-secondary);
    margin: 0;
  }
  .cd-permit-results__disclaimer-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .cd-permit-results__disclaimer-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-permit-results__disclaimer-list li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.55rem;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
  }
  .cd-permit-results__cta {
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-2xl);
    padding: var(--cd-space-8) var(--cd-space-5);
    text-align: center;
  }
  @media (min-width: 768px) {
    .cd-permit-results__cta {
      padding: var(--cd-space-10) var(--cd-space-6);
    }
  }
  .cd-permit-results__cta-title {
    font-family: var(--cd-font-editorial);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0 0 var(--cd-space-2);
  }
  @media (min-width: 768px) {
    .cd-permit-results__cta-title {
      font-size: 1.875rem;
    }
  }
  .cd-permit-results__cta-lead {
    max-width: 34rem;
    margin: 0 auto var(--cd-space-5);
    font-size: 0.9375rem;
    color: var(--cd-text-secondary);
    line-height: 1.6;
  }
  .cd-permit-results__cta-action {
    display: flex;
    justify-content: center;
  }
  .cd-permit-coverage-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cd-space-4);
    margin-top: var(--cd-space-6);
    padding: var(--cd-space-5);
    border-radius: 1rem;
    background: linear-gradient( 135deg, var(--cd-color-primary) 0%, var(--cd-bg-card) 60% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, color-mix(in srgb, var(--cd-color-primary) 6%, var(--cd-bg-card)) 0%, var(--cd-bg-card) 60% );
    }
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 14%, transparent);
    }
  }
  @media (min-width: 640px) {
    .cd-permit-coverage-notice {
      flex-direction: row;
      align-items: center;
      gap: var(--cd-space-5);
      padding: var(--cd-space-4) var(--cd-space-6);
    }
  }
  .cd-permit-coverage-notice__media {
    flex-shrink: 0;
    width: 7rem;
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (min-width: 640px) {
    .cd-permit-coverage-notice__media {
      width: 8rem;
      height: 8rem;
    }
  }
  .cd-permit-coverage-notice__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }
  .cd-permit-coverage-notice__body {
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  @media (min-width: 640px) {
    .cd-permit-coverage-notice__body {
      text-align: left;
    }
  }
  .cd-permit-coverage-notice__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    margin: 0 0 0.25rem;
  }
  .cd-permit-coverage-notice__lead {
    font-size: 0.875rem;
    color: var(--cd-text-secondary);
    margin: 0 0 0.5rem;
  }
  .cd-permit-coverage-notice__list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--cd-text-primary);
  }
  .cd-permit-coverage-notice__list li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
  }
  @media (min-width: 640px) {
    .cd-permit-coverage-notice__list li {
      justify-content: flex-start;
    }
  }
  .cd-permit-coverage-notice__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  .cd-permit-coverage-notice__pill--on {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 14%, transparent);
    }
    color: var(--cd-color-primary);
  }
  .cd-permit-coverage-notice__pill--qc {
    background: rgba(79, 70, 229, 0.14);
    color: #4f46e5;
  }
  .cd-permit-coverage-notice__hint {
    font-size: 0.8125rem;
    color: var(--cd-text-secondary);
    margin: 0;
    line-height: 1.5;
  }
  .cd-permit-coverage-notice__hint strong {
    color: var(--cd-text-primary);
  }
}
@layer components {
  .cd-permit-guide-hero {
    position: relative;
    overflow: hidden;
    padding: var(--cd-space-12) 0 var(--cd-space-10);
    background: radial-gradient( 80% 60% at 0% 0%, var(--cd-color-accent) 0%, transparent 60% ), linear-gradient(180deg, var(--cd-bg-primary) 0%, var(--cd-bg-secondary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( 80% 60% at 0% 0%, color-mix(in srgb, var(--cd-color-accent) 6%, transparent) 0%, transparent 60% ), linear-gradient(180deg, var(--cd-bg-primary) 0%, var(--cd-bg-secondary) 100%);
    }
    border-bottom: 1px solid var(--cd-border-secondary);
  }
  @media (min-width: 768px) {
    .cd-permit-guide-hero {
      padding: var(--cd-space-16) 0 var(--cd-space-12);
    }
  }
  .cd-permit-guide-hero__ornament {
    position: absolute;
    bottom: -1px;
    right: -2rem;
    width: 22rem;
    height: 22rem;
    pointer-events: none;
    background-image: linear-gradient( to right, var(--cd-text-tertiary) 1px, transparent 1px ), linear-gradient( to bottom, var(--cd-text-tertiary) 1px, transparent 1px );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient( to right, color-mix(in srgb, var(--cd-text-tertiary) 25%, transparent) 1px, transparent 1px ), linear-gradient( to bottom, color-mix(in srgb, var(--cd-text-tertiary) 25%, transparent) 1px, transparent 1px );
    }
    background-size: 28px 28px;
    background-position: 0 0;
    -webkit-mask-image: radial-gradient( circle at 80% 80%, rgba(0, 0, 0, 0.55) 0%, transparent 70% );
    mask-image: radial-gradient( circle at 80% 80%, rgba(0, 0, 0, 0.55) 0%, transparent 70% );
    opacity: 0.5;
  }
  @media (max-width: 767px) {
    .cd-permit-guide-hero__ornament {
      display: none;
    }
  }
  .cd-permit-guide-hero__content {
    position: relative;
    z-index: 1;
    max-width: 48rem;
  }
  @media (max-width: 767px) {
    .cd-permit-guide-hero__content {
      text-align: center;
      margin-inline: auto;
    }
  }
  .cd-permit-guide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
    margin-bottom: var(--cd-space-4);
  }
  .cd-permit-guide-eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
  }
  .cd-permit-guide-hero__title {
    font-family: var(--cd-font-display);
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-3);
  }
  @media (min-width: 768px) {
    .cd-permit-guide-hero__title {
      font-size: 2.75rem;
    }
  }
  @media (min-width: 1024px) {
    .cd-permit-guide-hero__title {
      font-size: 3.25rem;
    }
  }
  .cd-permit-guide-hero__subtitle {
    font-family: var(--cd-font-display);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--cd-text-secondary);
    margin-bottom: var(--cd-space-5);
  }
  .cd-permit-guide-hero__lead {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--cd-text-secondary);
    margin-bottom: var(--cd-space-6);
    max-width: 38rem;
  }
  @media (max-width: 767px) {
    .cd-permit-guide-hero__lead {
      margin-inline: auto;
    }
  }
  .cd-permit-guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-2) var(--cd-space-5);
    align-items: center;
    font-size: 0.8125rem;
    color: var(--cd-text-secondary);
  }
  @media (max-width: 767px) {
    .cd-permit-guide-meta {
      justify-content: center;
    }
  }
  .cd-permit-guide-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .cd-permit-guide-meta__item i {
    color: var(--cd-color-accent);
    font-size: 0.75rem;
  }
  .cd-permit-guide-meta__sep {
    color: var(--cd-border-secondary);
    font-size: 0.625rem;
  }
  .cd-permit-guide-section {
    padding: var(--cd-space-12) 0;
  }
  @media (min-width: 768px) {
    .cd-permit-guide-section {
      padding: var(--cd-space-16) 0;
    }
  }
  .cd-permit-guide-section--alt {
    background: var(--cd-bg-secondary);
  }
  .cd-permit-guide-section-head {
    max-width: 42rem;
    margin: 0 auto var(--cd-space-8);
    text-align: center;
  }
  .cd-permit-guide-section-head__title {
    font-family: var(--cd-font-display);
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-3);
  }
  @media (min-width: 768px) {
    .cd-permit-guide-section-head__title {
      font-size: 2.125rem;
    }
  }
  .cd-permit-guide-section-head__lead {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cd-text-secondary);
  }
  .cd-permit-guide-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-5);
    position: relative;
  }
  .cd-permit-guide-steps__item {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: var(--cd-space-4);
    align-items: start;
    position: relative;
  }
  .cd-permit-guide-steps__item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 2.5rem;
    bottom: calc(var(--cd-space-5) * -1);
    left: calc(2.5rem / 2 - 0.5px);
    width: 1px;
    background: var(--cd-border-secondary);
  }
  .cd-permit-guide-steps__number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--cd-color-accent);
    color: #ffffff;
    font-family: var(--cd-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--cd-bg-card), 0 0 0 5px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px var(--cd-bg-card), 0 0 0 5px color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
    position: relative;
    z-index: 1;
  }
  .cd-permit-guide-steps__body {
    padding-top: 0.25rem;
    min-width: 0;
  }
  .cd-permit-guide-steps__name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--cd-text-primary);
    line-height: 1.4;
    margin-bottom: 0.35rem;
  }
  .cd-permit-guide-steps__text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cd-text-secondary);
  }
  .cd-permit-info-card__media {
    margin: calc(var(--cd-space-5) * -1) calc(var(--cd-space-5) * -1) 0;
    border-radius: var(--cd-radius-xl) var(--cd-radius-xl) 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #eef3fb 0%, #f7f9fc 50%, #f3eefb 100%);
    border-bottom: 1px solid var(--cd-border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .cd-permit-info-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  .cd-permit-info-row__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }
  .cd-permit-info-row__label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    color: var(--cd-color-accent);
    font-size: 0.7rem;
    flex-shrink: 0;
  }
  .cd-permit-guide-criteria {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--cd-space-8);
  }
  @media (min-width: 768px) {
    .cd-permit-guide-criteria {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1280px) {
    .cd-permit-guide-criteria {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .cd-permit-guide-criteria__item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    column-gap: var(--cd-space-3);
    align-items: start;
    padding: var(--cd-space-4) 0;
    border-bottom: 1px solid var(--cd-border-secondary);
  }
  .cd-permit-guide-criteria__icon {
    color: var(--cd-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.4;
    padding-top: 0.2rem;
  }
  .cd-permit-guide-criteria__name {
    margin: 0;
    font-family: var(--cd-font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--cd-text-primary);
    line-height: 1.4;
    letter-spacing: -0.005em;
  }
  .cd-permit-guide-criteria__desc {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--cd-text-tertiary);
    line-height: 1.55;
  }
  .cd-permit-guide-authority {
    position: relative;
    padding: var(--cd-space-5);
    border-radius: var(--cd-radius-xl);
    background: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    transition: border-color 150ms ease;
  }
  .cd-permit-guide-authority:hover {
    border-color: var(--cd-border-secondary);
  }
  .cd-permit-guide-authority--electrical {
    color: var(--cd-color-accent);
  }
  .cd-permit-guide-authority--gas {
    color: var(--cd-color-warning);
  }
  .cd-permit-guide-authority--water {
    color: #2563eb;
  }
  .cd-permit-guide-authority--heritage {
    color: var(--cd-color-premium);
  }
  .cd-permit-guide-authority--zoning {
    color: var(--cd-color-info);
  }
  .cd-permit-guide-authority--escarpment {
    color: #2d6a4f;
  }
  .cd-permit-guide-authority--regulation {
    color: var(--cd-color-accent);
  }
  .cd-permit-guide-authority__head {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    margin-bottom: var(--cd-space-3);
  }
  .cd-permit-guide-authority__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--cd-radius-lg);
    background: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, currentColor 12%, transparent);
    }
    color: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9375rem;
  }
  .cd-permit-guide-authority__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  .cd-permit-guide-authority__body {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--cd-text-secondary);
  }
  .cd-permit-guide-authority__list {
    margin: var(--cd-space-3) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-2);
  }
  .cd-permit-guide-authority__list-item {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.875rem;
  }
  .cd-permit-guide-authority__list-item i {
    color: currentColor;
    font-size: 0.625rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
  }
  .cd-permit-guide-authority__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cd-color-accent);
    text-decoration: none;
    margin-top: var(--cd-space-3);
  }
  .cd-permit-guide-authority__link:hover {
    text-decoration: underline;
  }
  .cd-permit-guide-authority__details {
    margin-top: var(--cd-space-3);
    font-size: 0.8125rem;
  }
  .cd-permit-guide-authority__details > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--cd-text-secondary);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .cd-permit-guide-authority__details > summary::-webkit-details-marker {
    display: none;
  }
  .cd-permit-guide-authority__details[open] > summary {
    margin-bottom: var(--cd-space-2);
  }
  .cd-permit-guide-authority__districts {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--cd-text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.6;
    columns: 2;
    column-gap: var(--cd-space-5);
  }
  @media (max-width: 640px) {
    .cd-permit-guide-authority__districts {
      columns: 1;
    }
  }
  .cd-permit-guide-table-wrap {
    background: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-xl);
    overflow: hidden;
  }
  .cd-permit-guide-table-scroll {
    overflow-x: auto;
  }
  .cd-permit-guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }
  .cd-permit-guide-table thead th {
    text-align: left;
    padding: var(--cd-space-4) var(--cd-space-4);
    font-family: var(--cd-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
    background: var(--cd-bg-secondary);
    border-bottom: 1px solid var(--cd-border-primary);
    white-space: nowrap;
  }
  .cd-permit-guide-table thead th.cd-permit-guide-table__col-status {
    text-align: center;
  }
  .cd-permit-guide-table tbody tr {
    transition: background-color 150ms ease;
  }
  .cd-permit-guide-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--cd-border-secondary);
  }
  .cd-permit-guide-table tbody tr:hover td {
    background: var(--cd-bg-hover);
  }
  .cd-permit-guide-table td {
    padding: var(--cd-space-4) var(--cd-space-4);
    vertical-align: top;
  }
  .cd-permit-guide-table td.cd-permit-guide-table__col-status {
    text-align: center;
    vertical-align: middle;
  }
  .cd-permit-guide-table__project-name {
    font-weight: 600;
    color: var(--cd-text-primary);
    line-height: 1.4;
  }
  .cd-permit-guide-table__project-desc {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--cd-text-tertiary);
    line-height: 1.45;
  }
  .cd-permit-guide-table__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
  }
  .cd-permit-guide-table__pill--required {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
  }
  .cd-permit-guide-table__pill--conditional {
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
  }
  .cd-permit-guide-table__pill--varies {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
  }
  .cd-permit-guide-table__pill--not_required {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
  }
  .cd-permit-guide-table__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3) var(--cd-space-5);
    align-items: center;
    padding: var(--cd-space-3) var(--cd-space-4);
    border-top: 1px solid var(--cd-border-secondary);
    background: var(--cd-bg-secondary);
    font-size: 0.75rem;
    color: var(--cd-text-tertiary);
  }
  .cd-permit-guide-table__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .cd-permit-guide-cta {
    position: relative;
    overflow: hidden;
    padding: var(--cd-space-10) var(--cd-space-6);
    border-radius: var(--cd-radius-2xl);
    background: radial-gradient( 50% 90% at 100% 0%, var(--cd-color-accent) 0%, transparent 65% ), linear-gradient( 135deg, var(--cd-color-accent) 0%, var(--cd-bg-card) 70% );
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( 50% 90% at 100% 0%, color-mix(in srgb, var(--cd-color-accent) 14%, transparent) 0%, transparent 65% ), linear-gradient( 135deg, color-mix(in srgb, var(--cd-color-accent) 5%, var(--cd-bg-card)) 0%, var(--cd-bg-card) 70% );
    }
    border: 1px solid var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-accent) 20%, var(--cd-border-primary));
    }
    text-align: center;
  }
  @media (min-width: 768px) {
    .cd-permit-guide-cta {
      padding: var(--cd-space-12) var(--cd-space-10);
    }
  }
  .cd-permit-guide-cta__title {
    font-family: var(--cd-font-display);
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-3);
  }
  @media (min-width: 768px) {
    .cd-permit-guide-cta__title {
      font-size: 2rem;
    }
  }
  .cd-permit-guide-cta__lead {
    max-width: 36rem;
    margin: 0 auto var(--cd-space-6);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cd-text-secondary);
  }
  .cd-permit-guide-cta__reassurance {
    margin-top: var(--cd-space-4);
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem var(--cd-space-3);
    font-size: 0.8125rem;
    color: var(--cd-text-tertiary);
  }
  .cd-permit-guide-cta__reassurance-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .cd-permit-guide-cta__reassurance-item i {
    color: var(--cd-color-accent);
    font-size: 0.6875rem;
  }
  .cd-permit-guide-faq {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
  }
  .cd-permit-guide-faq__item {
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-lg);
    background: var(--cd-bg-card);
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .cd-permit-guide-faq__item[open] {
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-accent) 35%, var(--cd-border-primary));
    }
    box-shadow: 0 4px 14px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 14px color-mix(in srgb, var(--cd-color-accent) 8%, transparent);
    }
  }
  .cd-permit-guide-faq__summary {
    cursor: pointer;
    list-style: none;
    padding: var(--cd-space-4) var(--cd-space-5);
    font-weight: 600;
    color: var(--cd-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cd-space-4);
    transition: background-color 150ms ease;
  }
  .cd-permit-guide-faq__summary::-webkit-details-marker {
    display: none;
  }
  .cd-permit-guide-faq__summary:hover {
    background: var(--cd-bg-hover);
  }
  .cd-permit-guide-faq__icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    transition: background 150ms ease, color 150ms ease;
  }
  .cd-permit-guide-faq__item[open] .cd-permit-guide-faq__icon {
    background: var(--cd-color-accent);
    color: #ffffff;
  }
  .cd-permit-guide-faq__icon::before {
    content: '\f067';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
  }
  .cd-permit-guide-faq__item[open] .cd-permit-guide-faq__icon::before {
    content: '\f068';
  }
  .cd-permit-guide-faq__body {
    padding: 0 var(--cd-space-5) var(--cd-space-5);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cd-text-secondary);
  }
  .cd-legal-callout {
    display: grid;
    grid-template-columns: 2rem 1fr;
    column-gap: var(--cd-space-4);
    align-items: start;
    padding: var(--cd-space-4) 0 var(--cd-space-4) var(--cd-space-4);
    border-left: 1px solid var(--cd-border-secondary);
  }
  .cd-legal-callout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--cd-color-accent);
    font-size: 0.95rem;
    padding-top: 0.1rem;
  }
  .cd-legal-callout__body {
    min-width: 0;
  }
  .cd-legal-callout__title {
    font-family: var(--cd-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin: 0 0 0.4rem;
  }
  .cd-legal-callout__body p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cd-text-secondary);
  }
  .cd-legal-callout__body p + p {
    margin-top: var(--cd-space-3);
  }
  .cd-permit-notes--warning {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.28);
  }
  .cd-permit-notes--warning .cd-permit-notes__icon {
    background: rgba(220, 38, 38, 0.14);
    color: #b91c1c;
  }
  .cd-permit-guide-contact {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
    margin-top: var(--cd-space-5);
    padding-top: var(--cd-space-5);
    border-top: 1px solid var(--cd-border-secondary);
  }
  .cd-permit-guide-contact__action {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3) var(--cd-space-4);
    border-radius: var(--cd-radius-lg);
    background: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    color: var(--cd-text-primary);
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
    min-height: 4rem;
  }
  .cd-permit-guide-contact__action:hover {
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 5%, var(--cd-bg-card));
    }
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-accent) 30%, var(--cd-border-primary));
    }
    transform: translateY(-1px);
    text-decoration: none;
  }
  .cd-permit-guide-contact__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 12%, transparent);
    }
    color: var(--cd-color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .cd-permit-guide-contact__action:hover .cd-permit-guide-contact__icon {
    background: var(--cd-color-accent);
    color: #ffffff;
  }
  .cd-permit-guide-contact__body {
    flex: 1;
    min-width: 0;
  }
  .cd-permit-guide-contact__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
  }
  .cd-permit-guide-contact__value {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cd-text-primary);
    line-height: 1.4;
    word-break: break-word;
  }
  .cd-permit-info-card__body--breathe .cd-permit-info-row__value {
    line-height: 1.6;
    margin-top: 0.35rem;
  }
  .cd-permit-info-card__body--breathe .cd-permit-info-row + .cd-permit-info-row {
    margin-top: var(--cd-space-2);
  }
}
@layer components {
  .cd-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cd-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .cd-filter-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-science-blue);
    }
    &:focus {
      --tw-ring-offset-width: 1px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .cd-filter-btn.active {
    border-color: var(--color-science-blue);
    background-color: var(--color-science-blue);
    color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .cd-filter-btn i {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .cd-filter-count {
    margin-left: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    opacity: 75%;
  }
  .cd-features-list {
    width: 100%;
  }
  .cd-features-table {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .cd-features-table-header {
    display: grid;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-gray-900);
    text-transform: uppercase;
    grid-template-columns: 2fr 120px 100px 100px 140px 120px;
  }
  .cd-features-table-row {
    display: grid;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    grid-template-columns: 2fr 120px 100px 100px 140px 120px;
  }
  .cd-features-table-row:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .cd-features-table-row.cd-feature-inactive {
    opacity: 60%;
  }
  .cd-feature-name-col {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .cd-feature-name {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
  }
  .cd-feature-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .cd-feature-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .cd-feature-description {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-600);
  }
  .cd-feature-type-col {
    display: flex;
    align-items: center;
  }
  .cd-feature-type {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .cd-feature-type-icon {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .cd-feature-type-numeric {
    color: var(--color-science-blue);
  }
  .cd-feature-type-boolean {
    color: var(--color-forest-green);
  }
  .cd-feature-type-time {
    color: var(--color-warning-orange);
  }
  .cd-feature-type-unlimited {
    color: var(--color-deep-purple);
  }
  .cd-feature-type-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .cd-feature-status-col {
    display: flex;
    align-items: center;
  }
  .cd-feature-status {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .cd-status-indicator {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
  }
  .cd-status-active {
    background-color: var(--color-forest-green);
  }
  .cd-status-inactive {
    background-color: var(--color-gray-400);
  }
  .cd-status-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }
  .cd-feature-usage-col {
    display: flex;
    align-items: center;
  }
  .cd-feature-usage {
    text-align: center;
  }
  .cd-usage-count {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-science-blue);
  }
  .cd-usage-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .cd-usage-type {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-warning-orange);
  }
  .cd-feature-config-col {
    display: flex;
    align-items: center;
  }
  .cd-feature-config {
    text-align: center;
  }
  .cd-config-value {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .cd-config-value.cd-config-none {
    color: var(--color-gray-400);
  }
  .cd-config-label {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
  }
  .cd-feature-actions-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .cd-feature-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .cd-action-btn {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-gray-500);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-science-blue);
    }
    &:focus {
      --tw-ring-offset-width: 1px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .cd-action-edit:hover {
    background-color: var(--color-blue-50);
    color: var(--color-science-blue);
  }
  .cd-action-analytics:hover {
    background-color: var(--color-orange-50);
    color: var(--color-warning-orange);
  }
  .cd-badge-premium {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-warning-orange);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .cd-badge-inactive {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-400);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .cd-feature-form-input input, .cd-feature-form-input select, .cd-feature-form-input textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:focus {
      border-color: var(--color-science-blue);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-science-blue);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    background-color: var(--color-white);
    color: var(--color-gray-900);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .cd-feature-form-toggle input {
    position: relative;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 12);
    appearance: none;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-200);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--color-science-blue);
    }
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:checked {
      background-color: var(--color-science-blue);
    }
  }
  .cd-features-empty {
    width: 100%;
  }
  .cd-empty-state {
    margin-inline: auto;
    max-width: var(--container-md);
    padding-block: calc(var(--spacing) * 16);
    text-align: center;
  }
  .cd-empty-icon {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
    color: var(--color-gray-300);
  }
  .cd-empty-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .cd-empty-description {
    margin-bottom: calc(var(--spacing) * 6);
    color: var(--color-gray-600);
  }
  @media (max-width: 768px) {
    .cd-features-table-header {
      display: none;
    }
    .cd-features-table-row {
      margin-bottom: calc(var(--spacing) * 4);
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: calc(var(--spacing) * 4);
      border-radius: var(--radius-lg);
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--color-gray-200);
      padding: calc(var(--spacing) * 4);
      background-color: var(--color-white);
    }
    .cd-features-table {
      border-style: var(--tw-border-style);
      border-width: 0px;
      background-color: transparent;
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .cd-feature-name-col {
      order: 1;
    }
    .cd-feature-type-col, .cd-feature-status-col, .cd-feature-usage-col, .cd-feature-config-col {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .cd-feature-type-col::before {
      content: "Type:";
      margin-right: calc(var(--spacing) * 4);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-700);
    }
    .cd-feature-status-col::before {
      content: "Status:";
      margin-right: calc(var(--spacing) * 4);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-700);
    }
    .cd-feature-usage-col::before {
      content: "Usage:";
      margin-right: calc(var(--spacing) * 4);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-700);
    }
    .cd-feature-config-col::before {
      content: "Config:";
      margin-right: calc(var(--spacing) * 4);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-700);
    }
    .cd-feature-actions-col {
      order: 9999;
      justify-content: flex-start;
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--color-gray-100);
      padding-top: calc(var(--spacing) * 3);
    }
    .cd-filter-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: calc(var(--spacing) * 4);
    }
    .cd-filter-group {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: calc(var(--spacing) * 2);
    }
    .cd-filter-btn {
      justify-content: center;
      text-align: center;
    }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .cd-features-table-header, .cd-features-table-row {
      grid-template-columns: 2fr 100px 80px 80px 120px 100px;
    }
  }
}
@layer components {
  .cd-icon-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--cd-radius-lg, 0.5rem);
    border: 1px solid var(--cd-border-primary, #e5e7eb);
    background: var(--cd-bg-primary, #ffffff);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }
  .cd-icon-card:hover {
    border-color: #417690;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
  }
  .cd-icon-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #417690;
  }
  .cd-icon-card__stage {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: var(--cd-bg-secondary, #f9fafb);
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .cd-icon-card:not(.cd-icon-card--compact) .cd-icon-card__stage {
      aspect-ratio: auto;
      height: 14rem;
    }
  }
  .cd-icon-card:not(.cd-icon-card--compact) .cd-icon-card__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 110deg, var(--cd-bg-secondary, #f9fafb) 25%, var(--cd-bg-tertiary, #f1f5f9) 45%, var(--cd-bg-secondary, #f9fafb) 65% );
    background-size: 200% 100%;
    animation: cd-icon-stage-shimmer 1.6s ease-in-out infinite;
    opacity: 1;
    transition: opacity 200ms ease-out;
    pointer-events: none;
    z-index: 0;
  }
  .cd-icon-card:not(.cd-icon-card--compact) .cd-icon-card__stage.is-loaded::before {
    opacity: 0;
    animation: none;
  }
  .cd-icon-card__stage img {
    width: 88%;
    height: 88%;
    object-fit: contain;
  }
  .cd-icon-card:not(.cd-icon-card--compact) .cd-icon-card__stage img {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 200ms ease-out;
  }
  .cd-icon-card:not(.cd-icon-card--compact) .cd-icon-card__stage.is-loaded img {
    opacity: 1;
  }
  @keyframes cd-icon-stage-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-icon-card:not(.cd-icon-card--compact) .cd-icon-card__stage::before {
      animation: none;
      opacity: 0.4;
    }
    .cd-icon-card:not(.cd-icon-card--compact) .cd-icon-card__stage img, .cd-icon-card:not(.cd-icon-card--compact) .cd-icon-card__stage::before {
      transition: none;
    }
  }
  .cd-icon-card__zoom {
    position: relative;
    z-index: 2;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0.375rem;
    background: transparent;
    border: 0;
    color: var(--cd-text-tertiary, #6b7280);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
  }
  .cd-icon-card__zoom:hover {
    background: var(--cd-bg-secondary, #f9fafb);
    color: var(--cd-text-primary, #111827);
  }
  .cd-icon-card__zoom:focus-visible {
    outline: 2px solid #417690;
    outline-offset: 2px;
  }
  .cd-icon-card__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.375rem;
  }
  .cd-icon-card__title-row .cd-icon-card__title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cd-icon-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    padding: 0.625rem 0.75rem 0.75rem;
    text-align: left;
    border-top: 1px solid var(--cd-border-primary, #e5e7eb);
    background: var(--cd-bg-primary, #ffffff);
  }
  .cd-icon-card__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cd-text-primary, #111827);
    line-height: 1.3;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }
  .cd-icon-card__meta {
    font-size: 0.6875rem;
    color: var(--cd-text-tertiary, #6b7280);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    line-height: 1.35;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cd-icon-card__variant {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0 0.3125rem;
    border-radius: 0.25rem;
    background: #f3f4f6;
    color: #4b5563;
    font-family: var(--cd-font-sans, system-ui, sans-serif);
    font-size: 0.625rem;
    font-weight: 600;
    vertical-align: 1px;
  }
  .cd-icon-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
    margin-top: 0.125rem;
  }
  .cd-icon-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.375rem 0.0625rem 0.25rem;
    border-radius: 999px;
    border: 1px solid;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
  }
  .cd-icon-chip > i {
    font-size: 0.5625rem;
  }
  .cd-icon-chip__label {
    font-weight: 500;
    opacity: 0.7;
    margin-left: 0.0625rem;
  }
  .cd-icon-chip--uses {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
  }
  .cd-icon-chip--aliases {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
  }
  .cd-icon-card__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--cd-text-secondary, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
  .cd-icon-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-height: 1.375rem;
    overflow: hidden;
  }
  .cd-icon-card__tags__pill {
    display: inline-flex;
    align-items: center;
    padding: 0 0.4375rem;
    height: 1.125rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    max-width: 6.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-icon-card__tags__more {
    display: inline-flex;
    align-items: center;
    padding: 0 0.4375rem;
    height: 1.125rem;
    border-radius: 999px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
  }
  .cd-icon-detail__thumb-button {
    position: relative;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: zoom-in;
    border-radius: 0.375rem;
  }
  .cd-icon-detail__thumb-button:focus-visible {
    outline: 2px solid #417690;
    outline-offset: 2px;
  }
  .cd-icon-detail__thumb-button__overlay {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.85);
    color: #ffffff;
    font-size: 0.6875rem;
    opacity: 0;
    transition: opacity 140ms ease;
  }
  .cd-icon-detail__thumb-button:hover .cd-icon-detail__thumb-button__overlay, .cd-icon-detail__thumb-button:focus-visible .cd-icon-detail__thumb-button__overlay {
    opacity: 1;
  }
  .cd-icon-card--compact .cd-icon-card__info {
    padding: 0.375rem 0.5rem 0.5rem;
  }
  .cd-icon-card--compact .cd-icon-card__meta {
    font-size: 0.6875rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
  }
  .cd-icon-card--selected {
    border-color: #417690;
    box-shadow: 0 0 0 2px color-mix(in srgb, #417690 35%, transparent);
  }
  .cd-icon-card--selected .cd-icon-card__stage {
    background: #417690;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, #417690 6%, var(--cd-bg-secondary, #f9fafb));
    }
  }
  .cd-icon-card {
    position: relative;
  }
  .cd-icon-card__open {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1;
  }
  .cd-icon-card__open:focus-visible {
    outline: 2px solid #417690;
    outline-offset: -2px;
  }
  .cd-icon-card__state-line {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    padding: 0.125rem 0.4375rem;
    border-radius: 0.25rem;
    border: 1px solid;
    white-space: normal;
    word-break: break-word;
  }
  .cd-icon-card__state-line > i {
    font-size: 0.6875rem;
    flex-shrink: 0;
  }
  .cd-icon-card__state-line--broken {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
  }
  .cd-icon-card__state-line--orphan {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
  }
  .cd-icon-card__state-line--planned {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #4b5563;
  }
  .cd-icon-card__usages {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: #065f46;
  }
  .cd-icon-card__usages > i {
    color: #10b981;
    font-size: 0.625rem;
  }
  .cd-icon-card__usages strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .cd-icon-card__usage-context {
    color: var(--cd-text-tertiary, #6b7280);
    font-weight: 400;
  }
  .cd-icon-card__aliases {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.6875rem;
    color: #1e40af;
  }
  .cd-icon-card__aliases > i {
    font-size: 0.625rem;
  }
  .cd-no-scroll {
    overflow: hidden;
  }
}
@layer components {
  .cd-htmx-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease-out;
    z-index: var(--cd-z-topbar-dropdown);
  }
  .cd-htmx-progress.is-active {
    opacity: 1;
  }
  .cd-htmx-progress__bar {
    height: 100%;
    width: 35%;
    background: linear-gradient( 90deg, transparent, #417690 50%, transparent );
    animation: cd-htmx-progress-slide 1.1s ease-in-out infinite;
    transform: translateX(-100%);
    will-change: transform;
  }
  @keyframes cd-htmx-progress-slide {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(380%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-htmx-progress__bar {
      animation: none;
      width: 100%;
      transform: none;
      opacity: 0.45;
    }
    .cd-htmx-progress.is-active .cd-htmx-progress__bar {
      animation: cd-htmx-progress-pulse 1.4s ease-in-out infinite;
    }
  }
  @keyframes cd-htmx-progress-pulse {
    0%, 100% {
      opacity: 0.25;
    }
    50% {
      opacity: 0.75;
    }
  }
}
@layer components {
  .cd-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
  }
  .cd-active-chip:hover {
    background: #dbeafe;
    border-color: #93c5fd;
  }
  .cd-active-chip__label {
    max-width: 16rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-icon-filters {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid var(--cd-border-primary, #e5e7eb);
    border-radius: var(--cd-radius-lg, 0.5rem);
    background: var(--cd-bg-primary, #ffffff);
  }
  .cd-icon-filters__section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px dashed var(--cd-border-primary, #e5e7eb);
  }
  .cd-icon-filters__section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .cd-icon-filters__label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cd-text-tertiary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
  }
  .cd-clear-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  }
  .cd-clear-all-btn:hover {
    background: #fef2f2;
    border-color: #f87171;
    color: #991b1b;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15);
  }
  .cd-clear-all-btn:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
  }
  .cd-clear-all-btn > i {
    font-size: 0.6875rem;
  }
  .cd-icon-lightbox {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
  }
  @media (min-width: 1024px) {
    .cd-icon-lightbox {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
  }
  .cd-icon-lightbox__canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    max-height: min(70vh, 32rem);
    border-radius: 0.5rem;
    background-color: #fafafa;
    background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, 10px 0;
    border: 1px solid var(--cd-border-primary, #e5e7eb);
  }
  .cd-icon-lightbox__canvas img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
  }
  .cd-icon-lightbox__meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 0.8125rem;
    color: var(--cd-text-secondary, #4b5563);
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    padding-right: 0.25rem;
  }
  .cd-icon-lightbox__meta-row {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--cd-border-secondary, #f3f4f6);
  }
  .cd-icon-lightbox__meta-row:first-child {
    padding-top: 0;
  }
  .cd-icon-lightbox__meta-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .cd-icon-lightbox__meta-key {
    font-weight: 600;
    color: var(--cd-text-tertiary, #6b7280);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 0.25rem;
  }
  .cd-icon-lightbox__meta-value {
    color: var(--cd-text-primary, #111827);
    font-size: 0.8125rem;
    line-height: 1.45;
    word-break: break-word;
  }
  .cd-icon-lightbox__meta-value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
  }
  .cd-icon-lightbox__meta-value--break {
    word-break: break-all;
  }
  .cd-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    display: inline-block;
    background: #9ca3af;
    flex-shrink: 0;
  }
  .cd-status-dot--planned {
    background: #9ca3af;
  }
  .cd-status-dot--generated {
    background: #3b82f6;
  }
  .cd-status-dot--needs_revision {
    background: #f59e0b;
  }
  .cd-status-dot--approved {
    background: #10b981;
  }
  .cd-status-dot--rejected {
    background: #ef4444;
  }
}
@layer components {
  .cd-modal-icon-picker__panel {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
  }
  .cd-modal-icon-picker__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
  }
  .cd-modal-icon-picker__title-block {
    display: flex;
    align-items: center;
    gap: 0.875rem;
  }
  .cd-modal-icon-picker__hero {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-lg, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #374151, #1f2937);
    color: #ffffff;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
  }
  .cd-modal-icon-picker__toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--cd-bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--cd-border-primary, #e5e7eb);
    flex-shrink: 0;
  }
  .cd-modal-icon-picker__search {
    flex: 1;
    min-width: 0;
  }
  .cd-modal-icon-picker__search > input {
    width: 100%;
  }
  .cd-modal-icon-picker__current {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem 0.375rem 0.5rem;
    border-radius: var(--cd-radius-md, 0.375rem);
    background: var(--cd-bg-primary, #ffffff);
    border: 1px solid var(--cd-border-primary, #e5e7eb);
    flex-shrink: 0;
    max-width: 18rem;
  }
  .cd-modal-icon-picker__current-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-text-tertiary, #6b7280);
  }
  .cd-modal-icon-picker__current-thumb {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    flex-shrink: 0;
  }
  .cd-modal-icon-picker__current-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--cd-text-secondary, #374151);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .cd-modal-icon-picker__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
    min-height: 0;
  }
  .cd-modal-icon-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
  }
  .cd-modal-icon-picker__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 0.75rem;
  }
  .cd-modal-icon-picker__empty-glyph {
    font-size: 2.5rem;
    color: var(--cd-border-secondary, #d1d5db);
    margin-bottom: 0.25rem;
  }
  .cd-modal-icon-picker__empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cd-text-primary, #111827);
    margin: 0;
  }
  .cd-modal-icon-picker__empty-hint {
    font-size: 0.8125rem;
    color: var(--cd-text-secondary, #4b5563);
    max-width: 28rem;
    line-height: 1.45;
    margin: 0 0 0.5rem;
  }
  .cd-modal-icon-picker__footer {
    justify-content: space-between;
    flex-shrink: 0;
  }
  .cd-modal-icon-picker__clear {
    background: transparent;
    border-color: transparent;
    color: var(--cd-color-crimson-red, #dc2626);
    box-shadow: none;
  }
  .cd-modal-icon-picker__clear:hover {
    background: var(--cd-color-crimson-red, #dc2626);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-crimson-red, #dc2626) 8%, transparent);
    }
    border-color: var(--cd-color-crimson-red, #dc2626);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-crimson-red, #dc2626) 20%, transparent);
    }
    color: var(--cd-color-crimson-red, #dc2626);
  }
  .cd-modal-icon-picker__clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-color-crimson-red, #dc2626);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-crimson-red, #dc2626) 40%, transparent);
    }
  }
  @media (max-width: 640px) {
    .cd-modal-icon-picker__toolbar {
      flex-wrap: wrap;
      padding: 0.75rem 1rem;
    }
    .cd-modal-icon-picker__search {
      flex-basis: 100%;
    }
    .cd-modal-icon-picker__current {
      max-width: 100%;
    }
    .cd-modal-icon-picker__body {
      padding: 0.75rem 1rem 1.25rem;
    }
    .cd-modal-icon-picker__grid {
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      gap: 0.5rem;
    }
    .cd-modal-icon-picker__footer {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 0.5rem;
    }
  }
}
@layer components {
  .cd-icon-tag-input {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-2);
    align-items: center;
    min-height: 2.5rem;
    padding: var(--cd-space-2);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-md);
    background-color: var(--cd-bg-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-icon-tag-input:focus-within {
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 3px var(--cd-color-primary-soft, rgba(16, 185, 129, 0.15));
  }
  .cd-icon-tag-input__field {
    flex: 1 1 8rem;
    min-width: 8rem;
    border: 0;
    background: transparent;
    padding: 0 var(--cd-space-1);
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    outline: none;
  }
  .cd-icon-tag-input__field::placeholder {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-icon-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1);
    padding: 2px var(--cd-space-2);
    border-radius: 9999px;
    font-size: var(--cd-text-xs);
    font-weight: 500;
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    line-height: 1.4;
  }
  .cd-icon-tag-pill__remove {
    border: 0;
    background: transparent;
    color: var(--cd-text-secondary);
    cursor: pointer;
    padding: 0 0 0 2px;
    line-height: 1;
    font-size: var(--cd-text-xs);
    transition: color 0.15s ease;
  }
  .cd-icon-tag-pill__remove:hover, .cd-icon-tag-pill__remove:focus-visible {
    color: var(--cd-color-danger, #b91c1c);
    outline: none;
  }
  .cd-icon-tag-input__suggestions {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .cd-icon-tag-input__suggestion-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--cd-space-2) var(--cd-space-3);
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s ease;
  }
  .cd-icon-tag-input__suggestion-item.highlighted {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix( in srgb, var(--cd-color-primary) 8%, var(--cd-bg-primary) );
    }
  }
  .cd-icon-tag-input__suggestion-item--create {
    color: var(--cd-text-secondary);
    font-style: italic;
  }
  .cd-icon-tag-input__suggestion-item--create::before {
    content: "+ ";
    font-style: normal;
    font-weight: 600;
    margin-right: 4px;
    color: var(--cd-color-primary);
  }
}
@layer components {
  .animate-fade-in {
    opacity: 0%;
    animation: fadeIn 0.4s ease-out forwards;
  }
  .animate-scale-in {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    opacity: 0%;
    animation: scaleIn 0.3s ease-out forwards;
  }
  .animate-slide-in-up {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    opacity: 0%;
    animation: slideInUp 0.3s ease-out forwards;
  }
  .animate-pulse-soft {
    animation: pulseSoft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .animate-bounce-gentle {
    animation: bounceGentle 0.8s ease-in-out infinite;
  }
  [data-notification-card-root].htmx-swapping:not(tr) {
    animation: notificationCardDissolve 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    overflow: hidden;
    pointer-events: none;
  }
  tr[data-notification-card-root].htmx-swapping {
    animation: notificationRowFade 0.3s ease-in forwards;
    pointer-events: none;
  }
  .cd-profession-showcase {
    overflow: hidden;
    padding: var(--cd-space-8) 0;
    position: relative;
    background: transparent;
  }
  .cd-profession-showcase-hero {
    overflow: hidden;
    padding: var(--cd-space-6) 0 var(--cd-space-8) 0;
    position: relative;
    background: transparent;
    margin-top: var(--cd-space-4);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    -webkit-mask: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .cd-profession-showcase-hero::before, .cd-profession-showcase-hero::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12%;
    z-index: 20;
    pointer-events: none;
  }
  .cd-profession-showcase-hero::before {
    left: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 40%, transparent 100%);
    backdrop-filter: blur(2px);
  }
  .cd-profession-showcase-hero::after {
    right: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.1) 100%);
    backdrop-filter: blur(2px);
  }
  .cd-profession-row {
    margin-bottom: var(--cd-space-8);
    overflow: visible;
    white-space: nowrap;
    position: relative;
    background: transparent;
  }
  .cd-profession-row:last-child {
    margin-bottom: 0;
  }
  .cd-profession-track {
    display: inline-flex;
    gap: var(--cd-space-4);
    animation-duration: 180s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .cd-profession-row-ltr .cd-profession-track {
    animation-name: scrollLeftToRight;
  }
  .cd-profession-row-rtl .cd-profession-track {
    animation-name: scrollRightToLeft;
  }
  .cd-profession-row:nth-child(1) .cd-profession-track {
    animation-delay: -90s;
  }
  .cd-profession-row:nth-child(2) .cd-profession-track {
    animation-delay: -60s;
  }
  .cd-profession-row:nth-child(3) .cd-profession-track {
    animation-delay: -120s;
  }
  .cd-profession-card-wrapper {
    flex-shrink: 0;
    width: 280px;
    pointer-events: auto;
  }
  .cd-profession-showcase-hero .cd-profession-card-wrapper {
    width: 240px;
  }
  .cd-profession-showcase-hero .cd-profession-track {
    gap: var(--cd-space-3);
  }
  .cd-profession-card {
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-6);
    cursor: pointer;
    transition: all 300ms;
    background: linear-gradient(135deg, var(--cd-bg-card) 0%, var(--cd-bg-secondary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-bg-card) 95%, transparent) 0%, color-mix(in srgb, var(--cd-bg-secondary) 95%, transparent) 100%);
    }
    backdrop-filter: blur(10px);
    border: 2px solid var(--cd-border-primary);
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .cd-profession-card:hover {
    border-color: var(--cd-color-primary);
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-profession-card-selected {
    border-color: var(--cd-color-primary);
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 5%, transparent) 0%, color-mix(in srgb, var(--cd-color-primary) 10%, transparent) 100%);
    }
  }
  .cd-profession-showcase .cd-profession-card {
    padding: var(--cd-space-4);
  }
  .cd-profession-showcase .cd-profession-card:hover {
    border-color: var(--cd-color-primary);
    box-shadow: 0 4px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 20px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    transform: translateY(-2px);
    z-index: 10;
    position: relative;
  }
  .cd-profession-showcase .cd-profession-card:hover .cd-profession-icon-box {
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-profession-showcase-hero .cd-profession-card {
    background: linear-gradient(135deg, var(--cd-bg-card) 0%, var(--cd-bg-secondary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-bg-card) 98%, transparent) 0%, color-mix(in srgb, var(--cd-bg-secondary) 95%, transparent) 100%);
    }
    backdrop-filter: blur(15px);
    border: 2px solid color-mix(in srgb, white 20%, transparent);
    box-shadow: 0 8px 32px color-mix(in srgb, black 15%, transparent);
  }
  .cd-profession-showcase-hero .cd-profession-card:hover {
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 90%, white);
    }
    box-shadow: 0 12px 40px var(--cd-color-primary), 0 8px 32px color-mix(in srgb, black 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 12px 40px color-mix(in srgb, var(--cd-color-primary) 25%, transparent), 0 8px 32px color-mix(in srgb, black 20%, transparent);
    }
    transform: translateY(-3px);
  }
  .cd-profession-showcase:hover .cd-profession-track, .cd-profession-showcase-hero:hover .cd-profession-track {
    animation-play-state: paused;
  }
  .cd-profession-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--cd-space-3);
  }
  .cd-profession-name {
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: 0.25rem;
    font-size: var(--cd-text-sm);
  }
  .cd-profession-showcase .cd-profession-header {
    gap: var(--cd-space-2);
    margin-bottom: var(--cd-space-2);
  }
  .cd-profession-showcase .cd-profession-name {
    margin: 0;
    flex: 1;
  }
  .cd-profession-showcase .cd-profession-description {
    margin-bottom: var(--cd-space-2);
    line-height: 1.4;
  }
  .cd-profession-showcase .cd-profession-meta {
    margin-top: var(--cd-space-2);
  }
  .cd-profession-icon-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
  }
  .cd-profession-card:hover .cd-profession-icon-box, .cd-profession-card-selected .cd-profession-icon-box {
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-profession-description {
    color: var(--cd-text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: var(--cd-space-2);
    font-size: var(--cd-text-xs);
  }
  .cd-profession-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--cd-text-xs);
  }
  .cd-profession-services-count {
    color: var(--cd-text-tertiary);
  }
  @media (max-width: 768px) {
    .cd-profession-card-wrapper {
      width: 240px;
    }
    .cd-profession-track {
      gap: var(--cd-space-3);
      animation-duration: 135s;
    }
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulseSoft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
@keyframes bounceGentle {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}
@keyframes scrollLeftToRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes scrollRightToLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes suggestionPulse {
  0% {
    box-shadow: 0 0 0 0 var(--cd-color-accent);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--cd-color-accent) 30%, transparent);
    transform: scale(1.02);
  }
  100% {
    box-shadow: none;
    transform: scale(1);
  }
}
.cd-suggestion-highlight {
  animation: suggestionPulse 0.5s ease-out;
}
@keyframes notificationCardDissolve {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    max-height: 400px;
  }
  50% {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    filter: blur(4px);
    max-height: 400px;
  }
  100% {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    filter: blur(4px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }
}
@keyframes notificationRowFade {
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in, .animate-scale-in, .animate-slide-in-up, .animate-pulse-soft, .animate-bounce-gentle, .cd-suggestion-highlight {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-notification-card-root].htmx-swapping {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  .cd-profession-track {
    animation: none !important;
  }
  .cd-profession-card, .cd-profession-icon-box {
    transition: none !important;
  }
  .cd-profession-showcase .cd-profession-card:hover, .cd-profession-showcase-hero .cd-profession-card:hover {
    transform: none !important;
  }
}
@layer components {
  @keyframes cd-skeleton-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  .cd-skeleton-mode {
    pointer-events: none;
    user-select: none;
  }
  .cd-skeleton-mode * {
    color: transparent !important;
    caret-color: transparent !important;
  }
  .cd-skeleton-mode :where( h1, h2, h3, h4, h5, h6, p, a, span, label, small, strong, em, td, th, dt, dd, li, figcaption, button, .cd-btn ) {
    background-color: var(--cd-bg-tertiary);
    border-radius: 0.25rem;
    animation: cd-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    text-decoration: none !important;
  }
  .cd-skeleton-mode :where(.cd-badge, .cd-badge-status) {
    background: var(--cd-bg-tertiary) !important;
    border-color: transparent !important;
    animation: cd-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .cd-skeleton-mode :where(.cd-btn) {
    background: var(--cd-bg-tertiary) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .cd-skeleton-mode img {
    opacity: 0;
  }
  .cd-skeleton-mode svg {
    visibility: hidden;
  }
  .cd-skeleton-mode :where(.cd-card, .cd-card-premium) {
    box-shadow: none !important;
  }
  .cd-skeleton-mode :where( [class*="cd-card-border-"] ) {
    border-color: var(--cd-border-primary) !important;
  }
  .cd-skeleton-mode :where([class*="backdrop-blur"]) {
    backdrop-filter: none !important;
    background: transparent !important;
  }
  .cd-skeleton-mode :where(input, select, textarea) {
    background-color: var(--cd-bg-tertiary) !important;
    border-color: var(--cd-border-primary) !important;
    animation: cd-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-skeleton-mode * {
      animation: none !important;
    }
  }
}
@layer components {
  .cd-screenshot-showcase {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2.5rem;
  }
  @media (min-width: 1024px) {
    .cd-screenshot-showcase {
      flex-direction: row;
      gap: 3rem;
    }
    .cd-screenshot-showcase-reverse {
      flex-direction: row-reverse;
    }
  }
  .screenshot-container {
    flex: 1;
    position: relative;
    overflow: hidden;
  }
  .screenshot-container-bordered {
    border: 1px solid var(--cd-border-primary);
    border-radius: 0.75rem;
  }
  .cd-screenshot-frame {
    width: 100%;
    height: auto;
    transform: scale(1.35);
    transform-origin: center center;
    transition: transform 0.4s ease;
    object-fit: cover;
    object-position: center;
  }
  .cd-screenshot-frame:hover {
    transform: scale(1);
  }
  .cd-screenshot-frame.cd-screenshot-no-zoom {
    transform: scale(1);
  }
  .cd-screenshot-frame.cd-screenshot-no-zoom:hover {
    transform: scale(1);
  }
  .screenshot-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .feature-icon-inline {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-secondary));
    margin-bottom: 1.5rem;
  }
  .feature-icon-inline i {
    color: white;
    font-size: 1.5rem;
  }
  .feature-headline {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.2;
  }
  .feature-subheadline {
    font-size: 1.25rem;
    color: var(--cd-text-secondary);
    margin-bottom: 1.5rem;
  }
  .feature-supporting-text {
    color: var(--cd-text-secondary);
    line-height: 1.6;
    margin-top: 1rem;
  }
  .screenshot-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
  }
  .screenshot-tier-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-size: 0.6875rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .screenshot-tier-badge i {
    font-size: 0.625rem;
  }
  .screenshot-tier-badge-text {
    line-height: 1;
  }
  .screenshot-tier-badge-business {
    background-color: var(--membership-business-primary, #d4af37);
  }
  .screenshot-tier-badge-professional {
    background-color: var(--membership-professional-primary, #0B4F8C);
  }
  @media (max-width: 767px) {
    .screenshot-tier-badge {
      padding: 0.375rem;
    }
    .screenshot-tier-badge-text {
      display: none;
    }
  }
  .cd-feature-card {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: box-shadow 0.3s ease;
  }
  .cd-feature-card:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  }
  .cd-feature-card .feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-secondary));
  }
  .cd-feature-card .feature-icon i {
    color: white;
    font-size: 1.875rem;
  }
  .cd-feature-card .feature-card-title, .feature-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    margin-bottom: 1rem;
  }
  .cd-feature-card .feature-card-description, .feature-card-description {
    color: var(--cd-text-secondary);
    margin-bottom: 1.5rem;
  }
  .cd-feature-card .feature-card-image {
    margin-bottom: 1.5rem;
  }
  .cd-feature-card .feature-card-list, .feature-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
  }
  .cd-feature-card .feature-card-list li, .feature-card-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }
  .cd-feature-card .feature-card-cta {
    margin-top: 1.5rem;
  }
  .cd-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cd-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .cd-feature-list li i {
    color: var(--cd-color-primary);
    margin-top: 0.25rem;
    flex-shrink: 0;
  }
  .cd-feature-grid {
    display: grid;
    gap: 2rem;
  }
  .cd-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--membership-business-secondary) 0%, var(--membership-business-primary) 100%);
    color: var(--membership-business-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .cd-premium-badge i {
    color: var(--membership-business-text);
  }
  .cd-comparison-table-wrapper {
    background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.05);
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
  }
  .cd-comparison-table {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cd-color-primary) transparent;
  }
  .cd-comparison-table::-webkit-scrollbar {
    height: 8px;
  }
  .cd-comparison-table::-webkit-scrollbar-track {
    background: transparent;
  }
  .cd-comparison-table::-webkit-scrollbar-thumb {
    background: var(--cd-color-primary);
    border-radius: 4px;
  }
  .cd-comparison-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .cd-comparison-table thead {
    background: linear-gradient( 135deg, var(--cd-color-shark) 0%, var(--cd-color-shark) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, var(--cd-color-shark) 0%, color-mix(in srgb, var(--cd-color-shark) 85%, var(--cd-color-accent)) 100% );
    }
    position: relative;
  }
  .cd-comparison-table thead::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient( 90deg, transparent 0%, var(--cd-color-accent) 50%, transparent 100% );
  }
  .cd-comparison-table thead th {
    padding: 2.5rem 2rem;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white !important;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    position: relative;
  }
  .cd-comparison-table thead th * {
    color: white !important;
  }
  .cd-comparison-table thead th.text-center {
    text-align: center;
  }
  .cd-comparison-table thead th.sticky {
    position: sticky;
    left: 0;
    z-index: 20;
    background: linear-gradient( 135deg, var(--cd-color-shark) 0%, var(--cd-color-shark) 100% ) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, var(--cd-color-shark) 0%, color-mix(in srgb, var(--cd-color-shark) 85%, var(--cd-color-accent)) 100% ) !important;
    }
  }
  .cd-comparison-table tbody tr {
    border-bottom: 1px solid var(--cd-border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--cd-border-primary) 50%, transparent);
    }
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cd-comparison-table tbody tr:hover {
    background: linear-gradient( 90deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 20%, var(--cd-color-primary) 80%, var(--cd-color-primary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 90deg, color-mix(in srgb, var(--cd-color-primary) 2%, transparent) 0%, color-mix(in srgb, var(--cd-color-primary) 4%, var(--cd-bg-secondary)) 20%, color-mix(in srgb, var(--cd-color-primary) 4%, var(--cd-bg-secondary)) 80%, color-mix(in srgb, var(--cd-color-primary) 2%, transparent) 100% );
    }
    transform: scale(1.005);
    box-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.08);
  }
  .cd-comparison-table tbody tr:last-child {
    border-bottom: none;
  }
  .cd-comparison-table tbody tr:first-child, .cd-comparison-table tbody tr:nth-child(3), .cd-comparison-table tbody tr:last-child {
    background: linear-gradient( 90deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 50%, var(--cd-color-primary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 90deg, color-mix(in srgb, var(--cd-color-primary) 1%, transparent) 0%, color-mix(in srgb, var(--cd-color-primary) 2%, #fcfcfd) 50%, color-mix(in srgb, var(--cd-color-primary) 1%, transparent) 100% );
    }
  }
  .cd-comparison-table tbody td {
    padding: 2rem 2rem;
    font-size: 1.0625rem;
    color: var(--cd-text-primary);
    font-weight: 500;
    line-height: 1.6;
  }
  .cd-comparison-table tbody td.sticky {
    position: sticky;
    left: 0;
    background-color: white !important;
    z-index: 10;
    border-right: 2px solid var(--cd-border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-right: 2px solid color-mix(in srgb, var(--cd-border-primary) 60%, transparent);
    }
    font-weight: 600;
    box-shadow: 4px 0 8px -2px rgb(0 0 0 / 0.05);
    white-space: nowrap;
  }
  .cd-comparison-table tbody tr:hover td.sticky {
    background: linear-gradient( 90deg, white 0%, var(--cd-color-primary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 90deg, white 0%, color-mix(in srgb, var(--cd-color-primary) 3%, var(--cd-bg-secondary)) 100% );
    }
  }
  .cd-comparison-table tbody td:not(.sticky):not(:last-child) {
    border-right: 1px solid var(--cd-border-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      border-right: 1px solid color-mix(in srgb, var(--cd-border-secondary) 40%, transparent);
    }
  }
  .cd-comparison-table thead th:not(.sticky):not(:last-child) {
    border-right: 1px solid color-mix(in srgb, white 15%, transparent);
  }
  .cd-comparison-table tbody td.popular-column {
    background: linear-gradient( 180deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 180deg, color-mix(in srgb, var(--cd-color-accent) 5%, white) 0%, color-mix(in srgb, var(--cd-color-accent) 8%, #f8fafc) 100% );
    }
    border-left: 3px solid var(--cd-color-accent);
    border-right: 3px solid var(--cd-color-accent);
    font-weight: 700;
    position: relative;
    box-shadow: inset 0 1px 3px 0 var(--cd-color-accent), 0 1px 2px 0 var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 1px 3px 0 color-mix(in srgb, var(--cd-color-accent) 8%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--cd-color-accent) 12%, transparent);
    }
  }
  .cd-comparison-table tbody td.popular-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( 135deg, var(--cd-color-accent) 0%, transparent 50%, var(--cd-color-accent) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, color-mix(in srgb, var(--cd-color-accent) 3%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--cd-color-accent) 3%, transparent) 100% );
    }
    pointer-events: none;
  }
  .cd-comparison-table tbody tr:hover td.popular-column {
    background: linear-gradient( 180deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 180deg, color-mix(in srgb, var(--cd-color-accent) 8%, white) 0%, color-mix(in srgb, var(--cd-color-accent) 12%, #f1f5f9) 100% );
    }
    box-shadow: inset 0 2px 4px 0 var(--cd-color-accent), 0 4px 6px -1px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 2px 4px 0 color-mix(in srgb, var(--cd-color-accent) 10%, transparent), 0 4px 6px -1px color-mix(in srgb, var(--cd-color-accent) 15%, transparent);
    }
  }
  .cd-comparison-table tfoot {
    background: linear-gradient( 180deg, var(--cd-bg-secondary) 0%, var(--cd-bg-secondary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 180deg, color-mix(in srgb, var(--cd-bg-secondary) 80%, white) 0%, var(--cd-bg-secondary) 100% );
    }
    border-top: 2px solid var(--cd-border-primary);
    position: relative;
  }
  .cd-comparison-table tfoot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient( 90deg, transparent 0%, var(--cd-color-primary) 50%, transparent 100% );
  }
  .cd-comparison-table tfoot td {
    padding: 2.5rem 2rem;
    font-size: 1rem;
    font-weight: 600;
  }
  .cd-comparison-table tfoot td.sticky {
    position: sticky;
    left: 0;
    background: linear-gradient( 180deg, var(--cd-bg-secondary) 0%, var(--cd-bg-secondary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 180deg, color-mix(in srgb, var(--cd-bg-secondary) 80%, white) 0%, var(--cd-bg-secondary) 100% );
    }
    z-index: 10;
    border-right: 2px solid var(--cd-border-primary);
    box-shadow: 4px 0 8px -2px rgb(0 0 0 / 0.05);
  }
  .cd-comparison-table .pricing-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .cd-comparison-table .popular-tier {
    position: relative;
    background: linear-gradient( 135deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100% ) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, var(--cd-color-accent) 0%, color-mix(in srgb, var(--cd-color-accent) 85%, var(--cd-color-shark)) 100% ) !important;
    }
    box-shadow: 0 0 0 3px var(--cd-color-accent), inset 0 1px 3px 0 rgb(255 255 255 / 0.2);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-accent) 30%, transparent), inset 0 1px 3px 0 rgb(255 255 255 / 0.2);
    }
  }
  .cd-comparison-table .popular-tier::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: 0;
    background: linear-gradient( 135deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, var(--cd-color-accent) 0%, color-mix(in srgb, var(--cd-color-accent) 70%, transparent) 100% );
    }
    opacity: 0.3;
    border-radius: 0.25rem 0.25rem 0 0;
    pointer-events: none;
  }
  .cd-comparison-table .badge-popular {
    display: inline-block;
    font-size: 0.75rem;
    background: linear-gradient( 135deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, var(--cd-color-accent) 0%, color-mix(in srgb, var(--cd-color-accent) 80%, white) 100% );
    }
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    margin-top: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 12px -2px var(--cd-color-accent), 0 2px 4px -1px rgb(0 0 0 / 0.2), inset 0 1px 2px 0 rgb(255 255 255 / 0.3);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--cd-color-accent) 40%, transparent), 0 2px 4px -1px rgb(0 0 0 / 0.2), inset 0 1px 2px 0 rgb(255 255 255 / 0.3);
    }
    border: 1px solid var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-accent) 80%, white);
    }
    animation: pulse-glow-warm 2s ease-in-out infinite;
  }
  @keyframes pulse-glow-warm {
    0%, 100% {
      box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--cd-color-accent) 40%, transparent), 0 2px 4px -1px rgb(0 0 0 / 0.2), inset 0 1px 2px 0 rgb(255 255 255 / 0.3);
    }
    50% {
      box-shadow: 0 4px 16px -2px color-mix(in srgb, var(--cd-color-accent) 60%, transparent), 0 2px 6px -1px rgb(0 0 0 / 0.3), inset 0 1px 2px 0 rgb(255 255 255 / 0.4);
    }
  }
  .cd-comparison-table .feature-tooltip {
    cursor: help;
    position: relative;
    display: inline-block;
    margin-left: 0.5rem;
    color: var(--cd-text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-text-secondary) 70%, transparent);
    }
    transition: color 0.2s ease;
    z-index: 1;
  }
  .cd-comparison-table .feature-tooltip:hover {
    color: var(--cd-color-primary);
    z-index: 9999;
  }
  .cd-comparison-table .feature-tooltip:hover::after {
    content: attr(data-tooltip);
    position: fixed;
    bottom: auto;
    top: auto;
    left: 50%;
    transform: translate(-50%, -120%);
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 99999;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2), 0 0 0 1px rgb(255 255 255 / 0.1);
    animation: tooltipFadeIn 0.2s ease-out;
    pointer-events: none;
  }
  .cd-comparison-table .feature-tooltip:hover::before {
    content: '';
    position: fixed;
    bottom: auto;
    top: auto;
    left: 50%;
    transform: translate(-50%, -60%);
    border: 6px solid transparent;
    border-top-color: #1E293B;
    z-index: 99998;
    animation: tooltipFadeIn 0.2s ease-out;
    pointer-events: none;
  }
  @keyframes tooltipFadeIn {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }
  .cd-comparison-table tbody td:not(.sticky) {
    text-align: center;
  }
  .cd-comparison-table tbody td i.fa-check {
    color: #10b981;
    font-size: 1.75rem;
    filter: drop-shadow(0 2px 4px rgb(16 185 129 / 0.2));
  }
  .cd-comparison-table tbody td i.fa-xmark {
    color: #d1d5db;
    font-size: 1.5rem;
  }
  @media (max-width: 768px) {
    .cd-comparison-table thead th, .cd-comparison-table tbody td, .cd-comparison-table tfoot td {
      padding: 1.5rem 1rem;
      font-size: 0.875rem;
    }
    .cd-comparison-table tbody td i.fa-check {
      font-size: 1.5rem;
    }
    .cd-comparison-table tbody td i.fa-xmark {
      font-size: 1.25rem;
    }
  }
  .cd-btn-white {
    background-color: white;
    color: var(--cd-color-primary);
    border: 2px solid white;
  }
  .cd-btn-white:hover {
    background-color: transparent;
    color: white;
    border-color: white;
  }
  .cd-btn-ghost-white {
    background-color: transparent;
    color: white;
    border: 2px solid white;
  }
  .cd-btn-ghost-white:hover {
    background-color: white;
    color: var(--cd-color-primary);
  }
  .demo-header h3 {
    display: flex;
    align-items: center;
  }
  .demo-value-score {
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  #comparison-demo .cd-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  #comparison-demo .cd-card:hover {
    transform: translateY(-4px);
  }
  .cd-competitor-comparison {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .cd-competitor-comparison {
      flex-direction: row;
      gap: 2rem;
      align-items: stretch;
    }
  }
  .cd-competitor-hero {
    position: relative;
    background-color: var(--cd-bg-secondary);
    border: 3px solid var(--cd-color-success);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 25px 50px -12px var(--cd-color-success), 0 12px 24px -8px var(--cd-color-success), 0 0 0 1px var(--cd-color-success), inset 0 1px 2px 0 rgb(255 255 255 / 0.8);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--cd-color-success) 25%, transparent), 0 12px 24px -8px color-mix(in srgb, var(--cd-color-success) 15%, transparent), 0 0 0 1px color-mix(in srgb, var(--cd-color-success) 20%, transparent), inset 0 1px 2px 0 rgb(255 255 255 / 0.8);
    }
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: heroGlow 3s ease-in-out infinite;
  }
  @keyframes heroGlow {
    0%, 100% {
      box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--cd-color-success) 25%, transparent), 0 12px 24px -8px color-mix(in srgb, var(--cd-color-success) 15%, transparent), 0 0 0 1px color-mix(in srgb, var(--cd-color-success) 20%, transparent), inset 0 1px 2px 0 rgb(255 255 255 / 0.8);
    }
    50% {
      box-shadow: 0 25px 60px -12px color-mix(in srgb, var(--cd-color-success) 35%, transparent), 0 12px 30px -8px color-mix(in srgb, var(--cd-color-success) 20%, transparent), 0 0 0 2px color-mix(in srgb, var(--cd-color-success) 30%, transparent), inset 0 1px 2px 0 rgb(255 255 255 / 0.9);
    }
  }
  @media (min-width: 1024px) {
    .cd-competitor-hero {
      flex: 0 0 42%;
      padding: 3rem 2.5rem;
    }
  }
  .cd-competitor-hero-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient( 135deg, var(--cd-color-success) 0%, var(--cd-color-success) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, var(--cd-color-success) 0%, color-mix(in srgb, var(--cd-color-success) 85%, #fff) 100% );
    }
    color: white;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 14px -2px var(--cd-color-success), 0 2px 4px -1px rgb(0 0 0 / 0.15);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cd-color-success) 50%, transparent), 0 2px 4px -1px rgb(0 0 0 / 0.15);
    }
    white-space: nowrap;
  }
  .cd-competitor-hero-badge i {
    font-size: 0.75rem;
  }
  .cd-competitor-hero-header {
    text-align: center;
    padding-top: 0.5rem;
  }
  .cd-competitor-hero-name {
    font-family: var(--cd-font-display, 'Titillium Web', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cd-text-primary, #1d1d1f);
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
  }
  .cd-competitor-hero-commission {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  .cd-competitor-hero-rate {
    font-family: var(--cd-font-display, 'Titillium Web', sans-serif);
    font-size: 4rem;
    font-weight: 700;
    color: var(--cd-color-success);
    line-height: 1;
    text-shadow: 0 2px 4px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      text-shadow: 0 2px 4px color-mix(in srgb, var(--cd-color-success) 15%, transparent);
    }
  }
  .cd-competitor-hero-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cd-color-success);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .cd-competitor-hero-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--cd-color-success) 30%, transparent);
    }
    border-bottom: 1px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--cd-color-success) 30%, transparent);
    }
  }
  .cd-competitor-hero-stat {
    text-align: center;
  }
  .cd-competitor-hero-stat-value {
    display: block;
    font-family: var(--cd-font-display, 'Titillium Web', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1.2;
  }
  .cd-competitor-hero-stat-highlight .cd-competitor-hero-stat-value {
    color: var(--cd-color-success);
  }
  .cd-competitor-hero-stat-label {
    font-size: 0.8125rem;
    color: var(--cd-text-secondary, #6b7280);
    font-weight: 500;
  }
  .cd-competitor-hero-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cd-competitor-hero-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 500;
  }
  .cd-competitor-hero-feature i {
    color: var(--cd-color-success);
    font-size: 1rem;
    flex-shrink: 0;
  }
  .cd-competitor-hero-cta {
    margin-top: auto;
    text-align: center;
  }
  .cd-competitor-hero-cta-note {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--cd-text-secondary, #6b7280);
    font-weight: 500;
  }
  .cd-competitor-others {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .cd-competitor-others-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--cd-bg-secondary, #f5f5f7);
    border: 1px solid var(--cd-border-primary, #e5e7eb);
    border-radius: 0.75rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .cd-competitor-others-toggle:hover {
    background: var(--cd-bg-tertiary, #e5e5e7);
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-competitor-others-toggle-icon {
    transition: transform 0.2s ease;
  }
  @media (min-width: 1024px) {
    .cd-competitor-others-toggle {
      display: none;
    }
  }
  .cd-competitor-others-grid {
    display: none;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }
  .cd-competitor-others-grid.cd-competitor-others-expanded {
    display: flex;
  }
  @media (min-width: 1024px) {
    .cd-competitor-others-grid {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 0;
    }
  }
  .cd-competitor-card {
    background: linear-gradient(180deg, #fafbfc 0%, #f5f6f8 100%);
    border: 1px solid var(--cd-border-primary, #e5e7eb);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    opacity: 0.85;
    transition: all 0.2s ease;
    filter: saturate(0.7);
  }
  .cd-competitor-card:hover {
    opacity: 1;
    filter: saturate(1);
    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08);
  }
  .cd-competitor-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
  }
  .cd-competitor-card-name {
    font-family: var(--cd-font-display, 'Titillium Web', sans-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
    margin: 0;
  }
  .cd-competitor-card-commission {
    text-align: right;
  }
  .cd-competitor-card-rate {
    display: block;
    font-family: var(--cd-font-display, 'Titillium Web', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cd-color-error);
    line-height: 1;
  }
  .cd-competitor-card-label {
    font-size: 0.6875rem;
    color: var(--cd-text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .cd-competitor-card-loss {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, var(--cd-color-error) 0%, var(--cd-color-error) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-error) 5%, var(--cd-bg-primary)) 0%, color-mix(in srgb, var(--cd-color-error) 10%, var(--cd-bg-primary)) 100%);
    }
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--cd-color-error);
    font-weight: 500;
  }
  .cd-competitor-card-loss i {
    font-size: 0.75rem;
  }
  .cd-competitor-card-loss strong {
    font-weight: 700;
  }
  .cd-competitor-card-kept {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
  }
  .cd-competitor-card-kept-value {
    font-family: var(--cd-font-display, 'Titillium Web', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-competitor-card-kept-label {
    font-size: 0.75rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-competitor-card-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
    margin-bottom: 0.75rem;
  }
  .cd-competitor-card-feature {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-competitor-card-feature i {
    font-size: 0.625rem;
    flex-shrink: 0;
  }
  .cd-competitor-card-feature-missing {
    color: var(--cd-text-tertiary);
  }
  .cd-competitor-card-feature-missing i {
    color: var(--cd-color-error);
  }
  .cd-competitor-card-feature-limited {
    color: var(--cd-color-warning);
  }
  .cd-competitor-card-feature-limited i {
    color: var(--cd-color-warning);
  }
  .cd-competitor-card-annual {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--cd-border-primary, #e5e7eb);
  }
  .cd-competitor-card-annual-value {
    font-family: var(--cd-font-display, 'Titillium Web', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cd-color-error);
  }
  .cd-competitor-card-annual-label {
    font-size: 0.6875rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-phone-frame {
    position: relative;
    width: 280px;
    height: 580px;
    background: #1d1d1f;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }
  .cd-phone-frame::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 28px;
    background: #1d1d1f;
    border-radius: 20px;
    z-index: 10;
  }
  .cd-phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--cd-bg-secondary) 0%, var(--cd-bg-primary) 100%);
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .cd-phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cd-phone-coming-soon {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
  }
  @media (max-width: 640px) {
    .cd-phone-frame {
      width: 220px;
      height: 456px;
      border-radius: 32px;
      padding: 10px;
    }
    .cd-phone-frame::before {
      width: 80px;
      height: 22px;
      top: 12px;
      border-radius: 16px;
    }
    .cd-phone-screen {
      border-radius: 26px;
    }
    .cd-phone-coming-soon {
      border-radius: 26px;
    }
  }
  .cd-value-prop-card {
    background: var(--cd-bg-primary);
    border-radius: 1rem;
    padding: 1.75rem 1rem;
    text-align: center;
    border: 1px solid var(--cd-border-secondary, rgba(0, 0, 0, 0.06));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-value-prop-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
  }
  .cd-value-prop-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.75rem;
    background: var(--cd-bg-tertiary, #f0f0f0);
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-value-prop-icon.cd-value-prop-icon--illustration {
    width: 8rem;
    height: 8rem;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0 auto 1rem;
  }
  .cd-value-prop-icon--illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .cd-value-prop-card.cd-value-prop-card--horizontal {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    text-align: left;
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-secondary, rgba(0, 0, 0, 0.06));
    padding: 1.75rem;
  }
  .cd-value-prop-card.cd-value-prop-card--horizontal:hover {
    transform: none;
    box-shadow: none;
  }
  .cd-value-prop-card--horizontal .cd-value-prop-icon--illustration {
    margin: 0;
    flex-shrink: 0;
    width: 7rem;
    height: 7rem;
  }
  .cd-value-prop-card__content {
    min-width: 0;
    flex: 1;
  }
  .cd-value-prop-card--horizontal .cd-value-prop-card__content h3 {
    color: var(--cd-color-accent);
    margin-bottom: 0.4rem;
    line-height: 1.25;
  }
  .cd-value-prop-card--horizontal .cd-value-prop-card__content p {
    color: var(--cd-text-secondary);
    line-height: 1.55;
  }
  .cd-province-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.15rem 1rem;
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-hairline);
    border-radius: 0.625rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .cd-province-card:hover {
    transform: translateY(-2px);
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( in srgb, var(--cd-color-accent) 50%, var(--cd-border-hairline) );
    }
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.16);
  }
  .cd-province-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
  }
  .cd-province-card__leaf {
    flex-shrink: 0;
    margin-top: 0.05rem;
    font-size: 1.4rem;
    line-height: 1;
    color: #d52b1e;
  }
  .cd-province-card__leaf img {
    display: block;
    width: 1.45rem;
    height: auto;
  }
  .cd-province-card__name {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary);
    font-feature-settings: "ss01" 1;
  }
  .cd-province-card__rule {
    width: 1.75rem;
    height: 2px;
    margin: 0.6rem 0 0.6rem;
    background: var(--cd-color-accent);
    transition: width 0.25s ease;
  }
  .cd-province-card:hover .cd-province-card__rule {
    width: 3rem;
  }
  .cd-province-card__cities {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cd-text-secondary);
  }
  .cd-province-card__arrow {
    position: absolute;
    bottom: 0.95rem;
    right: 1rem;
    font-size: 0.75rem;
    color: var(--cd-color-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .cd-province-card:hover .cd-province-card__arrow {
    opacity: 1;
    transform: translateX(0);
  }
  .cd-step-illustration {
    position: relative;
    margin: 0 auto 1.25rem auto;
    width: 148px;
    height: 148px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-step-illustration img {
    width: 88%;
    height: 88%;
    object-fit: contain;
  }
  .cd-step-corner-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-primary);
    border: 1px solid var(--cd-border-hairline);
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
  }
  .cd-step-corner-badge-success {
    color: var(--cd-color-success);
    border-color: var(--cd-color-success);
  }
  .cd-step-card {
    opacity: 0;
    animation: cd-step-reveal 0.5s ease-out forwards;
  }
  .cd-step-card:nth-child(1) {
    animation-delay: 0s;
  }
  .cd-step-card:nth-child(2) {
    animation-delay: 0.15s;
  }
  .cd-step-card:nth-child(3) {
    animation-delay: 0.3s;
  }
  .cd-step-card:nth-child(4) {
    animation-delay: 0.45s;
  }
  @keyframes cd-step-reveal {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .cd-referral-illustration {
    margin: 0 auto 1.25rem auto;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-referral-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
@layer components {
  .cd-editorial-eyebrow {
    font-family: var(--cd-font-primary);
    font-size: var(--cd-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cd-text-tertiary);
    margin-bottom: var(--cd-space-3);
  }
  .cd-editorial-rule {
    width: 3rem;
    height: 1px;
    margin: 0 auto var(--cd-space-5);
    background-color: var(--cd-color-accent);
  }
  .cd-editorial-h2 {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: var(--cd-text-4xl);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--cd-text-primary);
    font-feature-settings: "ss01" 1;
    margin-bottom: var(--cd-space-4);
  }
  @media (min-width: 1024px) {
    .cd-editorial-h2 {
      font-size: var(--cd-text-5xl);
    }
  }
  .cd-editorial-lead {
    font-size: var(--cd-text-xl);
    line-height: 1.6;
    color: var(--cd-text-secondary);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }
  .cd-editorial-page .cd-public-main > .cd-hero:first-child {
    padding-top: var(--cd-space-8);
    padding-bottom: var(--cd-space-12);
  }
  @media (min-width: 640px) {
    .cd-editorial-page .cd-public-main > .cd-hero:first-child {
      padding-top: var(--cd-space-10);
      padding-bottom: var(--cd-space-16);
    }
  }
  @media (min-width: 1024px) {
    .cd-editorial-page .cd-public-main > .cd-hero:first-child {
      padding-top: var(--cd-space-14);
      padding-bottom: var(--cd-space-24);
    }
  }
  .cd-editorial-page .cd-editorial-hero-title {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-feature-settings: "ss01" 1;
    font-size: var(--cd-text-5xl);
  }
  @media (min-width: 1024px) {
    .cd-editorial-page .cd-editorial-hero-title {
      font-size: var(--cd-text-6xl);
    }
  }
  .cd-editorial-page .feature-headline {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    font-feature-settings: "ss01" 1;
  }
  .cd-editorial-feature-band {
    background-color: var(--cd-bg-secondary);
  }
  @media (min-width: 1024px) {
    .cd-editorial-page .cd-screenshot-showcase {
      gap: var(--cd-space-20);
      align-items: center;
    }
    .cd-editorial-page .cd-screenshot-showcase .screenshot-container {
      flex: 1.4;
    }
    .cd-editorial-page .cd-screenshot-showcase .screenshot-content {
      flex: 0.8;
    }
  }
  .cd-editorial-page .screenshot-content {
    max-width: 30rem;
  }
  .cd-editorial-page .screenshot-container {
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .cd-editorial-page .screenshot-container .cd-screenshot-frame, .cd-editorial-page .screenshot-container .cd-screenshot-frame:hover {
    transform: none;
    width: 100%;
    height: auto;
    border-radius: var(--cd-radius-lg);
  }
  @media (min-width: 1280px) {
    .cd-editorial-page .cd-feature-spreads .cd-screenshot-showcase:not(.cd-screenshot-showcase-reverse) .screenshot-container {
      margin-left: -3.5rem;
    }
    .cd-editorial-page .cd-feature-spreads .cd-screenshot-showcase-reverse .screenshot-container {
      margin-right: -3.5rem;
    }
  }
  .cd-editorial-page .cd-feature-spreads {
    counter-reset: cd-feature;
  }
  .cd-editorial-page .cd-feature-spreads .cd-screenshot-showcase {
    counter-increment: cd-feature;
  }
  .cd-editorial-page .cd-feature-spreads .screenshot-content {
    position: relative;
  }
  .cd-editorial-page .cd-feature-spreads .screenshot-content > * {
    position: relative;
    z-index: 1;
  }
  .cd-editorial-page .cd-feature-spreads .screenshot-content::before {
    content: counter(cd-feature, decimal-leading-zero);
    position: absolute;
    top: -0.45em;
    left: -0.06em;
    z-index: 0;
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: 6rem;
    line-height: 0.8;
    letter-spacing: -0.02em;
    color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    pointer-events: none;
  }
  @media (min-width: 1024px) {
    .cd-editorial-page .cd-feature-spreads .screenshot-content::before {
      font-size: 10rem;
    }
  }
  .cd-editorial-page .cd-feature-spreads .feature-icon-inline {
    display: none;
  }
  .cd-editorial-page .cd-card-warm {
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-hairline);
    border-radius: var(--cd-radius-2xl);
  }
  .cd-editorial-page .cd-feature-list li i {
    color: var(--cd-text-tertiary);
  }
}
@layer components {
  .cd-theme-swatch {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-theme-swatch:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}
@layer components {
  .cd-carousel {
    position: relative;
  }
  .cd-carousel-track {
    display: flex;
    gap: var(--cd-space-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--cd-space-4) var(--cd-space-2);
    margin: 0 calc(-1 * var(--cd-space-2));
  }
  .cd-carousel-track::-webkit-scrollbar {
    display: none;
  }
  .cd-carousel-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: calc(100vw - 4rem);
    max-width: 24rem;
  }
  .cd-carousel-item > .cd-card, .cd-carousel-item > .cd-profile-result-card {
    height: 100%;
  }
  @media (min-width: 640px) {
    .cd-carousel-item {
      width: calc(50% - 0.75rem);
      max-width: none;
    }
  }
  @media (min-width: 1024px) {
    .cd-carousel-item {
      width: calc(33.333% - 1rem);
    }
    .cd-carousel-track {
      padding-left: 3rem;
      padding-right: 3rem;
      margin-left: -3rem;
      margin-right: -3rem;
    }
  }
  .cd-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: var(--cd-card-bg);
    border: 1px solid var(--cd-border-secondary);
    box-shadow: var(--cd-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cd-text-primary);
    transition: all 0.2s ease;
  }
  .cd-carousel-arrow:hover {
    background-color: var(--cd-bg-secondary);
    box-shadow: var(--cd-shadow-xl);
    transform: translateY(-50%) scale(1.05);
  }
  .cd-carousel-arrow:active {
    transform: translateY(-50%) scale(0.95);
  }
  .cd-carousel-arrow:focus {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-carousel-arrow-prev {
    left: 0;
  }
  .cd-carousel-arrow-next {
    right: 0;
  }
  .cd-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
  .cd-carousel-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--cd-text-tertiary);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .cd-carousel-dot:hover {
    background-color: var(--cd-text-secondary);
  }
  .cd-carousel-dot.active {
    width: 1.5rem;
    background-color: var(--cd-color-primary);
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-carousel-track {
      scroll-behavior: auto !important;
    }
    .cd-carousel-arrow, .cd-carousel-dot {
      transition: none !important;
    }
    .cd-carousel-arrow:hover {
      transform: translateY(-50%) !important;
    }
    .cd-carousel-arrow:active {
      transform: translateY(-50%) !important;
    }
  }
  .cd-carousel--coverflow .cd-carousel-track {
    perspective: 1600px;
    perspective-origin: center center;
    padding-top: var(--cd-space-8);
    padding-bottom: var(--cd-space-8);
  }
  .cd-carousel--coverflow .cd-carousel-track::before, .cd-carousel--coverflow .cd-carousel-track::after {
    content: "";
    flex: 0 0 calc(50% - (100% / 3 - 1rem) / 2 - var(--cd-space-6));
  }
  .cd-carousel--coverflow .cd-carousel-item {
    scroll-snap-align: center;
    transform-origin: center center;
    transform: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-carousel--coverflow .cd-carousel-item {
      transform: none !important;
      opacity: 1 !important;
      transition: none !important;
    }
  }
}
@layer components {
  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--cd-font-display);
  }
  .cd-horizontal-nav {
    font-family: var(--cd-font-editorial);
  }
  .cd-sidebar, .cd-navbar, .cd-command-palette {
    font-family: var(--cd-font-display);
  }
  .cd-heading-large {
    font-family: var(--cd-font-display);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: var(--cd-space-5);
    font-size: var(--cd-text-2xl);
    color: var(--cd-color-primary);
  }
  @media (min-width: 1024px) {
    .cd-heading-large {
      font-size: var(--cd-text-3xl);
    }
  }
  .cd-heading-primary {
    font-family: var(--cd-font-display);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: var(--cd-space-4);
    font-size: var(--cd-text-2xl);
    color: var(--cd-color-primary);
  }
  @media (min-width: 640px) {
    .cd-heading-primary {
      font-size: var(--cd-text-4xl);
    }
  }
  .cd-heading-secondary {
    font-family: var(--cd-font-display);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: var(--cd-space-3);
    font-size: var(--cd-text-2xl);
    color: var(--cd-color-primary);
  }
  .cd-heading-tertiary {
    font-family: var(--cd-font-display);
    font-weight: 600;
    line-height: 1.375;
    margin-bottom: var(--cd-space-2);
    font-size: var(--cd-text-xl);
    color: var(--cd-color-primary);
  }
  .cd-heading-stats {
    font-family: var(--cd-font-display);
    font-weight: 700;
    line-height: 1.25;
    font-size: var(--cd-text-2xl);
    color: var(--cd-color-primary);
  }
  .cd-heading-card {
    font-family: var(--cd-font-display);
    font-weight: 600;
    line-height: 1.375;
    margin-bottom: var(--cd-space-2);
    font-size: var(--cd-text-lg);
    color: var(--cd-color-primary);
  }
  .cd-text-body {
    line-height: 1.5;
    font-size: var(--cd-text-base);
    color: var(--cd-text-primary);
  }
  .cd-text-caption {
    line-height: 1.5;
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  .cd-text-muted {
    line-height: 1.5;
    font-size: var(--cd-text-base);
    color: var(--cd-text-secondary);
  }
  .cd-subtitle-count {
    display: inline-block;
    margin-top: var(--cd-space-1);
    color: var(--cd-text-secondary);
  }
  .cd-font-display {
    font-family: var(--cd-font-display);
  }
  .cd-text-primary {
    color: var(--cd-text-primary);
  }
  .cd-text-secondary {
    color: var(--cd-text-secondary);
  }
  .cd-text-tertiary {
    color: var(--cd-text-tertiary);
  }
  .cd-bg-secondary {
    background-color: var(--cd-bg-secondary);
  }
  .cd-bg-tertiary {
    background-color: var(--cd-bg-tertiary);
  }
  .cd-link-primary {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    transition: var(--cd-transition);
  }
  .cd-link-primary:hover {
    color: var(--cd-color-primary);
    text-decoration-color: var(--cd-color-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-link-secondary {
    font-weight: 500;
    text-decoration: none;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    transition: var(--cd-transition);
  }
  .cd-link-secondary:hover {
    color: var(--cd-text-primary);
    text-decoration: underline;
  }
}
@layer components {
  .cd-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 2px;
    padding: calc(var(--spacing) * 2.5);
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 3);
    }
    transition: var(--cd-transition);
  }
  .cd-alert.cd-alert-info {
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
    color: var(--cd-color-accent);
  }
  .cd-alert.cd-alert-warning {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
    color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-warning) 80%, black);
    }
  }
  .cd-alert.cd-alert-urgent {
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-error) 20%, transparent);
    }
    color: var(--cd-color-error);
  }
  .cd-alert.cd-alert-success {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 8%, var(--cd-bg-primary));
    }
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 20%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-alert-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cd-text-xs);
    font-weight: 500;
  }
  @media (min-width: 640px) {
    .cd-alert-icon {
      width: 1.75rem;
      height: 1.75rem;
    }
  }
  .cd-alert.cd-alert-info .cd-alert-icon {
    background-color: var(--cd-color-accent);
    color: white;
  }
  .cd-alert.cd-alert-warning .cd-alert-icon {
    background-color: var(--cd-color-warning);
    color: white;
  }
  .cd-alert.cd-alert-urgent .cd-alert-icon {
    background-color: var(--cd-color-error);
    color: white;
  }
  .cd-alert.cd-alert-success .cd-alert-icon {
    background-color: var(--cd-color-success);
    color: white;
  }
  .cd-alert .cd-alert-icon:has(img.cd-notification-img-icon) {
    background-color: transparent;
    width: auto;
    height: auto;
    border-radius: 0;
  }
  .cd-alert .cd-alert-icon img.cd-notification-img-icon {
    width: 3rem;
    height: 3rem;
    display: block;
  }
  @media (min-width: 640px) {
    .cd-alert .cd-alert-icon img.cd-notification-img-icon {
      width: 3.5rem;
      height: 3.5rem;
    }
  }
  .cd-alert-content {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .cd-alert-title {
    font-weight: 600;
    font-size: var(--cd-text-sm);
    margin-bottom: 0.125rem;
    line-height: 1.25;
  }
  @media (min-width: 640px) {
    .cd-alert-title {
      font-size: var(--cd-text-base);
    }
  }
  .cd-alert-message {
    font-size: var(--cd-text-xs);
    line-height: 1.5;
    opacity: 0.8;
  }
  @media (min-width: 640px) {
    .cd-alert-message {
      font-size: var(--cd-text-sm);
    }
  }
  .cd-alert-checklist {
    margin-top: calc(var(--spacing) * 1.5);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    list-style: none;
    padding: 0;
    margin-left: 0;
  }
  .cd-alert-checklist li {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    opacity: 0.9;
  }
  .cd-alert-checklist li i {
    flex-shrink: 0;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    opacity: 0.7;
  }
  .cd-alert-close {
    display: flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 6);
    }
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 6);
    }
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
        }
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, currentcolor 20%, transparent);
      }
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    color: inherit;
    opacity: 0.6;
  }
  .cd-alert-close:hover {
    opacity: 1;
  }
  .cd-alert {
    &:focus-within {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-within {
      --tw-ring-color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, currentcolor 20%, transparent);
      }
    }
  }
  .cd-alert.cd-alert-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--cd-radius-xl);
    font-size: var(--cd-text-sm);
    line-height: 1.4;
    border-width: 1px;
  }
  .cd-alert.cd-alert-minimal {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid;
    font-size: var(--cd-text-sm);
    background-color: var(--cd-bg-secondary);
  }
  .cd-alert.cd-alert-banner {
    border-radius: 0;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .cd-alert.cd-alert-toast {
    max-width: var(--container-xs);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 2px;
    padding: calc(var(--spacing) * 3);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-bg-card);
  }
  .cd-toast-container {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: var(--cd-z-floating);
    width: 26rem;
    max-height: calc(100vh - 6rem);
    overflow: visible;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
  .cd-toast-container .cd-alert {
    pointer-events: auto;
  }
  .cd-alert.cd-header-corner-notification {
    animation: cd-corner-slide-in 0.4s ease-out;
    max-width: 26rem;
    width: 100%;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, z-index 0s;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: start !important;
    column-gap: 1rem !important;
    row-gap: 0 !important;
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    border: 1px solid var(--cd-border-primary);
    background-color: var(--cd-bg-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    color: var(--cd-text-primary);
    max-width: 26rem;
    width: 100%;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast.cd-alert-info, body[data-toast-style="card"] .cd-alert.cd-alert-toast.cd-alert-success, body[data-toast-style="card"] .cd-alert.cd-alert-toast.cd-alert-warning, body[data-toast-style="card"] .cd-alert.cd-alert-toast.cd-alert-urgent {
    border-color: var(--cd-border-primary);
    background-color: var(--cd-bg-card);
    color: var(--cd-text-primary);
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast.cd-persistent-hint[data-priority="2"], body[data-toast-style="card"] .cd-alert.cd-alert-toast.cd-persistent-hint[data-priority="3"] {
    border-left-width: 1px !important;
    border-left-color: var(--cd-border-primary) !important;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast > .cd-alert-icon {
    grid-column: 1;
    grid-row: 1;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast > .cd-alert-content {
    grid-column: 2;
    grid-row: 1;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast > .cd-alert-close {
    grid-column: 3;
    grid-row: 1;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast > .cd-alert-actions {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #fff;
    background-color: var(--cd-text-primary);
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-close {
    color: var(--cd-text-tertiary);
    opacity: 1;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-close:hover {
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-secondary);
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-title {
    font-weight: 600;
    color: var(--cd-text-primary) !important;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-timestamp {
    font-size: 0.75rem;
    color: var(--cd-text-tertiary);
    flex-shrink: 0;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-message {
    color: var(--cd-text-secondary) !important;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 0.25rem;
    opacity: 1;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.625rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--cd-border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--cd-border-primary) 60%, transparent);
    }
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-actions .cd-btn {
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    color: var(--cd-text-primary);
    font-weight: 500;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-actions .cd-btn:hover {
    background-color: var(--cd-bg-secondary);
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast.cd-alert-success .cd-alert-icon {
    background-color: var(--cd-color-success);
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast.cd-alert-info .cd-alert-icon {
    background-color: var(--cd-color-science-blue);
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast.cd-alert-warning .cd-alert-icon {
    background-color: var(--cd-color-warning);
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast.cd-alert-urgent .cd-alert-icon {
    background-color: var(--cd-color-error);
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast:has(.cd-alert-icon img.cd-notification-img-icon) {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-icon:has(img.cd-notification-img-icon) {
    background-color: transparent;
    width: auto;
    height: auto;
    border-radius: 0;
    padding: 0;
    align-self: start;
  }
  body[data-toast-style="card"] .cd-alert.cd-alert-toast .cd-alert-icon img.cd-notification-img-icon {
    width: 3.5rem;
    height: 3.5rem;
    display: block;
    image-rendering: -webkit-optimize-contrast;
  }
  .cd-notification-hidden {
    display: none !important;
  }
  .cd-notification-queue-indicator {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    position: relative;
    background: var(--cd-bg-card);
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-primary);
    box-shadow: var(--cd-shadow-md);
    font-weight: 500;
    animation: cd-fade-in 0.3s ease-out;
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
  }
  .cd-notification-queue-indicator:hover {
    background: var(--cd-bg-secondary);
    border-color: var(--cd-color-accent);
    transform: translateY(-1px);
  }
  .cd-notification-queue-indicator i {
    color: var(--cd-color-accent);
    font-size: 0.875rem;
  }
  .cd-notification-queue-indicator .cd-queue-count {
    color: var(--cd-text-primary);
  }
  .cd-notification-queue-indicator .cd-queue-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--cd-text-tertiary);
    transition: transform 0.2s ease;
  }
  .cd-notification-queue-indicator[data-expanded="true"] .cd-queue-chevron {
    transform: rotate(180deg);
  }
  .cd-queue-preview {
    position: absolute;
    top: 100%;
    right: 0;
    width: 26rem;
    margin-top: 0.5rem;
    background: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-xl);
    box-shadow: var(--cd-shadow-lg);
    overflow: hidden;
    animation: cd-preview-slide-down 0.2s ease-out;
  }
  @keyframes cd-preview-slide-down {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .cd-queue-preview-header {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-queue-preview-list {
    padding-block: calc(var(--spacing) * 1);
    max-height: 200px;
    overflow-y: auto;
  }
  .cd-queue-preview-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--cd-border-secondary);
    transition: background 0.15s ease;
  }
  .cd-queue-preview-item:last-child {
    border-bottom: none;
  }
  .cd-queue-preview-item:hover {
    background: #e5e5e7;
  }
  .cd-queue-preview-item .cd-preview-icon {
    display: flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    font-size: 0.625rem;
  }
  .cd-queue-preview-item .cd-preview-icon.cd-preview-info {
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 15%, transparent);
    }
    color: var(--cd-color-accent);
  }
  .cd-queue-preview-item .cd-preview-icon.cd-preview-success {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 15%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-queue-preview-item .cd-preview-icon.cd-preview-warning {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 15%, transparent);
    }
    color: var(--cd-color-warning);
  }
  .cd-queue-preview-item .cd-preview-icon.cd-preview-urgent {
    background: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-error) 15%, transparent);
    }
    color: var(--cd-color-error);
  }
  .cd-queue-preview-item .cd-preview-content {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    background: transparent;
  }
  .cd-queue-preview-item .cd-preview-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--cd-text-primary);
  }
  .cd-queue-preview-item .cd-preview-message {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--cd-text-tertiary);
  }
  .cd-queue-preview-footer {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    background: var(--cd-bg-secondary);
    border-top: 1px solid var(--cd-border-primary);
  }
  .cd-queue-preview-footer a {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--cd-color-accent);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-queue-preview-footer a:hover {
    color: var(--cd-color-primary);
    text-decoration: underline;
  }
  @keyframes cd-fade-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes cd-corner-slide-in {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  .cd-alert.cd-header-corner-notification.dismissing {
    animation: cd-corner-slide-out 0.3s ease-in forwards;
  }
  @keyframes cd-corner-slide-out {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  @media (max-width: 640px) {
    .cd-toast-container {
      top: 4rem;
      right: 0.5rem;
      left: 0.5rem;
      width: auto;
      max-height: 50vh;
      align-items: stretch;
    }
    .cd-alert.cd-header-corner-notification {
      font-size: var(--cd-text-sm);
      padding: 0.75rem;
      max-width: none;
    }
    .cd-notification-queue-indicator {
      padding-inline: calc(var(--spacing) * 2);
      padding-block: calc(var(--spacing) * 1.5);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      width: 100%;
      justify-content: center;
    }
    .cd-queue-preview {
      width: 100%;
      left: 0;
      right: 0;
    }
  }
  .cd-alert.dismissing {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    opacity: 0%;
    transition: all 0.3s ease-out;
  }
  .cd-alert.cd-persistent-hint {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    animation: cd-corner-slide-in 0.4s ease-out;
  }
  .cd-alert-actions {
    margin-top: calc(var(--spacing) * 1.5);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .cd-hint-cta {
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 1px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
    text-decoration: none;
    border: none;
    cursor: pointer;
    animation: ctaPulse 2s cubic-bezier(0.4, 0, 0.6, 1) 5;
  }
  @keyframes ctaPulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
    }
    50% {
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);
    }
  }
  .cd-hint-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    animation: none;
  }
  .cd-hint-cta:active {
    transform: translateY(0);
  }
  .cd-hint-cta:focus {
    animation: none;
  }
  .cd-persistent-hint[data-priority="3"] {
    border-left-width: 4px;
    border-left-color: var(--cd-color-error) !important;
  }
  .cd-persistent-hint[data-priority="2"] {
    border-left-width: 4px;
    border-left-color: var(--cd-color-warning) !important;
  }
  .cd-persistent-hint .cd-alert-close {
    display: flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
        }
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, currentcolor 20%, transparent);
      }
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    color: inherit;
    opacity: 0.7;
  }
  .cd-persistent-hint .cd-alert-close:hover {
    opacity: 1;
    transform: scale(1.1);
  }
  @media (max-width: 640px) {
    .cd-persistent-hint {
      max-width: calc(100vw - 2rem);
      font-size: var(--cd-text-sm);
    }
    .cd-hint-cta {
      padding-inline: calc(var(--spacing) * 2);
      padding-block: calc(var(--spacing) * 1.5);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .cd-hint-cta.htmx-request {
    opacity: 0.7;
    cursor: not-allowed;
  }
  .cd-hint-cta.htmx-request::after {
    content: "...";
    animation: cd-loading-dots 1.5s infinite;
  }
  @keyframes cd-loading-dots {
    0%, 20% {
      content: "";
    }
    40% {
      content: ".";
    }
    60% {
      content: "..";
    }
    80%, 100% {
      content: "...";
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-hint-cta:hover {
      transform: none;
    }
    .cd-persistent-hint .cd-alert-close:hover {
      transform: none;
    }
  }
  .cd-consolidated-alerts {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .cd-consolidated-alerts-summary {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing) * 4);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .cd-consolidated-alerts-summary:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: color-mix(in srgb, #0066cc 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
    }
    --tw-outline-style: none;
    outline-style: none;
    --tw-ring-inset: inset;
  }
  .cd-consolidated-alerts-toggle {
    color: var(--color-gray-500);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .cd-consolidated-alerts-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .cd-consolidated-alerts-badge-error {
    background-color: color-mix(in srgb, #dc143c 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-crimson-red) 10%, transparent);
    }
    color: var(--color-crimson-red);
  }
  .cd-consolidated-alerts-badge-warning {
    background-color: color-mix(in srgb, #ff6b35 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 10%, transparent);
    }
    color: var(--color-warning-orange);
  }
  .cd-consolidated-alerts-badge-info {
    background-color: color-mix(in srgb, #0066cc 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 10%, transparent);
    }
    color: var(--color-science-blue);
  }
  .cd-consolidated-alerts-badge-success {
    background-color: color-mix(in srgb, #228b22 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-forest-green) 10%, transparent);
    }
    color: var(--color-forest-green);
  }
  .cd-consolidated-alerts-content {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
  }
  .cd-consolidated-alerts-section {
    padding: calc(var(--spacing) * 4);
  }
  .cd-consolidated-alerts-section:not(:last-child) {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
  }
  .cd-consolidated-alerts-section-error {
    background-color: color-mix(in srgb, #dc143c 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-crimson-red) 5%, transparent);
    }
  }
  .cd-consolidated-alerts-section-warning {
    background-color: color-mix(in srgb, #ff6b35 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 5%, transparent);
    }
  }
  .cd-consolidated-alerts-section-info {
    background-color: color-mix(in srgb, #0066cc 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
    }
  }
  .cd-consolidated-alerts-section-success {
    background-color: color-mix(in srgb, #228b22 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-forest-green) 5%, transparent);
    }
  }
  .cd-consolidated-alerts-item {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .cd-consolidated-alerts-item:not(:last-child) {
    margin-bottom: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding-bottom: calc(var(--spacing) * 3);
  }
  .cd-consolidated-alerts-item-icon {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .cd-consolidated-alerts-section-error .cd-consolidated-alerts-item-icon {
    background-color: color-mix(in srgb, #dc143c 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-crimson-red) 20%, transparent);
    }
    color: var(--color-crimson-red);
  }
  .cd-consolidated-alerts-section-warning .cd-consolidated-alerts-item-icon {
    background-color: color-mix(in srgb, #ff6b35 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 20%, transparent);
    }
    color: var(--color-warning-orange);
  }
  .cd-consolidated-alerts-section-info .cd-consolidated-alerts-item-icon {
    background-color: color-mix(in srgb, #0066cc 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
    }
    color: var(--color-science-blue);
  }
  .cd-consolidated-alerts-section-success .cd-consolidated-alerts-item-icon {
    background-color: color-mix(in srgb, #228b22 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-forest-green) 20%, transparent);
    }
    color: var(--color-forest-green);
  }
  .cd-consolidated-alerts-item-content {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .cd-consolidated-alerts-item-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }
  .cd-consolidated-alerts-section-error .cd-consolidated-alerts-item-title {
    color: var(--color-crimson-red);
  }
  .cd-consolidated-alerts-item-message {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .cd-consolidated-alerts-item-cta {
    margin-top: calc(var(--spacing) * 2);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .cd-consolidated-alerts-item-cta-error {
    color: var(--color-crimson-red);
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #dc143c 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-crimson-red) 80%, transparent);
        }
      }
    }
  }
  .cd-consolidated-alerts-item-cta-warning {
    color: var(--color-science-blue);
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #0066cc 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-science-blue) 80%, transparent);
        }
      }
    }
  }
  .cd-consolidated-alerts-item-cta-info {
    color: var(--color-science-blue);
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #0066cc 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-science-blue) 80%, transparent);
        }
      }
    }
  }
  .cd-consolidated-alerts-limit-list {
    margin-top: calc(var(--spacing) * 1);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
  }
  .cd-consolidated-alerts-limit-list li {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .cd-consolidated-alerts-limit-list li i {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-warning-orange);
  }
  @media (max-width: 640px) {
    .cd-consolidated-alerts-summary {
      padding: calc(var(--spacing) * 3);
    }
    .cd-consolidated-alerts-badge {
      padding-inline: calc(var(--spacing) * 2);
      padding-block: calc(var(--spacing) * 0.5);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .cd-consolidated-alerts-section {
      padding: calc(var(--spacing) * 3);
    }
    .cd-consolidated-alerts-item-icon {
      height: calc(var(--spacing) * 7);
      width: calc(var(--spacing) * 7);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-consolidated-alerts-toggle {
      transition: none;
    }
  }
  :root {
    --cd-spring-easing: linear(
      0,
      0.002 0.6%,
      0.007 1.2%,
      0.015 1.8%,
      0.026 2.4%,
      0.041 3.1%,
      0.06 3.8%,
      0.108 5.3%,
      0.157 6.6%,
      0.214 8%,
      0.467 13.7%,
      0.577 16.3%,
      0.631 17.7%,
      0.682 19.1%,
      0.73 20.5%,
      0.771 21.8%,
      0.808 23.1%,
      0.844 24.5%,
      0.874 25.8%,
      0.903 27.2%,
      0.928 28.6%,
      0.952 30.1%,
      0.972 31.6%,
      0.988 33.1%,
      1.01 35.7%,
      1.025 38.5%,
      1.034 41.6%,
      1.038 45%,
      1.035 50.1%,
      1.012 64.2%,
      1.003 73%,
      0.999 83.7%,
      1
    );
    --cd-spring-duration: 600ms;
  }
  .cd-gooey-toast-wrapper {
    position: relative;
    pointer-events: auto;
    width: 350px;
    height: var(--_h, 40px);
    opacity: 0;
    transform: translateZ(0) scale(0.95) translateY(-6px);
    transform-origin: center;
    contain: layout style;
    overflow: visible;
    flex-shrink: 0;
  }
  .cd-gooey-toast-wrapper[data-ready="true"] {
    opacity: 1;
    transform: translateZ(0) scale(1);
    transition: transform calc(var(--cd-spring-duration) * 0.66) var(--cd-spring-easing), opacity calc(var(--cd-spring-duration) * 0.66) var(--cd-spring-easing), height var(--cd-spring-duration) var(--cd-spring-easing);
  }
  .cd-gooey-toast-wrapper[data-ready="true"][data-exiting="true"] {
    opacity: 0;
    transform: translateZ(0) scale(0.95) translateY(-6px);
    pointer-events: none;
  }
  [data-cd-canvas] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    transform: translateZ(0);
    contain: layout style;
    overflow: visible;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.12)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.06));
  }
  [data-cd-svg] {
    overflow: visible;
  }
  [data-cd-pill], [data-cd-body] {
    transform-box: fill-box;
    transform-origin: 50% 0%;
  }
  [data-cd-pill] {
    transform: scaleY(var(--_sy, 1));
    width: var(--_pw);
    height: var(--_ph);
  }
  [data-cd-body] {
    transform: scaleY(var(--_by, 0));
    opacity: var(--_by, 0);
  }
  .cd-gooey-toast-wrapper[data-ready="true"] [data-cd-pill] {
    transition: transform var(--cd-spring-duration) var(--cd-spring-easing), width var(--cd-spring-duration) var(--cd-spring-easing), x var(--cd-spring-duration) var(--cd-spring-easing);
  }
  .cd-gooey-toast-wrapper[data-ready="true"][data-expanded="true"] [data-cd-pill] {
    transition-delay: calc(var(--cd-spring-duration) * 0.08);
  }
  .cd-gooey-toast-wrapper[data-ready="true"] [data-cd-body] {
    transition: transform var(--cd-spring-duration) var(--cd-spring-easing), opacity var(--cd-spring-duration) var(--cd-spring-easing);
  }
  [data-cd-header] {
    position: absolute;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    height: 40px;
    overflow: hidden;
    left: var(--_px, 0px);
    transform: var(--_ht);
    max-width: var(--_pw);
  }
  .cd-gooey-toast-wrapper[data-ready="true"] [data-cd-header] {
    transition: transform var(--cd-spring-duration) var(--cd-spring-easing), left var(--cd-spring-duration) var(--cd-spring-easing), max-width var(--cd-spring-duration) var(--cd-spring-easing);
  }
  [data-cd-header-inner] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
  }
  [data-cd-badge] {
    display: flex;
    height: 24px;
    width: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--_cd-state-color, var(--cd-color-accent));
  }
  [data-cd-title] {
    font-size: 0.825rem;
    line-height: 1rem;
    font-weight: 500;
    color: var(--_cd-state-color, var(--cd-color-accent));
  }
  :is([data-cd-badge], [data-cd-title])[data-state="info"] {
    --_cd-state-color: var(--cd-color-accent);
  }
  :is([data-cd-badge], [data-cd-title])[data-state="success"] {
    --_cd-state-color: var(--cd-color-success);
  }
  :is([data-cd-badge], [data-cd-title])[data-state="warning"] {
    --_cd-state-color: var(--cd-color-warning);
  }
  :is([data-cd-badge], [data-cd-title])[data-state="error"] {
    --_cd-state-color: var(--cd-color-error);
  }
  [data-cd-close] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: auto;
    border: 0;
    border-radius: 9999px;
    padding: 0;
    background: transparent;
    color: var(--cd-text-primary);
    opacity: 0.35;
    cursor: pointer;
    font-size: 0.7rem;
    transition: opacity 150ms ease, background-color 150ms ease;
  }
  [data-cd-close]:hover {
    opacity: 0.7;
    background-color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-primary) 8%, transparent);
    }
  }
  [data-cd-close]:active {
    opacity: 0.9;
  }
  [data-cd-content] {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 10;
    width: 100%;
    pointer-events: none;
    opacity: var(--_co, 0);
  }
  [data-cd-content]:not([data-visible="true"]) {
    content-visibility: hidden;
  }
  .cd-gooey-toast-wrapper[data-ready="true"] [data-cd-content] {
    transition: opacity calc(var(--cd-spring-duration) * 0.08) var(--cd-spring-easing) calc(var(--cd-spring-duration) * 0.04);
  }
  [data-cd-content][data-visible="true"] {
    pointer-events: auto;
  }
  .cd-gooey-toast-wrapper[data-ready="true"] [data-cd-content][data-visible="true"] {
    transition: opacity var(--cd-spring-duration) var(--cd-spring-easing) calc(var(--cd-spring-duration) * 0.25);
  }
  [data-cd-description] {
    width: 100%;
    text-align: left;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--cd-text-primary);
    contain: layout style;
    content-visibility: auto;
  }
  [data-cd-button] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    padding: 0 1rem;
    margin-top: 0.75rem;
    border-radius: 9999px;
    border: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--_cd-btn-color, currentColor);
    background-color: var(--_cd-btn-bg, transparent);
    transition: background-color 150ms ease;
  }
  [data-cd-button]:hover {
    background-color: var(--_cd-btn-bg-hover, transparent);
  }
  [data-cd-button][data-state="info"] {
    --_cd-btn-color: var(--cd-color-accent);
    --_cd-btn-bg: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --_cd-btn-bg: color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
    --_cd-btn-bg-hover: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --_cd-btn-bg-hover: color-mix(in srgb, var(--cd-color-accent) 30%, transparent);
    }
  }
  [data-cd-button][data-state="success"] {
    --_cd-btn-color: var(--cd-color-success);
    --_cd-btn-bg: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --_cd-btn-bg: color-mix(in srgb, var(--cd-color-success) 20%, transparent);
    }
    --_cd-btn-bg-hover: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --_cd-btn-bg-hover: color-mix(in srgb, var(--cd-color-success) 30%, transparent);
    }
  }
  [data-cd-button][data-state="warning"] {
    --_cd-btn-color: var(--cd-color-warning);
    --_cd-btn-bg: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --_cd-btn-bg: color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
    --_cd-btn-bg-hover: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --_cd-btn-bg-hover: color-mix(in srgb, var(--cd-color-warning) 30%, transparent);
    }
  }
  [data-cd-button][data-state="error"] {
    --_cd-btn-color: var(--cd-color-error);
    --_cd-btn-bg: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      --_cd-btn-bg: color-mix(in srgb, var(--cd-color-error) 20%, transparent);
    }
    --_cd-btn-bg-hover: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      --_cd-btn-bg-hover: color-mix(in srgb, var(--cd-color-error) 30%, transparent);
    }
  }
  @media (max-width: 640px) {
    .cd-gooey-toast-wrapper {
      width: 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-gooey-toast-wrapper, .cd-gooey-toast-wrapper *, .cd-gooey-toast-wrapper *::before, .cd-gooey-toast-wrapper *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .cd-gooey-toast-wrapper {
      opacity: 1;
      transform: none;
    }
  }
}
@layer components {
  body[data-toast-style="editorial"] .cd-alert.cd-alert-toast {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: start !important;
    column-gap: 0.875rem !important;
    row-gap: 0 !important;
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    border: 1px solid var(--cd-border-primary);
    background-color: var(--cd-bg-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.08);
    color: var(--cd-text-primary);
    max-width: 26rem;
    width: 100%;
  }
  body[data-toast-style="editorial"] .cd-alert.cd-alert-toast.cd-alert-info, body[data-toast-style="editorial"] .cd-alert.cd-alert-toast.cd-alert-success, body[data-toast-style="editorial"] .cd-alert.cd-alert-toast.cd-alert-warning, body[data-toast-style="editorial"] .cd-alert.cd-alert-toast.cd-alert-urgent {
    border-color: var(--cd-border-primary);
    background-color: var(--cd-bg-card);
    color: var(--cd-text-primary);
  }
  body[data-toast-style="editorial"] .cd-alert.cd-alert-toast.cd-persistent-hint[data-priority="2"], body[data-toast-style="editorial"] .cd-alert.cd-alert-toast.cd-persistent-hint[data-priority="3"] {
    border-left-width: 1px !important;
    border-left-color: var(--cd-border-primary) !important;
  }
  body[data-toast-style="editorial"] .cd-alert.cd-alert-toast > .cd-alert-icon {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0.125rem;
  }
  body[data-toast-style="editorial"] .cd-alert.cd-alert-toast > .cd-alert-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  body[data-toast-style="editorial"] .cd-alert.cd-alert-toast > .cd-alert-close {
    grid-column: 3;
    grid-row: 1;
  }
  body[data-toast-style="editorial"] .cd-alert-icon img.cd-notification-img-icon {
    filter: drop-shadow(0 3px 5px rgba(15, 23, 42, 0.14));
  }
  body[data-toast-style="editorial"] .cd-etoast-kicker {
    font-family: var(--cd-font-primary);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin-bottom: 0.1875rem;
    color: var(--cd-color-accent);
  }
  body[data-toast-style="editorial"] .cd-etoast-title {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 1.16rem;
    line-height: 1.2;
    letter-spacing: -0.014em;
    color: var(--cd-text-primary);
  }
  body[data-toast-style="editorial"] .cd-etoast-body {
    font-family: var(--cd-font-editorial-body);
    font-size: 0.94rem;
    line-height: 1.4;
    color: var(--cd-text-secondary);
    margin-top: 0.375rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body[data-toast-style="editorial"] .cd-etoast-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cd-border-hairline);
  }
  body[data-toast-style="editorial"] .cd-etoast-time {
    font-family: var(--cd-font-numeral);
    font-size: 0.78rem;
    color: var(--cd-text-tertiary);
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  body[data-toast-style="editorial"] .cd-etoast-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: var(--cd-font-primary);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    text-decoration: none;
    animation: none;
    transition: gap 0.15s ease, color 0.15s ease;
  }
  body[data-toast-style="editorial"] .cd-etoast-cta i {
    font-size: 0.78rem;
    transition: transform 0.15s ease;
  }
  body[data-toast-style="editorial"] .cd-etoast-cta:hover {
    gap: 0.6875rem;
    box-shadow: none;
    transform: none;
  }
  body[data-toast-style="editorial"] .cd-etoast-cta:hover i {
    transform: translateX(2px);
  }
  body[data-toast-style="editorial"] .cd-alert-info .cd-etoast-kicker, body[data-toast-style="editorial"] .cd-alert-info .cd-etoast-cta i {
    color: var(--cd-color-accent);
  }
  body[data-toast-style="editorial"] .cd-alert-success .cd-etoast-kicker, body[data-toast-style="editorial"] .cd-alert-success .cd-etoast-cta i {
    color: var(--cd-color-success);
  }
  body[data-toast-style="editorial"] .cd-alert-warning .cd-etoast-kicker, body[data-toast-style="editorial"] .cd-alert-warning .cd-etoast-cta i {
    color: var(--cd-color-warning);
  }
  body[data-toast-style="editorial"] .cd-alert-urgent .cd-etoast-kicker, body[data-toast-style="editorial"] .cd-alert-urgent .cd-etoast-cta i {
    color: var(--cd-color-error);
  }
  body[data-toast-style="editorial"] .cd-alert-info .cd-etoast-cta:hover {
    color: var(--cd-color-accent);
  }
  body[data-toast-style="editorial"] .cd-alert-success .cd-etoast-cta:hover {
    color: var(--cd-color-success);
  }
  body[data-toast-style="editorial"] .cd-alert-warning .cd-etoast-cta:hover {
    color: var(--cd-color-warning);
  }
  body[data-toast-style="editorial"] .cd-alert-urgent .cd-etoast-cta:hover {
    color: var(--cd-color-error);
  }
}
@layer components {
  .cd-maintenance-banner {
    position: sticky;
    top: 0;
    z-index: var(--cd-z-topbar-dropdown);
    width: 100%;
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 50%, #ef4444 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px -2px rgba(185, 28, 28, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .cd-maintenance-banner__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.875rem 1.5rem;
  }
  .cd-maintenance-banner__pulse {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.125rem;
    animation: cd-maintenance-pulse 1.8s ease-in-out infinite;
  }
  @keyframes cd-maintenance-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
      transform: scale(1);
    }
    50% {
      box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
      transform: scale(1.05);
    }
  }
  .cd-maintenance-banner__content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cd-maintenance-banner__title {
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    line-height: 1.25;
  }
  .cd-maintenance-banner__subtitle {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
  }
  .cd-maintenance-banner__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .cd-maintenance-banner__link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .cd-maintenance-banner__link:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    text-decoration: none;
  }
  .cd-maintenance-banner__disable {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #b91c1c;
    font-size: 0.8125rem;
    font-weight: 700;
    border: 1px solid #ffffff;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .cd-maintenance-banner__disable:hover {
    background: #fef2f2;
    color: #991b1b;
  }
  .cd-maintenance-banner__disable:active {
    transform: translateY(1px);
  }
  @media (max-width: 640px) {
    .cd-maintenance-banner__inner {
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
    }
    .cd-maintenance-banner__actions {
      width: 100%;
      justify-content: flex-end;
    }
    .cd-maintenance-banner__subtitle {
      font-size: 0.75rem;
    }
  }
}
.cd-message-upload-button {
  height: calc(var(--spacing) * 11);
  width: calc(var(--spacing) * 12);
  flex-direction: column;
  gap: 0.12rem;
  padding: calc(var(--spacing) * 1);
}
.cd-message-chat-view {
  display: flex;
  flex-direction: column;
  @media (width >= 64rem) {
    grid-column: span 2 / span 2;
  }
  max-height: calc(100vh - var(--cd-total-navbar-offset) - 13.5rem);
}
.cd-message-reply-view {
  border-style: var(--tw-border-style);
  border-width: 0px;
  --tw-shadow: 0rem -1rem 3rem var(--tw-shadow-color, rgba(0,0,0,0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@layer components {
  :root {
    --cd-bg-unread: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --cd-bg-unread: color-mix(in srgb, var(--cd-color-primary) 3%, transparent);
    }
    --cd-bg-warning: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --cd-bg-warning: color-mix(in srgb, var(--cd-color-warning) 10%, transparent);
    }
  }
  .cd-message-timestamp {
    font-size: var(--cd-text-xs);
    opacity: 0.7;
    margin-top: 0.25rem;
  }
  .cd-message-author {
    font-weight: 600;
    margin-bottom: var(--cd-space-1);
  }
  .cd-message-content {
    font-size: var(--cd-text-sm);
  }
  .cd-message-search-input {
    width: 100%;
    padding-left: var(--cd-space-10);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-2-5);
    padding-bottom: var(--cd-space-2-5);
    border: 1px solid;
    border-radius: var(--cd-radius-lg);
    border-color: var(--cd-border-primary);
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-primary);
  }
  .cd-message-search-input:focus {
    box-shadow: 0 0 0 2px var(--cd-color-primary);
    border-color: transparent;
  }
  .cd-message-search-input:focus {
    --tw-ring-color: var(--cd-color-primary);
  }
  .cd-message-search-input.cd-searching {
    opacity: 0.75;
    background-color: var(--cd-bg-secondary);
  }
  .cd-message-search-icon {
    position: absolute;
    left: var(--cd-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--cd-text-secondary);
  }
  .cd-message-stats-label {
    font-size: var(--cd-text-sm);
    font-weight: 500;
    color: var(--cd-text-secondary);
  }
  .cd-conversation-header {
    padding: calc(var(--spacing) * 3);
    background: linear-gradient(to right, var(--cd-bg-secondary), var(--cd-bg-primary));
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-conversation-item {
    display: block;
    padding: var(--cd-space-3);
    transition: all 0.2s ease-in-out;
    border-radius: var(--cd-radius-lg);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-conversation-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  }
  .cd-conversation-item-unread {
    border-left-width: 4px;
    border-left-color: var(--cd-color-warning);
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 8%, transparent);
    }
    box-shadow: 0 0 0 1px var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--cd-color-warning) 15%, transparent);
    }
  }
  .cd-reply-form-file-count {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-reply-form-file-count-active {
    color: var(--cd-color-primary);
  }
  .cd-reply-form-limit-warning {
    padding: var(--cd-space-4);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 10%, transparent);
    }
    border: 1px solid var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
  }
  .cd-reply-form-limit-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    color: var(--cd-color-warning);
  }
  .cd-message-chat-input {
    overflow: hidden;
    resize: none;
  }
  .cd-message-back-link {
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease-in-out;
    color: var(--cd-text-secondary);
  }
  .cd-message-back-link:hover {
    color: var(--cd-color-primary);
  }
  .cd-conversation-action-link {
    font-size: var(--cd-text-sm);
    font-weight: 500;
    transition: color 0.15s ease-in-out;
    cursor: pointer;
    color: var(--cd-text-secondary);
  }
  .cd-conversation-action-link:hover {
    color: var(--cd-color-primary);
  }
  .cd-conversation-action-link-unread {
    color: var(--cd-color-primary);
  }
  .cd-conversation-action-link-unread:hover {
    color: var(--cd-color-primary-dark, var(--cd-color-primary));
    opacity: 0.8;
  }
  .cd-message-empty-container {
    text-align: center;
    padding: 1.5rem;
  }
  .cd-message-empty-icon {
    font-size: var(--cd-text-6xl);
    margin-bottom: 1rem;
    color: var(--cd-text-tertiary);
  }
  .cd-message-empty-title {
    font-size: var(--cd-text-xl);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--cd-text-primary);
  }
  .cd-message-empty-text {
    color: var(--cd-text-secondary);
  }
  .cd-message-pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    border-top: 1px solid var(--cd-border-primary);
    padding-top: var(--cd-space-4);
  }
  @media (min-width: 640px) {
    .cd-message-pagination-container {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .cd-message-pagination-nav-left {
    display: flex;
    width: 0;
    flex: 1;
  }
  .cd-message-pagination-nav-right {
    display: flex;
    width: 0;
    flex: 1;
    justify-content: flex-end;
  }
  .cd-message-pagination-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    transition: color 0.15s ease-in-out;
    color: var(--cd-text-secondary);
  }
  .cd-message-pagination-link:hover {
    color: var(--cd-text-primary);
  }
  .cd-conversation-row-card {
    position: relative;
    transition: all 0.2s ease-in-out;
    margin-bottom: var(--cd-space-3);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    overflow: hidden;
    box-shadow: var(--cd-panel-shadow, none);
  }
  .cd-conversation-row-card:hover {
    border-color: var(--cd-border-hover);
    box-shadow: var(--cd-panel-hover-shadow, 0 4px 12px var(--cd-text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-panel-hover-shadow, 0 4px 12px color-mix(in srgb, var(--cd-text-primary) 8%, transparent));
    }
    transform: var(--cd-panel-hover-transform, none);
  }
  .cd-conversation-row-card.cd-conversation-unread {
    border-left: 4px solid var(--cd-color-warning);
    box-shadow: 0 0 0 1px var(--cd-color-warning-light);
  }
  .cd-conversation-row-header {
    padding: var(--cd-space-4);
    border-top-left-radius: var(--cd-radius-xl);
    border-top-right-radius: var(--cd-radius-xl);
    background: linear-gradient(to right, var(--cd-bg-secondary), var(--cd-bg-primary));
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-conversation-row-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cd-conversation-row-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .cd-conversation-row-content {
    padding: var(--cd-space-4);
    background-color: var(--cd-bg-card);
  }
  .cd-conversation-row-content > * + * {
    margin-top: var(--cd-space-2);
  }
  .cd-conversation-row-card.cd-conversation-unread .cd-conversation-row-content {
    background-color: var(--cd-bg-unread);
  }
  .cd-avatar-with-indicator {
    position: relative;
    flex-shrink: 0;
  }
  .cd-avatar-with-indicator .cd-status-indicator {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    width: var(--cd-space-3);
    height: var(--cd-space-3);
    border-width: 2px;
    border-color: white;
    border-radius: 9999px;
  }
  .cd-avatar-with-indicator .cd-status-indicator-active {
    background-color: var(--cd-color-primary);
    box-shadow: 0 0 0 2px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
  }
  .cd-conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--cd-space-1);
  }
  .cd-conversation-time {
    font-size: var(--cd-text-xs);
    white-space: nowrap;
    margin-left: 0.5rem;
    color: var(--cd-text-tertiary);
  }
  .cd-conversation-unread .cd-conversation-time {
    color: var(--cd-color-warning);
    font-weight: 600;
  }
  .cd-conversation-subject {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    color: var(--cd-text-primary);
  }
  .cd-conversation-preview-text {
    margin-left: var(--cd-space-1);
  }
  .cd-conversation-metadata {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  .cd-conversation-badge {
    padding-left: var(--cd-space-2);
    padding-right: var(--cd-space-2);
    padding-top: var(--cd-space-0-5);
    padding-bottom: var(--cd-space-0-5);
    border-radius: 9999px;
    font-weight: 600;
  }
  .cd-badge-primary {
    background-color: var(--cd-color-primary);
    color: white;
  }
  .cd-badge-neutral {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
  }
  .cd-conversation-attachment, .cd-conversation-count {
    display: flex;
    align-items: center;
    gap: var(--cd-space-1);
  }
  .cd-conversation-action-btn {
    padding: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    color: var(--cd-text-tertiary);
  }
  .cd-conversation-action-btn:hover {
    background-color: var(--cd-bg-hover);
    color: var(--cd-text-primary);
  }
  @media (max-width: 640px) {
    .cd-conversation-subject {
      display: none;
    }
    .cd-conversation-metadata {
      flex-wrap: wrap;
    }
  }
  .cd-message-bubble-enhanced {
    position: relative;
    max-width: 75%;
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-xl);
    box-shadow: var(--cd-shadow-sm);
    transition: all 0.2s ease-in-out;
    line-height: 1.5;
  }
  .cd-message-bubble-enhanced:hover {
    box-shadow: var(--cd-shadow-md);
  }
  .cd-message-bubble-sent {
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--cd-color-primary) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-primary) 0%, color-mix(in srgb, var(--cd-color-primary) 90%, black) 100%);
    }
    color: var(--cd-text-on-primary);
    border-bottom-right-radius: var(--cd-radius-sm);
  }
  .cd-message-bubble-received {
    background-color: var(--cd-card-bg);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-primary);
    border-bottom-left-radius: var(--cd-radius-sm);
  }
  .cd-message-timestamp-enhanced {
    display: flex;
    align-items: center;
    gap: var(--cd-space-1);
    font-size: 0.7rem;
    margin-top: var(--cd-space-1);
    opacity: 0.7;
    color: var(--cd-text-tertiary);
  }
  .cd-message-bubble-sent .cd-message-timestamp-enhanced {
    color: var(--cd-text-on-primary);
  }
  .cd-message-bubble-received .cd-message-timestamp-enhanced {
    color: var(--cd-text-secondary);
  }
  .cd-message-meta-enhanced {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    margin-bottom: var(--cd-space-1-5);
    font-size: var(--cd-text-xs);
  }
  .cd-message-meta-enhanced .cd-badge-compact {
    padding: var(--cd-space-1) var(--cd-space-2);
  }
  .cd-message-author-enhanced {
    font-weight: 600;
    font-size: var(--cd-text-xs);
  }
  .cd-message-bubble-sent .cd-message-author-enhanced {
    color: var(--cd-text-on-primary);
  }
  .cd-message-bubble-received .cd-message-author-enhanced {
    color: var(--cd-text-primary);
  }
  .cd-message-bubble-sent .cd-message-content {
    color: var(--cd-text-on-primary);
  }
  .cd-message-bubble-received .cd-message-content {
    color: var(--cd-text-primary);
  }
  .cd-message-read-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1);
    font-size: var(--cd-text-xs);
    padding: var(--cd-space-0-5) var(--cd-space-1-5);
    border-radius: var(--cd-radius-full);
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 15%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-attachment-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cd-space-10);
    height: var(--cd-space-10);
    border-radius: var(--cd-radius-lg);
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 10%, transparent), color-mix(in srgb, var(--cd-color-primary) 20%, transparent));
    }
    color: var(--cd-color-primary);
  }
  .cd-attachment-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cd-space-6);
    height: var(--cd-space-6);
    padding: 0 var(--cd-space-2);
    border-radius: var(--cd-radius-full);
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
    font-size: var(--cd-text-xs);
    font-weight: 600;
  }
  .cd-attachment-gallery-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cd-space-2);
  }
  .cd-attachment-card-compact {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--cd-radius-lg);
    overflow: hidden;
    background-color: var(--cd-bg-secondary);
    box-shadow: var(--cd-shadow-sm);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
  .cd-attachment-card-compact:hover {
    box-shadow: var(--cd-shadow-lg);
    transform: translateY(-2px) scale(1.02);
  }
  .cd-attachment-card-compact-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cd-attachment-card-compact:hover .cd-attachment-card-compact-image {
    transform: scale(1.08);
  }
  .cd-attachment-card-compact-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-attachment-card-compact:hover .cd-attachment-card-compact-overlay {
    opacity: 1;
  }
  .cd-attachment-card-compact-icon {
    color: white;
    font-size: var(--cd-text-xl);
    transform: scale(0.8);
    transition: transform 0.2s ease-in-out;
  }
  .cd-attachment-card-compact:hover .cd-attachment-card-compact-icon {
    transform: scale(1);
  }
  .cd-reply-form-premium {
    position: relative;
    border-radius: 0;
    padding: var(--cd-space-6);
    background: linear-gradient(135deg, var(--cd-card-bg) 0%, var(--cd-card-bg) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-card-bg) 0%, color-mix(in srgb, var(--cd-card-bg) 95%, var(--cd-color-primary) 5%) 100%);
    }
    overflow: hidden;
  }
  .cd-reply-form-title-premium {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    font-size: var(--cd-text-xl);
    font-weight: 600;
    margin-bottom: var(--cd-space-6);
    color: var(--cd-text-primary);
  }
  .cd-reply-form-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cd-space-10);
    height: var(--cd-space-10);
    border-radius: var(--cd-radius-lg);
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 10%, transparent), color-mix(in srgb, var(--cd-color-primary) 20%, transparent));
    }
    color: var(--cd-color-primary);
  }
  .cd-reply-info-banner {
    display: flex;
    align-items: start;
    gap: var(--cd-space-3);
    padding: var(--cd-space-4);
    border-radius: var(--cd-radius-lg);
    background: linear-gradient(135deg, var(--cd-color-info), var(--cd-color-info));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-info) 8%, transparent), color-mix(in srgb, var(--cd-color-info) 3%, transparent));
    }
    border: 1px solid var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-info) 20%, transparent);
    }
  }
  .cd-reply-info-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cd-space-6);
    height: var(--cd-space-6);
    border-radius: var(--cd-radius-full);
    background-color: var(--cd-color-info);
    color: white;
    font-size: var(--cd-text-xs);
  }
  .cd-reply-info-text {
    flex: 1;
    font-size: var(--cd-text-sm);
    line-height: 1.5;
    color: var(--cd-text-primary);
  }
  .cd-reply-info-banner-gray {
    display: flex;
    align-items: start;
    gap: var(--cd-space-3);
    padding: var(--cd-space-4);
    border-radius: var(--cd-radius-lg);
    background: linear-gradient(135deg, var(--cd-text-tertiary), var(--cd-text-tertiary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-text-tertiary) 8%, transparent), color-mix(in srgb, var(--cd-text-tertiary) 3%, transparent));
    }
    border: 1px solid var(--cd-text-tertiary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-text-tertiary) 15%, transparent);
    }
  }
  .cd-reply-info-icon-gray {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cd-space-6);
    height: var(--cd-space-6);
    border-radius: var(--cd-radius-full);
    background-color: var(--cd-text-tertiary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-tertiary) 20%, transparent);
    }
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-xs);
  }
  .cd-reply-form-sticky-wrapper {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--cd-z-sticky);
    background-color: var(--cd-bg-primary);
    border-top: 1px solid var(--cd-border-secondary);
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05), 0 -2px 4px -1px rgba(0, 0, 0, 0.03);
    padding: var(--cd-space-4) 0;
    margin-top: var(--cd-space-6);
  }
  .cd-reply-form-sticky-wrapper .cd-reply-form-premium {
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
  }
  .cd-reply-form-sticky-wrapper .cd-reply-form-premium::before {
    display: none;
  }
  @media (max-width: 768px) {
    .cd-reply-form-sticky-wrapper {
      padding: var(--cd-space-3) 0;
    }
    .cd-reply-form-sticky-wrapper {
      bottom: env(safe-area-inset-bottom, 0);
      padding-bottom: calc(var(--cd-space-3) + env(safe-area-inset-bottom, 0));
    }
  }
  .cd-conversation-status-icon {
    width: var(--cd-space-8);
    height: var(--cd-space-8);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cd-conversation-status-icon-unread {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
  }
  .cd-conversation-status-icon-read {
    background-color: var(--cd-bg-secondary);
  }
  @keyframes pulse-unread {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }
  @keyframes pulse-dot {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
  }
  .cd-conversation-row-card.cd-conversation-unread .cd-status-indicator-active {
    background-color: var(--cd-color-warning);
    box-shadow: 0 0 0 3px var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-warning) 30%, transparent);
    }
    animation: pulse-dot 2s ease-in-out infinite;
  }
  .cd-conversation-row-card.cd-conversation-unread .cd-conversation-row-content {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 6%, var(--cd-bg-card));
    }
  }
  .cd-conversation-new-badge {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    text-transform: uppercase;
    font-weight: 700;
    animation: pulse-unread 2s ease-in-out infinite;
  }
  .cd-conversation-sender-enhanced {
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-conversation-row-card.cd-conversation-unread .cd-conversation-sender-enhanced {
    color: var(--cd-color-warning);
  }
  .cd-conversation-preview-enhanced {
    font-size: var(--cd-text-sm);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--cd-text-secondary);
  }
  .cd-conversation-row-card.cd-conversation-unread .cd-conversation-preview-enhanced {
    color: var(--cd-text-primary);
    font-weight: 500;
  }
  .cd-conversation-open-link-container {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--cd-space-2);
    padding-top: var(--cd-space-2);
    border-top: 1px solid var(--cd-border-secondary);
  }
  .cd-message-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--cd-space-6) 0;
    position: relative;
  }
  .cd-message-date-separator::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: var(--cd-border-secondary);
  }
  .cd-message-date-separator span {
    position: relative;
    font-size: var(--cd-text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--cd-text-tertiary);
    padding: var(--cd-space-1) var(--cd-space-4);
    background-color: var(--cd-bg-primary);
    border-radius: var(--cd-radius-full);
  }
  .cd-crm-info-row {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3);
    margin-bottom: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-crm-info-row-warning {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 8%, transparent);
    }
    border-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning) 25%, transparent);
    }
  }
  .cd-crm-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cd-space-8);
    height: var(--cd-space-8);
    border-radius: var(--cd-radius-md);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    color: var(--cd-color-primary);
    flex-shrink: 0;
    font-size: var(--cd-text-sm);
  }
  .cd-crm-info-icon-warning {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 15%, transparent);
    }
    color: var(--cd-color-warning);
  }
  .cd-crm-info-content {
    flex: 1;
    min-width: 0;
  }
  .cd-crm-info-label {
    display: block;
    font-size: var(--cd-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--cd-text-tertiary);
    margin-bottom: var(--cd-space-0-5);
  }
  .cd-crm-info-value {
    display: block;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    color: var(--cd-text-primary);
  }
  .cd-crm-info-text {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    line-height: 1.5;
    margin: 0;
  }
  .cd-crm-profile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cd-space-3) var(--cd-space-4);
    margin-top: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 20%, transparent);
    }
    color: var(--cd-color-primary);
    font-size: var(--cd-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
  }
  .cd-crm-profile-link:hover {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 35%, transparent);
    }
    transform: translateX(2px);
  }
  .cd-crm-profile-link i {
    font-size: var(--cd-text-xs);
    transition: transform 0.2s ease-in-out;
  }
  .cd-crm-profile-link:hover i {
    transform: translateX(3px);
  }
  .cd-conversation-card-compact {
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-conversation-card-compact:hover {
    border-color: var(--cd-border-primary, #e5e5e7);
    box-shadow: var(--cd-shadow-md, 0 4px 12px -2px rgba(0, 0, 0, 0.06));
  }
  .cd-conversation-card-compact--unread {
    background: linear-gradient(180deg, #fff8f3 0%, #ffffff 35%);
  }
  .cd-conversation-card-compact--active {
    background: linear-gradient(180deg, #f6faf6 0%, #ffffff 35%);
  }
  .cd-conversation-card-compact--archived {
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 35%);
  }
  .cd-conversation-card-compact--archived .cd-conversation-card-compact__body, .cd-conversation-card-compact--archived .cd-conversation-card-compact__description, .cd-conversation-card-compact--archived .cd-conversation-card-compact__inline-status {
    opacity: 0.6;
  }
  .cd-conversation-card-compact__inline-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem 0;
    font-size: 0.78rem;
    color: var(--cd-text-secondary, #6b7280);
    flex-wrap: wrap;
  }
  .cd-conversation-card-compact__inline-countdown {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
  }
  .cd-conversation-card-compact__inline-countdown i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
  }
  .cd-conversation-card-compact__inline-break {
    display: none;
  }
  .cd-conversation-card-compact__inline-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    color: inherit;
  }
  .cd-conversation-card-compact__inline-metric i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
  }
  .cd-conversation-card-compact__inline-metric strong {
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-conversation-card-compact__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--cd-radius-full, 999px);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-conversation-card-compact__status-pill i {
    font-size: 0.62rem;
  }
  .cd-conversation-card-compact__status-pill--unread {
    background: rgba(255, 107, 53, 0.12);
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-conversation-card-compact__status-pill--active {
    background: rgba(34, 139, 34, 0.1);
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-conversation-card-compact__status-pill--archived {
    background: rgba(156, 163, 175, 0.18);
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-conversation-card-compact__body {
    padding: 1rem 1.25rem 0.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    align-items: flex-start;
  }
  .cd-conversation-card-compact__title-block {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    min-width: 0;
  }
  .cd-conversation-card-compact__avatar {
    flex-shrink: 0;
  }
  .cd-conversation-card-compact__title-text {
    min-width: 0;
  }
  .cd-conversation-card-compact__title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--cd-text-primary, #1d1d1f);
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
  }
  .cd-conversation-card-compact__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-conversation-card-compact__title a:hover {
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-conversation-card-compact__verified {
    color: var(--cd-color-forest-green, #228b22);
    font-size: 0.8rem;
    margin-left: 0.3rem;
  }
  .cd-conversation-card-compact__meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.85rem;
    font-size: 0.78rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-conversation-card-compact__meta-line span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .cd-conversation-card-compact__meta-line i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
  }
  .cd-conversation-card-compact__stat {
    text-align: right;
    padding-left: 1.25rem;
    border-left: 1px solid var(--cd-border-hairline, #ececec);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 6rem;
  }
  .cd-conversation-card-compact__stat-value {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-conversation-card-compact__stat-value--unread {
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-conversation-card-compact__stat-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 0.2rem;
  }
  .cd-conversation-card-compact__description {
    padding: 0.5rem 1.25rem 0;
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-style: italic;
    color: #333;
    font-size: 0.85rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cd-conversation-card-compact__description strong {
    font-style: normal;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-conversation-card-compact__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding: 0.75rem 1.25rem 1rem;
    gap: 0.5rem 0.75rem;
  }
  .cd-conversation-card-compact__actions-meta {
    width: 100%;
    order: -1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-conversation-card-compact__actions-meta i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
  }
  .cd-conversation-card-compact__actions-buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .cd-conversation-card-compact--inline-actions .cd-conversation-card-compact__actions-meta, .cd-conversation-card-compact--inline-actions .cd-conversation-card-compact__actions-buttons {
    width: auto;
  }
  @media (max-width: 740px) {
    .cd-conversation-card-compact__body {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
    .cd-conversation-card-compact__stat {
      border-left: 0;
      border-top: 1px solid var(--cd-border-hairline, #ececec);
      padding-left: 0;
      padding-top: 0.5rem;
      text-align: left;
      flex-direction: row;
      align-items: baseline;
      gap: 0.35rem;
    }
    .cd-conversation-card-compact__stat-value {
      font-size: 1.1rem;
    }
    .cd-conversation-card-compact__inline-break {
      display: block;
      flex-basis: 100%;
      height: 0;
    }
    .cd-conversation-card-compact__inline-countdown {
      margin-left: 0;
    }
  }
}
@layer components {
  .cd-notification-card {
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    color: var(--cd-text-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    padding: var(--cd-space-4);
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-notification-card:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-md)));
  }
  .cd-notification-card-compact {
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    color: var(--cd-text-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-lg));
    padding: var(--cd-space-2) var(--cd-space-3);
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-notification-card-compact:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-sm)));
  }
  .cd-notification-icon-md {
    width: 3rem;
    height: 3rem;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
  }
  .cd-notification-icon-sm {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
  }
  .cd-notification-controls-card {
    overflow: visible;
  }
  .cd-notif-masthead {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-bottom: var(--cd-space-3, 0.75rem);
  }
  .cd-notif-masthead__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cd-space-3, 0.75rem);
  }
  .cd-notif-masthead__kicker {
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
  }
  .cd-notif-masthead__manage {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-sm);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.16s ease;
  }
  .cd-notif-masthead__manage i {
    font-size: 0.85em;
    transition: transform 0.16s ease;
  }
  .cd-notif-masthead__manage:hover {
    color: var(--cd-color-primary);
  }
  .cd-notif-masthead__manage:hover i {
    transform: translateX(2px);
  }
  .cd-notif-masthead__channel {
    display: flex;
    align-items: baseline;
    gap: var(--cd-space-3, 0.75rem);
  }
  .cd-notif-masthead__channel-label {
    flex: 0 0 auto;
    min-width: 6.5rem;
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .cd-notif-masthead__statement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 1.1rem;
    margin: 0;
    color: var(--cd-text-primary);
    font-size: 1.15rem;
    line-height: 1.2;
  }
  .cd-notif-masthead__essential {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-sm);
    font-weight: 500;
    line-height: 1.3;
  }
  .cd-notif-masthead__lock {
    font-size: 0.7rem;
    color: var(--cd-text-tertiary);
  }
  .cd-notif-masthead__essential-tag {
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .cd-coverage-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--cd-text-primary);
    font-size: inherit;
    font-weight: 650;
    line-height: 1.2;
  }
  .cd-coverage-toggle__dot {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--cd-color-success, #16a34a);
  }
  .cd-coverage-toggle--off {
    color: var(--cd-text-tertiary);
  }
  .cd-coverage-toggle--off .cd-coverage-toggle__dot {
    background-color: transparent;
    border: 1.5px solid var(--cd-text-tertiary);
  }
  .cd-coverage-toggle__state {
    font-family: var(--cd-font-primary);
    font-size: var(--cd-text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
  }
  .cd-notification-toolbar {
    padding-top: var(--cd-space-3, 0.75rem);
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-notification-filter-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cd-space-3, 0.75rem);
    width: 100%;
  }
  .cd-notification-filter-label {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2, 0.5rem);
    color: var(--cd-text-primary);
    font-size: var(--cd-text-sm);
    font-weight: 700;
    white-space: nowrap;
  }
  .cd-notification-filter-label i {
    color: var(--cd-color-primary);
  }
  .cd-notification-filter-control {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2, 0.5rem);
    flex: 1 1 12rem;
    min-width: 0;
  }
  .cd-notification-filter-control .cd-input {
    width: 100%;
    min-width: 0;
  }
  .cd-notification-search {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2, 0.5rem);
    flex: 2 1 16rem;
    min-width: 0;
    padding: 0 var(--cd-space-3, 0.75rem);
    border: 1px solid var(--cd-border-secondary);
    border-radius: var(--cd-radius-lg, 0.75rem);
    background: var(--cd-bg-primary);
  }
  .cd-notification-search:focus-within {
    border-color: var(--cd-color-primary);
  }
  .cd-notification-search__go {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cd-text-secondary);
    cursor: pointer;
  }
  .cd-notification-search__go:hover {
    color: var(--cd-color-primary);
  }
  .cd-notification-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--cd-space-2, 0.5rem) 0;
    border: 0;
    background: transparent;
    color: var(--cd-text-primary);
    font-size: var(--cd-text-sm);
  }
  .cd-notification-search__input:focus {
    outline: none;
    box-shadow: none;
  }
  @media (max-width: 767px) {
    .cd-notification-controls-card {
      padding: 0;
      border: 0;
      border-radius: var(--cd-radius-lg, 0.75rem);
      background: transparent;
      box-shadow: none;
    }
    .cd-notification-controls-card:hover {
      transform: none;
      box-shadow: none;
    }
    .cd-notif-masthead {
      display: none;
    }
    .cd-notification-toolbar {
      padding-top: 0;
      border-top: 0;
      flex-direction: column;
      align-items: stretch;
      gap: var(--cd-space-3, 0.75rem);
    }
    .cd-notification-toolbar .cd-results-toolbar-left, .cd-notification-toolbar .cd-results-toolbar-right {
      width: 100%;
      align-items: stretch;
    }
    .cd-notification-toolbar .cd-results-toolbar-right {
      justify-content: stretch;
      flex-wrap: wrap;
    }
    .cd-notification-filter-form {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: var(--cd-space-2, 0.5rem);
      min-width: 0;
    }
    .cd-notification-filter-label {
      justify-content: flex-start;
    }
    .cd-notification-filter-control, .cd-notification-search {
      width: 100%;
      flex-basis: auto;
    }
    .cd-notification-toolbar .cd-results-toolbar-right > form, .cd-notification-toolbar .cd-results-toolbar-right > button, .cd-notification-toolbar .cd-results-toolbar-right .cd-btn {
      width: 100%;
    }
    .cd-notification-toolbar .cd-results-toolbar-right .cd-btn {
      justify-content: center;
    }
  }
  .cd-notification-border-success::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--cd-color-success);
    border-radius: 0 var(--cd-radius-xl) var(--cd-radius-xl) 0;
  }
  .cd-notification-border-warning::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--cd-color-warning);
    border-radius: 0 var(--cd-radius-xl) var(--cd-radius-xl) 0;
  }
  .cd-notification-border-danger::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--cd-color-error);
    border-radius: 0 var(--cd-radius-xl) var(--cd-radius-xl) 0;
  }
  .cd-notification-border-info::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--cd-color-primary);
    border-radius: 0 var(--cd-radius-xl) var(--cd-radius-xl) 0;
  }
  .cd-notification-card-accepted {
    background: linear-gradient(135deg, var(--cd-color-success) 0%, var(--cd-color-success) 50%, var(--cd-card-bg) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-success) 8%, var(--cd-card-bg)) 0%, color-mix(in srgb, var(--cd-color-success) 3%, var(--cd-card-bg)) 50%, var(--cd-card-bg) 100%);
    }
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 35%, var(--cd-card-border));
    }
    box-shadow: 0 1px 3px 0 var(--cd-color-success), 0 1px 2px -1px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--cd-color-success) 12%, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px color-mix(in srgb, var(--cd-color-success) 8%, rgba(0, 0, 0, 0.1));
    }
  }
  .cd-notification-card-accepted:hover {
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 45%, var(--cd-card-border));
    }
    background: linear-gradient(135deg, var(--cd-color-success) 0%, var(--cd-color-success) 50%, var(--cd-card-bg) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-success) 12%, var(--cd-card-bg)) 0%, color-mix(in srgb, var(--cd-color-success) 5%, var(--cd-card-bg)) 50%, var(--cd-card-bg) 100%);
    }
    box-shadow: 0 4px 6px -1px var(--cd-color-success), 0 2px 4px -2px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--cd-color-success) 15%, rgba(0, 0, 0, 0.1)), 0 2px 4px -2px color-mix(in srgb, var(--cd-color-success) 10%, rgba(0, 0, 0, 0.05));
    }
  }
  .cd-notification-message-accepted {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 6%, var(--cd-card-bg));
    }
    border: 1px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-success) 15%, var(--cd-card-border));
    }
  }
  .cd-notification-price-callout {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1-5, 0.375rem);
    padding: var(--cd-space-1-5, 0.375rem) var(--cd-space-3, 0.75rem);
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 8%, var(--cd-card-bg));
    }
    border: 1px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-success) 20%, var(--cd-card-border));
    }
    border-radius: var(--cd-radius-full, 9999px);
    color: var(--cd-color-success);
    font-weight: 700;
  }
  .cd-notification-row-unread {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 3%, transparent);
    }
  }
  .cd-notification-row-accepted {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 5%, transparent);
    }
  }
  .cd-toast-cta {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    margin-left: 0.25rem;
    white-space: nowrap;
  }
  .cd-toast-cta:hover {
    text-decoration: none;
  }
  [data-notification-card-root] .cd-quote-brief-title-row {
    align-items: center;
  }
  [data-notification-card-root] .cd-quote-brief-title {
    margin-bottom: 0;
  }
}
@layer components {
  .cd-rating {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .cd-rating-star {
    font-size: var(--cd-text-xl);
    cursor: pointer;
    transition: color 0.15s ease-in-out;
    color: var(--cd-border-secondary);
  }
  .cd-rating-star i {
    color: #fbbf24;
    transition: color 0.15s ease-in-out;
  }
  .cd-rating-star-filled {
    color: var(--cd-color-warning);
  }
  .cd-rating-star-selected {
    color: #fbbf24 !important;
  }
  .cd-rating-star-selected i {
    color: #fbbf24 !important;
  }
  .cd-rating-star-hover {
    color: #fbbf24 !important;
  }
  .cd-rating-star-hover i {
    color: #fbbf24 !important;
  }
  .cd-rating-progress {
    height: calc(var(--spacing) * 2);
    width: 100%;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-200);
  }
  .cd-rating-progress-fill {
    height: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-warning-orange);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .cd-rating-progress-fill-green {
    background-color: var(--color-forest-green);
  }
  .cd-rating-progress-fill-blue {
    background-color: var(--color-science-blue);
  }
  .cd-rating-progress-fill-purple {
    background-color: var(--color-deep-purple);
  }
  .cd-rating-hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .cd-rating-hero-divider {
    width: 1px;
    height: 48px;
    background: var(--cd-border-secondary);
  }
  .cd-rating-cat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .cd-rating-cat-cell {
    padding: 20px 24px;
    border-right: 1px solid var(--cd-border-secondary);
  }
  .cd-rating-cat-cell:last-child {
    border-right: none;
  }
  @media (max-width: 768px) {
    .cd-rating-cat-strip {
      grid-template-columns: repeat(2, 1fr);
    }
    .cd-rating-cat-cell {
      border-right: 1px solid var(--cd-border-secondary);
    }
    .cd-rating-cat-cell:nth-child(2n) {
      border-right: none;
    }
    .cd-rating-cat-cell:nth-child(1), .cd-rating-cat-cell:nth-child(2) {
      border-bottom: 1px solid var(--cd-border-secondary);
    }
  }
  .cd-review-carousel {
    position: relative;
  }
  .cd-review-gallery {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--cd-border-secondary) transparent;
    padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  }
  .cd-review-gallery .cd-review-image {
    flex: 0 0 200px;
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    scroll-snap-align: start;
  }
  .cd-review-gallery .cd-review-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 200ms ease;
    display: block;
  }
  .cd-review-gallery .cd-review-image:hover img {
    transform: scale(1.03);
  }
  .cd-review-gallery .cd-review-zoom-cue {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--cd-text-primary);
    display: grid;
    place-items: center;
    font-size: 10px;
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
  }
  .cd-review-gallery .cd-review-image:hover .cd-review-zoom-cue {
    opacity: 1;
  }
  .cd-review-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--cd-border-primary);
    color: var(--cd-text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 2;
  }
  .cd-review-carousel:hover .cd-review-nav {
    opacity: 1;
  }
  .cd-review-nav:hover {
    transform: translateY(-50%) scale(1.08);
  }
  .cd-review-nav-left {
    left: -8px;
  }
  .cd-review-nav-right {
    right: -8px;
  }
  @media (max-width: 540px), (hover: none) {
    .cd-review-nav {
      display: none;
    }
    .cd-review-gallery {
      -webkit-mask-image: none;
      mask-image: none;
    }
  }
  @media (max-width: 540px) {
    .cd-review-gallery .cd-review-image {
      flex: 0 0 140px;
    }
  }
  .cd-review-trust-band {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: linear-gradient( 90deg, var(--cd-color-accent), transparent 70% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 90deg, color-mix(in srgb, var(--cd-color-accent) 8%, transparent), transparent 70% );
    }
    border-bottom: 1px solid var(--cd-border-secondary);
    min-width: 0;
  }
  .cd-review-trust-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
  }
  .cd-review-trust-icon-wrap:has(> i) {
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 12%, transparent);
    }
    color: var(--cd-color-accent);
  }
  .cd-review-trust-icon-wrap > i {
    font-size: 1rem;
  }
  .cd-review-trust-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .cd-review-trust-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cd-text-primary);
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-review-trust-qualifier {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    color: var(--cd-text-secondary);
    flex-shrink: 0;
  }
  .cd-review-trust-sep {
    color: var(--cd-text-tertiary);
  }
  @media (max-width: 639.98px) {
    .cd-review-trust-band {
      padding: 0.5rem 0.875rem;
      gap: 0.5rem;
    }
    .cd-review-trust-brand {
      display: none;
    }
  }
  .cd-reviews-summary {
    background-color: var(--cd-card-bg);
    border: 1px solid var(--cd-card-border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .cd-reviews-summary-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    align-items: center;
    gap: 32px;
    padding: 32px 36px;
    background: radial-gradient( 120% 90% at 0% 0%, var(--cd-color-trust) 0%, transparent 60% ), var(--cd-card-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( 120% 90% at 0% 0%, color-mix(in srgb, var(--cd-color-trust) 10%, transparent) 0%, transparent 60% ), var(--cd-card-bg);
    }
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-reviews-summary-hero--toggle {
    cursor: pointer;
    user-select: none;
  }
  .cd-reviews-summary-hero--toggle:focus-visible {
    outline: 2px solid var(--cd-color-trust);
    outline-offset: -4px;
  }
  .cd-reviews-summary-hero > *:not(:first-child) {
    border-left: 1px solid var(--cd-border-hairline);
    padding-left: 24px;
  }
  @media (max-width: 768px) {
    .cd-reviews-summary-hero {
      grid-template-columns: auto 1fr 1fr;
      grid-template-areas: "score reviews trust";
      gap: 12px;
      padding: 16px 18px;
      align-items: center;
    }
    .cd-reviews-summary-hero > .cd-reviews-summary-score {
      grid-area: score;
    }
    .cd-reviews-summary-hero > .cd-reviews-summary-stat:nth-of-type(1) {
      grid-area: reviews;
    }
    .cd-reviews-summary-hero > .cd-reviews-summary-stat:nth-of-type(2) {
      grid-area: trust;
    }
    .cd-reviews-summary-hero > .cd-reviews-summary-pullquote {
      display: none;
    }
    .cd-reviews-summary-hero > *:not(:first-child) {
      border-left: none;
      padding-left: 0;
    }
    .cd-reviews-summary-score-value {
      font-size: 2.5rem;
    }
    .cd-reviews-summary-stat-value {
      font-size: 1.25rem;
    }
  }
  .cd-reviews-summary-score {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cd-reviews-summary-score-value.cd-editorial-display, .cd-reviews-summary-stat-value.cd-editorial-display, .cd-reviews-summary-metric-value.cd-editorial-display {
    font-weight: 500;
  }
  .cd-reviews-summary-score-value {
    font-size: 4rem;
    color: var(--cd-text-primary);
  }
  .cd-reviews-summary-score-stars {
    display: inline-flex;
    gap: 3px;
    color: var(--cd-color-trust);
    font-size: 0.85rem;
  }
  .cd-reviews-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .cd-reviews-summary-eyebrow, .cd-reviews-summary-stat-label, .cd-reviews-summary-distribution-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
  }
  .cd-reviews-summary-stat-value {
    font-size: 1.75rem;
    color: var(--cd-text-primary);
  }
  .cd-reviews-summary-stat-sub {
    font-size: 0.78rem;
    color: var(--cd-text-secondary);
  }
  .cd-reviews-summary-stat-value--accent {
    color: inherit;
  }
  .cd-reviews-summary-stat-value--success {
    color: var(--cd-color-success);
  }
  .cd-reviews-summary-stat-value--muted {
    color: var(--cd-text-tertiary);
  }
  .cd-reviews-summary-pullquote {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .cd-reviews-summary-pullquote-text {
    position: relative;
    font-family: var(--cd-font-editorial);
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-reviews-summary-pullquote-text::before {
    content: "\201C";
    font-family: var(--cd-font-editorial);
    font-size: 2rem;
    line-height: 0;
    color: var(--cd-text-tertiary);
    margin-right: 4px;
    vertical-align: -0.18em;
  }
  .cd-reviews-summary-pullquote-text::after {
    content: "\201D";
    font-family: var(--cd-font-editorial);
    font-size: 2rem;
    line-height: 0;
    color: var(--cd-text-tertiary);
    margin-left: 4px;
    vertical-align: -0.18em;
  }
  .cd-reviews-summary-pullquote-text em {
    font-style: italic;
    color: var(--cd-text-primary);
  }
  .cd-reviews-summary-pullquote-sub {
    font-size: 0.78rem;
    color: var(--cd-text-secondary);
    margin: 0;
  }
  .cd-reviews-summary-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-reviews-summary-metric {
    padding: 26px 28px;
    border-right: 1px solid var(--cd-border-hairline);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-reviews-summary-metric:last-child {
    border-right: none;
  }
  @media (max-width: 1024px) {
    .cd-reviews-summary-metrics {
      grid-template-columns: repeat(2, 1fr);
    }
    .cd-reviews-summary-metric:nth-child(2n) {
      border-right: none;
    }
    .cd-reviews-summary-metric:nth-child(-n+2) {
      border-bottom: 1px solid var(--cd-border-hairline);
    }
  }
  @media (max-width: 480px) {
    .cd-reviews-summary-metric {
      padding: 16px 18px;
      gap: 8px;
    }
    .cd-reviews-summary-metric-icon {
      width: 20px;
      height: 20px;
      font-size: 0.7rem;
    }
    .cd-reviews-summary-metric-label {
      font-size: 0.66rem;
    }
    .cd-reviews-summary-metric-value {
      font-size: 1.5rem;
    }
  }
  .cd-reviews-summary-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .cd-reviews-summary-metric-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    color: var(--cd-text-tertiary);
    background: transparent;
    flex-shrink: 0;
  }
  .cd-reviews-summary-metric-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
  }
  .cd-reviews-summary-metric-weight {
    font-size: 0.72rem;
    color: var(--cd-text-tertiary);
  }
  .cd-reviews-summary-metric-score {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .cd-reviews-summary-metric-value {
    font-size: 1.85rem;
    color: var(--cd-text-primary);
  }
  .cd-reviews-summary-metric-suffix {
    font-size: 0.78rem;
  }
  .cd-reviews-summary-metric-bar {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background-color: var(--cd-border-hairline);
    overflow: hidden;
  }
  .cd-reviews-summary-metric-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 300ms ease;
  }
  .cd-reviews-summary-metric-bar-fill-quality, .cd-reviews-summary-metric-bar-fill-punctuality, .cd-reviews-summary-metric-bar-fill-communication, .cd-reviews-summary-metric-bar-fill-value {
    background-color: var(--cd-text-primary);
  }
  .cd-reviews-summary-distribution {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 28px;
  }
  @media (max-width: 768px) {
    .cd-reviews-summary-distribution {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 12px 16px;
    }
    .cd-reviews-summary-distribution-bars {
      gap: 10px;
    }
  }
  .cd-reviews-summary-distribution-label {
    flex-shrink: 0;
  }
  .cd-reviews-summary-distribution-bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    flex: 1;
    min-width: 0;
  }
  .cd-reviews-summary-distribution-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .cd-reviews-summary-distribution-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cd-text-tertiary);
    flex-shrink: 0;
  }
  .cd-reviews-summary-distribution-stars i {
    color: var(--cd-text-secondary);
    font-size: 0.62rem;
  }
  .cd-reviews-summary-distribution-track {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background-color: var(--cd-border-hairline);
    overflow: hidden;
    min-width: 24px;
  }
  .cd-reviews-summary-distribution-fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--cd-text-primary);
    transition: width 300ms ease;
  }
  .cd-reviews-summary-distribution-count {
    font-family: var(--cd-font-numeral);
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.015em;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    text-align: center;
  }
  .cd-review-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  @media (min-width: 768px) {
    .cd-review-card-grid {
      grid-template-columns: 8fr 4fr;
    }
    .cd-review-card-grid.right-empty {
      grid-template-columns: 1fr;
    }
  }
  .cd-review-left-col {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }
  .cd-review-right-col {
    padding: 1.25rem;
    border-top: 1px solid var(--cd-border-secondary);
    min-width: 0;
  }
  @media (min-width: 768px) {
    .cd-review-right-col {
      border-top: none;
      border-left: 1px solid var(--cd-border-secondary);
    }
  }
  .cd-review-right-col-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cd-text-secondary);
    margin: 0 0 0.75rem 0;
  }
  .cd-review-ratings-col {
    background-color: var(--cd-bg-secondary);
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .cd-review-breakdown-icon {
    width: clamp(3.5rem, 12vw, 4.5rem);
    height: clamp(3.5rem, 12vw, 4.5rem);
    border-radius: 50%;
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-secondary);
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
  .cd-review-breakdown-headline {
    font-family: var(--cd-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.005em;
    color: var(--cd-text-primary);
    margin: 0 0 0.25rem;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .cd-review-breakdown-sub {
    font-size: 0.75rem;
    color: var(--cd-text-secondary);
    margin: 0 0 1rem;
    text-align: center;
  }
  .cd-review-rating-rows {
    display: flex;
    flex-direction: column;
  }
  .cd-review-rating-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--cd-border-secondary);
  }
  .cd-review-rating-row:last-child {
    border-bottom: none;
  }
  .cd-review-rating-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .cd-review-rating-row .label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--cd-text-secondary);
  }
  .cd-review-rating-row .label i {
    font-size: 0.7rem;
    color: var(--cd-text-tertiary);
  }
  .cd-review-rating-row .val {
    font-family: var(--cd-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .cd-review-rating-bar {
    display: flex;
    gap: 0.2rem;
  }
  .cd-review-rating-bar .seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background-color: var(--cd-border-secondary);
  }
  .cd-review-rating-bar .seg.on {
    background-color: var(--cd-text-primary);
  }
  .cd-review-rating-row.below-target .val {
    color: var(--cd-color-warning);
  }
  .cd-review-rating-row.below-target .label i {
    color: var(--cd-text-tertiary);
  }
  .cd-review-rating-row.below-target .cd-review-rating-bar .seg.on {
    background-color: var(--cd-color-warning);
  }
  .cd-review-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0.75rem;
  }
  @media (min-width: 640px) {
    .cd-review-breakdown-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .cd-review-breakdown-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
  }
  .cd-review-breakdown-cell .label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: var(--cd-text-secondary);
    text-align: center;
  }
  .cd-review-breakdown-cell .label i {
    font-size: 0.65rem;
    color: var(--cd-text-tertiary);
  }
  .cd-review-breakdown-cell .val {
    font-family: var(--cd-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .cd-review-breakdown-cell .cd-review-rating-bar {
    width: 100%;
  }
  .cd-review-breakdown-cell.below-target .val {
    color: var(--cd-color-warning);
  }
  .cd-review-breakdown-cell.below-target .cd-review-rating-bar .seg.on {
    background-color: var(--cd-color-warning);
  }
  .cd-review-perfect-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.875rem 1rem;
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-secondary);
    border-radius: 12px;
  }
  .cd-review-perfect-pill-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .cd-review-perfect-pill-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-secondary);
    display: grid;
    place-items: center;
    font-size: 14px;
    flex-shrink: 0;
  }
  .cd-review-perfect-pill-title {
    font-family: var(--cd-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-review-perfect-pill-subtitle {
    font-size: 0.78rem;
    color: var(--cd-text-secondary);
    margin: 1px 0 0;
  }
  .cd-review-perfect-pill-cats {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .cd-review-perfect-pill-cats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cd-bg-card);
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-review-perfect-pill-cats span i {
    font-size: 0.7rem;
    color: var(--cd-color-success);
  }
  .cd-review-perfect-col {
    background-color: var(--cd-bg-secondary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-width: 0;
  }
  .cd-review-perfect-hero {
    width: clamp(6rem, 30vw, 9.5rem);
    aspect-ratio: 1 / 1;
    height: auto;
    max-width: 100%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-review-perfect-hero img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cd-review-perfect-headline {
    font-family: var(--cd-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.005em;
    color: var(--cd-text-primary);
    margin: 0 0 0.25rem;
    overflow-wrap: anywhere;
  }
  .cd-review-perfect-sub {
    font-size: 0.75rem;
    color: var(--cd-text-secondary);
    margin: 0 0 1rem;
  }
  .cd-review-perfect-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
  }
  .cd-review-perfect-checklist li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cd-text-primary);
    min-width: 0;
  }
  .cd-review-perfect-checklist .cat-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
  }
  .cd-review-perfect-checklist .cat-label i {
    font-size: 0.8rem;
    color: var(--cd-color-success);
    flex-shrink: 0;
  }
  .cd-review-perfect-checklist .cat-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    color: var(--cd-color-warning);
    font-size: 0.72rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .cd-review-perfect-checklist .cat-stars i.off {
    color: var(--cd-border-secondary);
  }
  .cd-review-perfect-verified-footer {
    padding-top: 0.75rem;
    margin-top: auto;
    border-top: 1px solid var(--cd-border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    color: var(--cd-text-secondary);
  }
  .cd-review-perfect-verified-footer i {
    color: var(--cd-text-tertiary);
  }
  @media (max-width: 767.98px) {
    .cd-review-ratings-col, .cd-review-perfect-col {
      padding: 0.875rem;
    }
    .cd-review-breakdown-icon, .cd-review-breakdown-headline, .cd-review-breakdown-sub {
      display: none;
    }
    .cd-review-rating-row {
      flex-direction: row;
      align-items: center;
      gap: 0.625rem;
      padding: 0.4rem 0;
    }
    .cd-review-rating-row-top {
      display: contents;
    }
    .cd-review-rating-row .label {
      flex: 0 0 auto;
      min-width: 6.75rem;
      font-size: 0.7rem;
    }
    .cd-review-rating-bar {
      flex: 1 1 auto;
      min-width: 0;
    }
    .cd-review-rating-row .val {
      flex: 0 0 auto;
      font-size: 0.9rem;
      min-width: 2.25rem;
      text-align: right;
    }
    .cd-review-perfect-hero {
      display: none;
    }
    .cd-review-perfect-headline {
      font-size: 1rem;
    }
    .cd-review-perfect-sub {
      margin-bottom: 0.625rem;
    }
    .cd-review-perfect-checklist {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.4rem 0.75rem;
      margin-bottom: 0.625rem;
    }
    .cd-review-perfect-checklist li {
      font-size: 0.78rem;
    }
    .cd-review-perfect-checklist .cat-stars {
      display: none;
    }
    .cd-review-perfect-verified-footer {
      padding-top: 0.5rem;
      font-size: 0.65rem;
    }
  }
  .cd-review-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    background-color: transparent;
  }
  .cd-review-score-num {
    margin: 0;
    font-family: var(--cd-font-display);
    font-weight: 800;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
  }
  .cd-review-score-num .int {
    font-size: 1.75rem;
  }
  .cd-review-score-num .dec {
    font-size: 0.875rem;
    opacity: 0.55;
    margin-left: 0.05em;
  }
  @media (min-width: 640px) {
    .cd-review-score-num .int {
      font-size: 2.5rem;
    }
    .cd-review-score-num .dec {
      font-size: 1.25rem;
    }
  }
  .cd-review-score-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    margin-top: 0.35rem;
    font-size: 0.6rem;
  }
  .cd-review-score-stars i {
    font-size: 0.625rem;
  }
  .cd-review-score-stars .far {
    color: var(--cd-text-tertiary);
  }
}
@layer components {
  .cd-stat-icon-bg {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, currentColor 10%, transparent);
    }
  }
  .cd-review-stat-card {
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-radius-lg);
    box-shadow: var(--cd-panel-shadow, none);
    text-align: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-width: 0;
  }
  .cd-review-stat-card:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  a:hover > .cd-review-stat-card, a:focus > .cd-review-stat-card {
    border-color: var(--cd-color-primary);
  }
  @media (min-width: 640px) {
    .cd-review-stat-card {
      border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    }
  }
  .cd-review-stat-content {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-grow: 1;
    flex-direction: column;
    padding: calc(var(--spacing) * 3);
  }
  @media (min-width: 640px) {
    .cd-review-stat-content {
      padding: var(--cd-space-3);
    }
  }
  @media (min-width: 1024px) {
    .cd-review-stat-content {
      padding: var(--cd-space-5);
    }
  }
  .cd-review-stat-value {
    font-family: var(--cd-font-numeral);
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.015em;
    font-size: var(--cd-text-xl);
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1;
    margin-bottom: 2px;
  }
  @media (min-width: 640px) {
    .cd-review-stat-value {
      font-size: var(--cd-text-2xl);
      margin-bottom: var(--cd-space-1);
    }
  }
  @media (min-width: 1024px) {
    .cd-review-stat-value {
      font-size: var(--cd-text-3xl);
      margin-bottom: var(--cd-space-2);
    }
  }
  .cd-review-stat-label {
    font-size: 0.6rem;
    line-height: 1.1;
    color: var(--cd-text-secondary);
    font-weight: 500;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (min-width: 640px) {
    .cd-review-stat-label {
      font-size: 0.65rem;
      line-height: 1.2;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
  }
  @media (min-width: 1024px) {
    .cd-review-stat-label {
      font-size: var(--cd-text-xs);
      margin-bottom: var(--cd-space-2);
    }
  }
  .cd-review-stat-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-1);
    margin-bottom: var(--cd-space-2);
  }
  .cd-review-stat-stars i {
    font-size: var(--cd-text-base);
  }
  .cd-review-stat-stars .filled {
    color: var(--cd-color-warning);
  }
  .cd-review-stat-stars .empty {
    color: var(--cd-border-color);
  }
  .cd-review-stat-footer {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
    padding: var(--cd-space-2) var(--cd-space-3);
    background-color: var(--cd-bg-secondary);
    margin-top: auto;
  }
  @media (min-width: 1024px) {
    .cd-review-stat-footer {
      padding: var(--cd-space-3) var(--cd-space-5);
    }
  }
  .cd-review-stat-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-1);
    font-size: var(--cd-text-xs);
    font-weight: 500;
  }
  .cd-review-stat-trend-positive {
    color: var(--cd-emerald-green);
  }
  .cd-review-stat-trend-positive i {
    color: var(--cd-emerald-green);
  }
  .cd-review-stat-trend-negative {
    color: var(--cd-red-accent);
  }
  .cd-review-stat-trend-negative i {
    color: var(--cd-red-accent);
  }
  .cd-review-stat-trend-neutral {
    color: var(--cd-text-secondary);
  }
  .cd-review-stat-trend-neutral i {
    color: var(--cd-text-secondary);
  }
  .cd-review-panel {
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, none);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-review-panel:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  .cd-review-panel-header {
    background-color: var(--cd-bg-secondary);
    padding: var(--cd-space-5) var(--cd-space-6);
    border-bottom: 1px solid var(--cd-card-border);
  }
  @media (min-width: 640px) {
    .cd-review-panel-header {
      padding: var(--cd-space-6) var(--cd-space-8);
    }
  }
  .cd-review-panel-title {
    font-size: var(--cd-text-lg);
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-review-panel-body {
    padding: var(--cd-space-6);
  }
  @media (min-width: 640px) {
    .cd-review-panel-body {
      padding: var(--cd-space-8);
    }
  }
  .cd-review-stat-footer-progress {
    padding: 0;
    background-color: var(--cd-bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .cd-review-stat-progress-track {
    width: 100%;
    height: 6px;
    background-color: var(--cd-border-primary);
    overflow: hidden;
  }
  .cd-review-stat-progress-bar {
    height: 100%;
    transition: width 0.5s ease-out;
    position: relative;
  }
  .cd-review-stat-progress-success {
    background: linear-gradient(90deg, var(--cd-color-success), var(--cd-color-success));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-success), color-mix(in srgb, var(--cd-color-success) 80%, white));
    }
  }
  .cd-review-stat-progress-warning {
    background: linear-gradient(90deg, var(--cd-color-warning), var(--cd-color-warning));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-warning), color-mix(in srgb, var(--cd-color-warning) 80%, white));
    }
  }
  .cd-review-stat-progress-danger {
    background: linear-gradient(90deg, var(--cd-color-error), var(--cd-color-error));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-error), color-mix(in srgb, var(--cd-color-error) 80%, white));
    }
  }
  .cd-review-stat-progress-critical {
    background: linear-gradient(90deg, var(--cd-color-error), var(--cd-color-error));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-error), color-mix(in srgb, var(--cd-color-error) 70%, white));
    }
    animation: pulse-progress 2s ease-in-out infinite;
  }
  @keyframes pulse-progress {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
    }
  }
  .cd-review-stat-progress-label {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
    font-weight: 500;
    text-align: center;
    padding: var(--cd-space-2) var(--cd-space-3);
  }
}
@layer components {
  .cd-metric-card {
    text-align: center;
    padding: var(--cd-space-3);
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    background-color: var(--cd-bg-secondary);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-secondary);
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-metric-card:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  @media (min-width: 640px) {
    .cd-metric-card {
      padding: var(--cd-space-4);
    }
  }
  .cd-metric-value {
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin-bottom: var(--cd-space-1);
    font-size: var(--cd-text-xl);
    color: var(--cd-text-primary);
  }
  @media (min-width: 640px) {
    .cd-metric-value {
      font-size: var(--cd-text-2xl);
    }
  }
  .cd-metric-label {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  .cd-metrics-grid {
    display: grid;
    gap: var(--cd-grid-gap-sm);
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 640px) {
    .cd-metrics-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--cd-grid-gap-base);
    }
  }
  @media (min-width: 768px) {
    .cd-metrics-grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }
  .cd-insights-chart-container {
    position: relative;
    width: 100%;
    min-height: 300px;
  }
  @media (min-width: 768px) {
    .cd-insights-chart-container {
      min-height: 350px;
    }
  }
  @media (min-width: 1024px) {
    .cd-insights-chart-container {
      min-height: 400px;
    }
  }
  .cd-insights-table {
    width: 100%;
    border-collapse: collapse;
  }
  .cd-insights-table thead {
    background-color: var(--cd-bg-secondary);
    border-bottom: 2px solid var(--cd-border-secondary);
  }
  .cd-insights-table th {
    padding: var(--cd-space-4);
    text-align: left;
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-insights-table td {
    padding: var(--cd-space-4);
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    border-bottom: 1px solid var(--cd-border-secondary);
  }
  .cd-insights-table tbody tr {
    transition: background-color 0.2s ease;
  }
  .cd-insights-table tbody tr:hover {
    background-color: var(--cd-bg-hover);
  }
  .cd-insights-table tbody tr:last-child td {
    border-bottom: none;
  }
  .cd-pipeline {
    display: flex;
    align-items: stretch;
    gap: var(--cd-space-2);
  }
  .cd-pipeline-stage {
    flex: 1 1 0%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    padding: var(--cd-space-3) var(--cd-space-4);
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    box-shadow: var(--cd-panel-shadow, none);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }
  .cd-pipeline-stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--_accent, var(--cd-border-secondary));
  }
  .cd-pipeline-stage:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px -2px var(--_accent, var(--cd-text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--_accent, var(--cd-text-primary)) 20%, transparent);
    }
    border-color: var(--_accent, var(--cd-border-hover));
  }
  .cd-pipeline-value {
    font-size: var(--cd-text-2xl);
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1;
  }
  .cd-pipeline-label {
    font-size: var(--cd-text-xs);
    font-weight: 500;
    color: var(--cd-text-secondary);
    margin-top: var(--cd-space-1);
  }
  .cd-pipeline-rate {
    font-size: 0.625rem;
    font-weight: 600;
    margin-top: var(--cd-space-1);
    color: var(--_accent, var(--cd-text-tertiary));
  }
  .cd-pipeline-chevron {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--cd-border-secondary);
    font-size: var(--cd-text-xs);
  }
  @media (max-width: 767px) {
    .cd-pipeline {
      gap: var(--cd-space-1);
    }
    .cd-pipeline-stage {
      padding: var(--cd-space-2) var(--cd-space-3);
    }
    .cd-pipeline-value {
      font-size: var(--cd-text-lg);
    }
    .cd-pipeline-label {
      font-size: 0.65rem;
    }
    .cd-pipeline-rate {
      display: none;
    }
    .cd-pipeline-chevron {
      display: none;
    }
  }
  .cd-stat-hero {
    padding: var(--cd-space-4);
    border-radius: var(--cd-radius-xl);
    background-color: var(--cd-bg-secondary);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-secondary);
  }
  .cd-score-bar {
    width: 100%;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: var(--cd-bg-tertiary);
    overflow: hidden;
  }
  .cd-score-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background-color: var(--cd-color-primary);
    transition: width 0.5s ease;
  }
  .cd-score-bar-fill--success {
    background-color: var(--cd-color-success);
  }
  .cd-score-bar-fill--warning {
    background-color: var(--cd-color-warning);
  }
  .cd-insights-hero {
    position: relative;
    padding: 32px 36px;
    background: radial-gradient( 120% 90% at 0% 0%, var(--cd-color-trust) 0%, transparent 60% ), var(--cd-card-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( 120% 90% at 0% 0%, color-mix(in srgb, var(--cd-color-trust) 10%, transparent) 0%, transparent 60% ), var(--cd-card-bg);
    }
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-insights-eyebrow, .cd-insights-metric-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
  }
  .cd-insights-hero-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
  }
  .cd-insights-hero-figure {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-shrink: 0;
  }
  .cd-insights-hero-value.cd-editorial-display, .cd-insights-metric-value.cd-editorial-display {
    font-weight: 500;
  }
  .cd-insights-hero-value {
    font-size: 3.5rem;
    color: var(--cd-text-primary);
    line-height: 1;
  }
  .cd-insights-hero-descriptor {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
  }
  .cd-insights-hero-meter {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cd-insights-hero-sub {
    font-size: 0.82rem;
    color: var(--cd-text-secondary);
  }
  .cd-insights-bar {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background-color: var(--cd-border-hairline);
    overflow: hidden;
  }
  .cd-insights-bar-fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--cd-text-primary);
    transition: width 300ms ease;
  }
  .cd-insights-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-insights-metric {
    padding: 26px 28px;
    border-right: 1px solid var(--cd-border-hairline);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-insights-metric:last-child {
    border-right: none;
  }
  @media (max-width: 1024px) {
    .cd-insights-metrics {
      grid-template-columns: repeat(2, 1fr);
    }
    .cd-insights-metric:nth-child(2n) {
      border-right: none;
    }
    .cd-insights-metric:nth-child(-n + 2) {
      border-bottom: 1px solid var(--cd-border-hairline);
    }
  }
  @media (max-width: 480px) {
    .cd-insights-metric {
      padding: 14px 16px;
      gap: 6px;
    }
    .cd-insights-hero-value {
      font-size: 2.75rem;
    }
    .cd-insights-metric-value {
      font-size: 1.5rem;
    }
  }
  .cd-insights-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .cd-insights-metric-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    color: var(--cd-text-tertiary);
    flex-shrink: 0;
  }
  .cd-insights-metric-value {
    font-size: 1.85rem;
    color: var(--cd-text-primary);
  }
  .cd-insights-metric-sub {
    font-size: 0.8rem;
    color: var(--cd-text-secondary);
  }
  .cd-insights-footer {
    margin-top: auto;
    padding: 12px 24px;
    text-align: center;
  }
  .cd-analytics-teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-space-7);
    align-items: center;
  }
  .cd-analytics-teaser__headline {
    margin: var(--cd-space-2) 0 var(--cd-space-3);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    color: var(--cd-text-primary);
  }
  .cd-analytics-teaser__lede {
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--cd-text-secondary);
  }
  .cd-analytics-teaser__benefits {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-space-6);
    margin: var(--cd-space-6) 0;
  }
  .cd-analytics-teaser__benefits .cd-upsell-benefit__art {
    height: 6.5rem;
  }
  .cd-analytics-teaser__benefits .cd-upsell-benefit__picture {
    max-width: 9rem;
  }
  .cd-analytics-teaser__benefits .cd-upsell-benefit__title {
    font-size: 1.05rem;
  }
  .cd-analytics-teaser__benefits .cd-upsell-benefit__desc {
    font-size: 0.9rem;
  }
  .cd-analytics-teaser__hero {
    margin: var(--cd-space-4) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (min-width: 640px) {
    .cd-analytics-teaser__benefits {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .cd-analytics-teaser {
      grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
      gap: var(--cd-space-9);
    }
    .cd-analytics-teaser__hero {
      margin: 0;
    }
  }
}
@layer components {
  .cd-table {
    width: 100%;
  }
  .cd-table th {
    padding: 0.75rem 1rem;
    font-size: var(--cd-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-text-secondary);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    background-color: var(--cd-bg-secondary);
  }
  .cd-table td {
    padding: 0.75rem 1rem;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    vertical-align: middle;
  }
  .cd-table thead {
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-table tbody tr {
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-table tbody tr:last-child {
    border-bottom: none;
  }
  .cd-table-header {
    background-color: var(--cd-bg-secondary);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-table-body {
    background-color: var(--cd-bg-primary);
  }
  .cd-table-row {
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-table-row:hover {
    background-color: var(--cd-bg-secondary);
  }
  .cd-table-row-priority {
    background-color: rgba(59, 130, 246, 0.05);
    border-left: 3px solid rgba(29, 78, 216, 0.4);
    box-shadow: inset 0 0 8px -2px rgba(29, 78, 216, 0.12);
  }
  .cd-table-row-priority:hover {
    background-color: rgba(59, 130, 246, 0.08);
  }
  .cd-table-row-success {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 5%, transparent);
    }
    border-left: 3px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-left: 3px solid color-mix(in srgb, var(--cd-color-success) 50%, transparent);
    }
  }
  .cd-table-row-success:hover {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 10%, transparent);
    }
  }
  .cd-table-body .cd-table-row:last-child {
    border-bottom: none;
  }
  .cd-table-cell {
    padding: 1rem 1.5rem;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    vertical-align: middle;
  }
  .cd-table-header-cell {
    padding: 0.75rem 1.5rem;
    font-size: var(--cd-text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-text-secondary);
    text-align: left;
    vertical-align: middle;
  }
  .cd-table-footer {
    background-color: var(--cd-bg-secondary);
    border-top: 1px solid var(--cd-border-primary);
  }
  .cd-table-striped .cd-table-row:nth-child(even) {
    background-color: var(--cd-bg-secondary);
  }
  .cd-table-responsive {
    overflow-x: auto;
  }
  .cd-table-compact .cd-table-cell {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
  }
  .cd-table-bordered {
    border: 1px solid var(--cd-border-primary);
  }
  .cd-table-bordered .cd-table-cell {
    border: 1px solid var(--cd-border-primary);
  }
  .cd-table-card {
    overflow: hidden;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-bg-primary);
  }
  .cd-table-card .cd-table-header {
    background: linear-gradient(to bottom, var(--cd-bg-secondary), var(--cd-bg-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to bottom, var(--cd-bg-secondary), color-mix(in srgb, var(--cd-bg-secondary) 95%, var(--cd-border-primary)));
    }
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-table-card .cd-table-header-cell:first-child {
    border-top-left-radius: var(--radius-xl);
  }
  .cd-table-card .cd-table-header-cell:last-child {
    border-top-right-radius: var(--radius-xl);
  }
  .cd-table-card .cd-table-row {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .cd-table-card .cd-table-row:hover {
    background-color: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-bg-secondary) 50%, transparent);
    }
  }
  .cd-table-col-checkbox {
    width: 32px;
  }
  .cd-table-col-professional {
    min-width: 260px;
  }
  .cd-table-col-value-score {
    min-width: 120px;
  }
  .cd-table-col-price {
    min-width: 120px;
  }
  .cd-table-col-rating {
    min-width: 120px;
  }
  .cd-table-col-duration {
    min-width: 100px;
  }
  .cd-table-col-warranty {
    min-width: 140px;
  }
  .cd-table-col-availability {
    min-width: 120px;
  }
  .cd-table-col-valid {
    min-width: 120px;
  }
  .cd-table-comparison-compact .cd-table-cell {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
  }
  .cd-table-comparison-compact .cd-table-header-cell {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .cd-table-comparison-compact .cd-table-col-checkbox {
    padding-inline: calc(var(--spacing) * 2);
  }
  .cd-filter-btn-hidden {
    opacity: 0;
    pointer-events: none;
  }
}
@layer components {
  .cd-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--cd-bg-primary);
  }
  .cd-hero-flush {
    position: relative;
    overflow: hidden;
    margin-top: var(--cd-total-navbar-offset);
  }
  .cd-hero-flush:not(.auth-hero) {
    background-color: var(--cd-bg-hero);
  }
  .cd-hero-overflow-visible {
    overflow: visible !important;
  }
  .no-navbar-offset .cd-hero-flush {
    margin-top: 0;
  }
  .cd-hero-content {
    position: relative;
    z-index: 10;
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-3);
    padding-bottom: var(--cd-space-3);
  }
  @media (min-width: 640px) {
    .cd-hero-content {
      padding-top: var(--cd-space-4);
      padding-bottom: var(--cd-space-4);
    }
  }
  @media (min-width: 1024px) {
    .cd-hero-content {
      padding-top: var(--cd-space-6);
      padding-bottom: var(--cd-space-6);
    }
  }
  .cd-hero-title {
    font-family: var(--cd-font-display);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--cd-space-2);
    font-size: 36px;
    color: var(--cd-text-primary);
  }
  @media (min-width: 768px) {
    .cd-hero-title {
      margin-bottom: var(--cd-space-3);
      font-size: 44px;
    }
  }
  @media (min-width: 1024px) {
    .cd-hero-title {
      font-size: 56px;
    }
  }
  .cd-hero-watermark {
    display: block;
    font-size: 40px;
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-2);
  }
  @media (min-width: 768px) {
    .cd-hero-watermark {
      font-size: 48px;
    }
  }
  .cd-hero-subtitle {
    margin-bottom: var(--cd-space-1);
    font-size: var(--cd-text-base);
    color: var(--cd-text-secondary);
  }
  @media (min-width: 640px) {
    .cd-hero-subtitle {
      margin-bottom: var(--cd-space-2);
      font-size: var(--cd-text-lg);
    }
  }
  @media (min-width: 1024px) {
    .cd-hero-subtitle {
      margin-bottom: var(--cd-space-2);
      font-size: var(--cd-text-xl);
    }
  }
}
@layer components {
  .cd-hero-dark-card {
    padding: calc(var(--cd-total-navbar-offset) + 16px) 16px 0;
  }
  .cd-hero-dark-card-inner {
    background: #141414;
    border-radius: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 5fr 7fr;
    min-height: 480px;
    position: relative;
  }
  .cd-hero-dark-card-text {
    position: relative;
    z-index: 3;
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 7);
    @media (width >= 64rem) {
      z-index: 2;
    }
    @media (width >= 64rem) {
      order: 0;
    }
    @media (width >= 64rem) {
      padding-inline: 56px;
    }
    @media (width >= 64rem) {
      padding-block: 64px;
    }
  }
  .cd-hero-dark-card-badge {
    margin-bottom: calc(var(--spacing) * 5);
    display: inline-flex;
    width: fit-content;
    gap: calc(var(--spacing) * 1);
    align-self: center;
    border-radius: var(--radius-3xl);
    background-color: rgba(255,255,255,0.08);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 9);
    }
    @media (width >= 64rem) {
      align-self: flex-start;
    }
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .cd-hero-dark-card-badge i {
    color: var(--cd-color-error, #e74c3c);
    font-size: 12px;
  }
  .cd-hero-dark-card-badge span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .cd-hero-dark-card-heading {
    font-family: var(--cd-font-display);
    font-size: 56px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 24px;
  }
  .cd-hero-dark-card-heading em {
    font-style: italic;
    font-weight: 400;
    color: #e8e8e8;
  }
  .cd-hero-dark-card-subtitle {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 40px;
    font-weight: 300;
    position: relative;
  }
  .cd-hero-dark-card-subtitle::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 70%;
    height: 20px;
    background: radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.06), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
  }
  .cd-hero-dark-card-actions {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .cd-hero-dark-card-tagline {
    margin-top: 32px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
  }
  .cd-hero-dark-card-emergency {
    margin-top: 24px;
  }
  .cd-hero-dark-card-emergency button {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    transition: color 0.2s;
  }
  .cd-hero-dark-card-emergency button:hover, .cd-hero-dark-card-emergency button:hover span {
    color: var(--cd-color-error, #e74c3c) !important;
  }
  .cd-hero-dark-card-image {
    position: relative;
    overflow: hidden;
    border-radius: 0 24px 24px 0;
    background: #0a0a0a;
    min-height: 0;
    align-self: stretch;
    z-index: 2;
    animation: cd-hero-image-enter 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  }
  .cd-hero-dark-card-image-media {
    position: absolute;
    inset: -72px;
    width: calc(100% + 144px);
    height: calc(100% + 144px);
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center bottom;
    transform-origin: center center;
    animation: cd-hero-drift 20s ease-in-out infinite;
  }
  .cd-hero-dark-card-image::before {
    content: '';
    position: absolute;
    left: 0;
    top: -1rem;
    bottom: 0;
    width: 100%;
    height: 105%;
    animation: cd-hero-image-enter-gradient 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
    z-index: 1;
  }
  .cd-hero-dark-card-image::after {
    content: '';
    position: absolute;
    top: auto;
    right: 0;
    bottom: -2px;
    left: -1rem;
    z-index: 1;
    height: 105%;
    width: 105%;
    --tw-shadow: 0rem -1rem 0.5rem var(--tw-shadow-color, #141414) inset;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 64rem) {
      top: 0;
    }
    @media (width >= 64rem) {
      bottom: 0;
    }
    @media (width >= 64rem) {
      left: 0;
    }
    @media (width >= 64rem) {
      --tw-shadow: 0rem 0.3rem 1rem var(--tw-shadow-color, #141414) inset;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .cd-hero-dark-card-dots {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    animation: cd-hero-dots-enter 1.2s ease-out 1s both;
  }
  .cd-hero-dark-card-dots svg {
    width: 100%;
    height: 100%;
  }
  .cd-hero-dark-card-ambient {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    z-index: 1;
    pointer-events: none;
    mask-image: linear-gradient(to right, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
  }
  .cd-firefly {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 183, 77, 0.8);
    box-shadow: 0 0 6px 2px rgba(255, 183, 77, 0.4), 0 0 14px 4px rgba(255, 160, 40, 0.15);
    opacity: 0;
    animation: cd-firefly-glow var(--ff-glow, 4s) ease-in-out infinite, cd-firefly-drift-a var(--ff-drift, 12s) ease-in-out infinite;
  }
  .cd-firefly:nth-child(1) {
    top: 30%;
    left: 8%;
    --ff-glow: 3.2s;
    --ff-drift: 10s;
    animation-delay: 0s, 0s;
  }
  .cd-firefly:nth-child(2) {
    top: 48%;
    left: 22%;
    --ff-glow: 4.5s;
    --ff-drift: 14s;
    animation-delay: 1.5s, 0.8s;
    width: 4px;
    height: 4px;
  }
  .cd-firefly:nth-child(3) {
    top: 58%;
    left: 10%;
    --ff-glow: 3.8s;
    --ff-drift: 11s;
    animation-delay: 0.5s, 2.0s;
    animation-name: cd-firefly-glow, cd-firefly-drift-b;
  }
  .cd-firefly:nth-child(4) {
    top: 36%;
    left: 28%;
    --ff-glow: 5.0s;
    --ff-drift: 13s;
    animation-delay: 2.0s, 1.0s;
  }
  .cd-firefly:nth-child(5) {
    top: 68%;
    left: 20%;
    --ff-glow: 3.5s;
    --ff-drift: 12s;
    animation-delay: 3.0s, 0.5s;
    animation-name: cd-firefly-glow, cd-firefly-drift-c;
    width: 2px;
    height: 2px;
  }
  .cd-firefly:nth-child(6) {
    top: 52%;
    left: 32%;
    --ff-glow: 4.2s;
    --ff-drift: 15s;
    animation-delay: 1.0s, 3.0s;
    width: 4px;
    height: 4px;
  }
  .cd-firefly:nth-child(7) {
    top: 22%;
    left: 18%;
    --ff-glow: 3.0s;
    --ff-drift: 10s;
    animation-delay: 4.0s, 1.5s;
    animation-name: cd-firefly-glow, cd-firefly-drift-b;
  }
  .cd-firefly:nth-child(8) {
    top: 72%;
    left: 14%;
    --ff-glow: 4.8s;
    --ff-drift: 14s;
    animation-delay: 2.5s, 0.3s;
    width: 2px;
    height: 2px;
  }
  .cd-firefly:nth-child(9) {
    top: 42%;
    left: 32%;
    --ff-glow: 3.6s;
    --ff-drift: 11s;
    animation-delay: 0.8s, 2.5s;
    animation-name: cd-firefly-glow, cd-firefly-drift-c;
  }
  .cd-firefly:nth-child(10) {
    top: 62%;
    left: 35%;
    --ff-glow: 5.2s;
    --ff-drift: 16s;
    animation-delay: 3.5s, 1.2s;
  }
  .cd-firefly:nth-child(11) {
    top: 18%;
    left: 30%;
    --ff-glow: 4.0s;
    --ff-drift: 12s;
    animation-delay: 1.2s, 3.5s;
    animation-name: cd-firefly-glow, cd-firefly-drift-b;
    width: 2px;
    height: 2px;
  }
  .cd-firefly:nth-child(12) {
    top: 78%;
    left: 20%;
    --ff-glow: 3.3s;
    --ff-drift: 13s;
    animation-delay: 2.8s, 0.7s;
  }
  @keyframes cd-firefly-glow {
    0%, 100% {
      opacity: 0;
    }
    15% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.9;
    }
    85% {
      opacity: 0.3;
    }
  }
  @keyframes cd-firefly-drift-a {
    0% {
      transform: translate(0, 0);
    }
    25% {
      transform: translate(12px, -18px);
    }
    50% {
      transform: translate(-8px, -30px);
    }
    75% {
      transform: translate(16px, -12px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  @keyframes cd-firefly-drift-b {
    0% {
      transform: translate(0, 0);
    }
    25% {
      transform: translate(-14px, -10px);
    }
    50% {
      transform: translate(6px, -25px);
    }
    75% {
      transform: translate(-10px, -18px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  @keyframes cd-firefly-drift-c {
    0% {
      transform: translate(0, 0);
    }
    25% {
      transform: translate(8px, -22px);
    }
    50% {
      transform: translate(-12px, -15px);
    }
    75% {
      transform: translate(5px, -28px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  .cd-hero-dark-card-grain {
    position: absolute;
    inset: -100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.035;
    animation: cd-grain-shift 0.4s steps(2) infinite;
    pointer-events: none;
  }
  @keyframes cd-grain-shift {
    0% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(-5%, -5%);
    }
    100% {
      transform: translate(3%, 2%);
    }
  }
  .cd-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .cd-aurora-band {
    position: absolute;
    width: 130%;
    height: 55%;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0;
  }
  .cd-aurora-band:nth-child(1) {
    top: 10%;
    left: -35%;
    background: radial-gradient(ellipse, rgba(100, 200, 160, 0.45), transparent 70%);
    animation: cd-aurora-drift-1 8s ease-in-out infinite;
  }
  .cd-aurora-band:nth-child(2) {
    top: 25%;
    left: -20%;
    background: radial-gradient(ellipse, rgba(80, 160, 220, 0.35), transparent 70%);
    animation: cd-aurora-drift-2 11s ease-in-out infinite;
    animation-delay: 2s;
  }
  .cd-aurora-band:nth-child(3) {
    top: 5%;
    left: -25%;
    background: radial-gradient(ellipse, rgba(140, 100, 200, 0.3), transparent 70%);
    animation: cd-aurora-drift-3 14s ease-in-out infinite;
    animation-delay: 4s;
  }
  .cd-aurora-band:nth-child(4) {
    top: 30%;
    left: -30%;
    background: radial-gradient(ellipse, rgba(80, 220, 180, 0.25), transparent 70%);
    animation: cd-aurora-drift-1 10s ease-in-out infinite;
    animation-delay: 6s;
  }
  @keyframes cd-aurora-drift-1 {
    0%, 100% {
      opacity: 0;
      transform: translateX(0) translateY(0) scaleX(1);
    }
    20% {
      opacity: 0.6;
    }
    50% {
      opacity: 0.9;
      transform: translateX(8%) translateY(-5%) scaleX(1.1);
    }
    80% {
      opacity: 0.4;
    }
  }
  @keyframes cd-aurora-drift-2 {
    0%, 100% {
      opacity: 0;
      transform: translateX(0) translateY(0) rotate(0deg);
    }
    30% {
      opacity: 0.7;
    }
    50% {
      opacity: 0.85;
      transform: translateX(-5%) translateY(-8%) rotate(3deg);
    }
    70% {
      opacity: 0.5;
    }
  }
  @keyframes cd-aurora-drift-3 {
    0%, 100% {
      opacity: 0;
      transform: translateX(0) scaleY(1);
    }
    25% {
      opacity: 0.5;
    }
    50% {
      opacity: 0.75;
      transform: translateX(10%) scaleY(1.2);
    }
    75% {
      opacity: 0.3;
    }
  }
  .cd-bokeh {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .cd-bokeh-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(25px);
    opacity: 0;
    animation: cd-bokeh-pulse var(--bk-dur, 6s) ease-in-out infinite;
    animation-delay: var(--bk-delay, 0s);
  }
  .cd-bokeh-orb:nth-child(1) {
    width: 90px;
    height: 90px;
    top: 20%;
    left: 5%;
    background: radial-gradient(circle, rgba(255, 200, 120, 0.5), transparent 70%);
    --bk-dur: 5.5s;
    --bk-delay: 0s;
  }
  .cd-bokeh-orb:nth-child(2) {
    width: 130px;
    height: 130px;
    top: 50%;
    left: 20%;
    background: radial-gradient(circle, rgba(255, 180, 100, 0.4), transparent 70%);
    --bk-dur: 7s;
    --bk-delay: 1.5s;
    animation-name: cd-bokeh-float;
  }
  .cd-bokeh-orb:nth-child(3) {
    width: 70px;
    height: 70px;
    top: 35%;
    left: 30%;
    background: radial-gradient(circle, rgba(255, 220, 160, 0.55), transparent 70%);
    --bk-dur: 4.5s;
    --bk-delay: 3s;
  }
  .cd-bokeh-orb:nth-child(4) {
    width: 110px;
    height: 110px;
    top: 65%;
    left: 8%;
    background: radial-gradient(circle, rgba(220, 180, 140, 0.4), transparent 70%);
    --bk-dur: 8s;
    --bk-delay: 2s;
    animation-name: cd-bokeh-float;
  }
  .cd-bokeh-orb:nth-child(5) {
    width: 60px;
    height: 60px;
    top: 15%;
    left: 25%;
    background: radial-gradient(circle, rgba(255, 210, 150, 0.5), transparent 70%);
    --bk-dur: 6s;
    --bk-delay: 4s;
  }
  .cd-bokeh-orb:nth-child(6) {
    width: 140px;
    height: 140px;
    top: 40%;
    left: 0%;
    background: radial-gradient(circle, rgba(200, 160, 120, 0.35), transparent 70%);
    --bk-dur: 9s;
    --bk-delay: 1s;
    animation-name: cd-bokeh-float;
  }
  .cd-bokeh-orb:nth-child(7) {
    width: 70px;
    height: 70px;
    top: 75%;
    left: 28%;
    background: radial-gradient(circle, rgba(255, 190, 130, 0.4), transparent 70%);
    --bk-dur: 5s;
    --bk-delay: 5s;
  }
  .cd-bokeh-orb:nth-child(8) {
    width: 100px;
    height: 100px;
    top: 10%;
    left: 15%;
    background: radial-gradient(circle, rgba(240, 200, 150, 0.35), transparent 70%);
    --bk-dur: 7.5s;
    --bk-delay: 3.5s;
    animation-name: cd-bokeh-float;
  }
  @keyframes cd-bokeh-pulse {
    0%, 100% {
      opacity: 0;
      transform: scale(0.8);
    }
    15% {
      opacity: 0.5;
    }
    50% {
      opacity: 0.9;
      transform: scale(1.1);
    }
    85% {
      opacity: 0.4;
    }
  }
  @keyframes cd-bokeh-float {
    0%, 100% {
      opacity: 0;
      transform: scale(0.8) translate(0, 0);
    }
    15% {
      opacity: 0.5;
    }
    50% {
      opacity: 0.85;
      transform: scale(1.05) translate(15px, -10px);
    }
    85% {
      opacity: 0.3;
    }
  }
  @keyframes cd-hero-image-enter {
    from {
      opacity: 0;
      transform: translateX(60px) scale(1.06);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }
  @keyframes cd-hero-image-enter-gradient {
    from {
      box-shadow: 1rem 0rem 0rem #141414 inset;
    }
    to {
      box-shadow: 1rem 0rem 0.5rem #141414 inset;
    }
  }
  @keyframes cd-hero-image-enter-mobile {
    from {
      opacity: 0;
      transform: translateY(-30px) scale(1.04);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes cd-hero-dots-enter {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.15;
    }
  }
  @keyframes cd-hero-drift {
    0% {
      transform: translate(0, 0) scale(1);
    }
    25% {
      transform: translate(-15px, -8px) scale(1.02);
    }
    50% {
      transform: translate(-5px, -15px) scale(1.01);
    }
    75% {
      transform: translate(10px, -5px) scale(1.03);
    }
    100% {
      transform: translate(0, 0) scale(1);
    }
  }
  @media (max-width: 1023.98px) {
    .cd-hero-dark-card {
      padding: calc(var(--cd-total-navbar-offset) + 8px) 12px 0;
    }
    .cd-hero-dark-card-inner {
      grid-template-columns: 1fr;
      min-height: auto;
    }
    .cd-hero-dark-card-image {
      order: 0;
      height: 260px;
      border-radius: 24px 24px 0 0;
      animation-name: cd-hero-image-enter-mobile;
    }
    .cd-hero-dark-card-image::before {
      display: none;
    }
    .cd-hero-dark-card-heading {
      font-size: 34px;
      margin-bottom: 16px;
    }
    .cd-hero-dark-card-subtitle {
      font-size: 15px;
      margin-bottom: 28px;
    }
    .cd-hero-dark-card-actions {
      flex-direction: column;
      gap: 10px;
    }
    .cd-hero-dark-card-actions .cd-btn {
      width: 100%;
      justify-content: center;
    }
    .cd-hero-dark-card-ambient {
      width: 100%;
      top: 40%;
      mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%);
    }
    .cd-aurora-band:nth-child(1) {
      left: -20%;
    }
    .cd-aurora-band:nth-child(2) {
      left: -5%;
    }
    .cd-aurora-band:nth-child(3) {
      left: -10%;
    }
    .cd-aurora-band:nth-child(4) {
      left: -15%;
    }
    .cd-bokeh-orb:nth-child(1) {
      left: 15%;
    }
    .cd-bokeh-orb:nth-child(2) {
      left: 35%;
    }
    .cd-bokeh-orb:nth-child(3) {
      left: 55%;
    }
    .cd-bokeh-orb:nth-child(4) {
      left: 20%;
    }
    .cd-bokeh-orb:nth-child(5) {
      left: 45%;
    }
    .cd-bokeh-orb:nth-child(6) {
      left: 10%;
    }
    .cd-bokeh-orb:nth-child(7) {
      left: 50%;
    }
    .cd-bokeh-orb:nth-child(8) {
      left: 30%;
    }
    .cd-hero-dark-card-tagline {
      margin-top: 20px;
    }
    .cd-hero-dark-card-emergency {
      margin-top: 16px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-hero-dark-card-image {
      animation: none;
    }
    .cd-hero-dark-card-image-media {
      animation: none;
    }
    .cd-hero-dark-card-dots {
      animation: none;
      opacity: 0.15;
    }
    .cd-hero-dark-card-dots svg * {
      animation: none !important;
    }
    .cd-firefly, .cd-aurora-band, .cd-bokeh-orb {
      animation: none;
      opacity: 0;
    }
    .cd-hero-dark-card-grain {
      animation: none;
    }
  }
}
@layer components {
  .cd-testimonial-quote {
    background: linear-gradient(135deg, var(--cd-color-emerald), var(--cd-color-emerald));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-emerald) 3%, var(--cd-color-athens-gray)), color-mix(in srgb, var(--cd-color-emerald) 5%, white));
    }
    border: 1px solid var(--cd-color-emerald);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-emerald) 20%, transparent);
    }
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-4);
    margin-top: var(--cd-space-4);
    min-height: 140px;
    max-height: 200px;
  }
  .cd-testimonial-quote-trust {
    background: linear-gradient(135deg, var(--cd-color-science-blue), var(--cd-color-science-blue));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-science-blue) 3%, var(--cd-color-athens-gray)), color-mix(in srgb, var(--cd-color-science-blue) 5%, white));
    }
    border: 1px solid var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-science-blue) 20%, transparent);
    }
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-4);
    margin-top: var(--cd-space-4);
  }
  .cd-testimonial-content {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-3);
  }
  .cd-testimonial-icon {
    flex-shrink: 0;
    color: var(--cd-color-emerald);
    font-size: var(--cd-text-lg);
  }
  .cd-testimonial-quote-trust .cd-testimonial-icon {
    color: var(--cd-color-science-blue);
  }
  .cd-testimonial-text {
    flex: 1;
    min-width: 0;
  }
  .cd-testimonial-blockquote {
    color: var(--cd-text-primary);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .cd-testimonial-cite {
    display: block;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    margin-top: var(--cd-space-2);
    font-style: normal;
    font-weight: 500;
  }
  .cd-testimonial-icon-end {
    flex-shrink: 0;
    color: var(--cd-color-emerald);
    font-size: var(--cd-text-lg);
  }
  .cd-testimonial-quote-trust .cd-testimonial-icon-end {
    color: var(--cd-color-science-blue);
  }
  @media (max-width: 640px) {
    .cd-testimonial-quote, .cd-testimonial-quote-trust {
      padding: var(--cd-space-3);
      min-height: 100px;
      max-height: 160px;
    }
    .cd-testimonial-content {
      gap: var(--cd-space-2);
    }
    .cd-testimonial-icon, .cd-testimonial-icon-end {
      font-size: var(--cd-text-base);
    }
  }
}
@layer components {
  .cd-navbar {
    background-color: var(--cd-bg-primary);
    border-color: var(--cd-border-primary);
  }
  @media (min-width: 768px) {
    .cd-navbar {
      height: var(--cd-navbar-height);
      overflow: visible;
    }
  }
  .cd-navbar-logo {
    background-color: var(--cd-color-primary);
    border: 1px solid var(--cd-border-secondary);
  }
  [data-theme="dark"] .cd-navbar-logo {
    background-color: var(--cd-bg-tertiary);
    border-color: var(--cd-border-secondary);
  }
  [data-theme] .cd-navbar .cd-menu-item, [data-theme] .cd-menu-item {
    color: var(--cd-text-secondary);
  }
  [data-theme] .cd-navbar .cd-menu-item:hover, [data-theme] .cd-menu-item:hover {
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-secondary);
  }
  [data-theme] .cd-navbar .cd-menu-item-active, [data-theme] .cd-menu-item-active {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  [data-theme="tabby"] .cd-navbar .cd-menu-item-active, [data-theme="tabby"] .cd-menu-item-active {
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-accent);
  }
  [data-theme] .cd-navbar .cd-sidebar-item, [data-theme] .cd-sidebar .cd-sidebar-item, [data-theme] .cd-sidebar-item {
    color: var(--cd-color-primary);
  }
  [data-theme] .cd-navbar .cd-sidebar-item:hover, [data-theme] .cd-sidebar .cd-sidebar-item:hover, [data-theme] .cd-sidebar-item:hover {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-color-primary);
  }
  [data-theme] .cd-navbar .cd-sidebar-item-active, [data-theme] .cd-sidebar .cd-sidebar-item-active, [data-theme] .cd-sidebar-item-active {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  [data-theme="tabby"] .cd-navbar .cd-sidebar-item-active, [data-theme="tabby"] .cd-sidebar .cd-sidebar-item-active, [data-theme="tabby"] .cd-sidebar-item-active {
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-accent);
  }
  [data-theme="dark"] .cd-navbar .cd-sidebar-item, [data-theme="dark"] .cd-sidebar .cd-sidebar-item, [data-theme="dark"] .cd-sidebar-item, [data-theme="darker-than-black"] .cd-navbar .cd-sidebar-item, [data-theme="darker-than-black"] .cd-sidebar .cd-sidebar-item, [data-theme="darker-than-black"] .cd-sidebar-item {
    color: var(--cd-text-primary);
  }
  [data-theme="dark"] .cd-navbar .cd-sidebar-item:hover, [data-theme="dark"] .cd-sidebar .cd-sidebar-item:hover, [data-theme="dark"] .cd-sidebar-item:hover, [data-theme="darker-than-black"] .cd-navbar .cd-sidebar-item:hover, [data-theme="darker-than-black"] .cd-sidebar .cd-sidebar-item:hover, [data-theme="darker-than-black"] .cd-sidebar-item:hover {
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-color-accent);
  }
  [data-theme="dark"] .cd-navbar .cd-sidebar-item-active, [data-theme="dark"] .cd-sidebar .cd-sidebar-item-active, [data-theme="dark"] .cd-sidebar-item-active, [data-theme="darker-than-black"] .cd-navbar .cd-sidebar-item-active, [data-theme="darker-than-black"] .cd-sidebar .cd-sidebar-item-active, [data-theme="darker-than-black"] .cd-sidebar-item-active {
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-accent);
  }
  [data-theme] .cd-dashboard-container .cd-sidebar, [data-theme] .cd-sidebar {
    background-color: var(--cd-bg-card);
    border-color: var(--cd-border-primary);
  }
  [data-theme] .cd-dashboard-container .cd-sidebar-header, [data-theme] .cd-sidebar .cd-sidebar-header, [data-theme] .cd-sidebar-header {
    border-bottom-color: var(--cd-border-primary);
  }
  [data-theme] .cd-dashboard-container .cd-nav-category-title, [data-theme] .cd-sidebar .cd-nav-category-title, [data-theme] .cd-nav-category-title {
    color: var(--cd-text-tertiary);
  }
  @media (max-width: 767px) {
    .cd-navbar-pill .cd-pill-menu-right, .cd-navbar-round .cd-round-menu-right {
      display: flex;
      align-items: center;
      gap: var(--cd-space-2);
      max-width: calc(100vw - 2rem);
      flex-shrink: 1;
    }
    .cd-pill-menu-right .cd-btn-auth-filled, .cd-pill-menu-right .cd-btn-auth-outline, .cd-round-menu-right .cd-btn-auth-filled, .cd-round-menu-right .cd-btn-auth-outline {
      flex-shrink: 0;
      min-width: fit-content;
    }
  }
  @media (min-width: 768px) {
    .cd-navbar.cd-navbar-pill {
      display: flex;
      justify-content: center;
      padding-left: var(--cd-space-6);
      padding-right: var(--cd-space-6);
      background-color: transparent;
      border: none;
      box-shadow: none;
      z-index: var(--cd-z-topbar);
    }
    .cd-navbar-pill .cd-navbar-pill-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: var(--cd-radius-full);
      padding-left: var(--cd-space-6);
      padding-right: var(--cd-space-6);
      padding-top: var(--cd-space-3);
      padding-bottom: var(--cd-space-3);
      margin-left: auto;
      margin-right: auto;
      background-color: white;
      border: 1px solid var(--cd-text-primary);
      @supports (color: color-mix(in lab, red, red)) {
        border: 1px solid color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
      }
      box-shadow: 0 2px 8px 0 var(--cd-text-primary), 0 1px 2px 0 var(--cd-text-primary);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--cd-text-primary) 8%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--cd-text-primary) 6%, transparent);
      }
      max-width: 1024px;
      width: auto;
      min-width: 600px;
    }
  }
  @media (min-width: 768px) {
    [data-theme] .cd-navbar.cd-navbar-pill .cd-navbar-pill-container, [data-theme] .cd-navbar-pill .cd-navbar-pill-container {
      background-color: var(--cd-bg-card);
      border-color: var(--cd-border-primary);
    }
    .cd-navbar-pill .cd-navbar-pill-container .cd-navbar-logo {
      background-color: var(--cd-color-primary);
      border: 1px solid var(--cd-border-secondary);
      flex-shrink: 0;
      min-width: 1.75rem;
      min-height: 1.75rem;
    }
    .cd-navbar-pill .cd-navbar-pill-container > nav > div:first-child {
      display: flex;
      align-items: center;
    }
    .cd-navbar-pill .cd-pill-menu-center {
      display: flex;
      align-items: center;
      gap: var(--cd-space-2);
      flex: 1;
      justify-content: center;
    }
    .cd-navbar-pill .cd-pill-menu-right {
      display: flex;
      align-items: center;
      gap: var(--cd-space-2);
    }
  }
  @media (min-width: 768px) {
    .cd-navbar.cd-navbar-round {
      display: flex;
      justify-content: center;
      padding-left: var(--cd-space-6);
      padding-right: var(--cd-space-6);
      background-color: transparent;
      border: none;
      box-shadow: none;
    }
    .cd-navbar-round .cd-navbar-round-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: var(--cd-radius-xl);
      padding-left: var(--cd-space-8);
      padding-right: var(--cd-space-8);
      padding-top: var(--cd-space-3);
      padding-bottom: var(--cd-space-3);
      margin-left: auto;
      margin-right: auto;
      background-color: white;
      box-shadow: 0 1px 3px 0 var(--cd-text-primary);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
      }
      border: 1px solid var(--cd-border-primary);
      width: calc(100% - 2em);
      max-width: 1536px;
    }
  }
  @media (min-width: 768px) {
    [data-theme] .cd-navbar.cd-navbar-round .cd-navbar-round-container, [data-theme] .cd-navbar-round .cd-navbar-round-container {
      background-color: var(--cd-bg-card);
      border-color: var(--cd-border-primary);
    }
    .cd-navbar-round .cd-navbar-round-container .cd-navbar-logo {
      background-color: var(--cd-color-primary);
      border: 1px solid var(--cd-border-secondary);
    }
    .cd-navbar-round .cd-round-menu-center {
      display: flex;
      align-items: center;
      gap: var(--cd-space-2);
      flex: 1;
      justify-content: center;
    }
    .cd-navbar-round .cd-round-menu-right {
      display: flex;
      align-items: center;
      gap: var(--cd-space-2);
    }
  }
  .cd-menu-item {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    font-family: var(--cd-font-editorial);
    font-weight: 500;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease;
    font-size: 15px;
    color: var(--cd-text-secondary);
  }
  .cd-menu-item:hover {
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-menu-item-active {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    font-family: var(--cd-font-editorial);
    font-weight: 500;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease;
    font-size: 15px;
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-accent);
  }
  .cd-menu-item-active:hover {
    opacity: 0.9;
  }
  [data-menu-style="underline"] .cd-menu-item {
    position: relative;
    background-color: transparent !important;
  }
  [data-menu-style="underline"] .cd-menu-item::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 8px;
    right: 8px;
    height: 2px;
    background-color: var(--cd-color-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
    border-radius: 1px;
  }
  [data-menu-style="underline"] .cd-menu-item:hover {
    background-color: transparent !important;
    color: var(--cd-text-primary);
  }
  [data-menu-style="underline"] .cd-menu-item:hover::after {
    transform: scaleX(1);
  }
  [data-menu-style="underline"] .cd-menu-item-active, [data-theme][data-menu-style="underline"] .cd-menu-item-active {
    position: relative;
    background-color: transparent !important;
    color: var(--cd-color-accent) !important;
    font-weight: 600;
  }
  [data-menu-style="underline"] .cd-menu-item-active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 8px;
    right: 8px;
    height: 2px;
    background-color: var(--cd-color-accent);
    transform: scaleX(1);
    border-radius: 1px;
  }
  [data-menu-style="pill"] .cd-menu-item {
    border-radius: 9999px;
    transition: all 0.2s ease;
  }
  [data-menu-style="pill"] .cd-menu-item:hover {
    background-color: var(--cd-bg-secondary);
  }
  [data-menu-style="pill"] .cd-menu-item-active, [data-theme][data-menu-style="pill"] .cd-menu-item-active {
    background-color: var(--cd-color-accent) !important;
    color: var(--cd-text-on-primary) !important;
    border-radius: 9999px;
  }
  [data-menu-style="brutal"] .cd-menu-item {
    border: 2px solid transparent;
    border-radius: 0;
    transition: all 0.15s ease;
  }
  [data-menu-style="brutal"] .cd-menu-item:hover {
    border-color: var(--cd-color-primary);
    box-shadow: 3px 3px 0 var(--cd-color-primary);
    transform: translate(-2px, -2px);
    background-color: var(--cd-bg-primary);
  }
  [data-menu-style="brutal"] .cd-menu-item-active, [data-theme][data-menu-style="brutal"] .cd-menu-item-active {
    background-color: var(--cd-color-accent) !important;
    color: var(--cd-color-primary) !important;
    border: 2px solid var(--cd-color-primary);
    box-shadow: 3px 3px 0 var(--cd-color-primary);
    font-weight: 600;
    border-radius: 0;
  }
  [data-menu-style="brutal"] .cd-menu-item-active:hover {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--cd-color-primary);
  }
  [data-menu-style="glow"] .cd-menu-item {
    transition: all 0.25s ease;
    border-radius: var(--cd-radius-lg);
  }
  [data-menu-style="glow"] .cd-menu-item:hover {
    box-shadow: 0 0 15px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 15px color-mix(in srgb, var(--cd-color-accent) 50%, transparent);
    }
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 10%, transparent);
    }
  }
  [data-menu-style="glow"] .cd-menu-item-active, [data-theme][data-menu-style="glow"] .cd-menu-item-active {
    box-shadow: 0 0 20px var(--cd-color-accent), inset 0 0 10px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 20px color-mix(in srgb, var(--cd-color-accent) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
    background-color: var(--cd-color-accent) !important;
    color: var(--cd-text-on-primary) !important;
  }
  [data-menu-style="slide"] .cd-menu-item {
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    border-radius: 0;
  }
  [data-menu-style="slide"] .cd-menu-item:hover {
    border-bottom-color: var(--cd-color-accent);
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 8%, transparent);
    }
  }
  [data-menu-style="slide"] .cd-menu-item-active, [data-theme][data-menu-style="slide"] .cd-menu-item-active {
    border-bottom: 3px solid var(--cd-color-accent);
    background-color: var(--cd-color-accent) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 12%, transparent) !important;
    }
    color: var(--cd-color-accent) !important;
    border-radius: 0;
  }
  .cd-menu-item-mobile {
    display: block;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-3);
    padding-bottom: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-menu-item-mobile:hover {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-menu-item-mobile-active {
    display: block;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
    padding-top: var(--cd-space-3);
    padding-bottom: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: var(--cd-text-sm);
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    font-weight: 600;
  }
  .cd-menu-item-mobile-active:hover {
    background-color: var(--cd-bg-tertiary);
  }
  .cd-nav-section {
    margin-bottom: var(--cd-space-6);
  }
  .cd-nav-item-locked {
    opacity: 0.75;
    cursor: pointer;
  }
  .cd-nav-item-locked:hover {
    opacity: 0.9;
    background-color: var(--cd-bg-secondary);
  }
  .cd-nav-lock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.25rem;
    border-radius: var(--cd-radius-full);
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    margin-left: auto;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cd-nav-premium-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.25rem;
    border-radius: var(--cd-radius-full);
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    margin-left: auto;
  }
  .cd-drawer-link-locked {
    opacity: 0.75;
  }
  .cd-drawer-link-locked:hover {
    opacity: 0.9;
  }
  .cd-drawer-link-demo {
    opacity: 0.65;
  }
  .cd-drawer-link-demo:hover {
    opacity: 0.8;
  }
  .cd-drawer-badge-demo {
    background: linear-gradient(135deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-accent) 0%, color-mix(in srgb, var(--cd-color-accent) 85%, black) 100%);
    }
    color: white;
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 0.1875rem 0.4375rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    box-shadow: 0 1px 3px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 3px color-mix(in srgb, var(--cd-color-accent) 40%, transparent);
    }
  }
}
@layer components {
  .cd-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cd-space-1);
  }
  .cd-breadcrumb-link {
    transition-property: color;
    transition-duration: 200ms;
    color: var(--cd-text-tertiary);
  }
  .cd-breadcrumb-link:hover {
    text-decoration: underline;
  }
  .cd-breadcrumb-link:hover {
    color: var(--cd-color-primary);
  }
  .cd-breadcrumb-current {
    font-weight: 500;
    color: var(--cd-text-primary);
  }
  .cd-breadcrumb-separator {
    margin-left: var(--cd-space-2);
    margin-right: var(--cd-space-2);
    color: var(--cd-text-tertiary);
  }
  .cd-breadcrumb-mobile .cd-breadcrumb-list {
    font-size: var(--cd-text-xs);
  }
  .cd-breadcrumb-mobile .cd-breadcrumb-separator {
    margin-left: var(--cd-space-1);
    margin-right: var(--cd-space-1);
  }
  .cd-breadcrumb-truncate .cd-breadcrumb-link {
    font-weight: 500;
  }
  .cd-profile-breadcrumb {
    margin-bottom: var(--cd-space-3);
  }
  .cd-profile-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cd-space-1_5);
    min-width: 0;
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-xs);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .cd-profile-breadcrumb-entry {
    min-width: 0;
    max-width: 100%;
  }
  .cd-profile-breadcrumb-link, .cd-profile-breadcrumb-item {
    color: inherit;
    overflow-wrap: anywhere;
    text-decoration: none;
  }
  .cd-profile-breadcrumb-link:hover {
    color: var(--cd-text-secondary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  .cd-profile-breadcrumb-separator {
    color: var(--cd-text-tertiary);
    font-weight: 700;
    opacity: 0.7;
  }
  @media (max-width: 640px) {
    .cd-breadcrumb-list {
      gap: var(--cd-space-0_5);
      flex-wrap: nowrap;
    }
    .cd-breadcrumb-list > li:not(:first-child):not(.cd-breadcrumb-current) {
      display: none;
    }
    .cd-breadcrumb-list > li.cd-breadcrumb-current::before {
      content: "…";
      margin-right: var(--cd-space-2);
      margin-left: var(--cd-space-1);
      color: var(--cd-text-tertiary);
    }
    .cd-breadcrumb-current {
      max-width: 12rem;
    }
  }
  .cd-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
    font-size: var(--cd-text-sm);
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-primary);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-btn-back:hover {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
  }
  .cd-btn-back-context {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease-in-out;
    font-weight: 500;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-btn-back-context:hover {
    color: var(--cd-color-primary);
  }
  .cd-btn-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cd-space-10);
    height: var(--cd-space-10);
    border-radius: var(--cd-radius-lg);
    transition: all 200ms;
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-primary);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-btn-back-icon:hover {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
  }
  .cd-btn-back-minimal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease-in-out;
    font-weight: 500;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-btn-back-minimal:hover {
    color: var(--cd-color-primary);
  }
  .cd-header-back {
    display: flex;
    align-items: center;
    gap: var(--cd-space-4);
    margin-bottom: var(--cd-space-4);
  }
  .cd-header-back .cd-heading-tertiary {
    margin-bottom: 0;
  }
}
@layer components {
  :root {
    --cd-total-navbar-offset: var(--cd-navbar-height);
  }
  body > * {
    font-size: 1rem;
  }
  .cd-public-layout {
    min-height: 100vh;
    background-color: var(--cd-bg-primary);
    padding-top: var(--cd-total-navbar-offset);
  }
  .cd-public-layout.no-top-padding {
    padding-top: 0;
    background-color: var(--cd-bg-primary);
  }
  .cd-dashboard-layout {
    min-height: 100vh;
    background-color: var(--cd-bg-primary);
    padding-top: var(--cd-total-navbar-offset);
  }
  .cd-dashboard-layout.no-navbar-offset {
    padding-top: 0;
  }
  html[data-app-mode] .cd-dashboard-layout.no-navbar-offset {
    padding-top: env(safe-area-inset-top, 0px);
  }
  @media (max-width: 767px) {
    :root {
      --cd-total-navbar-offset: 0px;
    }
    .cd-dashboard-layout.no-navbar-offset {
      padding-top: 0;
    }
    html[data-app-mode] .cd-dashboard-layout.no-navbar-offset {
      padding-top: env(safe-area-inset-top, 0px);
    }
  }
  .cd-dashboard-container {
    margin-inline: auto;
    display: flex;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 0);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 4);
    }
    padding-top: var(--cd-space-4);
    max-width: 1536px;
    overflow-x: clip;
    overflow-y: visible;
  }
  .cd-dashboard-layout-edge-to-edge {
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    max-width: none !important;
  }
  @media (min-width: 640px) {
    .cd-dashboard-layout-edge-to-edge {
      gap: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 0 !important;
    }
  }
  .cd-sidebar-panel {
    width: var(--cd-sidebar-width-mobile);
    flex-shrink: 0;
    transition: all 0.3s;
    align-self: stretch;
  }
  @media (min-width: 768px) {
    .cd-sidebar-panel {
      width: var(--cd-sidebar-width-tablet);
    }
  }
  @media (min-width: 1024px) {
    .cd-sidebar-panel {
      width: var(--cd-sidebar-width-desktop);
    }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .cd-sidebar-panel {
      width: var(--cd-space-16);
      transition: width 0.3s ease;
    }
  }
  @media (max-width: 768px) {
    .cd-sidebar-panel:has(.cd-sidebar-edge-to-edge) {
      width: var(--cd-sidebar-width-mobile);
    }
  }
  @media (min-width: 1025px) {
    .cd-sidebar-panel:has(.cd-sidebar-edge-to-edge) {
      width: 238px;
    }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .cd-sidebar-panel:has(.cd-sidebar-edge-to-edge) {
      width: var(--cd-space-16);
    }
  }
  .cd-content-panel {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 28);
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 10);
    }
    flex: 1;
  }
  .cd-content-panel-edge-to-edge {
    padding-left: var(--cd-space-3);
    padding-right: var(--cd-space-3);
  }
  @media (min-width: 768px) {
    .cd-content-panel-edge-to-edge {
      padding-left: var(--cd-space-4);
      padding-right: var(--cd-space-4);
    }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .cd-content-panel-edge-to-edge {
      margin-left: 0;
    }
  }
  @media (min-width: 1024px) {
    .cd-content-panel-edge-to-edge {
      padding-left: var(--cd-space-6);
      padding-right: var(--cd-space-6);
    }
  }
  .cd-content-inner {
    border-radius: var(--cd-radius-xl);
    box-shadow: var(--cd-shadow-sm);
    padding: var(--cd-space-6);
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
  }
  .cd-sidebar {
    border-radius: var(--cd-radius-xl);
    box-shadow: var(--cd-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    position: sticky;
    top: var(--cd-total-navbar-offset);
    max-height: calc(100vh - var(--cd-total-navbar-offset));
    height: 100%;
  }
  .cd-sidebar-edge-to-edge {
    position: fixed !important;
    z-index: var(--cd-z-sticky) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-left: none !important;
    border-bottom: none !important;
    border-top: 1px solid var(--cd-border-primary) !important;
    border-right: 1px solid var(--cd-border-primary) !important;
    border-top-right-radius: var(--cd-radius-lg) !important;
    max-height: 100vh !important;
    top: calc(var(--cd-total-navbar-offset) + var(--cd-space-4)) !important;
    height: calc(100vh - var(--cd-total-navbar-offset) - var(--cd-space-4)) !important;
  }
  @media (max-width: 768px) {
    .cd-sidebar-edge-to-edge {
      width: var(--cd-sidebar-width-mobile) !important;
      top: calc(var(--cd-total-navbar-offset) + var(--cd-sidebar-mobile-offset) + var(--cd-space-4)) !important;
      height: calc(100vh - var(--cd-total-navbar-offset) - calc(var(--cd-sidebar-mobile-offset) * 2) - var(--cd-space-4)) !important;
    }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .cd-sidebar-edge-to-edge {
      width: var(--cd-space-16) !important;
      position: fixed !important;
      top: calc(var(--cd-total-navbar-offset) + var(--cd-space-4)) !important;
      height: calc(100vh - var(--cd-total-navbar-offset) - var(--cd-space-4)) !important;
    }
  }
  @media (min-width: 1025px) {
    .cd-sidebar-edge-to-edge {
      width: 238px !important;
    }
  }
  .cd-sidebar-header {
    position: relative;
    padding-left: var(--cd-space-2);
    padding-right: var(--cd-space-2);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  @media (min-width: 768px) {
    .cd-sidebar-header {
      padding-left: var(--cd-space-4);
      padding-right: var(--cd-space-4);
      padding-top: var(--cd-space-3);
      padding-bottom: var(--cd-space-3);
    }
  }
  .cd-sidebar-content {
    padding: var(--cd-space-2);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .cd-sidebar-content:hover {
    scrollbar-color: var(--cd-border-secondary) transparent;
  }
  .cd-sidebar-content::-webkit-scrollbar {
    width: 4px;
  }
  .cd-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
  }
  .cd-sidebar-content::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
  }
  .cd-sidebar-content:hover::-webkit-scrollbar-thumb {
    background-color: var(--cd-border-secondary);
  }
  @media (min-width: 768px) {
    .cd-sidebar-content {
      padding: var(--cd-space-4);
    }
  }
  .cd-nav-category {
    margin-bottom: var(--cd-space-3);
  }
  .cd-nav-category-title {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    padding-left: var(--cd-space-3);
    padding-right: var(--cd-space-3);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--cd-space-2);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  .cd-nav-category-title i {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
}
@layer components {
  .cd-sidebar .cd-nav-item {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding-left: var(--cd-space-3);
    padding-right: var(--cd-space-3);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-sidebar .cd-nav-item:hover {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-sidebar .cd-nav-item.active {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-sidebar .cd-nav-item.active:hover {
    opacity: 0.9;
  }
  .cd-nav-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cd-space-6);
    height: var(--cd-space-6);
    flex-shrink: 0;
    margin-right: var(--cd-space-3);
  }
  .cd-nav-icon-wrapper i {
    font-size: var(--cd-text-lg);
    z-index: 1;
    transition: transform 0.2s ease-out;
  }
  :not([data-icon-animation]) .cd-sidebar-item:hover .cd-nav-icon-wrapper i, :not([data-icon-animation]) .cd-sidebar-item-active .cd-nav-icon-wrapper i {
    transform: scale(1.1) translateY(-2px);
  }
  @media (max-width: 767px) {
    .cd-nav-icon-wrapper {
      margin-right: 0;
    }
  }
  .cd-nav-badge {
    margin-left: auto;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: var(--cd-radius-full);
    font-size: 0.625rem;
    line-height: 1;
    background-color: var(--cd-border-primary);
    color: var(--cd-text-primary);
    white-space: nowrap;
  }
  .cd-nav-badge-primary {
    background-color: var(--cd-color-primary);
    color: white;
  }
  .cd-nav-badge-warning {
    background-color: var(--cd-color-warning);
    color: white;
  }
  .cd-nav-badge-premium {
    background-color: var(--cd-color-info);
    color: white;
  }
  .cd-nav-badge-business {
    background-color: var(--membership-business-primary, #d4af37);
    color: white;
  }
  .cd-nav-badge-professional {
    background-color: var(--membership-professional-primary, #0B4F8C);
    color: white;
  }
  .cd-nav-badge-free {
    background-color: var(--membership-free-primary, #6B7280);
    color: white;
  }
  .cd-nav-item-demo {
    opacity: 0.65;
  }
  .cd-nav-item-demo:hover {
    opacity: 0.8;
  }
  .cd-nav-badge-demo {
    background: linear-gradient(135deg, var(--cd-color-accent) 0%, var(--cd-color-accent) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-accent) 0%, color-mix(in srgb, var(--cd-color-accent) 85%, black) 100%);
    }
    color: white;
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 0.1875rem 0.4375rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    box-shadow: 0 1px 3px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 3px color-mix(in srgb, var(--cd-color-accent) 40%, transparent);
    }
  }
  .cd-sidebar-item-active .cd-nav-badge, .cd-sidebar-item-active .cd-nav-badge-primary, [data-theme] .cd-sidebar-item-active .cd-nav-badge, [data-theme] .cd-sidebar-item-active .cd-nav-badge-primary, [data-theme] .cd-sidebar .cd-sidebar-item-active .cd-nav-badge, [data-theme] .cd-sidebar .cd-sidebar-item-active .cd-nav-badge-primary {
    background-color: white !important;
    color: var(--cd-color-primary) !important;
    transition: none !important;
  }
  .cd-sidebar-item-active .cd-nav-badge-warning, [data-theme] .cd-sidebar-item-active .cd-nav-badge-warning, [data-theme] .cd-sidebar .cd-sidebar-item-active .cd-nav-badge-warning {
    background-color: var(--cd-color-warning);
    color: white;
  }
  [data-theme="darker-than-black"] .cd-nav-badge-primary {
    background-color: var(--cd-color-accent);
    color: #000000;
  }
  [data-theme="darker-than-black"] .cd-sidebar-item-active .cd-nav-badge, [data-theme="darker-than-black"] .cd-sidebar-item-active .cd-nav-badge-primary {
    background-color: var(--cd-color-accent) !important;
    color: #000000 !important;
  }
  .cd-sidebar-item-active .cd-nav-badge-business, [data-theme] .cd-sidebar-item-active .cd-nav-badge-business, [data-theme] .cd-sidebar .cd-sidebar-item-active .cd-nav-badge-business {
    background-color: var(--membership-business-primary, #d4af37);
    color: white;
  }
  .cd-sidebar-item-active .cd-nav-badge-professional, [data-theme] .cd-sidebar-item-active .cd-nav-badge-professional, [data-theme] .cd-sidebar .cd-sidebar-item-active .cd-nav-badge-professional {
    background-color: var(--membership-professional-primary, #0B4F8C);
    color: white;
  }
  .cd-sidebar-item-active .cd-nav-badge-free, [data-theme] .cd-sidebar-item-active .cd-nav-badge-free, [data-theme] .cd-sidebar .cd-sidebar-item-active .cd-nav-badge-free {
    background-color: var(--membership-free-primary, #6B7280);
    color: white;
  }
}
@layer components {
  .cd-badge-pulse {
    animation: badgePulse 600ms ease-out;
    animation-iteration-count: 2;
  }
  .cd-badge-bounce {
    animation: badgeBounce 600ms ease-out;
    animation-iteration-count: 2;
  }
  .cd-badge-shake {
    animation: badgeShake 600ms ease-out;
    animation-iteration-count: 2;
  }
  .cd-badge-tada {
    animation: badgeTada 1000ms ease-out;
    animation-iteration-count: 2;
  }
  .cd-badge-flash {
    animation: badgeFlash 800ms ease-out;
    animation-iteration-count: 2;
  }
  @keyframes badgePulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
      transform: scale(1.5);
      box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
  }
  @keyframes badgeShake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }
  @keyframes badgeBounce {
    0%, 100% {
      transform: scale(1) translateY(0);
    }
    10% {
      transform: scale(1.1) translateY(-8px);
    }
    30% {
      transform: scale(1.05) translateY(-4px);
    }
    50% {
      transform: scale(1.15) translateY(-10px);
    }
    70% {
      transform: scale(1) translateY(0);
    }
  }
  @keyframes badgeTada {
    0% {
      transform: scale(1) rotate(0deg);
    }
    10%, 20% {
      transform: scale(1.1) rotate(-5deg);
    }
    30%, 50%, 70%, 90% {
      transform: scale(1.1) rotate(5deg);
    }
    40%, 60%, 80% {
      transform: scale(1.1) rotate(-5deg);
    }
    100% {
      transform: scale(1) rotate(0deg);
    }
  }
  @keyframes badgeFlash {
    0% {
      transform: scale(1);
      background-color: var(--cd-color-primary);
    }
    25% {
      transform: scale(1.4);
      background-color: #fbbf24;
    }
    50% {
      transform: scale(1.6);
      background-color: #ef4444;
    }
    75% {
      transform: scale(1.4);
      background-color: #fbbf24;
    }
    100% {
      transform: scale(1);
      background-color: var(--cd-color-primary);
    }
  }
  .cd-icon-bell-ring {
    animation: iconBellRing 800ms ease-in-out;
    transform-origin: top center;
  }
  .cd-icon-shake {
    animation: iconShake 600ms ease-in-out;
  }
  .cd-icon-bounce {
    animation: iconBounce 600ms ease-out;
  }
  @keyframes iconBellRing {
    0% {
      transform: rotate(0deg);
    }
    10% {
      transform: rotate(15deg);
    }
    20% {
      transform: rotate(-15deg);
    }
    30% {
      transform: rotate(12deg);
    }
    40% {
      transform: rotate(-12deg);
    }
    50% {
      transform: rotate(9deg);
    }
    60% {
      transform: rotate(-9deg);
    }
    70% {
      transform: rotate(6deg);
    }
    80% {
      transform: rotate(-6deg);
    }
    90% {
      transform: rotate(3deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  @keyframes iconShake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-8px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(8px);
    }
  }
  @keyframes iconBounce {
    0%, 100% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(-10px);
    }
    50% {
      transform: translateY(-5px);
    }
    75% {
      transform: translateY(-8px);
    }
  }
}
@layer components {
  .cd-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary);
  }
  .cd-nav-logout {
    color: var(--cd-color-error);
  }
  .cd-nav-logout:hover {
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 5%, transparent);
    }
    color: var(--cd-color-error);
  }
  .cd-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--cd-space-2);
    padding-right: var(--cd-space-2);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    font-weight: 500;
    border-radius: var(--cd-radius-lg);
    transition: all 0.2s ease;
    font-size: var(--cd-text-sm);
    color: var(--cd-color-accent);
  }
  @media (min-width: 769px) {
    .cd-sidebar-item {
      justify-content: flex-start;
      padding-left: var(--cd-space-3);
      padding-right: var(--cd-space-3);
      padding-top: var(--cd-space-2);
      padding-bottom: var(--cd-space-2);
    }
  }
  .cd-sidebar-item:hover {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-color-accent);
  }
  .cd-sidebar-item-active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--cd-space-2);
    padding-right: var(--cd-space-2);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    font-weight: 500;
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-sm);
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-primary);
  }
  @media (min-width: 769px) {
    .cd-sidebar-item-active {
      justify-content: flex-start;
      padding-left: var(--cd-space-3);
      padding-right: var(--cd-space-3);
      padding-top: var(--cd-space-2);
      padding-bottom: var(--cd-space-2);
    }
  }
  .cd-sidebar-item-active:hover {
    opacity: 0.9;
  }
  @keyframes spinner-rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes spinner-dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }
  .cd-loading-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    pointer-events: none;
  }
  .cd-loading-spinner-inline {
    width: 100%;
    height: 100%;
    animation: spinner-rotate 0.8s linear infinite;
  }
  .cd-loading-path-inline {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2.5;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    animation: spinner-dash 1.5s ease-in-out infinite;
  }
  .cd-sidebar-item-active .cd-loading-path-inline {
    stroke: var(--cd-text-on-primary);
  }
  @media (max-width: 767px) {
    .cd-loading-ring {
      width: 28px;
      height: 28px;
    }
  }
}
@layer components {
  .cd-hamburger-menu {
    position: fixed;
    top: var(--cd-space-4);
    left: var(--cd-space-4);
    z-index: var(--cd-z-topbar);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    box-shadow: var(--cd-shadow-lg);
    transition: all 0.3s ease;
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-dark);
  }
  @media (min-width: 768px) {
    .cd-hamburger-menu {
      display: none;
    }
  }
  .cd-hamburger-menu:hover {
    transform: scale(1.05);
    opacity: 0.9;
  }
  .cd-hamburger-menu.sidebar-open {
    left: var(--cd-hamburger-offset);
    opacity: 0.9;
  }
  .cd-hamburger-icon {
    width: var(--cd-space-5);
    height: var(--cd-space-5);
    transition: transform 0.3s ease;
  }
  .cd-hamburger-menu.sidebar-open .cd-hamburger-icon {
    transform: rotate(90deg);
  }
  @media (max-width: 1023px) {
    .cd-content-panel {
      width: 100%;
      margin-left: 0;
      padding-left: var(--cd-space-2);
      padding-right: var(--cd-space-2);
      margin-top: 0;
    }
    .cd-content-inner {
      padding: var(--cd-space-4);
    }
  }
  @media (min-width: 1024px) {
    .cd-sidebar {
      width: var(--cd-space-64);
      position: sticky;
      top: calc(var(--cd-total-navbar-offset) + var(--cd-space-2));
      max-height: calc(100vh - var(--cd-total-navbar-offset) - var(--cd-space-8));
    }
  }
  .cd-sidebar.transitioning {
    transition: transform 0.3s ease-in-out;
  }
  .cd-sidebar.mobile-open {
    outline: none;
  }
  .cd-sidebar.mobile-open:focus-within {
    outline: none;
  }
  .cd-sidebar.mobile-open .cd-sidebar-item:focus, .cd-sidebar.mobile-open .cd-sidebar-item-active:focus {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-content-inner {
    transition: all 0.2s ease-in-out;
  }
  .cd-sidebar.loading {
    opacity: 0.75;
  }
  .cd-sidebar.loading .cd-sidebar-item, .cd-sidebar.loading .cd-sidebar-item-active {
    pointer-events: none;
  }
  .cd-sidebar-limits-summary {
    padding-left: var(--cd-space-3);
    padding-right: var(--cd-space-3);
    padding-top: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
  }
  .cd-limit-bar {
    width: 100%;
    background-color: var(--cd-bg-tertiary);
    border-radius: var(--cd-radius-full);
    height: 4px;
    overflow: hidden;
  }
}
@keyframes cd-shimmer-sweep {
  from {
    transform: translateX(-100%) skewX(-15deg);
  }
  to {
    transform: translateX(200%) skewX(-15deg);
  }
}
@layer components {
  .cd-sidebar-upsell-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-3);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
    box-shadow: var(--cd-shadow-sm);
    position: relative;
    overflow: hidden;
  }
  .cd-sidebar-upsell-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.15) 60%, transparent 100% );
    pointer-events: none;
    z-index: 1;
  }
  .cd-sidebar-upsell-card:hover {
    border-color: var(--cd-border-hover, var(--cd-border-primary));
  }
  .cd-sidebar-upsell-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: var(--cd-space-1);
  }
  .cd-sidebar-upsell-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--cd-text-primary);
    font-size: 0.875rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-sidebar-upsell-card-title {
    font-size: var(--cd-text-sm);
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1.2;
  }
  .cd-sidebar-upsell-card-body {
    width: 100%;
  }
  .cd-sidebar-upsell-card-desc {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
    line-height: 1.4;
    margin-bottom: var(--cd-space-2);
  }
  .cd-sidebar-upsell-card-img {
    width: 100%;
    max-width: 120px;
    margin: var(--cd-space-1) auto 0;
    display: block;
  }
  .cd-sidebar-upsell-progress {
    width: 100%;
    height: 6px;
    border-radius: var(--cd-radius-full);
    background-color: var(--cd-border-primary);
    overflow: hidden;
    margin-bottom: var(--cd-space-3);
  }
  .cd-sidebar-upsell-progress-fill {
    height: 100%;
    border-radius: var(--cd-radius-full);
    background-color: var(--cd-color-warning);
    transition: width 0.3s ease;
  }
  .cd-sidebar-upsell-btn {
    width: 100%;
    padding: var(--cd-space-2) var(--cd-space-3);
    border-radius: var(--button-radius);
    background-color: var(--cd-btn-primary-bg);
    color: var(--cd-btn-primary-text);
    font-family: var(--cd-font-primary);
    font-size: var(--cd-text-sm);
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-2);
    transition: var(--cd-transition);
  }
  .cd-sidebar-upsell-card:hover .cd-sidebar-upsell-btn {
    opacity: 0.85;
  }
  .cd-sidebar-upsell-card-blue {
    --upsell-amber-primary: #e88c0a;
    --upsell-amber-secondary: #fef7ed;
    --upsell-amber-accent: #f5a623;
  }
  .cd-sidebar-upsell-card-blue .cd-sidebar-upsell-progress-fill {
    background-color: var(--cd-color-warning);
  }
  .cd-sidebar-upsell-card-blue:hover {
    border-color: var(--upsell-amber-primary);
    background: linear-gradient(160deg, var(--cd-bg-primary) 0%, var(--upsell-amber-secondary) 100% );
    transform: translateY(-3px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 10px 20px -5px rgba(232, 140, 10, 0.18), 0 20px 40px -10px rgba(232, 140, 10, 0.12);
  }
  .cd-sidebar-upsell-card-blue::before {
    background: linear-gradient( 115deg, transparent 0%, rgba(255, 248, 230, 0.25) 40%, rgba(255, 248, 230, 0.5) 50%, rgba(255, 248, 230, 0.25) 60%, transparent 100% );
  }
  .cd-sidebar-upsell-card-blue:hover::before {
    animation: cd-shimmer-sweep 0.8s ease-out forwards;
  }
  .cd-sidebar-upsell-card-blue:hover .cd-sidebar-upsell-card-icon {
    background: linear-gradient(135deg, var(--upsell-amber-primary), var(--upsell-amber-accent));
    color: white;
    transform: scale(1.08) rotate(3deg);
  }
  .cd-sidebar-upsell-card-blue:hover .cd-sidebar-upsell-progress {
    background-color: var(--upsell-amber-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--upsell-amber-secondary) 80%, transparent);
    }
  }
  .cd-sidebar-upsell-card-blue:hover .cd-sidebar-upsell-progress-fill {
    background-color: var(--upsell-amber-primary);
  }
  .cd-sidebar-upsell-card-gold .cd-sidebar-upsell-progress-fill {
    background-color: var(--cd-color-warning);
  }
  .cd-sidebar-upsell-card-gold:hover {
    border-color: var(--membership-business-primary);
    background: linear-gradient(160deg, var(--cd-bg-primary) 0%, var(--membership-business-secondary) 100% );
    transform: translateY(-3px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 10px 20px -5px rgba(212, 175, 55, 0.15), 0 20px 40px -10px rgba(212, 175, 55, 0.1);
  }
  .cd-sidebar-upsell-card-gold::before {
    background: linear-gradient( 115deg, transparent 0%, rgba(255, 248, 220, 0.2) 40%, rgba(255, 248, 220, 0.45) 50%, rgba(255, 248, 220, 0.2) 60%, transparent 100% );
  }
  .cd-sidebar-upsell-card-gold:hover::before {
    animation: cd-shimmer-sweep 0.8s ease-out forwards;
  }
  .cd-sidebar-upsell-card-gold:hover .cd-sidebar-upsell-card-icon {
    background: linear-gradient(135deg, var(--membership-business-primary), var(--membership-business-accent));
    color: white;
    transform: scale(1.08) rotate(3deg);
  }
  .cd-sidebar-upsell-card-gold:hover .cd-sidebar-upsell-card-title {
    color: var(--membership-business-text);
  }
  .cd-sidebar-upsell-card-gold:hover .cd-sidebar-upsell-progress-fill {
    background-color: var(--membership-business-primary);
  }
  [data-theme="dark"] .cd-sidebar-upsell-card {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-bg-tertiary);
  }
  [data-theme="darker-than-black"] .cd-sidebar-upsell-card {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-bg-tertiary);
  }
  [data-theme="dark"] .cd-sidebar-upsell-card-blue:hover {
    background: linear-gradient(160deg, var(--cd-bg-secondary) 0%, var(--upsell-amber-secondary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(160deg, var(--cd-bg-secondary) 0%, color-mix(in srgb, var(--upsell-amber-secondary) 20%, var(--cd-bg-secondary)) 100% );
    }
    border-color: var(--upsell-amber-primary);
    transform: translateY(-3px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 10px 20px -5px rgba(232, 140, 10, 0.2), 0 20px 40px -10px rgba(0, 0, 0, 0.4);
  }
  [data-theme="dark"] .cd-sidebar-upsell-card-blue::before {
    background: linear-gradient( 115deg, transparent 0%, rgba(255, 248, 230, 0.1) 40%, rgba(255, 248, 230, 0.22) 50%, rgba(255, 248, 230, 0.1) 60%, transparent 100% );
  }
  [data-theme="darker-than-black"] .cd-sidebar-upsell-card-blue:hover {
    background: linear-gradient(160deg, var(--cd-bg-secondary) 0%, var(--upsell-amber-primary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(160deg, var(--cd-bg-secondary) 0%, color-mix(in srgb, var(--upsell-amber-primary) 12%, var(--cd-bg-secondary)) 100% );
    }
    border-color: var(--upsell-amber-primary);
    transform: translateY(-3px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 10px 20px -5px rgba(232, 140, 10, 0.25), 0 20px 40px -10px rgba(0, 0, 0, 0.5);
  }
  [data-theme="darker-than-black"] .cd-sidebar-upsell-card-blue::before {
    background: linear-gradient( 115deg, transparent 0%, rgba(255, 248, 230, 0.06) 40%, rgba(255, 248, 230, 0.15) 50%, rgba(255, 248, 230, 0.06) 60%, transparent 100% );
  }
  [data-theme="dark"] .cd-sidebar-upsell-card-gold:hover {
    background: linear-gradient(160deg, var(--cd-bg-secondary) 0%, var(--membership-business-secondary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(160deg, var(--cd-bg-secondary) 0%, color-mix(in srgb, var(--membership-business-secondary) 25%, var(--cd-bg-secondary)) 100% );
    }
    border-color: var(--membership-business-primary);
    transform: translateY(-3px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 10px 20px -5px rgba(212, 175, 55, 0.2), 0 20px 40px -10px rgba(0, 0, 0, 0.4);
  }
  [data-theme="dark"] .cd-sidebar-upsell-card-gold::before {
    background: linear-gradient( 115deg, transparent 0%, rgba(255, 248, 220, 0.08) 40%, rgba(255, 248, 220, 0.2) 50%, rgba(255, 248, 220, 0.08) 60%, transparent 100% );
  }
  [data-theme="dark"] .cd-sidebar-upsell-card-gold:hover .cd-sidebar-upsell-card-title {
    color: var(--membership-business-primary);
  }
  [data-theme="darker-than-black"] .cd-sidebar-upsell-card-gold:hover {
    background: linear-gradient(160deg, var(--cd-bg-secondary) 0%, var(--membership-business-primary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(160deg, var(--cd-bg-secondary) 0%, color-mix(in srgb, var(--membership-business-primary) 15%, var(--cd-bg-secondary)) 100% );
    }
    border-color: var(--membership-business-primary);
    transform: translateY(-3px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 10px 20px -5px rgba(212, 175, 55, 0.25), 0 20px 40px -10px rgba(0, 0, 0, 0.5);
  }
  [data-theme="darker-than-black"] .cd-sidebar-upsell-card-gold::before {
    background: linear-gradient( 115deg, transparent 0%, rgba(255, 248, 220, 0.05) 40%, rgba(255, 248, 220, 0.15) 50%, rgba(255, 248, 220, 0.05) 60%, transparent 100% );
  }
  @media (max-width: 768px) {
    .cd-sidebar-upsell-card {
      padding: var(--cd-space-3);
      align-items: center;
    }
    .cd-sidebar-upsell-card-body, .cd-sidebar-upsell-card-title {
      display: none;
    }
    .cd-sidebar-upsell-card-header {
      justify-content: center;
      margin-bottom: 0;
    }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .cd-sidebar:not(.cd-sidebar-edge-to-edge) .cd-sidebar-upsell-card {
      padding: var(--cd-space-2);
      align-items: center;
      position: relative;
    }
    .cd-sidebar:not(.cd-sidebar-edge-to-edge) .cd-sidebar-upsell-card-body, .cd-sidebar:not(.cd-sidebar-edge-to-edge) .cd-sidebar-upsell-card-title {
      display: none;
    }
    .cd-sidebar:not(.cd-sidebar-edge-to-edge) .cd-sidebar-upsell-card-header {
      justify-content: center;
      margin-bottom: 0;
    }
    .cd-sidebar:not(.cd-sidebar-edge-to-edge) .cd-sidebar-upsell-card[data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      margin-left: var(--cd-space-2);
      padding: var(--cd-space-2) var(--cd-space-3);
      background-color: #1f2937;
      color: white;
      border-radius: var(--cd-radius-base);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      white-space: nowrap;
      z-index: 10;
      font-size: var(--cd-text-sm);
    }
    .cd-sidebar:not(.cd-sidebar-edge-to-edge) .cd-sidebar-upsell-card[data-tooltip]:hover::after {
      opacity: 1;
    }
    [data-theme="dark"] .cd-sidebar:not(.cd-sidebar-edge-to-edge) .cd-sidebar-upsell-card[data-tooltip]::after {
      background-color: var(--cd-bg-quaternary);
      color: var(--cd-text-primary);
    }
    [data-theme="darker-than-black"] .cd-sidebar:not(.cd-sidebar-edge-to-edge) .cd-sidebar-upsell-card[data-tooltip]::after {
      background-color: var(--cd-bg-quaternary);
      color: var(--cd-text-primary);
      border: 1px solid var(--cd-color-accent);
    }
  }
  @media (min-width: 1025px) {
    .cd-sidebar.collapsed {
      width: var(--cd-space-16);
      transition: width 0.3s ease;
    }
    .cd-sidebar.cd-sidebar-edge-to-edge.collapsed {
      width: var(--cd-space-16) !important;
    }
    .cd-sidebar-panel:has(.cd-sidebar.collapsed) {
      width: var(--cd-space-16);
      transition: width 0.3s ease;
    }
    .cd-sidebar.collapsed .cd-sidebar-header {
      padding: var(--cd-space-4);
      display: flex;
      justify-content: center;
    }
    .cd-sidebar.collapsed .cd-sidebar-header > div {
      flex-direction: column;
      align-items: center;
      gap: var(--cd-space-2);
    }
    .cd-sidebar.collapsed .cd-sidebar-header .cd-avatar {
      margin-bottom: var(--cd-space-2);
    }
    .cd-sidebar.collapsed .cd-sidebar-header .flex-1 {
      display: none;
    }
    .cd-sidebar.collapsed .cd-sidebar-collapse-hint, .cd-sidebar.collapsed .cd-sidebar-palette-trigger {
      display: none;
    }
    .cd-sidebar.collapsed .cd-nav-category-title {
      text-align: center;
      padding-left: 0;
      padding-right: 0;
      justify-content: center;
      position: relative;
      text-indent: -9999px;
      overflow: hidden;
    }
    .cd-sidebar.collapsed .cd-nav-category-title::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 100%;
      margin-left: var(--cd-space-2);
      padding: var(--cd-space-2) var(--cd-space-3);
      background-color: #1f2937;
      color: white;
      border-radius: var(--cd-radius-base);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      white-space: nowrap;
      z-index: 10;
      font-size: var(--cd-text-xs);
      text-indent: 0;
    }
    .cd-sidebar.collapsed .cd-nav-category:hover .cd-nav-category-title::after {
      opacity: 1;
    }
    .cd-sidebar.collapsed .cd-sidebar-content {
      padding: var(--cd-space-2);
      overflow: hidden;
    }
    .cd-sidebar.collapsed .cd-nav-category {
      margin-bottom: 0.25rem;
    }
    .cd-sidebar.collapsed .cd-sidebar-item, .cd-sidebar.collapsed .cd-sidebar-item-active {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--cd-space-2);
      position: relative;
      margin-left: 0.25rem;
      margin-right: 0.25rem;
      margin-top: 0.125rem;
      margin-bottom: 0.125rem;
      border-radius: var(--cd-radius-lg);
      transition: all 0.2s ease;
      min-height: 40px;
    }
    .cd-sidebar.collapsed .cd-sidebar-item i, .cd-sidebar.collapsed .cd-sidebar-item-active i {
      margin: 0 !important;
    }
    .cd-sidebar.collapsed .cd-nav-icon-wrapper {
      margin-right: 0;
    }
    .cd-sidebar.collapsed .cd-sidebar-item > span:not(.cd-nav-icon-wrapper):not(.cd-nav-badge), .cd-sidebar.collapsed .cd-sidebar-item-active > span:not(.cd-nav-icon-wrapper):not(.cd-nav-badge) {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
    .cd-sidebar.collapsed .cd-sidebar-item::after, .cd-sidebar.collapsed .cd-sidebar-item-active::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 100%;
      margin-left: var(--cd-space-2);
      padding: var(--cd-space-2) var(--cd-space-3);
      background-color: #1f2937;
      color: white;
      border-radius: var(--cd-radius-base);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      white-space: nowrap;
      z-index: 10;
      font-size: var(--cd-text-xs);
    }
    .cd-sidebar.collapsed .cd-sidebar-item:hover::after, .cd-sidebar.collapsed .cd-sidebar-item-active:hover::after {
      opacity: 1;
    }
    .cd-sidebar.collapsed .cd-nav-badge {
      position: absolute;
      top: -0.25rem;
      right: -0.25rem;
      transform: scale(0.85);
      min-width: 1.25rem;
      min-height: 1.25rem;
      padding: 0.125rem;
    }
    .cd-sidebar.collapsed .cd-sidebar-upsell-card {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      padding: 0;
      margin: 0 auto;
      border-radius: var(--cd-radius-lg);
    }
    .cd-sidebar.collapsed .cd-sidebar-upsell-card-body, .cd-sidebar.collapsed .cd-sidebar-upsell-card-title {
      display: none;
    }
    .cd-sidebar.collapsed .cd-sidebar-upsell-card-header {
      justify-content: center;
      margin-bottom: 0;
    }
    .cd-sidebar.collapsed .cd-sidebar-content > div:last-of-type {
      margin-left: 0;
      margin-right: 0;
    }
    .cd-sidebar.collapsed .cd-sidebar-upsell-card[data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      margin-left: var(--cd-space-2);
      padding: var(--cd-space-2) var(--cd-space-3);
      background-color: #1f2937;
      color: white;
      border-radius: var(--cd-radius-base);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      white-space: nowrap;
      z-index: 10;
      font-size: var(--cd-text-sm);
    }
    .cd-sidebar.collapsed .cd-sidebar-upsell-card[data-tooltip]:hover::after {
      opacity: 1;
    }
    .cd-sidebar.collapsed .cd-sidebar-limits-summary {
      display: none;
    }
    .cd-sidebar.collapsed button[type="submit"].cd-sidebar-item::after {
      content: "Sign Out";
    }
  }
  @media (min-width: 1025px) {
    .cd-sidebar-collapse-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--cd-text-tertiary);
      font-size: var(--cd-text-xs);
      flex-shrink: 0;
      transition: color 0.2s ease;
      padding: var(--cd-space-1);
    }
    .cd-sidebar-collapse-hint:hover {
      color: var(--cd-text-primary);
    }
    .cd-sidebar-collapse-hint i {
      transition: transform 0.3s ease;
      display: block;
    }
  }
  @media (max-width: 1024px) {
    .cd-sidebar-collapse-hint {
      display: none !important;
    }
  }
  .cd-sidebar-header-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cd-space-1);
    flex-shrink: 0;
  }
  @media (min-width: 1025px) {
    .cd-sidebar-palette-trigger {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--cd-text-tertiary);
      font-family: inherit;
      font-size: var(--cd-text-xs);
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: var(--cd-space-1);
      background: transparent;
      border: none;
      transition: color 0.2s ease;
    }
    .cd-sidebar-palette-trigger .cd-kbd-mod {
      font: inherit;
      color: inherit;
      background: transparent;
      border: 0;
      padding: 0;
    }
    .cd-sidebar-palette-trigger:hover, .cd-sidebar-palette-trigger:focus-visible {
      color: var(--cd-text-primary);
      outline: none;
    }
  }
  @media (max-width: 1024px) {
    .cd-sidebar-palette-trigger {
      display: none !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-sidebar.collapsed {
      transition: none;
    }
    .cd-sidebar-collapse-hint i {
      transition: none;
    }
    .cd-sidebar-upsell-card {
      transition: border-color 0.2s ease, background 0.2s ease !important;
    }
    .cd-sidebar-upsell-card::before {
      display: none !important;
    }
    .cd-sidebar-upsell-card:hover {
      transform: none !important;
    }
    .cd-sidebar-upsell-card-icon {
      transition: background 0.2s ease, color 0.2s ease !important;
    }
    .cd-sidebar-upsell-card:hover .cd-sidebar-upsell-card-icon {
      transform: none !important;
    }
  }
}
[data-menu-style="underline"] .cd-sidebar .cd-sidebar-item {
  position: relative;
  background-color: transparent !important;
}
[data-menu-style="underline"] .cd-sidebar .cd-sidebar-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background-color: var(--cd-color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
[data-menu-style="underline"] .cd-sidebar .cd-sidebar-item:hover {
  background-color: transparent !important;
}
[data-menu-style="underline"] .cd-sidebar .cd-sidebar-item:hover::after {
  transform: scaleX(1);
}
[data-menu-style="underline"] .cd-sidebar .cd-sidebar-item-active {
  background-color: transparent !important;
  color: var(--cd-color-accent);
}
[data-menu-style="underline"] .cd-sidebar .cd-sidebar-item-active::after {
  transform: scaleX(1);
}
[data-menu-style="pill"] .cd-sidebar .cd-sidebar-item {
  border-radius: 9999px;
  margin-left: 8px;
  margin-right: 8px;
  transition: all 0.2s ease;
}
[data-menu-style="pill"] .cd-sidebar .cd-sidebar-item:hover {
  background-color: var(--cd-bg-secondary);
}
[data-menu-style="pill"] .cd-sidebar .cd-sidebar-item-active {
  background-color: var(--cd-color-accent);
  color: var(--cd-text-on-primary);
  border-radius: 9999px;
}
[data-menu-style="brutal"] .cd-sidebar .cd-sidebar-item {
  border: 2px solid transparent;
  border-radius: 0;
  transition: all 0.15s ease;
  margin-left: 8px;
  margin-right: 8px;
}
[data-menu-style="brutal"] .cd-sidebar .cd-sidebar-item:hover {
  border-color: var(--cd-color-primary);
  box-shadow: 3px 3px 0 var(--cd-color-primary);
  transform: translate(-2px, -2px);
  background-color: var(--cd-bg-primary);
}
[data-menu-style="brutal"] .cd-sidebar .cd-sidebar-item-active {
  background-color: var(--cd-color-accent);
  color: var(--cd-color-primary);
  border: 2px solid var(--cd-color-primary);
  box-shadow: 3px 3px 0 var(--cd-color-primary);
  font-weight: 600;
}
[data-menu-style="brutal"] .cd-sidebar .cd-sidebar-item-active:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--cd-color-primary);
}
[data-menu-style="glow"] .cd-sidebar .cd-sidebar-item {
  transition: all 0.25s ease;
  border-radius: var(--cd-radius-lg);
  margin-left: 8px;
  margin-right: 8px;
}
[data-menu-style="glow"] .cd-sidebar .cd-sidebar-item:hover {
  box-shadow: 0 0 15px var(--cd-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 15px color-mix(in srgb, var(--cd-color-accent) 50%, transparent);
  }
  background-color: var(--cd-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--cd-color-accent) 10%, transparent);
  }
}
[data-menu-style="glow"] .cd-sidebar .cd-sidebar-item-active {
  box-shadow: 0 0 20px var(--cd-color-accent), inset 0 0 10px var(--cd-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 20px color-mix(in srgb, var(--cd-color-accent) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
  }
  background-color: var(--cd-color-accent);
  color: var(--cd-text-on-primary);
}
[data-menu-style="slide"] .cd-sidebar .cd-sidebar-item {
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  border-radius: 0;
}
[data-menu-style="slide"] .cd-sidebar .cd-sidebar-item:hover {
  border-left-color: var(--cd-color-accent);
  padding-left: calc(var(--cd-space-3) + 8px);
  background-color: var(--cd-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--cd-color-accent) 8%, transparent);
  }
}
[data-menu-style="slide"] .cd-sidebar .cd-sidebar-item-active {
  border-left: 3px solid var(--cd-color-accent);
  background-color: var(--cd-color-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--cd-color-accent) 12%, transparent);
  }
  padding-left: calc(var(--cd-space-3) + 8px);
  color: var(--cd-color-accent);
}
[data-menu-style="slide"] .cd-sidebar .cd-sidebar-item-active i {
  color: inherit;
}
[data-icon-animation="none"] .cd-sidebar .cd-sidebar-item:hover .cd-nav-icon-wrapper i, [data-icon-animation="none"] .cd-sidebar .cd-sidebar-item-active .cd-nav-icon-wrapper i {
  transform: none !important;
  animation: none !important;
}
[data-icon-animation="lift"] .cd-sidebar .cd-sidebar-item:hover .cd-nav-icon-wrapper i {
  transform: scale(1.15) translateY(-2px);
}
[data-icon-animation="lift"] .cd-sidebar .cd-sidebar-item-active .cd-nav-icon-wrapper i {
  transform: scale(1.1);
}
[data-icon-animation="pop"] .cd-sidebar .cd-sidebar-item .cd-nav-icon-wrapper i {
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-icon-animation="pop"] .cd-sidebar .cd-sidebar-item:hover .cd-nav-icon-wrapper i {
  transform: scale(1.3);
}
[data-icon-animation="pop"] .cd-sidebar .cd-sidebar-item-active .cd-nav-icon-wrapper i {
  transform: scale(1.15);
}
@keyframes cd-icon-wiggle {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  20% {
    transform: translateX(-3px) rotate(-5deg);
  }
  40% {
    transform: translateX(3px) rotate(5deg);
  }
  60% {
    transform: translateX(-2px) rotate(-3deg);
  }
  80% {
    transform: translateX(2px) rotate(3deg);
  }
}
[data-icon-animation="wiggle"] .cd-sidebar .cd-sidebar-item:hover .cd-nav-icon-wrapper i {
  animation: cd-icon-wiggle 0.5s ease-in-out;
}
[data-icon-animation="spin"] .cd-sidebar .cd-sidebar-item .cd-nav-icon-wrapper i {
  transition: transform 0.4s ease;
}
[data-icon-animation="spin"] .cd-sidebar .cd-sidebar-item:hover .cd-nav-icon-wrapper i {
  transform: rotate(360deg);
}
@keyframes cd-icon-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
  50% {
    transform: translateY(-2px);
  }
  70% {
    transform: translateY(-4px);
  }
}
[data-icon-animation="bounce"] .cd-sidebar .cd-sidebar-item:hover .cd-nav-icon-wrapper i {
  animation: cd-icon-bounce 0.5s ease;
}
[data-icon-animation="bounce"] .cd-sidebar .cd-sidebar-item-active .cd-nav-icon-wrapper i {
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  [data-icon-animation] .cd-sidebar .cd-sidebar-item:hover .cd-nav-icon-wrapper i, [data-icon-animation] .cd-sidebar .cd-sidebar-item-active .cd-nav-icon-wrapper i {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  [data-menu-style] .cd-sidebar .cd-sidebar-item, [data-menu-style] .cd-sidebar .cd-sidebar-item::after {
    transition: none !important;
  }
}
[data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-parent {
  display: flex;
  align-items: center;
  gap: var(--cd-space-2);
  padding: var(--cd-space-2) var(--cd-space-3);
  font-weight: 600;
  font-size: var(--cd-text-sm);
  color: var(--cd-text-primary);
  border-radius: var(--cd-radius-lg);
  transition: background-color 0.15s ease;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
}
[data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-parent:hover {
  background-color: var(--cd-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
  }
}
.cd-nav-tree-chevron {
  font-size: 0.6rem;
  color: var(--cd-text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
[data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group > .space-y-1 {
  position: relative;
  padding-left: var(--cd-space-4);
  margin-left: var(--cd-space-3);
}
[data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group > .space-y-1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: var(--cd-space-3);
  width: 1px;
  background-color: var(--cd-border-primary);
}
[data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group .cd-sidebar-item, [data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group .cd-sidebar-item-active {
  position: relative;
}
[data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group .cd-sidebar-item::before, [data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group .cd-sidebar-item-active::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--cd-space-4));
  top: 50%;
  width: var(--cd-space-2);
  height: 1px;
  background-color: var(--cd-border-primary);
}
[data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group .cd-sidebar-item-active::before {
  background-color: var(--cd-color-primary);
}
[data-menu-layout="tree"] .cd-sidebar.collapsed .cd-nav-tree-chevron {
  display: none;
}
[data-menu-layout="tree"] .cd-sidebar.collapsed .cd-nav-tree-parent {
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--cd-text-tertiary);
}
[data-menu-layout="tree"] .cd-sidebar.collapsed .cd-nav-tree-group > .space-y-1 {
  padding-left: 0;
  margin-left: 0;
}
[data-menu-layout="tree"] .cd-sidebar.collapsed .cd-nav-tree-group > .space-y-1::before, [data-menu-layout="tree"] .cd-sidebar.collapsed .cd-nav-tree-group .cd-sidebar-item::before, [data-menu-layout="tree"] .cd-sidebar.collapsed .cd-nav-tree-group .cd-sidebar-item-active::before {
  display: none;
}
@media (min-width: 768px) and (max-width: 1024px) {
  [data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-chevron {
    display: none;
  }
  [data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group > .space-y-1 {
    padding-left: 0;
    margin-left: 0;
  }
  [data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group > .space-y-1::before, [data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group .cd-sidebar-item::before, [data-menu-layout="tree"] .cd-sidebar .cd-nav-tree-group .cd-sidebar-item-active::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-nav-tree-chevron {
    transition: none !important;
  }
}
.cd-menu-layout-preview-container {
  padding: var(--cd-space-3);
  background-color: var(--cd-bg-secondary);
  border-radius: var(--cd-radius-lg);
  min-height: 80px;
  display: flex;
  align-items: center;
}
.cd-menu-layout-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: var(--cd-space-2);
}
.cd-layout-preview-category-title {
  width: 30%;
  height: 4px;
  background-color: var(--cd-text-tertiary);
  border-radius: 2px;
  opacity: 0.5;
  margin-bottom: 2px;
}
.cd-layout-preview-item {
  width: 100%;
  height: 7px;
  background-color: var(--cd-bg-tertiary);
  border-radius: 4px;
}
.cd-layout-preview-item-active {
  background-color: var(--cd-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--cd-color-primary) 40%, transparent);
  }
}
.cd-layout-preview-parent {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.cd-layout-preview-chevron {
  width: 0;
  height: 0;
  border-left: 4px solid var(--cd-text-tertiary);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  flex-shrink: 0;
}
.cd-layout-preview-chevron-down {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid var(--cd-text-tertiary);
  border-bottom: none;
}
.cd-layout-preview-icon {
  width: 6px;
  height: 6px;
  background-color: var(--cd-text-tertiary);
  border-radius: 2px;
  flex-shrink: 0;
}
.cd-layout-preview-text {
  flex: 1;
  height: 6px;
  background-color: var(--cd-text-tertiary);
  border-radius: 3px;
  opacity: 0.6;
}
.cd-layout-preview-text-short {
  flex: 0.7;
}
.cd-layout-preview-children {
  position: relative;
  padding-left: 14px;
  margin-left: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cd-layout-preview-connector {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 4px;
  width: 1px;
  background-color: var(--cd-border-primary);
}
.cd-layout-preview-child {
  position: relative;
  width: 80%;
  height: 6px;
  background-color: var(--cd-bg-tertiary);
  border-radius: 3px;
}
.cd-layout-preview-child::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 10px;
  height: 1px;
  background-color: var(--cd-border-primary);
}
.cd-layout-preview-child-active {
  background-color: var(--cd-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--cd-color-primary) 40%, transparent);
  }
}
@layer components {
  .cd-horizontal-nav, .cd-mega-panel, .cd-mega-backdrop, .cd-discover-panel, .cd-command-palette {
    --cd-ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --cd-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .cd-horizontal-nav-wrapper {
    display: contents;
  }
  .cd-horizontal-nav {
    background: var(--cd-bg-primary);
    border-bottom: 1px solid var(--cd-border-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--cd-navbar-height, 72px);
    z-index: var(--cd-z-topbar);
  }
  .cd-horizontal-nav:has(.cd-mega-panel.open) {
    border-bottom-color: transparent;
  }
  @media (max-width: 1023px) {
    .cd-horizontal-nav {
      display: none;
    }
  }
  @media (max-width: 1280px) {
    .cd-mega-link {
      padding: 0 10px;
    }
  }
  .cd-horizontal-nav-inner {
    padding: 0 32px 0 24px;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 4px;
  }
  .cd-horizontal-nav-brand {
    display: flex;
    align-items: center;
    padding-right: 16px;
    margin-right: 12px;
    border-right: 1px solid var(--cd-border-primary);
    align-self: stretch;
    flex-shrink: 0;
  }
  .cd-horizontal-nav-brand .cd-brand-subtext {
    font-size: 11px;
    line-height: 1.2;
    color: var(--cd-text-secondary);
    margin-top: 1px;
  }
  .cd-horizontal-nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    min-width: 38px;
    height: 38px;
    padding: 0 6px 0 3px;
    border: none;
    background: transparent;
    border-radius: 8px;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--cd-text-secondary);
    margin: 0 2px;
    transition: transform 0.14s var(--cd-ease-out-soft), box-shadow 0.18s var(--cd-ease-out-soft), background-color 0.18s ease-out, color 0.18s ease-out;
  }
  .cd-horizontal-nav-avatar:hover, .cd-horizontal-nav-avatar:focus-visible, .cd-horizontal-nav-avatar.open {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 10px rgb(0 0 0 / 0.05);
    outline: none;
  }
  .cd-horizontal-nav-avatar:focus-visible {
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px var(--cd-color-accent), 0 4px 10px rgb(0 0 0 / 0.05);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 50%, transparent), 0 4px 10px rgb(0 0 0 / 0.05);
    }
  }
  .cd-horizontal-nav-avatar:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
    transition-duration: 60ms;
  }
  .cd-horizontal-nav-avatar .cd-avatar-with-favorite, .cd-horizontal-nav-avatar > div:first-child {
    line-height: 0;
  }
  .cd-horizontal-nav-avatar .cd-avatar-rounded-xs {
    --avatar-size: 32px;
    --avatar-radius: 6px;
    --avatar-shadow: none;
  }
  .cd-horizontal-nav-avatar:hover .cd-avatar-rounded-xs, .cd-horizontal-nav-avatar:focus-visible .cd-avatar-rounded-xs {
    transform: none !important;
  }
  .cd-horizontal-nav-avatar .cd-tier-badge {
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
  }
  .cd-horizontal-nav-avatar .cd-tier-badge i {
    font-size: 0.45rem;
  }
  .cd-horizontal-nav-avatar-chev {
    font-size: 9px;
    color: var(--cd-text-secondary);
    transition: transform 0.18s var(--cd-ease-out-soft);
  }
  .cd-horizontal-nav-avatar.open .cd-horizontal-nav-avatar-chev {
    transform: rotate(180deg);
  }
  .cd-account-menu {
    position: relative;
    flex-shrink: 0;
  }
  .cd-horizontal-nav .cd-account-menu {
    height: var(--cd-navbar-height, 72px);
    display: flex;
    align-items: center;
  }
  .cd-account-menu-panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    min-width: 280px;
    background: var(--cd-bg-primary);
    border-right: 1px solid var(--cd-border-primary);
    border-bottom: 1px solid var(--cd-border-primary);
    border-left: 1px solid var(--cd-border-primary);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--cd-shadow-xl);
    padding: 6px;
    z-index: var(--cd-z-topbar-dropdown);
    font-family: var(--cd-font-primary);
    --cd-account-tier-color: var(--cd-text-secondary);
  }
  .cd-horizontal-nav .cd-account-menu-panel {
    top: 100%;
  }
  .cd-account-menu-panel--core {
    --cd-account-tier-color: var(--membership-core-primary);
  }
  .cd-account-menu-panel--professional {
    --cd-account-tier-color: var(--membership-professional-primary);
  }
  .cd-account-menu-panel--business {
    --cd-account-tier-color: var(--membership-business-primary);
  }
  .cd-account-menu-enter {
    transition: opacity 0.18s var(--cd-ease-out-soft), transform 0.24s var(--cd-ease-out-soft), clip-path 0.28s var(--cd-ease-out-soft);
    transform-origin: top right;
  }
  .cd-account-menu-enter-start {
    opacity: 0;
    transform: translateY(-6px);
    clip-path: inset(0 0 100% 0 round 0 0 12px 12px);
  }
  .cd-account-menu-enter-end {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0 round 0 0 12px 12px);
  }
  .cd-account-menu-leave {
    transition: opacity 0.14s ease-in, transform 0.16s ease-in, clip-path 0.20s ease-in;
    transform-origin: top right;
  }
  .cd-account-menu-leave-start {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0 round 0 0 12px 12px);
  }
  .cd-account-menu-leave-end {
    opacity: 0;
    transform: translateY(-6px);
    clip-path: inset(0 0 100% 0 round 0 0 12px 12px);
  }
  .cd-account-menu-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 12px;
    margin: -6px -6px 6px;
    border-radius: 0;
    border-bottom: 1px solid var(--cd-border-primary);
    background: var(--cd-bg-primary);
  }
  .cd-account-menu-header-avatar {
    flex-shrink: 0;
    line-height: 0;
  }
  .cd-account-menu-header-avatar .cd-avatar-rounded-sm {
    --avatar-size: 48px;
    --avatar-radius: 8px;
    --avatar-shadow: none;
  }
  .cd-account-menu-header-avatar .cd-avatar-rounded-sm:hover {
    transform: none !important;
  }
  .cd-account-menu-header-text {
    flex: 1;
    min-width: 0;
  }
  .cd-account-menu-name {
    font-size: 14px;
    font-weight: 600;
    font-family: var(--cd-font-editorial);
    color: var(--cd-text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-account-menu-email {
    font-size: 11px;
    color: var(--cd-text-secondary);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-account-menu-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
  }
  .cd-account-menu-tier {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-color-premium);
  }
  .cd-account-menu-tier > i {
    font-size: 9px;
  }
  .cd-account-menu-org {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--cd-text-secondary);
    line-height: 1.3;
    overflow: hidden;
  }
  .cd-account-menu-org > i {
    font-size: 10px;
    flex-shrink: 0;
  }
  .cd-account-menu-org > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-account-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cd-account-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--cd-text-primary);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.14s ease-out, color 0.14s ease-out, box-shadow 0.18s var(--cd-ease-out-soft);
  }
  .cd-account-menu-item:hover, .cd-account-menu-item:focus-visible {
    background-color: var(--cd-bg-secondary);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05);
    outline: none;
  }
  .cd-account-menu-item:focus-visible {
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 50%, transparent);
    }
  }
  .cd-account-menu-icon {
    width: 16px;
    font-size: 13px;
    text-align: center;
    color: var(--cd-text-tertiary);
    flex-shrink: 0;
    transition: transform 0.2s var(--cd-spring-soft), color 0.14s ease-out;
  }
  .cd-account-menu-item:hover .cd-account-menu-icon, .cd-account-menu-item:focus-visible .cd-account-menu-icon {
    color: var(--cd-text-primary);
    transform: scale(1.08);
  }
  .cd-account-menu-item--danger, .cd-account-menu-item--danger .cd-account-menu-icon {
    color: var(--cd-color-error);
  }
  .cd-account-menu-item--danger:hover, .cd-account-menu-item--danger:focus-visible {
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 8%, transparent);
    }
  }
  .cd-account-menu-item--danger:hover .cd-account-menu-icon, .cd-account-menu-item--danger:focus-visible .cd-account-menu-icon {
    color: var(--cd-color-error);
  }
  .cd-account-menu-divider {
    height: 1px;
    background: var(--cd-border-primary);
    margin: 6px 0;
  }
  .cd-account-menu-logout {
    margin: 0;
  }
  .cd-account-menu-panel .cd-mega-spotlight {
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 10px 12px;
  }
  .cd-account-menu-panel .cd-mega-spotlight-eyebrow {
    font-size: 9px;
    margin-bottom: 4px;
    font-family: var(--cd-font-editorial);
    letter-spacing: 0.16em;
  }
  .cd-account-menu-panel .cd-mega-spotlight-title {
    font-size: 13px;
    margin-bottom: 2px;
    font-family: var(--cd-font-editorial);
  }
  .cd-account-menu-panel .cd-mega-spotlight-desc {
    font-size: 11px;
    margin-bottom: 6px;
  }
  .cd-account-menu-panel .cd-mega-spotlight-cta {
    font-size: 11px;
  }
  .cd-account-menu-panel .cd-mega-spotlight--upgrade, .cd-account-menu-panel .cd-mega-spotlight--gratitude {
    background: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
  }
  .cd-account-menu-panel .cd-mega-spotlight--upgrade .cd-mega-spotlight-eyebrow, .cd-account-menu-panel .cd-mega-spotlight--upgrade .cd-mega-spotlight-cta {
    color: var(--cd-color-premium);
  }
  .cd-account-menu-panel .cd-mega-spotlight--upgrade::before {
    background: radial-gradient( 220px circle at var(--cd-spotlight-x, 50%) var(--cd-spotlight-y, 50%), var(--cd-color-premium), transparent 60% );
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( 220px circle at var(--cd-spotlight-x, 50%) var(--cd-spotlight-y, 50%), color-mix(in srgb, var(--cd-color-premium) 16%, transparent), transparent 60% );
    }
  }
  .cd-account-menu-panel .cd-mega-spotlight:hover, .cd-account-menu-panel .cd-mega-spotlight:focus-visible {
    border-color: var(--cd-border-primary);
  }
  .cd-horizontal-nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    align-self: stretch;
  }
  .cd-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--cd-text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.14s var(--cd-ease-out-soft), box-shadow 0.18s var(--cd-ease-out-soft), background-color 0.18s ease-out, color 0.18s ease-out;
    position: relative;
    font-family: inherit;
    font-size: 14px;
    flex-shrink: 0;
    text-decoration: none;
  }
  .cd-icon-btn:hover, .cd-icon-btn:focus-visible, .cd-icon-btn.open {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 10px rgb(0 0 0 / 0.05);
    outline: none;
  }
  .cd-icon-btn:focus-visible {
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px var(--cd-color-accent), 0 4px 10px rgb(0 0 0 / 0.05);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 50%, transparent), 0 4px 10px rgb(0 0 0 / 0.05);
    }
  }
  .cd-icon-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
    transition-duration: 60ms;
  }
  .cd-icon-btn.is-loading > i {
    opacity: 0;
  }
  .cd-icon-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid var(--cd-border-secondary);
    border-top-color: var(--cd-color-accent);
    border-radius: var(--cd-radius-full);
    animation: spin 1s linear infinite;
    pointer-events: none;
  }
  .cd-icon-btn-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--cd-color-error);
    color: #fff;
    border-radius: 999px;
    border: 2px solid var(--cd-bg-primary);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .cd-icon-btn-badge:empty {
    display: none;
  }
  .cd-icon-btn-kbd {
    font-family: inherit;
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid var(--cd-border-primary);
    border-radius: 3px;
    background: var(--cd-bg-primary);
    color: var(--cd-text-secondary);
    margin-left: 6px;
  }
  :root[data-platform="mac"] .cd-kbd-mod::before {
    content: "\2318";
  }
  :root[data-platform="pc"] .cd-kbd-mod::before {
    content: "\2303";
  }
  :root:not([data-platform]) .cd-kbd-mod::before {
    content: "\2318";
  }
  .cd-palette-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0 10px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--cd-border-primary);
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    flex-shrink: 0;
    margin-right: 4px;
    transition: transform 0.14s var(--cd-ease-out-soft), box-shadow 0.18s var(--cd-ease-out-soft), background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
  }
  .cd-palette-trigger:hover, .cd-palette-trigger:focus-visible {
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-primary);
    transform: translateY(-1px);
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-accent) 18%, var(--cd-border-primary));
    }
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 10px rgb(0 0 0 / 0.05);
    outline: none;
  }
  .cd-palette-trigger:focus-visible {
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px var(--cd-color-accent), 0 4px 10px rgb(0 0 0 / 0.05);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 50%, transparent), 0 4px 10px rgb(0 0 0 / 0.05);
    }
  }
  .cd-palette-trigger:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
    transition-duration: 60ms;
  }
  .cd-palette-trigger > i {
    font-size: 12px;
    margin-right: 6px;
  }
  @media (max-width: 1100px) {
    .cd-palette-trigger > span {
      display: none;
    }
  }
  .cd-horizontal-nav-context {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    margin-right: 8px;
    border-right: 1px solid var(--cd-border-primary);
    height: 30px;
  }
  .cd-horizontal-nav-context-pic {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cd-color-warning, #f59e0b), var(--cd-color-error, #ef4444));
    display: grid;
    place-items: center;
    color: white;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .cd-horizontal-nav-context-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-horizontal-nav-context-plan {
    font-size: 11px;
    color: var(--cd-text-tertiary);
    margin-left: 4px;
    padding: 2px 6px;
    background: var(--cd-bg-secondary);
    border-radius: 4px;
  }
  .cd-mega-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 50px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--cd-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.18s ease-out;
    text-decoration: none;
  }
  .cd-mega-link:not(.active):hover, .cd-mega-link:not(.active):focus-visible {
    color: var(--cd-text-primary);
    outline: none;
  }
  .cd-mega-link:focus-visible {
    outline: none;
  }
  .cd-mega-link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 50%, transparent);
    }
    border-radius: 8px;
  }
  .cd-mega-link-chev {
    font-size: 9px;
    opacity: 0.6;
    transition: transform 0.2s var(--cd-ease-out-soft), opacity 0.18s ease-out;
  }
  .cd-mega-link:hover .cd-mega-link-chev, .cd-mega-link:focus-visible .cd-mega-link-chev {
    opacity: 0.9;
    transform: translateY(1px);
  }
  .cd-mega-link.active {
    color: var(--cd-text-on-primary);
    font-weight: 600;
  }
  .cd-mega-link:not(.active).open {
    color: var(--cd-text-primary);
    font-weight: 600;
  }
  .cd-mega-link.open .cd-mega-link-chev {
    transform: rotate(180deg);
  }
  .cd-mega-link::before {
    content: '';
    position: absolute;
    inset: 7px 6px;
    background: var(--cd-bg-secondary);
    border-radius: 8px;
    z-index: var(--cd-z-behind);
    opacity: 0;
    transition: opacity 0.18s ease-out;
  }
  .cd-mega-link:not(.active):hover::before, .cd-mega-link:not(.active).open::before {
    opacity: 1;
  }
  .cd-mega-link.active::after {
    content: '';
    position: absolute;
    inset: 7px 6px;
    background: var(--cd-color-primary);
    border-radius: 8px;
    z-index: var(--cd-z-behind);
  }
  [data-theme="tabby"] .cd-mega-link.active::after {
    background: var(--cd-color-accent);
  }
  [data-theme="tabby"] .cd-mega-link.active {
    color: var(--cd-text-on-accent);
  }
  .cd-mega-link.active .cd-mega-link-chev {
    opacity: 0.85;
  }
  .cd-mega-link-badge {
    background: var(--cd-color-error);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 2px;
  }
  .cd-horizontal-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .cd-horizontal-nav-search {
    position: relative;
    width: 220px;
  }
  .cd-horizontal-nav-search input {
    width: 100%;
    border: 1px solid var(--cd-border-primary);
    background: var(--cd-bg-secondary);
    border-radius: 7px;
    padding: 6px 12px 6px 30px;
    font-size: 13px;
    color: var(--cd-text-primary);
    font-family: inherit;
    cursor: pointer;
  }
  .cd-horizontal-nav-search input:focus {
    outline: 2px solid var(--cd-color-accent);
    outline-offset: -1px;
  }
  .cd-horizontal-nav-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cd-text-tertiary);
    font-size: 12px;
    pointer-events: none;
  }
  .cd-horizontal-nav-search kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid var(--cd-border-primary);
    border-radius: 3px;
    background: var(--cd-bg-primary);
    color: var(--cd-text-secondary);
    font-family: inherit;
    pointer-events: none;
  }
  .cd-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cd-bg-primary);
    border-bottom: 1px solid var(--cd-border-primary);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--cd-shadow-xl);
    display: none;
    z-index: 48;
    animation: cd-mega-slide-down 0.18s ease-out;
  }
  .cd-mega-panel.open {
    display: block;
  }
  @keyframes cd-mega-slide-down {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .cd-mega-panel-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px 32px 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .cd-mega-col h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cd-text-tertiary);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-mega-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--cd-text-secondary);
    cursor: pointer;
    transition: transform 0.14s var(--cd-ease-out-soft), box-shadow 0.18s var(--cd-ease-out-soft), background-color 0.22s ease-out, color 0.22s ease-out;
  }
  .cd-mega-item:hover, .cd-mega-item:focus-visible {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06);
    outline: none;
  }
  .cd-mega-item:focus-visible {
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px var(--cd-color-accent), 0 4px 12px rgb(0 0 0 / 0.06);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 50%, transparent), 0 4px 12px rgb(0 0 0 / 0.06);
    }
  }
  .cd-mega-item:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
    transition-duration: 60ms;
  }
  .cd-mega-item-locked {
    opacity: 0.75;
  }
  .cd-mega-item-locked:hover, .cd-mega-item-locked:focus-visible {
    opacity: 0.95;
  }
  .cd-mega-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: transparent;
    display: grid;
    place-items: center;
    color: inherit;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.18s var(--cd-spring-soft);
  }
  .cd-mega-item:hover .cd-mega-item-icon, .cd-mega-item:focus-visible .cd-mega-item-icon {
    transform: scale(1.06);
  }
  .cd-mega-item-text {
    flex: 1;
    min-width: 0;
  }
  .cd-mega-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cd-text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .cd-mega-item-desc {
    font-size: 12px;
    color: var(--cd-text-secondary);
    margin-top: 2px;
  }
  .cd-mega-item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    background: var(--cd-bg-tertiary, var(--cd-bg-secondary));
    color: var(--cd-text-secondary);
    margin-left: 2px;
  }
  .cd-mega-item-count--accent {
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 14%, transparent);
    }
    color: var(--cd-color-accent);
  }
  .cd-mega-item-count--danger {
    background: rgb(220 20 60 / 0.12);
    color: var(--cd-color-error);
  }
  .cd-mega-item[aria-current="page"] {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-mega-item[aria-current="page"]:hover, .cd-mega-item[aria-current="page"]:focus-visible {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
    opacity: 0.9;
  }
  .cd-mega-item[aria-current="page"] .cd-mega-item-title {
    color: var(--cd-text-on-primary);
  }
  .cd-mega-item[aria-current="page"] .cd-mega-item-desc {
    color: var(--cd-text-on-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-text-on-primary) 75%, transparent);
    }
  }
  .cd-mega-item[aria-current="page"] .cd-mega-item-count {
    background: rgb(255 255 255 / 0.18);
    color: var(--cd-text-on-primary);
  }
  .cd-mega-item-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 4px;
    border: 1px solid currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    }
    margin-left: 2px;
  }
  .cd-mega-item-tag--beta {
    color: var(--cd-color-accent);
  }
  .cd-mega-item-tag--new {
    color: #16a34a;
  }
  .cd-mega-item-tag--locked {
    color: var(--cd-text-tertiary);
  }
  .cd-mega-spotlight {
    position: relative;
    display: block;
    margin-top: 10px;
    padding: 14px 14px 12px;
    border-radius: 10px;
    background: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-primary);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.14s var(--cd-ease-out-soft), border-color 0.18s ease-out, box-shadow 0.18s var(--cd-ease-out-soft);
  }
  .cd-mega-spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: radial-gradient( 220px circle at var(--cd-spotlight-x, 50%) var(--cd-spotlight-y, 50%), var(--cd-color-accent), transparent 60% );
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( 220px circle at var(--cd-spotlight-x, 50%) var(--cd-spotlight-y, 50%), color-mix(in srgb, var(--cd-color-accent) 12%, transparent), transparent 60% );
    }
    transition: opacity 0.2s ease-out;
  }
  .cd-mega-spotlight > * {
    position: relative;
    z-index: 1;
  }
  .cd-mega-spotlight:hover, .cd-mega-spotlight:focus-visible {
    transform: translateY(-1px);
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-accent) 35%, var(--cd-border-primary));
    }
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06);
    outline: none;
  }
  .cd-mega-spotlight:hover::before, .cd-mega-spotlight:focus-visible::before {
    opacity: 1;
  }
  .cd-mega-spotlight:focus-visible {
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px var(--cd-color-accent), 0 4px 12px rgb(0 0 0 / 0.06);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 50%, transparent), 0 4px 12px rgb(0 0 0 / 0.06);
    }
  }
  .cd-mega-spotlight--upgrade::before {
    background: radial-gradient( 220px circle at var(--cd-spotlight-x, 50%) var(--cd-spotlight-y, 50%), var(--cd-color-warning, #f59e0b), transparent 60% );
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( 220px circle at var(--cd-spotlight-x, 50%) var(--cd-spotlight-y, 50%), color-mix(in srgb, var(--cd-color-warning, #f59e0b) 14%, transparent), transparent 60% );
    }
  }
  .cd-mega-spotlight-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cd-text-tertiary);
    margin-bottom: 6px;
  }
  .cd-mega-spotlight-eyebrow > i {
    font-size: 11px;
  }
  .cd-mega-spotlight-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cd-text-primary);
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .cd-mega-spotlight-desc {
    font-size: 12px;
    color: var(--cd-text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .cd-mega-spotlight-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cd-color-accent);
  }
  .cd-mega-spotlight-cta > i {
    font-size: 10px;
    transition: transform 0.15s;
  }
  .cd-mega-spotlight:hover .cd-mega-spotlight-cta > i {
    transform: translateX(2px);
  }
  .cd-mega-spotlight--upgrade {
    background: linear-gradient( 135deg, var(--cd-color-warning, #f59e0b), var(--cd-bg-secondary) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, color-mix(in srgb, var(--cd-color-warning, #f59e0b) 14%, var(--cd-bg-secondary)), var(--cd-bg-secondary) );
    }
    border-color: var(--cd-color-warning, #f59e0b);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning, #f59e0b) 30%, var(--cd-border-primary));
    }
  }
  .cd-mega-spotlight--upgrade .cd-mega-spotlight-eyebrow, .cd-mega-spotlight--upgrade .cd-mega-spotlight-cta {
    color: var(--cd-color-warning, #f59e0b);
  }
  .cd-mega-spotlight--gratitude::before {
    background: radial-gradient( 220px circle at var(--cd-spotlight-x, 50%) var(--cd-spotlight-y, 50%), var(--cd-color-premium, #d4af37), transparent 60% );
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( 220px circle at var(--cd-spotlight-x, 50%) var(--cd-spotlight-y, 50%), color-mix(in srgb, var(--cd-color-premium, #d4af37) 16%, transparent), transparent 60% );
    }
  }
  .cd-mega-spotlight--gratitude {
    background: linear-gradient( 135deg, var(--cd-color-premium, #d4af37), var(--cd-bg-secondary) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, color-mix(in srgb, var(--cd-color-premium, #d4af37) 14%, var(--cd-bg-secondary)), var(--cd-bg-secondary) );
    }
    border-color: var(--cd-color-premium, #d4af37);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-premium, #d4af37) 30%, var(--cd-border-primary));
    }
  }
  .cd-mega-spotlight--gratitude .cd-mega-spotlight-eyebrow, .cd-mega-spotlight--gratitude .cd-mega-spotlight-cta {
    color: var(--cd-color-premium, #d4af37);
  }
  .cd-mega-footer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 32px;
    border-top: 1px solid var(--cd-border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--cd-text-secondary);
  }
  .cd-mega-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--cd-color-accent);
    text-decoration: none;
  }
  .cd-mega-footer-cta > i {
    font-size: 11px;
    transition: transform 0.15s;
  }
  .cd-mega-footer-cta:hover > i {
    transform: translateX(2px);
  }
  .cd-mega-footer-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cd-text-tertiary);
  }
  .cd-mega-item-danger {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cd-color-error);
  }
  .cd-mega-item-danger .cd-mega-item-title {
    color: var(--cd-color-error);
  }
  .cd-mega-item-danger:hover, .cd-mega-item-danger:focus-visible {
    background-color: rgb(220 20 60 / 0.08);
    color: var(--cd-color-error);
  }
  .cd-mega-item-danger:hover .cd-mega-item-title, .cd-mega-item-danger:focus-visible .cd-mega-item-title {
    color: var(--cd-color-error);
  }
  .cd-discover-panel .cd-mega-panel-inner {
    grid-template-columns: 1.5fr 1fr;
    max-width: 900px;
  }
  @media (max-width: 1100px) {
    .cd-discover-panel .cd-mega-panel-inner {
      grid-template-columns: 1fr;
    }
  }
  .cd-province-selector {
    font-family: var(--cd-font-primary);
  }
  .cd-discover-province {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cd-discover-province-hint {
    font-size: 13px;
    color: var(--cd-text-secondary);
    line-height: 1.4;
  }
  .cd-mega-backdrop {
    position: fixed;
    top: var(--cd-navbar-height, 72px);
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.18);
    z-index: 47;
    display: none;
    animation: cd-mega-fade-in 0.15s;
  }
  .cd-mega-backdrop.open {
    display: block;
  }
  @keyframes cd-mega-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .cd-command-palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--cd-z-palette);
    display: none;
  }
  .cd-command-palette-backdrop.open {
    display: block;
  }
  .cd-command-palette {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(800px, 92vw);
    max-height: min(70vh, calc(min(800px, 92vw) / 1.618));
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 14px;
    box-shadow: var(--cd-shadow-xl);
    z-index: var(--cd-z-palette-top);
    display: none;
    flex-direction: column;
    overflow: hidden;
  }
  .cd-command-palette.open {
    display: flex;
    animation: cd-palette-in 140ms var(--cd-ease-out-soft);
  }
  @keyframes cd-palette-in {
    from {
      opacity: 0;
      transform: translate(-50%, -8px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }
  }
  .cd-command-palette-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cd-border-primary);
    flex-shrink: 0;
    background: var(--cd-bg-secondary);
  }
  .cd-command-palette-header-icon {
    font-size: 14px;
    color: var(--cd-text-tertiary);
  }
  .cd-command-palette-header-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--cd-text-secondary);
  }
  .cd-command-palette-header-kbd {
    margin-left: auto;
    font-family: inherit;
    padding: 2px 7px;
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 4px;
    font-size: 10px;
    color: var(--cd-text-tertiary);
  }
  .cd-command-palette-input-wrap {
    position: relative;
    border-bottom: 1px solid var(--cd-border-primary);
    flex-shrink: 0;
  }
  .cd-command-palette-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 18px 20px 18px 48px;
    font-size: 16px;
    color: var(--cd-text-primary);
    font-family: inherit;
  }
  .cd-command-palette-input::placeholder {
    color: var(--cd-text-tertiary);
  }
  .cd-command-palette-input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cd-text-tertiary);
    font-size: 16px;
  }
  .cd-command-palette-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--cd-border-primary);
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .cd-command-palette-chips::-webkit-scrollbar {
    display: none;
  }
  .cd-command-palette-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--cd-text-secondary);
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
  }
  .cd-command-palette-chip:hover {
    color: var(--cd-text-primary);
    border-color: var(--cd-text-tertiary);
  }
  .cd-command-palette-chip.active {
    color: var(--cd-text-on-primary);
    background: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
  }
  .cd-command-palette-chip-icon {
    font-size: 11px;
  }
  .cd-command-palette-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.18s var(--cd-ease-out-soft);
  }
  .cd-command-palette-results::-webkit-scrollbar {
    width: 8px;
  }
  .cd-command-palette-results::-webkit-scrollbar-track {
    background: transparent;
  }
  .cd-command-palette-results::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    transition: background 0.18s var(--cd-ease-out-soft);
  }
  .cd-command-palette:hover .cd-command-palette-results {
    scrollbar-color: var(--cd-border-primary) transparent;
  }
  .cd-command-palette:hover .cd-command-palette-results::-webkit-scrollbar-thumb {
    background: var(--cd-border-primary);
  }
  .cd-command-palette:hover .cd-command-palette-results::-webkit-scrollbar-thumb:hover {
    background: var(--cd-text-tertiary);
  }
  .cd-command-palette-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--cd-text-tertiary);
    font-size: 13px;
  }
  .cd-command-palette-section {
    padding: 6px 0;
  }
  .cd-command-palette-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cd-text-tertiary);
    padding: 8px 20px 4px;
  }
  .cd-command-palette-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
    margin: 0 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--cd-text-secondary);
    text-decoration: none;
    transition: transform 0.14s var(--cd-ease-out-soft), box-shadow 0.18s var(--cd-ease-out-soft), background-color 0.22s ease-out, color 0.22s ease-out;
  }
  .cd-command-palette-item:hover, .cd-command-palette-item.highlighted {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06);
  }
  .cd-command-palette-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: transparent;
    display: grid;
    place-items: center;
    color: inherit;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.18s var(--cd-spring-soft);
  }
  .cd-command-palette-item:hover .cd-command-palette-item-icon, .cd-command-palette-item.highlighted .cd-command-palette-item-icon {
    transform: scale(1.06);
  }
  .cd-command-palette-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: center;
  }
  .cd-command-palette-item-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cd-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-command-palette-item-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--cd-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-command-palette-item-category {
    align-self: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cd-text-tertiary);
    padding: 2px 8px;
    background: var(--cd-bg-tertiary);
    border-radius: 999px;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .cd-command-palette-item.highlighted .cd-command-palette-item-category {
    background: var(--cd-bg-primary);
  }
  .cd-command-palette-footer {
    flex-shrink: 0;
    padding: 8px 20px;
    border-top: 1px solid var(--cd-border-primary);
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: var(--cd-text-tertiary);
    background: var(--cd-bg-secondary);
  }
  .cd-command-palette-footer kbd {
    font-family: inherit;
    padding: 1px 5px;
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 3px;
    font-size: 10px;
    color: var(--cd-text-secondary);
    margin-right: 4px;
  }
  @media (max-width: 1100px) {
    .cd-mega-panel-inner {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 768px) {
    .cd-horizontal-nav-search {
      display: none;
    }
    .cd-horizontal-nav-context {
      display: none;
    }
  }
  @media (max-width: 640px) {
    .cd-account-menu-panel {
      position: fixed;
      top: calc(var(--cd-navbar-height, 56px) + 8px);
      left: 0.5rem;
      right: 0.5rem;
      min-width: auto;
      max-height: calc(100vh - var(--cd-navbar-height, 56px) - 1.5rem);
      overflow-y: auto;
      border-top: 1px solid var(--cd-border-primary);
      border-radius: 12px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-mega-item, .cd-mega-link, .cd-mega-link-chev, .cd-mega-item-icon, .cd-mega-spotlight, .cd-icon-btn, .cd-palette-trigger, .cd-horizontal-nav-avatar {
      transition-property: background-color, color, border-color, box-shadow;
    }
    .cd-mega-item:hover, .cd-mega-item:focus-visible, .cd-mega-item:active, .cd-mega-link:hover .cd-mega-link-chev, .cd-mega-link:focus-visible .cd-mega-link-chev, .cd-mega-item:hover .cd-mega-item-icon, .cd-mega-item:focus-visible .cd-mega-item-icon, .cd-mega-spotlight:hover, .cd-mega-spotlight:focus-visible, .cd-icon-btn:hover, .cd-icon-btn:focus-visible, .cd-icon-btn:active, .cd-palette-trigger:hover, .cd-palette-trigger:focus-visible, .cd-palette-trigger:active, .cd-horizontal-nav-avatar:hover, .cd-horizontal-nav-avatar:focus-visible, .cd-horizontal-nav-avatar:active {
      transform: none;
    }
    .cd-mega-spotlight::before {
      display: none;
    }
    .cd-account-menu-enter, .cd-account-menu-leave {
      transition-property: opacity;
    }
    .cd-account-menu-enter-start, .cd-account-menu-enter-end, .cd-account-menu-leave-start, .cd-account-menu-leave-end {
      transform: none;
      clip-path: none;
    }
  }
}
@media (max-width: 1280px) {
  .cd-horizontal-nav .cd-palette-trigger {
    display: none;
  }
  .cd-horizontal-nav-brand .cd-brand-subtext {
    display: none;
  }
}
@media (max-width: 1100px) {
  .cd-horizontal-nav .cd-brand-text-block {
    display: none;
  }
}
@layer components {
  :root {
    --cd-mobile-bottom-nav-clearance: 0px;
  }
  @media (max-width: 1023px) {
    :root:has(.cd-bottom-nav) {
      --cd-mobile-bottom-nav-clearance: calc(
        70px + max(14px, calc(env(safe-area-inset-bottom) + 6px)) + 8px
      );
    }
  }
  .cd-content-adaptive {
    width: 100%;
    @media (width >= 48rem) {
      min-width: calc(var(--spacing) * 0);
    }
    @media (width >= 48rem) {
      flex: 1;
    }
  }
  @media (max-width: 1023px) {
    .cd-content-adaptive {
      padding: 0 1rem calc(70px + env(safe-area-inset-bottom) + 20px) 1rem;
      min-height: calc(100vh - var(--cd-total-navbar-offset) - 90px);
    }
    .cd-dashboard-container {
      display: flex;
      flex-direction: column;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
      gap: 0;
    }
    .cd-content-adaptive > .cd-profile-card:first-child {
      margin-top: 0;
    }
  }
  .cd-bottom-nav {
    position: fixed;
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 6px));
    left: 14px;
    right: 14px;
    height: auto;
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    border-radius: 24px;
    box-shadow: 0 8px 32px -8px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 32px -8px color-mix(in srgb, var(--cd-text-primary) 18%, transparent);
    }
    z-index: 40;
  }
  .cd-bottom-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    position: relative;
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-tiny);
    font-weight: 600;
    text-decoration: none;
    border-radius: 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: flex 0.25s ease, background-color 0.2s ease, color 0.2s ease;
  }
  .cd-bottom-nav-item:active {
    transform: scale(0.97);
  }
  .cd-bottom-nav-item.active {
    flex: 1.4 1 0;
    color: var(--cd-color-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-bottom-nav-item i {
    font-size: 22px;
    line-height: 1;
  }
  .cd-bottom-nav-item span {
    line-height: 1;
  }
  .cd-bottom-nav-item .cd-nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 1.25rem;
    min-height: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: var(--cd-radius-full);
    font-size: 0.625rem;
    line-height: 1;
    background-color: var(--cd-color-primary);
    color: white;
    white-space: nowrap;
  }
  .cd-mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background-color: var(--cd-bg-card);
    z-index: 60;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 8px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: -2px 0 8px color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
    }
  }
  .cd-mobile-drawer.open {
    right: 0;
  }
  .cd-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-primary) 50%, transparent);
    }
    z-index: 55;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .cd-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  .cd-drawer-header {
    padding: 20px;
    border-bottom: 1px solid var(--cd-border-primary);
    background-color: var(--cd-bg-primary);
  }
  .cd-drawer-close {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background: transparent;
    border: none;
    color: var(--cd-text-secondary);
    cursor: pointer;
  }
  .cd-drawer-close:hover {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-drawer-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: var(--cd-bg-secondary);
    border: none;
    color: var(--cd-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .cd-drawer-close-btn:hover {
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-primary);
  }
  .cd-drawer-close-btn i {
    font-size: 18px;
  }
  .cd-drawer-user {
    margin-top: 16px;
  }
  .cd-drawer-avatar-container {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--cd-bg-secondary);
    flex-shrink: 0;
  }
  .cd-drawer-avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cd-drawer-avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background-color: var(--cd-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-secondary);
    font-weight: 600;
    font-size: 20px;
    flex-shrink: 0;
  }
  .cd-drawer-user-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-drawer-user-email {
    font-size: 13px;
    color: var(--cd-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-drawer-section-title-modern {
    padding: 0 20px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-text-tertiary);
  }
  .cd-drawer-section-light {
    padding: 16px 0;
    border-bottom: 1px solid var(--cd-border-light);
  }
  .cd-drawer-avatar-admin {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: var(--cd-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cd-drawer-avatar-admin i {
    font-size: 20px;
    color: var(--cd-text-on-primary);
  }
  .cd-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
  }
  .cd-drawer-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-drawer-section-last {
    border-bottom: none;
  }
  .cd-drawer-section-title {
    padding: 0 20px;
    margin-bottom: 8px;
    font-size: var(--cd-text-tiny);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cd-text-tertiary);
  }
  .cd-drawer-links {
    display: flex;
    flex-direction: column;
  }
  .cd-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--cd-text-primary);
    text-decoration: none;
    font-size: var(--cd-text-base);
    font-weight: 500;
    transition: background-color 0.2s ease;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
  }
  .cd-drawer-link:hover {
    background-color: var(--cd-bg-secondary);
  }
  .cd-drawer-link.active {
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-drawer-link.active > i, .cd-drawer-link.active > svg {
    color: var(--cd-text-on-primary);
  }
  .cd-drawer-link > i, .cd-drawer-link > svg {
    width: 20px;
    text-align: center;
    font-size: var(--cd-text-base);
    color: var(--cd-text-secondary);
    flex-shrink: 0;
  }
  .cd-drawer-link > span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: 1.5;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .cd-drawer-link.cd-drawer-link-danger {
    color: var(--cd-color-error);
  }
  .cd-drawer-link.cd-drawer-link-danger:hover {
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 10%, transparent);
    }
  }
  .cd-drawer-link.cd-drawer-link-danger i {
    color: var(--cd-color-error);
  }
  .cd-drawer-badge {
    margin-left: auto;
    min-width: 1.25rem;
    min-height: 1.25rem;
    padding: 0.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cd-color-primary);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: var(--cd-radius-full);
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
  }
  @media (max-width: 1023px) {
    .cd-sidebar-panel {
      display: none;
    }
    .cd-dashboard-container {
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
    }
  }
  @media (min-width: 1024px) {
    .cd-bottom-nav {
      display: none;
    }
    .cd-mobile-drawer {
      display: none;
    }
    .cd-drawer-overlay {
      display: none;
    }
  }
  .cd-bottom-nav-item-container {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-quotes-popup-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .cd-quotes-popup-badge.cd-badge-primary {
    background-color: var(--cd-color-primary);
    color: white;
  }
  .cd-quotes-popup-badge.cd-badge-success {
    background-color: var(--cd-color-success);
    color: white;
  }
  .cd-quotes-popup-badge.cd-badge-neutral {
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-secondary);
  }
  .cd-quotes-popup-badge.cd-badge-danger {
    background-color: var(--cd-color-error);
    color: white;
  }
  .cd-quotes-popup-badge.cd-badge-warning {
    background-color: var(--cd-color-warning);
    color: var(--cd-text-on-warning);
  }
  .cd-more-popup {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: min(360px, calc(100vw - 28px));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--cd-bg-card);
    border-radius: 20px;
    box-shadow: 0 8px 32px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 32px color-mix(in srgb, var(--cd-text-primary) 20%, transparent);
    }
    z-index: 50;
  }
  .cd-more-popup-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
    border-radius: 20px;
  }
  .cd-more-popup-scroll .cd-drawer-section:first-child {
    padding-top: 4px;
  }
  .cd-more-popup::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 24px;
    width: 16px;
    height: 16px;
    background: var(--cd-bg-card);
    border-radius: 4px;
    transform: rotate(45deg);
    box-shadow: 4px 4px 8px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 4px 4px 8px color-mix(in srgb, var(--cd-text-primary) 8%, transparent);
    }
    z-index: -1;
  }
  .cd-more-popup--left {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: var(--cd-mobile-bottom-nav-clearance);
    width: auto;
    max-width: min(360px, calc(100vw - 28px));
  }
  .cd-more-popup--left::after {
    right: auto;
    left: 24px;
  }
  .cd-more-popup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 6px;
  }
  .cd-more-popup-grid .cd-drawer-link {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 14px;
    min-height: 0;
    text-align: center;
  }
  .cd-more-popup-grid .cd-drawer-link:active {
    transform: scale(0.95);
  }
  .cd-more-popup-grid .cd-drawer-link > i, .cd-more-popup-grid .cd-drawer-link > svg {
    width: auto;
    font-size: 22px;
  }
  .cd-more-popup-grid .cd-drawer-link > span:first-of-type {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .cd-more-popup-grid .cd-drawer-link .cd-drawer-badge, .cd-more-popup-grid .cd-drawer-link .cd-quotes-popup-badge, .cd-more-popup-grid .cd-drawer-link [data-locked] {
    position: absolute;
    top: 6px;
    right: 6px;
    margin-left: 0;
  }
  .cd-more-popup-grid .cd-drawer-link.active {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-color-primary);
  }
  .cd-more-popup-grid .cd-drawer-link.active > i, .cd-more-popup-grid .cd-drawer-link.active > svg {
    color: var(--cd-color-primary);
  }
}
@layer components {
  .cd-tabs-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 6);
    overflow-x: auto;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 8);
    }
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 10);
    }
    border-color: var(--cd-border-secondary);
    background-color: transparent;
    padding-bottom: 0;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: auto;
    touch-action: pan-x;
  }
  .cd-tabs-nav::-webkit-scrollbar {
    display: none;
  }
  .cd-tabs-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem 0.75rem;
    font-weight: 500;
    font-size: var(--cd-text-sm);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: relative;
    white-space: nowrap;
    color: var(--cd-text-tertiary);
    background-color: transparent;
    border: none;
    outline: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  @media (min-width: 640px) {
    .cd-tabs-item {
      padding-bottom: 1rem;
      font-size: var(--cd-text-base);
    }
  }
  .cd-tabs-item::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: transparent;
    transition: background-color 0.2s ease;
  }
  .cd-tabs-item:hover:not(.cd-tabs-item-active) {
    color: var(--cd-text-secondary);
  }
  .cd-tabs-item-active {
    color: var(--cd-text-primary) !important;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .cd-tabs-item-active::after {
    background-color: var(--cd-color-accent) !important;
  }
  .cd-tabs-icon {
    margin-right: calc(var(--spacing) * 1.5);
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    @media (width >= 40rem) {
      margin-right: calc(var(--spacing) * 2);
    }
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 5);
    }
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 5);
    }
  }
  .cd-tabs-item-active .cd-tabs-icon {
    color: var(--cd-text-primary);
  }
  .cd-tabs-content {
    margin-top: calc(var(--spacing) * 6);
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 8);
    }
    animation: fadeIn 0.3s ease-in-out;
  }
  .cd-tabs-panel {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
    animation: slideUp 0.3s ease-out;
  }
  .cd-tabs-nav-underline {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 0);
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
    border-color: var(--cd-border-primary);
    background-color: transparent;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: auto;
    touch-action: pan-x;
  }
  .cd-tabs-nav-underline::-webkit-scrollbar {
    display: none;
  }
  .cd-tabs-item-underline {
    display: flex;
    align-items: center;
    padding: 0 0.25rem 0.75rem;
    font-weight: 500;
    font-size: var(--cd-text-base);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: relative;
    border-bottom: 2px solid transparent;
    color: var(--cd-text-secondary);
    background-color: transparent;
    margin-bottom: -1px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  @media (min-width: 640px) {
    .cd-tabs-item-underline {
      padding-bottom: 1rem;
    }
  }
  .cd-tabs-item-underline:hover:not(.cd-tabs-item-underline-active) {
    color: var(--cd-text-primary);
    border-bottom-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom-color: color-mix(in srgb, var(--cd-color-accent) 35%, transparent);
    }
  }
  .cd-tabs-item-underline-active {
    color: var(--cd-text-primary) !important;
    border-bottom-color: var(--cd-color-accent) !important;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .cd-tabs-item-underline img {
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
  }
  .cd-tabs-item-underline:hover img, .cd-tabs-item-underline-active img {
    filter: grayscale(0);
    opacity: 1;
  }
  .cd-tabs-item-underline i {
    opacity: 0.55;
    transition: opacity 0.2s ease-in-out;
  }
  .cd-tabs-item-underline:hover i, .cd-tabs-item-underline-active i {
    opacity: 1;
  }
  .cd-tab-count {
    font-size: var(--cd-text-xl);
    color: var(--cd-text-tertiary);
    transition: color 0.2s ease-in-out;
  }
  .cd-tabs-item-underline:hover:not(.cd-tabs-item-underline-active) .cd-tab-count {
    color: var(--cd-text-secondary);
  }
  .cd-tabs-item-underline-active .cd-tab-count {
    color: var(--cd-color-accent);
  }
  .cd-tabs-nav-pill {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 1);
    background-color: var(--cd-bg-tertiary);
    user-select: none;
    -webkit-user-select: none;
  }
  .cd-tabs-item-pill {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--cd-text-secondary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .cd-tabs-item-pill:hover:not(.cd-tabs-item-pill-active) {
    color: var(--cd-text-primary);
  }
  .cd-tabs-item-pill-active {
    color: var(--cd-text-primary) !important;
    background-color: var(--cd-bg-primary) !important;
    border-bottom-color: transparent !important;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .cd-tabs-item-pill i {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .cd-tab-panel {
    animation: cd-tab-fade-in 0.3s ease-out;
  }
  @keyframes cd-tab-fade-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-tab-panel {
      animation: none;
    }
  }
  @media (max-width: 640px) {
    .cd-tabs-nav {
      gap: calc(var(--spacing) * 4);
    }
    .cd-tabs-item {
      padding-bottom: 0.75rem;
      font-size: var(--cd-text-sm);
    }
    .cd-tabs-icon {
      margin-right: calc(var(--spacing) * 1.5);
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
    }
    .cd-tabs-nav-underline {
      gap: calc(var(--spacing) * 2);
      padding-inline: calc(var(--spacing) * 2);
      @media (width >= 40rem) {
        gap: calc(var(--spacing) * 3);
      }
    }
    .cd-tabs-item-underline {
      font-size: var(--cd-text-base);
      padding-bottom: 0.5rem;
      min-width: fit-content;
      white-space: nowrap;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
  }
  .cd-portfolio-filter-trigger {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-primary);
  }
  .cd-portfolio-filter-trigger:hover {
    border-color: var(--cd-text-tertiary);
  }
  .cd-portfolio-filter-trigger:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    border-color: var(--cd-color-accent);
    box-shadow: 0 0 0 2px var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-accent) 20%, transparent);
    }
  }
  .cd-portfolio-filter-menu {
    position: absolute;
    right: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    margin-top: calc(var(--spacing) * 2);
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding-block: calc(var(--spacing) * 1);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    z-index: var(--cd-z-topbar-dropdown);
  }
  .cd-portfolio-filter-menu-item {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--cd-text-primary);
    background-color: transparent;
    border: none;
  }
  .cd-portfolio-filter-menu-item:hover, .cd-portfolio-filter-menu-item:focus-visible {
    background-color: var(--cd-bg-secondary);
    outline: none;
  }
  .cd-portfolio-filter-menu-item-active {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    color: var(--cd-color-primary);
  }
}
@layer components {
  :root {
    --cd-profile-subnav-height: 48px;
  }
  @media (min-width: 640px) {
    :root {
      --cd-profile-subnav-height: 56px;
    }
  }
  .cd-profile-sticky-subnav {
    position: -webkit-sticky;
    position: sticky;
    top: var(--cd-total-navbar-offset);
    z-index: 20;
    background: var(--cd-bg-primary, #ffffff);
    border-bottom: 1px solid var(--cd-profile-connected-rule, var(--cd-text-primary));
    box-shadow: none;
    padding-top: 0.75rem;
    will-change: transform;
  }
  @media (min-width: 640px) {
    .cd-profile-sticky-subnav {
      padding-top: 1rem;
    }
  }
  .cd-profile-section {
    scroll-margin-top: calc(var(--cd-total-navbar-offset) + var(--cd-profile-subnav-height));
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@layer components {
  .cd-profile-back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: calc(1.25rem + var(--cd-mobile-bottom-nav-clearance, 0px));
    z-index: var(--cd-z-floating);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: var(--cd-color-primary);
    color: #ffffff;
    box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.3);
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 180ms ease-out, transform 180ms ease-out, background-color 120ms ease-out;
  }
  .cd-profile-back-to-top:hover {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 88%, #000);
    }
  }
  .cd-profile-back-to-top:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 3px;
  }
  .cd-profile-back-to-top.cd-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  @media (min-width: 640px) {
    .cd-profile-back-to-top {
      right: 1.75rem;
      bottom: calc(1.75rem + var(--cd-mobile-bottom-nav-clearance, 0px));
      width: 3rem;
      height: 3rem;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-profile-back-to-top {
    transition: none;
    transform: none;
  }
}
@layer components {
  .cd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 4);
  }
  .cd-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: #374151;
    background-color: #f3f4f6;
    border-radius: 0.75rem;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    --tw-ring-color: var(--cd-color-primary);
  }
  .cd-pagination-link:hover {
    background-color: #e5e7eb;
    color: #111827;
  }
  .cd-pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--cd-text-sm);
    font-weight: 700;
    color: white;
    border-radius: 0.75rem;
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-color-primary);
  }
  .cd-pagination-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--cd-text-sm);
    color: #9ca3af;
    background-color: #f9fafb;
    border-radius: 0.75rem;
    cursor: not-allowed;
  }
  @media (min-width: 768px) {
    .cd-pagination-link, .cd-pagination-current, .cd-pagination-disabled {
      width: 3rem;
      height: 3rem;
      font-size: var(--cd-text-base);
    }
  }
  .cd-pagination-info {
    font-size: var(--cd-text-sm);
    color: #6b7280;
    text-align: center;
    margin-top: 0.75rem;
  }
}
@layer components {
  .cd-modal {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: calc(var(--spacing) * 4);
  }
  .cd-modal-backdrop {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    background-color: var(--cd-color-shark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-shark) 50%, transparent);
    }
  }
  .cd-modal-content {
    position: relative;
    max-height: 90vh;
    width: 100%;
    max-width: var(--container-2xl);
    overflow-y: auto;
    border-radius: var(--radius-2xl);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--cd-bg-primary);
    animation: cd-modal-slide-in 0.3s ease-out;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cd-modal-content-sm {
    max-width: var(--container-md);
  }
  .cd-modal-content-md {
    max-width: var(--container-2xl);
  }
  .cd-modal-content-lg {
    max-width: var(--container-4xl);
  }
  .cd-modal-content-xl {
    max-width: var(--container-5xl);
  }
  .cd-modal-content-2xl {
    max-width: var(--container-6xl);
  }
  .cd-modal-content-4xl {
    max-width: var(--container-7xl);
  }
  .cd-modal-content-6xl {
    max-width: 90vw;
  }
  .cd-modal-content-full {
    max-width: 95vw;
  }
  .cd-modal-backdrop-overlay {
    background-color: var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-bg-primary) 85%, transparent);
    }
  }
  .cd-modal-content-overlay {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    max-height: none;
    max-width: 100%;
    overflow: visible;
    animation: cd-modal-fade-in 0.3s ease-out;
  }
  .cd-modal-content-overlay .cd-modal-body {
    padding: 0;
  }
  @keyframes cd-modal-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .cd-modal-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding: calc(var(--spacing) * 6);
    border-color: var(--cd-border-primary);
  }
  .cd-modal-title {
    font-size: var(--cd-text-xl);
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-modal-subtitle {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    margin-top: 0.25rem;
  }
  .cd-modal-body {
    padding: calc(var(--spacing) * 6);
    color: var(--cd-text-primary);
  }
  .cd-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding: calc(var(--spacing) * 6);
    border-color: var(--cd-border-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-modal-close {
    position: absolute;
    top: calc(var(--spacing) * 4);
    right: calc(var(--spacing) * 4);
    z-index: 50;
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: transparent;
    color: var(--cd-text-tertiary);
    transition: all 0.15s ease-in-out;
    cursor: pointer;
  }
  .cd-modal-close:hover {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-modal-province .cd-modal-content {
    max-width: var(--container-4xl);
  }
  .cd-modal-province .cd-modal-header {
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .cd-modal-province .cd-modal-title {
    font-size: var(--cd-text-2xl);
    margin-bottom: 0.5rem;
  }
  .cd-modal-emergency .cd-modal-content {
    max-width: 95vw;
    @media (width >= 40rem) {
      max-width: var(--container-md);
    }
    border-top: 4px solid var(--cd-color-crimson-red);
  }
  .cd-modal-emergency .cd-modal-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.25rem 1rem 1rem;
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-modal-emergency .cd-modal-title {
    font-size: var(--cd-text-lg);
    line-height: 1.2;
  }
  .cd-modal-emergency .cd-modal-body {
    padding: 1.25rem 1rem;
  }
  @media (min-width: 640px) {
    .cd-modal-emergency .cd-modal-header {
      padding: 1.25rem 1.5rem 1rem;
    }
    .cd-modal-emergency .cd-modal-body {
      padding: 1.25rem 1.5rem;
    }
  }
  .cd-province-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 0);
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .cd-province-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 2px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--cd-bg-primary);
    border-color: var(--cd-border-primary);
    font-weight: 500;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    min-height: 4.5rem;
  }
  .cd-province-card:hover {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-color-accent);
    --tw-translate-y: calc(var(--spacing) * -0.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .cd-province-card:active {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .cd-province-card-abbr {
    font-size: var(--cd-text-lg);
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: 0.25rem;
  }
  .cd-province-card-name {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
    text-align: center;
    line-height: 1.25;
  }
  .cd-province-card-all {
    grid-column: 1 / -1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-text-primary);
  }
  .cd-province-card-all .cd-province-card-abbr {
    font-size: var(--cd-text-xl);
  }
  .cd-province-card-active {
    background-color: var(--cd-bg-science-blue);
    color: white;
    border-color: var(--cd-border-science-blue);
  }
  .cd-province-card-active:hover {
    border-color: var(--color-trust-blue);
    background-color: var(--color-trust-blue);
  }
  .cd-province-card-active .cd-province-card-abbr, .cd-province-card-active .cd-province-card-name {
    color: white;
  }
  .cd-province-card-inactive {
    position: relative;
    opacity: 0.5;
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-secondary);
    cursor: not-allowed;
    pointer-events: none;
  }
  .cd-province-card-inactive .cd-province-card-abbr, .cd-province-card-inactive .cd-province-card-name {
    color: var(--cd-text-tertiary);
  }
  .cd-province-card-badge {
    position: absolute;
    top: calc(var(--spacing) * -2);
    right: calc(var(--spacing) * -2);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-primary);
  }
  .cd-modal-help-text {
    margin-top: 1.5rem;
    text-align: center;
  }
  .cd-modal-help-text p {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-coach-mark {
    z-index: var(--cd-z-modal);
    background: var(--cd-card-bg, #ffffff);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0;
    width: 17rem;
    animation: cd-coach-mark-enter 0.3s ease-out;
  }
  @keyframes cd-coach-mark-enter {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .cd-coach-mark::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--cd-card-bg, #ffffff);
    transform: rotate(45deg);
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.04);
  }
  .cd-coach-mark--arrow-top::before {
    top: -7px;
    right: 1.25rem;
  }
  .cd-coach-mark--arrow-bottom::before {
    bottom: -7px;
    right: 1.25rem;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.04);
  }
  .cd-coach-mark-body {
    padding: 14px 16px 10px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .cd-coach-mark-icon {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-text-primary) 8%, transparent);
    }
    color: var(--cd-text-primary);
    font-size: 14px;
  }
  .cd-coach-mark-icon-progress {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
    overflow: visible;
  }
  .cd-coach-mark-icon-progress circle {
    fill: none;
    stroke: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--cd-text-primary) 35%, transparent);
    }
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 94.248;
    stroke-dashoffset: 0;
    animation: cd-coach-mark-ring-countdown 5s linear forwards;
  }
  @keyframes cd-coach-mark-ring-countdown {
    from {
      stroke-dashoffset: 0;
    }
    to {
      stroke-dashoffset: 94.248;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-coach-mark-icon-progress circle {
      animation: none;
      stroke-dashoffset: 94.248;
    }
  }
  .cd-coach-mark-title {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0 0 2px 0;
    line-height: 1.3;
  }
  .cd-coach-mark-description {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
    line-height: 1.5;
    margin: 0;
  }
  .cd-coach-mark-footer {
    padding: 2px 16px 10px;
    display: flex;
    justify-content: flex-end;
  }
  .cd-coach-mark-dismiss {
    font-size: var(--cd-text-xs);
    font-weight: 500;
    color: var(--cd-color-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
  }
  .cd-coach-mark-dismiss:hover {
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 8%, transparent);
    }
  }
  .cd-coach-mark-dismiss:focus-visible {
    outline: 2px solid var(--cd-color-accent);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-coach-mark {
      animation: none;
    }
  }
  .cd-province-hint-pulse {
    position: relative;
  }
  .cd-province-hint-pulse::after {
    content: '';
    position: absolute;
    inset: calc(var(--spacing) * 0);
    border-radius: var(--radius-lg);
    animation: cd-province-pulse 2s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes cd-province-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-province-hint-pulse::after {
      animation: none;
    }
  }
  .cd-province-hint-mobile {
    position: fixed;
    right: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: 50;
    overflow: hidden;
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 5);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 5);
    --tw-shadow: 0 -8px 30px var(--tw-shadow-color, rgba(0,0,0,0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: 1.25rem 1.25rem 0 0;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .cd-province-hint-mobile::before {
    content: '';
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 4);
    display: block;
    height: calc(var(--spacing) * 1);
    width: calc(var(--spacing) * 10);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-300);
    position: relative;
    z-index: 2;
  }
  .cd-province-hint-mobile-leaf {
    position: absolute;
    right: -1.5rem;
    bottom: -1rem;
    transform: rotate(-25deg);
    font-size: 13rem;
    color: rgba(0, 0, 0, 0.04);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
  }
  .cd-province-hint-mobile-header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }
  .cd-province-hint-mobile-title {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }
  .cd-province-hint-mobile-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    position: relative;
    z-index: 1;
  }
  .cd-province-hint-mobile-pill {
    cursor: pointer;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .cd-province-hint-mobile-pill:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    border-color: var(--color-blue-300);
    background-color: var(--color-blue-50);
    color: var(--color-blue-700);
  }
  @keyframes cd-modal-slide-in {
    from {
      opacity: 0;
      transform: translateY(-1.25rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes bounce-gentle {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  @keyframes ping-slow {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    75%, 100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-bounce-gentle {
    animation: bounce-gentle 2s ease-in-out infinite;
  }
  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
    opacity: 0;
  }
  .animation-delay-200 {
    animation-delay: 0.2s;
  }
  .animation-delay-400 {
    animation-delay: 0.4s;
  }
  [data-step] {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  [data-step].step-exit {
    opacity: 0;
    transform: translateX(-20px);
  }
  [data-step].step-enter {
    opacity: 0;
    transform: translateX(20px);
  }
  .cd-modal-content::-webkit-scrollbar {
    width: calc(var(--spacing) * 2);
  }
  .cd-modal-content::-webkit-scrollbar-track {
    border-radius: 0.25rem;
    background-color: var(--cd-bg-secondary);
  }
  .cd-modal-content::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    background-color: var(--cd-bg-tertiary);
  }
  .cd-modal-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--cd-bg-tertiary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-bg-tertiary) 70%, var(--cd-text-tertiary));
    }
  }
  .cd-modal-reviews .cd-modal-content {
    max-width: 70vw;
    height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .cd-modal-reviews .cd-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .cd-modal-reviews .tab-content-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .cd-modal-reviews .tab-content-scroll:hover {
    scrollbar-color: var(--cd-border-secondary) transparent;
  }
  .cd-modal-reviews .tab-content-scroll::-webkit-scrollbar {
    width: 4px;
  }
  .cd-modal-reviews .tab-content-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .cd-modal-reviews .tab-content-scroll::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
  }
  .cd-modal-reviews .tab-content-scroll:hover::-webkit-scrollbar-thumb {
    background-color: var(--cd-border-secondary);
  }
  .cd-modal-reviews .rating-breakdown {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 4);
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
  }
  .cd-modal-reviews .professional-summary {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
    --tw-gradient-to: color-mix(in oklab, var(--color-trust-blue) 5%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
  }
  .cd-modal-reviews .loading-content {
    animation: var(--animate-pulse);
    border-radius: 0.25rem;
    background-color: var(--cd-bg-tertiary);
  }
  @media (max-width: 768px) {
    .cd-modal-reviews .cd-modal-content {
      max-width: 95vw;
      height: 90vh;
      margin-inline: calc(var(--spacing) * 2);
    }
  }
  @media (max-width: 639px) {
    .cd-modal-reviews .cd-modal-body {
      padding: 0.5rem;
    }
  }
  .cd-modal-portfolio .cd-modal-content {
    max-width: 70vw;
    height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .cd-modal-portfolio .cd-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .cd-modal-portfolio .portfolio-content-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .cd-modal-portfolio .portfolio-content-scroll::-webkit-scrollbar {
    width: calc(var(--spacing) * 2);
  }
  .cd-modal-portfolio .portfolio-content-scroll::-webkit-scrollbar-track {
    border-radius: 0.25rem;
    background-color: var(--cd-bg-secondary);
  }
  .cd-modal-portfolio .portfolio-content-scroll::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    background-color: var(--cd-bg-tertiary);
  }
  .cd-modal-portfolio .portfolio-content-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--cd-bg-tertiary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-bg-tertiary) 70%, var(--cd-text-tertiary));
    }
  }
  .cd-modal-portfolio .aspect-video {
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: var(--cd-border-primary);
  }
  @media (max-width: 768px) {
    .cd-modal-portfolio .cd-modal-content {
      max-width: 95vw;
      height: 90vh;
      margin-inline: calc(var(--spacing) * 2);
    }
  }
  .cd-modal-welcome .cd-modal-content {
    max-height: 90vh;
    max-width: var(--container-2xl);
    overflow-y: auto;
  }
  .cd-modal-welcome .cd-modal-body {
    padding: calc(var(--spacing) * 6);
  }
  .cd-modal-welcome .cd-modal-close {
    background-color: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-bg-secondary) 90%, transparent);
    }
    backdrop-filter: blur(8px);
    color: var(--cd-text-tertiary);
    border: 1px solid var(--cd-border-primary);
    box-shadow: var(--cd-shadow-sm);
  }
  .cd-modal-welcome .cd-modal-close:hover {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-modal-welcome .cd-welcome-illustration {
    -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 90%);
    mask-image: radial-gradient(ellipse at center, black 60%, transparent 90%);
  }
  @media (max-width: 768px) {
    .cd-modal-welcome {
      align-items: flex-start;
      padding-top: calc(var(--cd-navbar-height) + 0.5rem);
    }
    .cd-modal-welcome .cd-modal-content {
      margin-inline: calc(var(--spacing) * 2);
      display: flex;
      max-width: 95vw;
      flex-direction: column;
      min-height: calc(100vh - var(--cd-navbar-height) - 56px - 4rem);
      max-height: calc(100vh - var(--cd-navbar-height) - 56px - 4rem);
    }
    .cd-modal-welcome .cd-modal-close {
      top: calc(var(--spacing) * 2);
      right: calc(var(--spacing) * 2);
    }
    .cd-modal-welcome .cd-modal-body {
      flex: 1 0 auto;
    }
  }
  .cd-modal-comparison .cd-modal-content {
    max-width: var(--container-6xl);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .cd-modal-comparison .cd-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  @media (max-width: 768px) {
    .cd-modal-comparison .cd-modal-content {
      margin-inline: calc(var(--spacing) * 2);
      max-width: 95vw;
    }
  }
  .cd-comparison-card {
    border: 1px solid var(--cd-border-primary);
  }
  .cd-modal-crop .cd-modal-body {
    padding: calc(var(--spacing) * 0);
  }
  .cd-crop-container {
    padding: calc(var(--spacing) * 4);
  }
  .cd-crop-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--cd-bg-secondary);
    max-height: 60vh;
  }
  .cd-crop-wrapper img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
  }
  .cd-modal-crop .cropper-view-box {
    outline: 2px solid var(--cd-color-science-blue);
    outline-offset: -2px;
  }
  .cd-modal-crop .cropper-point {
    background-color: var(--cd-color-science-blue);
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    opacity: 1;
  }
  .cd-modal-crop .cropper-line {
    background-color: var(--cd-color-science-blue);
  }
  .cd-modal-crop .cropper-dashed {
    border-color: var(--cd-color-science-blue);
  }
  .cd-crop-instructions {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--cd-text-secondary);
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-modal-content {
      animation: none !important;
    }
    .animate-bounce-gentle, .animate-ping-slow, .animate-fade-in-up {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    [data-step], .cd-province-card, .cd-modal-close {
      transition: none !important;
    }
    .cd-province-card:hover {
      transform: none !important;
    }
  }
  .cd-modal-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .cd-modal-loading-eyebrow {
    font-family: var(--cd-font-editorial);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cd-text-secondary);
  }
  .cd-modal-loading-message {
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-modal-loading-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
  }
  .cd-modal-loading-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background-color: var(--cd-color-science-blue);
    animation: cd-modal-loading-wave 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite both;
  }
  .cd-modal-loading-dot:nth-child(2) {
    animation-delay: 0.16s;
  }
  .cd-modal-loading-dot:nth-child(3) {
    animation-delay: 0.32s;
  }
  @keyframes cd-modal-loading-wave {
    0%, 70%, 100% {
      transform: translateY(0) scale(1);
      opacity: 0.35;
    }
    35% {
      transform: translateY(-0.45rem) scale(1.25);
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-modal-loading-dot {
      animation: none;
      opacity: 0.6;
    }
  }
}
.cd-modal-client-detail .cd-modal-content {
  max-width: 90vw;
  width: 90vw;
  height: 85vh;
  min-height: 85vh;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cd-modal-client-detail .cd-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cd-border-secondary);
}
.cd-modal-client-detail .cd-modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}
.cd-modal-client-detail .client-modal-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 1.5rem;
}
.cd-modal-client-detail .cd-modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--cd-border-secondary);
}
.cd-modal-client-detail .cd-tabs-nav-underline {
  position: sticky;
  top: 0;
  background: var(--cd-bg-primary);
  z-index: 10;
  padding-top: 0.5rem;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .cd-modal-client-detail .cd-modal-content {
    max-width: 95vw;
    width: 95vw;
    height: 90vh;
    min-height: 90vh;
    max-height: 90vh;
  }
  .cd-modal-client-detail .cd-modal-header {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}
.cd-modal-plan-change .cd-modal-content {
  max-width: 44rem;
}
.cd-modal-plan-change .cd-modal-body > p.mb-6 {
  margin-bottom: 0;
}
.cd-plan-change-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cd-plan-change-modal-subtitle {
  font-size: var(--cd-text-sm, 0.875rem);
  color: var(--cd-text-secondary, #6b7280);
  margin: -0.25rem 0 0.25rem;
  line-height: 1.4;
}
.cd-plan-change-upsell-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 720px) {
  .cd-plan-change-upsell-grid {
    grid-template-columns: 1fr;
  }
}
.cd-plan-change-upsell-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--cd-bg-primary, #ffffff);
  border: 1px solid var(--cd-border-primary, #e5e5e7);
  border-radius: var(--cd-radius-xl, 0.75rem);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--cd-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.08));
}
.cd-plan-change-upsell-card-current::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.15) 60%, transparent 100%);
  pointer-events: none;
  animation: cdPlanShimmer 4s ease-out infinite 1s;
}
.cd-plan-change-upsell-card-new {
  border-color: var(--cd-tier-primary, #d1d5db);
  background: linear-gradient(160deg, var(--cd-bg-primary, #ffffff) 0%, var(--cd-tier-secondary, #f9fafb) 100%);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 10px 20px -5px var(--cd-tier-primary, #d1d5db), 0 20px 40px -10px var(--cd-tier-primary, #d1d5db);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 10px 20px -5px color-mix(in srgb, var(--cd-tier-primary, #d1d5db) 20%, transparent), 0 20px 40px -10px color-mix(in srgb, var(--cd-tier-primary, #d1d5db) 12%, transparent);
  }
}
.cd-plan-change-upsell-card-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, var(--cd-tier-secondary, #fef9e7) 40%, var(--cd-tier-secondary, #fef9e7) 50%, var(--cd-tier-secondary, #fef9e7) 60%, transparent 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(115deg, transparent 0%, color-mix(in srgb, var(--cd-tier-secondary, #fef9e7) 60%, transparent) 40%, color-mix(in srgb, var(--cd-tier-secondary, #fef9e7) 90%, transparent) 50%, color-mix(in srgb, var(--cd-tier-secondary, #fef9e7) 60%, transparent) 60%, transparent 100%);
  }
  pointer-events: none;
  animation: cdPlanShimmer 5s ease-out infinite;
}
@keyframes cdPlanShimmer {
  from {
    transform: translateX(-100%) skewX(-15deg);
  }
  to {
    transform: translateX(700%) skewX(-15deg);
  }
}
.cd-plan-change-upsell-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.cd-plan-change-upsell-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--cd-radius-lg, 0.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--cd-bg-secondary, #f9fafb);
  color: var(--cd-text-secondary, #6b7280);
  font-size: 1rem;
}
.cd-plan-change-upsell-card-new .cd-plan-change-upsell-icon {
  background: linear-gradient(135deg, var(--cd-tier-primary, #d1d5db), var(--cd-tier-accent, #d1d5db));
  color: #ffffff;
  box-shadow: 0 4px 12px var(--cd-tier-primary, #d1d5db);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-tier-primary, #d1d5db) 30%, transparent);
  }
}
.cd-plan-change-upsell-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--cd-text-tertiary, #9ca3af);
  margin-bottom: 0.125rem;
}
.cd-plan-change-upsell-card-new .cd-plan-change-upsell-eyebrow {
  color: var(--cd-tier-text, var(--cd-tier-primary, #6b7280));
}
.cd-plan-change-upsell-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cd-text-primary, #1d1d1f);
  line-height: 1.2;
}
.cd-plan-change-upsell-price-wrap {
  line-height: 1;
}
.cd-plan-change-upsell-price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--cd-text-primary, #1d1d1f);
  font-variant-numeric: tabular-nums;
}
.cd-plan-change-upsell-card-new .cd-plan-change-upsell-price {
  color: var(--cd-tier-text, var(--cd-tier-primary, #1d1d1f));
}
.cd-plan-change-upsell-price-period {
  font-size: var(--cd-text-xs, 0.78rem);
  color: var(--cd-text-secondary, #6b7280);
  font-weight: 500;
  font-family: var(--cd-font-primary, system-ui, sans-serif);
}
.cd-plan-change-upsell-billing {
  margin-top: 0.25rem;
  font-size: var(--cd-text-xs, 0.78rem);
  color: var(--cd-text-secondary, #6b7280);
  font-weight: 500;
}
.cd-plan-change-upsell-features {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cd-plan-change-upsell-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--cd-text-sm, 0.875rem);
  color: var(--cd-text-secondary, #6b7280);
  line-height: 1.35;
}
.cd-plan-change-upsell-card-new .cd-plan-change-upsell-features li {
  color: var(--cd-text-primary, #1d1d1f);
}
.cd-plan-change-upsell-features li i {
  width: 0.875rem;
  color: var(--membership-core-primary, #2f855a);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.cd-plan-change-upsell-card-new .cd-plan-change-upsell-features li i {
  color: var(--cd-tier-primary, #2f855a);
}
.cd-plan-change-upsell-progress {
  width: 100%;
  height: 6px;
  border-radius: var(--cd-radius-full, 9999px);
  background: var(--cd-border-primary, #e5e5e7);
  overflow: hidden;
  margin-top: auto;
}
.cd-plan-change-upsell-progress-fill {
  height: 100%;
  border-radius: var(--cd-radius-full, 9999px);
  background: var(--cd-color-warning, #f59e0b);
  width: 35%;
}
.cd-plan-change-upsell-card-new .cd-plan-change-upsell-progress-fill {
  background: var(--cd-tier-primary, #d4af37);
  width: 100%;
}
.cd-plan-change-upsell-charged-today {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--cd-radius-lg, 0.5rem);
  background: var(--cd-tier-secondary, #fef9e7);
  color: var(--cd-tier-text, var(--cd-tier-primary, #8b6914));
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid var(--cd-tier-primary, #d4af37);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--cd-tier-primary, #d4af37) 30%, transparent);
  }
}
.cd-plan-change-upsell-charged-today-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cd-plan-change-upsell-charged-today-label i {
  color: var(--cd-tier-primary, #d4af37);
}
.cd-plan-change-upsell-charged-today-amount {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.cd-plan-change-error {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  background: var(--cd-color-crimson-red, #dc2626);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--cd-color-crimson-red, #dc2626) 8%, transparent);
  }
  border: 1px solid var(--cd-color-crimson-red, #dc2626);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--cd-color-crimson-red, #dc2626) 25%, transparent);
  }
  color: var(--cd-color-crimson-red, #dc2626);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}
.cd-plan-change-error-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  margin-top: 0.1rem;
}
.cd-plan-change-error-text {
  flex: 1;
  font-weight: 500;
}
@media (max-width: 540px) {
  .cd-plan-change-upsell-card {
    padding: 1rem;
    gap: 0.625rem;
  }
  .cd-plan-change-upsell-price {
    font-size: 1.3rem;
  }
  .cd-plan-change-upsell-charged-today {
    padding: 0.625rem 0.875rem;
    font-size: 0.85rem;
  }
}
@layer components {
  .cd-modal-pdf-viewer .cd-modal-content {
    max-width: 90vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .cd-modal-pdf-viewer .cd-modal-body {
    flex: 1;
    padding: calc(var(--spacing) * 0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }
  .cd-modal-pdf-viewer .cd-modal-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    flex-shrink: 0;
  }
  .cd-pdf-viewer {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
  .cd-pdf-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-athens-gray);
    flex-shrink: 0;
  }
  .cd-pdf-toolbar-left, .cd-pdf-toolbar-center, .cd-pdf-toolbar-right {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .cd-pdf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: color-mix(in srgb, #0066cc 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 30%, transparent);
      }
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    cursor: pointer;
    border: none;
    background: transparent;
  }
  .cd-pdf-btn:disabled {
    cursor: not-allowed;
    opacity: 50%;
    &:hover {
      @media (hover: hover) {
        background-color: transparent;
      }
    }
  }
  .cd-pdf-btn-download {
    background-color: var(--color-shark);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
    text-decoration: none;
  }
  .cd-pdf-page-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
  }
  .cd-pdf-page-input {
    width: calc(var(--spacing) * 12);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-science-blue);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: color-mix(in srgb, #0066cc 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 30%, transparent);
      }
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    -moz-appearance: textfield;
  }
  .cd-pdf-page-input::-webkit-inner-spin-button, .cd-pdf-page-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .cd-pdf-page-separator {
    margin-inline: calc(var(--spacing) * 1);
    color: var(--color-gray-400);
  }
  .cd-pdf-total-pages {
    color: var(--color-gray-600);
  }
  .cd-pdf-zoom-select {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &:focus {
      border-color: var(--color-science-blue);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: color-mix(in srgb, #0066cc 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 30%, transparent);
      }
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    cursor: pointer;
  }
  .cd-pdf-canvas-container {
    flex: 1;
    overflow: auto;
    background-color: var(--color-gray-100);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--spacing) * 4);
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .cd-pdf-canvas {
    background-color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    display: none;
    max-width: 100%;
    height: auto;
  }
  .cd-pdf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--spacing) * 12);
  }
  .cd-pdf-canvas-container::-webkit-scrollbar {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
  }
  .cd-pdf-canvas-container::-webkit-scrollbar-track {
    border-radius: 0.25rem;
    background-color: var(--color-athens-gray);
  }
  .cd-pdf-canvas-container::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    background-color: var(--color-gray-300);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-400);
      }
    }
  }
  @media (max-width: 640px) {
    .cd-modal-pdf-viewer .cd-modal-content {
      margin-inline: calc(var(--spacing) * 1);
      max-width: 98vw;
      height: 95vh;
    }
    .cd-pdf-toolbar {
      gap: calc(var(--spacing) * 1);
      padding-inline: calc(var(--spacing) * 2);
      padding-block: calc(var(--spacing) * 1.5);
    }
    .cd-pdf-toolbar-center {
      order: 9999;
      margin-top: calc(var(--spacing) * 1);
      width: 100%;
      justify-content: center;
    }
    .cd-pdf-btn {
      padding-inline: calc(var(--spacing) * 2);
      padding-block: calc(var(--spacing) * 1);
    }
    .cd-pdf-canvas-container {
      padding: calc(var(--spacing) * 2);
    }
  }
  @media (min-width: 641px) and (max-width: 1024px) {
    .cd-modal-pdf-viewer .cd-modal-content {
      max-width: 95vw;
      height: 90vh;
    }
  }
}
@layer components {
  .cd-lightbox-modal .cd-modal-backdrop, .cd-lightbox-modal .cd-modal-backdrop-overlay {
    background-color: rgba(9, 9, 11, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .cd-lightbox-modal .cd-modal-content, .cd-lightbox-modal .cd-modal-content-overlay {
    background-color: transparent;
    color: #fff;
  }
  .cd-lightbox-modal .cd-modal-body {
    padding: 0;
    color: #fff;
  }
  .cd-lightbox {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    user-select: none;
    color: #fff;
  }
  .cd-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 40;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  }
  .cd-lightbox-close:hover {
    background-color: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
  }
  .cd-lightbox-close:focus-visible {
    outline: 2px solid var(--cd-color-accent);
    outline-offset: 2px;
  }
  .cd-lightbox-close i {
    font-size: 1rem;
  }
  .cd-lightbox-stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 3rem 4.5rem 1rem;
  }
  .cd-lightbox-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
  }
  .cd-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 255, 255, 0.04);
    animation: cd-lightbox-fade 160ms ease-out;
  }
  @keyframes cd-lightbox-fade {
    from {
      opacity: 0;
      transform: scale(0.985);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .cd-lightbox-counter-pill {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
  }
  .cd-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .cd-lightbox-nav:hover {
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.06);
  }
  .cd-lightbox-nav:focus-visible {
    outline: 2px solid var(--cd-color-accent);
    outline-offset: 2px;
  }
  .cd-lightbox-nav i {
    font-size: 1.125rem;
  }
  .cd-lightbox-nav-prev {
    left: 1rem;
  }
  .cd-lightbox-nav-next {
    right: 1rem;
  }
  .cd-lightbox-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1.25rem;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0) 100% );
  }
  .cd-lightbox-caption {
    max-width: 72ch;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cd-lightbox-counter {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
  }
  .cd-lightbox-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.25rem 0.25rem 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }
  .cd-lightbox-strip::-webkit-scrollbar {
    height: 6px;
  }
  .cd-lightbox-strip::-webkit-scrollbar-track {
    background: transparent;
  }
  .cd-lightbox-strip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }
  .cd-lightbox-strip::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
  }
  .cd-lightbox-thumb {
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.04);
    opacity: 0.6;
    cursor: pointer;
    scroll-snap-align: center;
    transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .cd-lightbox-thumb:hover {
    opacity: 1;
  }
  .cd-lightbox-thumb:focus-visible {
    outline: 2px solid var(--cd-color-accent);
    outline-offset: 2px;
  }
  .cd-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cd-lightbox-thumb.is-active {
    opacity: 1;
    border-color: var(--cd-color-accent);
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  }
  @media (max-width: 640px) {
    .cd-lightbox-stage {
      padding: 3.25rem 0.5rem 0.5rem;
    }
    .cd-lightbox-nav {
      width: 2.5rem;
      height: 2.5rem;
    }
    .cd-lightbox-nav-prev {
      left: 0.5rem;
    }
    .cd-lightbox-nav-next {
      right: 0.5rem;
    }
    .cd-lightbox-close {
      top: 0.5rem;
      right: 0.5rem;
      width: 2.25rem;
      height: 2.25rem;
    }
    .cd-lightbox-thumb {
      width: 3.25rem;
      height: 3.25rem;
    }
    .cd-lightbox-caption {
      font-size: 0.8125rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-lightbox-image {
      animation: none;
    }
    .cd-lightbox-nav, .cd-lightbox-close, .cd-lightbox-thumb {
      transition: none;
    }
    .cd-lightbox-nav:hover, .cd-lightbox-close:hover {
      transform: translateY(-50%);
    }
    .cd-lightbox-close:hover {
      transform: none;
    }
    .cd-lightbox-thumb.is-active {
      transform: none;
    }
    .cd-lightbox-strip {
      scroll-behavior: auto;
    }
  }
}
@layer components {
  .cd-container {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
  }
  .cd-container-sm {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
  }
  .cd-container-xl {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
  }
  .cd-container-2xl {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cd-space-4);
    padding-right: var(--cd-space-4);
  }
  .cd-section {
    margin-bottom: var(--cd-space-12);
  }
}
@layer components {
  .cd-profile-container {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .cd-profile-info {
    min-width: calc(var(--spacing) * 0);
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .cd-tab-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .cd-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: var(--cd-radius-lg);
    overflow: hidden;
    flex-shrink: 0;
  }
  .cd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cd-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cd-radius-lg);
    width: 100%;
    height: 100%;
    font-family: var(--cd-font-editorial);
    background-color: var(--cd-color-shark) !important;
    color: var(--cd-color-white) !important;
  }
  .cd-avatar-header-wrapper {
    border-radius: var(--cd-radius-2xl);
    flex-shrink: 0;
    transition: transform 300ms ease;
    cursor: pointer;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
  }
  .cd-avatar-header-wrapper:hover {
    transform: scale(1.05);
  }
  .cd-avatar-header-wrapper[data-profile-pull-logo] {
    transform-origin: center top;
  }
  .cd-avatar-header-wrapper[data-profile-pull-logo].cd-profile-logo-pulling {
    z-index: 2;
    will-change: transform;
  }
  .cd-avatar-header-wrapper--no-link {
    cursor: default;
  }
  .cd-avatar-header-wrapper--no-link:hover, .cd-avatar-header-wrapper--no-link.active:hover, .cd-avatar-header-wrapper--no-link.inactive:hover, .cd-avatar-header.cd-avatar-header-wrapper--no-link.active:hover, .cd-avatar-header.cd-avatar-header-wrapper--no-link.inactive:hover {
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-avatar-header-wrapper[data-profile-pull-logo] {
      transition-duration: 1ms;
    }
  }
  @media (min-width: 768px) {
    .cd-avatar-header-wrapper {
      width: 5.5rem;
      height: 5.5rem;
    }
  }
  @media (min-width: 1024px) {
    .cd-avatar-header-wrapper {
      width: 6rem;
      height: 6rem;
    }
  }
  .cd-avatar-header-wrapper.active, .cd-avatar-header.cd-avatar-header-wrapper.active {
    box-shadow: var(--cd-shadow-xl), 0 10px 40px -10px var(--cd-color-success), 0 4px 25px -5px var(--cd-color-success) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-shadow-xl), 0 10px 40px -10px color-mix(in srgb, var(--cd-color-success) 35%, transparent), 0 4px 25px -5px color-mix(in srgb, var(--cd-color-success) 20%, transparent) !important;
    }
    transition: none !important;
  }
  .cd-avatar-header-wrapper.active:hover, .cd-avatar-header.cd-avatar-header-wrapper.active:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 45px -10px var(--cd-color-success), 0 6px 30px -5px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 15px 45px -10px color-mix(in srgb, var(--cd-color-success) 40%, transparent), 0 6px 30px -5px color-mix(in srgb, var(--cd-color-success) 25%, transparent);
    }
  }
  .cd-avatar-header-wrapper.inactive, .cd-avatar-header.cd-avatar-header-wrapper.inactive {
    box-shadow: var(--cd-shadow-lg), 0 10px 40px -10px var(--cd-text-secondary), 0 4px 25px -5px var(--cd-text-secondary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-shadow-lg), 0 10px 40px -10px color-mix(in srgb, var(--cd-text-secondary) 30%, transparent), 0 4px 25px -5px color-mix(in srgb, var(--cd-text-secondary) 15%, transparent) !important;
    }
    position: relative;
    opacity: 0.65;
    filter: grayscale(20%) contrast(0.9);
    transition: transform 300ms ease, opacity 0.2s ease, filter 0.2s ease;
  }
  .cd-avatar-header-wrapper.inactive::before, .cd-avatar-header.cd-avatar-header-wrapper.inactive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-text-primary) 75%, transparent);
    }
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
    transition: background 0.2s ease;
  }
  .cd-avatar-header-wrapper.inactive:hover, .cd-avatar-header.cd-avatar-header-wrapper.inactive:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 45px -10px var(--cd-text-secondary), 0 6px 30px -5px var(--cd-text-secondary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 15px 45px -10px color-mix(in srgb, var(--cd-text-secondary) 35%, transparent), 0 6px 30px -5px color-mix(in srgb, var(--cd-text-secondary) 20%, transparent) !important;
    }
    opacity: 0.8;
    filter: grayscale(10%) contrast(0.95);
  }
  .cd-avatar-header-wrapper.inactive:hover::before, .cd-avatar-header.cd-avatar-header-wrapper.inactive:hover::before {
    background: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-text-primary) 60%, transparent);
    }
  }
  .cd-avatar-header-inner {
    width: 100%;
    height: 100%;
    border-radius: var(--cd-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    max-width: 4.5rem;
    max-height: 4.5rem;
  }
  .cd-avatar-header-inner.cd-avatar-placeholder {
    background-color: var(--cd-color-shark) !important;
    color: var(--cd-color-white) !important;
  }
  @media (min-width: 768px) {
    .cd-avatar-header-inner {
      max-width: 5.5rem;
      max-height: 5.5rem;
    }
  }
  @media (min-width: 1024px) {
    .cd-avatar-header-inner {
      max-width: 6rem;
      max-height: 6rem;
    }
  }
  .cd-avatar-header-icon {
    color: #d1d5db;
    position: absolute;
    opacity: 0.3;
    font-size: var(--cd-text-2xl);
  }
  @media (min-width: 640px) {
    .cd-avatar-header-icon {
      font-size: var(--cd-text-3xl);
    }
  }
  @media (min-width: 1024px) {
    .cd-avatar-header-icon {
      font-size: var(--cd-text-4xl);
    }
  }
  .cd-avatar-header-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 10;
    border-radius: inherit;
  }
  .cd-avatar-header-initials {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    position: relative;
    z-index: 20;
    letter-spacing: 0.025em;
    font-size: var(--cd-text-xl);
    color: var(--cd-color-white) !important;
  }
  @media (min-width: 640px) {
    .cd-avatar-header-initials {
      font-size: var(--cd-text-2xl);
    }
  }
  @media (min-width: 1024px) {
    .cd-avatar-header-initials {
      font-size: var(--cd-text-3xl);
    }
  }
  .cd-profile-header-title {
    font-weight: 700;
    margin-bottom: var(--cd-space-2);
    line-height: 1.25;
    margin-top: 0;
    font-size: var(--cd-text-2xl);
    color: var(--cd-text-primary);
  }
  @media (min-width: 640px) {
    .cd-profile-header-title {
      font-size: var(--cd-text-3xl);
    }
  }
  @media (min-width: 1024px) {
    .cd-profile-header-title {
      font-size: var(--cd-text-4xl);
    }
  }
  .cd-profile-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-4);
    margin-bottom: var(--cd-space-4);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  @media (min-width: 768px) {
    .cd-profile-header-meta {
      gap: 1.618rem;
      font-size: var(--cd-text-sm);
    }
  }
  .cd-profile-header-meta-item {
    display: flex;
    align-items: center;
    gap: 0.618rem;
  }
  .cd-title-status-row {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    margin-bottom: var(--cd-space-2);
    flex-wrap: wrap;
  }
  @media (min-width: 768px) {
    .cd-title-status-row {
      gap: var(--cd-space-3);
    }
  }
  .cd-specialty-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-2);
  }
  .cd-specialty-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-left: var(--cd-space-3);
    padding-right: var(--cd-space-3);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    border-radius: var(--cd-radius-full);
    font-weight: 500;
    font-size: var(--cd-text-xs);
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-dark);
    white-space: nowrap;
  }
  @media (min-width: 768px) {
    .cd-specialty-tag {
      padding-left: var(--cd-space-3);
      padding-right: var(--cd-space-3);
      padding-top: 0.375rem;
      padding-bottom: 0.375rem;
      gap: var(--cd-space-2);
      font-size: var(--cd-text-sm);
    }
  }
  .cd-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-left: var(--cd-space-2);
    padding-right: var(--cd-space-2);
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    border-radius: var(--cd-radius-full);
    font-weight: 500;
    flex-shrink: 0;
    font-size: var(--cd-text-xs);
  }
  @media (min-width: 768px) {
    .cd-status-badge {
      gap: 0.375rem;
      padding-left: var(--cd-space-3);
      padding-right: var(--cd-space-3);
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      font-size: var(--cd-text-sm);
    }
  }
  .cd-status-indicator {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    border: 3px solid white;
    border-radius: var(--cd-radius-full);
  }
  .cd-status-indicator-active {
    background-color: var(--cd-color-success);
    box-shadow: 0 0 0 2px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-success) 20%, transparent);
    }
  }
  .cd-status-indicator-inactive {
    background-color: var(--cd-color-error);
    box-shadow: 0 0 0 2px var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-error) 20%, transparent);
    }
  }
  .cd-status-indicator-available {
    background-color: var(--cd-color-success);
    box-shadow: 0 0 0 2px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-success) 20%, transparent);
    }
    animation: statusPulse 2s ease-in-out infinite;
  }
  .cd-status-indicator-busy {
    background-color: var(--cd-warning-orange);
    box-shadow: 0 0 0 2px var(--cd-warning-orange);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-warning-orange) 20%, transparent);
    }
  }
  .cd-status-indicator-emergency_only {
    background-color: var(--cd-color-error);
    box-shadow: 0 0 0 2px var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-color-error) 20%, transparent);
    }
  }
  .cd-status-indicator-away, .cd-status-indicator-custom {
    background-color: var(--cd-text-tertiary);
    box-shadow: 0 0 0 2px var(--cd-text-tertiary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-text-tertiary) 20%, transparent);
    }
  }
  @keyframes statusPulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }
  .cd-profile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
    width: 100%;
    align-items: stretch;
  }
  @media (min-width: 640px) {
    .cd-profile-actions {
      width: auto;
      align-items: stretch;
    }
  }
  @media (min-width: 1024px) {
    .cd-profile-actions {
      flex-shrink: 0;
      align-self: flex-start;
    }
  }
  .cd-btn-profile {
    padding-left: var(--cd-space-6);
    padding-right: var(--cd-space-6);
    padding-top: var(--cd-space-3);
    padding-bottom: var(--cd-space-3);
    border-radius: var(--cd-radius-xl);
    font-weight: 600;
    gap: var(--cd-space-2);
    font-size: var(--cd-text-sm);
  }
  @media (max-width: 639px) {
    .cd-btn-profile {
      width: 100%;
      padding-left: var(--cd-space-4);
      padding-right: var(--cd-space-4);
      padding-top: 0.625rem;
      padding-bottom: 0.625rem;
      border-radius: var(--cd-radius-lg);
      gap: 0.375rem;
      font-size: var(--cd-text-xs);
    }
  }
  @media (min-width: 640px) {
    .cd-btn-profile {
      width: auto;
      min-width: 160px;
    }
  }
  @media (min-width: 1024px) {
    .cd-btn-profile {
      width: 180px;
    }
  }
  .cd-premium-card {
    background-color: var(--cd-bg-card);
    border: 2px solid var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--cd-color-info) 30%, transparent);
    }
    box-shadow: 0 0 0 1px var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--cd-color-info) 10%, transparent);
    }
  }
  .cd-premium-crown {
    font-size: var(--cd-text-xl);
    color: var(--cd-color-info);
    filter: drop-shadow(0 2px 4px var(--cd-color-info));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--cd-color-info) 30%, transparent));
    }
    animation: goldGlow 3s ease-in-out infinite alternate;
  }
  @keyframes goldGlow {
    from {
      filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--cd-color-info) 30%, transparent));
    }
    to {
      filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--cd-color-info) 50%, transparent));
    }
  }
  .cd-deactivated-card {
    opacity: 0.7;
    filter: grayscale(0.3);
  }
  .cd-profile-section-title {
    font-weight: 700;
    margin-bottom: var(--cd-space-4);
    font-size: var(--cd-text-xl);
    color: var(--cd-text-primary);
  }
  .cd-profile-subsection-title {
    font-weight: 600;
    margin-bottom: var(--cd-space-2);
    color: var(--cd-text-primary);
  }
  .cd-profile-text {
    line-height: 1.625;
    margin-bottom: var(--cd-space-4);
    color: var(--cd-text-secondary);
  }
  .cd-info-card {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
  }
  .cd-info-icon {
    width: 1.25rem;
    color: var(--cd-text-tertiary);
  }
  .cd-info-text {
    font-weight: 500;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
  }
  .cd-icon-box {
    width: 2rem;
    height: 2rem;
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cd-bg-secondary);
  }
  .cd-icon-box-icon {
    color: var(--cd-text-secondary);
  }
  .cd-availability-label {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    color: var(--cd-text-secondary);
  }
  .cd-profile-card {
    margin-bottom: calc(var(--spacing) * 0);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    background-color: var(--cd-bg-card);
    padding: calc(var(--spacing) * 3);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-sm));
    backdrop-filter: blur(10px);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .cd-profile-card--ruled {
    border-bottom: 2px solid var(--cd-text-primary);
  }
  .cd-profile-identity-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    margin-left: auto;
    text-align: right;
  }
  .cd-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.72rem;
    border-radius: 9999px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
  }
  .cd-profile-lang-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    color: var(--cd-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
  }
  .cd-profile-lang-line > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .cd-profile-lang-primary {
    color: var(--cd-color-warning);
    font-size: 0.6rem;
  }
  .cd-profile-lang-sep {
    color: var(--cd-text-tertiary);
  }
  .cd-header-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--cd-text-secondary);
    text-decoration: none;
    margin-bottom: 0.4rem;
    transition: color 0.15s;
  }
  .cd-header-breadcrumb:hover {
    color: var(--cd-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .cd-header-breadcrumb i {
    font-size: 0.7rem;
  }
  .cd-profile-card-avatar {
    max-width: calc(var(--spacing) * 22);
    min-width: calc(var(--spacing) * 15);
    overflow: hidden;
    border-radius: var(--radius-xl);
  }
  .cd-profile-card-avatar-container {
    position: relative;
    display: block;
  }
  .cd-profile-card-info {
    display: flex;
    flex: 1 0 13rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: calc(var(--spacing) * 1);
  }
  .cd-profile-card-profession-badge {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      display: flex;
    }
    flex-basis: 100%;
  }
  .cd-profile-card-info-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: calc(var(--spacing) * 2);
  }
  .cd-profile-card-info-text {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    font-weight: 500;
    line-height: 1.2;
  }
  .cd-profile-card-info-text-icon {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    padding: var(--cd-space-1_5) var(--cd-space-3);
    white-space: nowrap;
    background-color: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-full);
    color: var(--cd-text-secondary);
  }
  .cd-profile-card-info-text-icon i {
    font-size: 0.78rem;
    color: var(--cd-text-secondary);
  }
  .cd-profile-card-info-text-icon .fa-star {
    color: var(--cd-color-warning);
  }
  .cd-profile-card-info-text-icon--warning i {
    color: var(--cd-color-warning);
  }
  .cd-profile-card-info-text-icon--danger i {
    color: var(--cd-color-error);
  }
  .cd-profile-card-info-text-icon--success i {
    color: var(--cd-color-success);
  }
  .cd-profile-card.cd-profile-card-flat {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0.5rem;
  }
  .cd-profile-card.cd-profile-card-flat.cd-profile-card-with-banner {
    border-radius: var(--cd-radius-2xl);
    padding: var(--cd-space-3);
  }
  .cd-profile-card--identity .cd-profile-card-info {
    gap: var(--cd-space-2_5);
  }
  .cd-profile-card--identity .cd-profile-identity-title {
    font-family: var(--cd-font-editorial);
    font-size: var(--cd-text-5xl);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    font-feature-settings: "ss01" 1;
  }
  .cd-profile-header-actions {
    margin-left: auto;
  }
  .cd-profile-card--identity .cd-profile-card-info-block .cd-badge-soft-trust {
    padding: var(--cd-space-1_5) var(--cd-space-3);
  }
  .cd-profile-card--identity .cd-profile-card-profession-badge {
    gap: var(--cd-space-2);
    margin-top: var(--cd-space-3);
  }
  .cd-profile-card--identity .cd-profile-card-profession-badge .cd-badge {
    padding: var(--cd-space-1_5) var(--cd-space-3);
    font-size: var(--cd-text-sm);
  }
  .cd-profile-card--identity .cd-profile-card-profession-badge .cd-badge i {
    color: var(--cd-text-tertiary);
  }
  @media (min-width: 640px) {
    .cd-profile-card--identity .cd-avatar-header-wrapper {
      width: 6.5rem;
      height: 6.5rem;
    }
    .cd-profile-card--identity .cd-avatar-header-inner {
      max-width: 6.5rem;
      max-height: 6.5rem;
    }
    .cd-profile-card--identity .cd-profile-card-avatar-container {
      order: 1;
    }
    .cd-profile-card--identity .cd-profile-card-info {
      order: 2;
      flex: 1 1 0;
      min-width: 0;
    }
    .cd-profile-card--identity .cd-profile-identity-aside {
      order: 3;
      flex: 0 0 auto;
      max-width: min(22rem, 42vw);
      margin-left: auto;
    }
    .cd-profile-card--identity .cd-profile-identity-aside .cd-profile-header-actions {
      order: 4;
      flex: 0 1 auto;
      width: auto;
      max-width: 100%;
      margin-left: 0;
      padding-left: 0;
      justify-content: flex-end;
    }
    .cd-profile-card--identity .cd-profile-card-profession-badge {
      order: 4;
    }
  }
  @media (min-width: 1024px) {
    .cd-profile-card--identity .cd-avatar-header-wrapper {
      width: 7rem;
      height: 7rem;
    }
    .cd-profile-card--identity .cd-avatar-header-inner {
      max-width: 7rem;
      max-height: 7rem;
    }
    .cd-profile-card--identity .cd-profile-identity-aside .cd-profile-header-actions {
      padding-left: 0;
    }
  }
  @media (min-width: 640px) {
    .cd-profile-card--stretch-avatar .cd-avatar-header-wrapper {
      width: 6.5rem;
      height: 6.5rem;
    }
    .cd-profile-card--stretch-avatar .cd-avatar-header-inner {
      max-width: 6.5rem;
      max-height: 6.5rem;
    }
  }
  @media (min-width: 1024px) {
    .cd-profile-card--stretch-avatar .cd-avatar-header-wrapper {
      width: 7rem;
      height: 7rem;
    }
    .cd-profile-card--stretch-avatar .cd-avatar-header-inner {
      max-width: 7rem;
      max-height: 7rem;
    }
  }
  .cd-profile-card--stretch-avatar .cd-profile-card-info {
    align-self: stretch;
    justify-content: space-between;
  }
  .cd-profile-card--stretch-avatar .cd-profile-card-info > p {
    margin-bottom: var(--cd-space-1);
  }
  @media (max-width: 640px) {
    .cd-profile-card--identity {
      flex-direction: column;
      align-items: stretch;
      gap: var(--cd-space-2);
    }
    .cd-profile-card--identity .cd-profile-card-avatar-container {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .cd-profile-card--identity .cd-profile-identity-title {
      font-size: var(--cd-text-3xl);
      text-align: center;
    }
    .cd-profile-card-info {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      align-items: center;
    }
    .cd-profile-card:not(.cd-profile-card--identity) .cd-profile-card-avatar-container {
      margin-inline: auto;
    }
    .cd-profile-card-info .cd-heading-primary {
      min-width: 0;
      word-break: break-word;
    }
    .cd-profile-card--identity .cd-profile-identity-aside {
      width: 100%;
      max-width: none;
      margin-left: 0;
      flex: 0 0 auto;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      text-align: center;
    }
    .cd-profile-card--identity .cd-profile-lang-line {
      min-width: 0;
      max-width: 100%;
      justify-content: center;
      gap: 0.3rem;
      font-size: 0.72rem;
      line-height: 1.2;
      text-align: center;
    }
    .cd-profile-card--identity .cd-status-pill {
      padding: 0.28rem 0.58rem;
      font-size: 0.65rem;
      letter-spacing: 0.04em;
      white-space: nowrap;
      align-self: center;
    }
    .cd-profile-card--identity .cd-profile-identity-aside .cd-profile-header-actions {
      flex: 0 0 auto;
      width: 100%;
      justify-content: center;
      margin-left: 0;
      padding-left: 0;
    }
    .cd-profile-card--identity .cd-profile-card-info-text-icon {
      padding: 0.2rem 0.5rem;
      gap: 0.25rem;
    }
    .cd-profile-card--identity .cd-profile-card-info-text {
      font-size: 0.7rem;
    }
    .cd-profile-card--identity .cd-profile-card-info-text-icon i {
      font-size: 0.65rem;
    }
    .cd-profile-card--identity .cd-profile-card-info-block .cd-badge-compact {
      padding: 0.2rem 0.5rem;
      font-size: 0.7rem;
    }
    .cd-profile-card-info-block {
      gap: 0.375rem;
      justify-content: center;
    }
  }
  .cd-profile-card-with-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
  }
  .cd-profile-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, var(--cd-bg-card) 0%, var(--cd-bg-card) 50%, var(--cd-bg-card) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( to top, color-mix(in srgb, var(--cd-bg-card) 85%, transparent) 0%, color-mix(in srgb, var(--cd-bg-card) 50%, transparent) 50%, color-mix(in srgb, var(--cd-bg-card) 25%, transparent) 100% );
    }
    z-index: 0;
    border-radius: inherit;
  }
  .cd-profile-card-content {
    position: relative;
    z-index: 1;
  }
  .cd-status-dot::after {
    content: '';
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: var(--cd-radius-full);
    background: var(--cd-color-success);
    border: 3px solid white;
    animation: pulse-green 2s infinite;
    z-index: 10;
  }
  @keyframes pulse-green {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--cd-color-success) 70%, transparent);
    }
    70% {
      box-shadow: 0 0 0 10px color-mix(in srgb, var(--cd-color-success) 0%, transparent);
    }
    100% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--cd-color-success) 0%, transparent);
    }
  }
  .cd-service-card {
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-6);
    background-color: var(--cd-bg-card);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
  }
  .cd-service-icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cd-bg-secondary);
  }
  .cd-profile-action-bar {
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-3) var(--cd-space-4);
    background-color: var(--cd-bg-card);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    box-shadow: var(--cd-panel-shadow);
  }
  .cd-profile-action-bar-link {
    color: var(--cd-text-secondary);
    padding: var(--cd-space-1) var(--cd-space-2);
    border-radius: var(--cd-radius-md);
    transition: color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
  }
  .cd-profile-action-bar-link:hover {
    color: var(--cd-color-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-profile-action-bar-divider {
    color: var(--cd-border-secondary);
    user-select: none;
    padding: 0 var(--cd-space-1);
  }
}
@property --cd-trust-gauge-fill {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@layer components {
  .cd-trust-gauge {
    --cd-trust-gauge-size: 7rem;
    --cd-trust-gauge-thickness: 0.5rem;
    --cd-trust-gauge-fill: 0%;
    --cd-trust-gauge-color: var(--cd-text-tertiary);
    --cd-trust-gauge-track: var(--cd-bg-tertiary);
    --cd-trust-gauge-bg: var(--cd-bg-primary);
    width: var(--cd-trust-gauge-size);
    height: var(--cd-trust-gauge-size);
    border-radius: 50%;
    background: conic-gradient( var(--cd-trust-gauge-color) 0 var(--cd-trust-gauge-fill), var(--cd-trust-gauge-track) var(--cd-trust-gauge-fill) 100% );
    display: grid;
    place-items: center;
    position: relative;
    transition: --cd-trust-gauge-fill 0.8s ease;
    flex-shrink: 0;
  }
  .cd-trust-gauge::before {
    content: '';
    position: absolute;
    inset: var(--cd-trust-gauge-thickness);
    background: var(--cd-trust-gauge-bg);
    border-radius: 50%;
  }
  .cd-trust-gauge__label {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
  }
  .cd-trust-gauge__score {
    color: var(--cd-text-primary);
  }
  .cd-trust-gauge__unit {
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-xs);
    margin-top: 0.125rem;
  }
  .cd-trust-gauge--sm {
    --cd-trust-gauge-size: 3.5rem;
    --cd-trust-gauge-thickness: 0.375rem;
  }
  .cd-trust-gauge--sm .cd-trust-gauge__score {
    font-size: var(--cd-text-sm);
  }
  .cd-trust-gauge--sm .cd-trust-gauge__unit {
    display: none;
  }
  .cd-trust-gauge--md {
    --cd-trust-gauge-size: 7rem;
    --cd-trust-gauge-thickness: 0.5rem;
  }
  .cd-trust-gauge--md .cd-trust-gauge__score {
    font-size: var(--cd-text-2xl);
  }
  .cd-trust-gauge--lg {
    --cd-trust-gauge-size: 9rem;
    --cd-trust-gauge-thickness: 0.4375rem;
  }
  .cd-trust-gauge--lg .cd-trust-gauge__score {
    font-size: var(--cd-text-3xl);
  }
  .cd-trust-gauge--highly-trusted {
    --cd-trust-gauge-color: var(--cd-color-trust);
  }
  .cd-trust-gauge--trusted {
    --cd-trust-gauge-color: var(--cd-color-success);
  }
  .cd-trust-gauge--basic {
    --cd-trust-gauge-color: var(--cd-color-accent);
  }
  .cd-trust-gauge--unverified {
    --cd-trust-gauge-color: var(--cd-text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-trust-gauge {
      transition: none;
    }
  }
}
@layer components {
  .cd-trust-editorial {
    display: grid;
    gap: 1.5rem;
    padding-bottom: 0.5rem;
  }
  .cd-trust-editorial .cd-editorial-eyebrow {
    margin: 0 0 0.5rem;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .cd-trust-editorial .cd-editorial-numeral, .cd-trust-editorial .cd-editorial-display {
    letter-spacing: 0;
  }
  .cd-trust-editorial .cd-trust-gauge {
    --cd-trust-gauge-bg: var(--cd-bg-primary, #ffffff);
  }
  .cd-trust-card {
    background: var(--cd-bg-primary, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 0.75rem);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    overflow: hidden;
  }
  .cd-trust-hero {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 2.25rem;
    align-items: center;
    padding: 2rem;
  }
  .cd-trust-hero-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-width: 0;
  }
  .cd-trust-hero-badge .cd-badge {
    min-height: 2.25rem;
    border-radius: var(--cd-radius-lg, 0.5rem);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
  }
  .cd-trust-hero-copy {
    min-width: 0;
  }
  .cd-trust-title {
    margin: 0;
    color: var(--cd-text-primary, #1d1d1f);
    font-family: var(--cd-font-editorial, Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
  }
  .cd-trust-lede {
    max-width: 46rem;
    margin: 0.5rem 0 0;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
  }
  .cd-trust-milestone {
    max-width: 36rem;
    margin-top: 1.125rem;
  }
  .cd-trust-milestone-bar {
    height: 0.625rem;
    overflow: hidden;
    border-radius: var(--cd-radius-full, 9999px);
    background: var(--cd-bg-tertiary, #e5e7eb);
  }
  .cd-trust-milestone-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cd-color-trust, #c2410c);
  }
  .cd-trust-milestone-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .cd-trust-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.125rem;
  }
  .cd-trust-updated {
    margin: 0;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .cd-trust-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0.75rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--cd-radius-lg, 0.5rem);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
  }
  .cd-trust-button:hover {
    transform: translateY(-1px);
  }
  .cd-trust-button-dark {
    background: var(--cd-text-primary, #1d1d1f);
    color: var(--cd-bg-primary, #ffffff);
  }
  .cd-trust-button-outline {
    background: transparent;
    border-color: var(--cd-text-primary, #1d1d1f);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-text-primary, #1d1d1f) 68%, transparent);
    }
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-trust-button-outline:hover {
    background: var(--cd-text-primary, #1d1d1f);
    color: var(--cd-bg-primary, #ffffff);
  }
  .cd-trust-best {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 2rem 2rem;
    padding: 1rem 1.125rem;
    border-radius: var(--cd-radius-lg, 0.5rem);
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-trust-best::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: -1.25rem;
    height: 1px;
    background: var(--cd-border-hairline, #ececec);
  }
  .cd-trust-best-copy {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
  }
  .cd-trust-best-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--cd-radius-lg, 0.5rem);
    background: var(--cd-text-primary, #1d1d1f);
    color: var(--cd-bg-primary, #ffffff);
    font-size: 1.125rem;
  }
  .cd-trust-best-text {
    min-width: 0;
  }
  .cd-trust-kicker {
    margin: 0 0 0.25rem;
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .cd-trust-best-title {
    margin: 0;
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.35;
  }
  .cd-trust-breakdown, .cd-trust-start {
    padding: 1.75rem 2rem 2rem;
  }
  .cd-trust-section-head {
    margin-bottom: 1.5rem;
  }
  .cd-trust-section-title {
    margin: 0;
    color: var(--cd-text-primary, #1d1d1f);
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
  }
  .cd-trust-metric-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .cd-trust-metric {
    display: grid;
    gap: 0.625rem;
    min-width: 0;
  }
  .cd-trust-metric-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
  }
  .cd-trust-metric-name {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.2;
  }
  .cd-trust-metric-name i {
    flex: 0 0 auto;
    width: 1.125rem;
    color: var(--cd-text-secondary, #6b7280);
    text-align: center;
  }
  .cd-trust-weight {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
  }
  .cd-trust-metric-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
  }
  .cd-trust-metric-status .cd-badge {
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--cd-radius-lg, 0.5rem);
    font-size: 0.8125rem;
  }
  .cd-trust-metric-value {
    min-width: 2.5rem;
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 1.125rem;
    text-align: right;
  }
  .cd-trust-meter {
    height: 0.5rem;
    overflow: hidden;
    border-radius: var(--cd-radius-full, 9999px);
    background: var(--cd-bg-tertiary, #e5e7eb);
  }
  .cd-trust-meter-fill {
    display: block;
    width: var(--cd-trust-meter-value, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--cd-trust-meter-color, var(--cd-color-success, #228b22));
    transition: width 0.35s ease;
  }
  .cd-trust-action-panel {
    display: grid;
    gap: 0.875rem;
    margin-top: 0.25rem;
    padding: 1rem 1.125rem;
    border-radius: var(--cd-radius-lg, 0.5rem);
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-trust-action-copy {
    margin: 0;
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .cd-trust-action-copy span {
    color: var(--cd-text-tertiary, #9ca3af);
    font-weight: 600;
  }
  .cd-trust-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
  }
  .cd-trust-projection-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cd-text-primary, #1d1d1f);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 750;
  }
  .cd-trust-projection-chevron {
    font-size: 0.625rem;
    transition: transform 0.15s ease;
  }
  .cd-trust-projection-chevron.is-open {
    transform: rotate(180deg);
  }
  .cd-trust-projections {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-trust-projection-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.8125rem;
    line-height: 1.45;
  }
  .cd-trust-projection-item > i {
    margin-top: 0.1875rem;
    color: var(--cd-color-success, #228b22);
    font-size: 0.6875rem;
  }
  .cd-trust-projection-item p {
    margin: 0;
  }
  .cd-trust-projection-label {
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-trust-projection-value {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
  }
  .cd-trust-evidence {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-trust-evidence .cd-trust-section-head {
    margin-bottom: 1rem;
  }
  .cd-trust-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
  }
  .cd-trust-evidence-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-trust-evidence-item.is-muted {
    opacity: 0.55;
  }
  .cd-trust-evidence-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: var(--cd-radius-full, 9999px);
    background: var(--cd-bg-tertiary, #e5e7eb);
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.6875rem;
  }
  .cd-trust-evidence-icon.is-success {
    background: var(--cd-color-success, #228b22);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success, #228b22) 14%, transparent);
    }
    color: var(--cd-color-success, #228b22);
  }
  .cd-trust-evidence-icon.is-pending {
    background: var(--cd-color-warning, #f59e0b);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning, #f59e0b) 14%, transparent);
    }
    color: var(--cd-color-warning, #f59e0b);
  }
  .cd-trust-evidence-label {
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 700;
  }
  .cd-trust-evidence-detail {
    margin-left: auto;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: right;
  }
  .cd-trust-empty {
    display: grid;
    justify-items: center;
    padding: 3rem 2rem;
    text-align: center;
  }
  .cd-trust-empty-icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: var(--cd-radius-full, 9999px);
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 1.5rem;
  }
  .cd-trust-start-list {
    display: grid;
    gap: 0.875rem;
  }
  .cd-trust-start-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border-radius: var(--cd-radius-lg, 0.5rem);
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-trust-start-title {
    margin: 0;
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.45;
  }
  .cd-trust-start-reason {
    margin: 0.25rem 0 0;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
  }
  @media (max-width: 760px) {
    .cd-trust-hero {
      grid-template-columns: 1fr;
      gap: 1.25rem;
      padding: 1.5rem 1.25rem;
      text-align: center;
    }
    .cd-trust-hero-actions {
      align-items: center;
    }
    .cd-trust-milestone {
      margin-right: auto;
      margin-left: auto;
    }
    .cd-trust-best {
      flex-direction: column;
      align-items: stretch;
      margin: 1.25rem 1.25rem 1.5rem;
    }
    .cd-trust-best .cd-trust-button {
      width: 100%;
    }
    .cd-trust-breakdown, .cd-trust-start {
      padding: 1.5rem 1.25rem;
    }
    .cd-trust-metric-head {
      align-items: flex-start;
      flex-direction: column;
      gap: 0.625rem;
    }
    .cd-trust-metric-status {
      width: 100%;
      margin-left: 0;
      justify-content: space-between;
    }
    .cd-trust-evidence-grid {
      grid-template-columns: 1fr;
    }
    .cd-trust-start-item {
      align-items: stretch;
      flex-direction: column;
    }
    .cd-trust-start-item .cd-trust-button {
      width: 100%;
    }
  }
  @media (max-width: 420px) {
    .cd-trust-action-row .cd-trust-button {
      width: 100%;
    }
    .cd-trust-best-copy {
      align-items: flex-start;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-trust-button, .cd-trust-meter-fill, .cd-trust-projection-chevron {
      transition: none;
    }
    .cd-trust-button:hover {
      transform: none;
    }
  }
}
@layer components {
  .cd-avatar-rounded, .cd-avatar-rounded-md, .cd-avatar-rounded-sm, .cd-avatar-rounded-xs {
    width: var(--avatar-size, 5rem);
    height: var(--avatar-size, 5rem);
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 150ms;
    border-radius: var(--avatar-radius, 0.75rem);
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: var(--avatar-shadow, 0 4px 15px -5px var(--cd-text-primary)) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--avatar-shadow, 0 4px 15px -5px color-mix(in srgb, var(--cd-text-primary) 10%, transparent)) !important;
    }
  }
  .cd-avatar-rounded {
    --avatar-size: 5rem;
    --avatar-radius: 0.75rem;
    --avatar-shadow: 0 4px 15px -5px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --avatar-shadow: 0 4px 15px -5px color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
    }
  }
  @media (min-width: 768px) {
    .cd-avatar-rounded {
      --avatar-size: 6rem;
    }
  }
  @media (min-width: 1024px) {
    .cd-avatar-rounded {
      --avatar-size: 7rem;
    }
  }
  .cd-avatar-rounded-md {
    --avatar-size: 3rem;
    --avatar-radius: 0.75rem;
    --avatar-shadow: 0 4px 15px -5px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --avatar-shadow: 0 4px 15px -5px color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
    }
  }
  @media (min-width: 640px) {
    .cd-avatar-rounded-md {
      --avatar-size: 3.5rem;
    }
  }
  .cd-avatar-rounded-sm {
    --avatar-size: 2.5rem;
    --avatar-radius: 0.75rem;
    --avatar-shadow: 0 4px 15px -5px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --avatar-shadow: 0 4px 15px -5px color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
    }
  }
  @media (min-width: 640px) {
    .cd-avatar-rounded-sm {
      --avatar-size: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .cd-avatar-rounded-sm {
      --avatar-size: 3.5rem;
    }
  }
  .cd-avatar-rounded-xs {
    --avatar-size: 2rem;
    --avatar-radius: 0.5rem;
    --avatar-shadow: 0 2px 10px -3px var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --avatar-shadow: 0 2px 10px -3px color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
    }
  }
  @media (min-width: 640px) {
    .cd-avatar-rounded-xs {
      --avatar-size: 2.25rem;
    }
  }
  @media (min-width: 1024px) {
    .cd-avatar-rounded-xs {
      --avatar-size: 2.5rem;
    }
  }
  .cd-avatar-rounded:hover, .cd-avatar-rounded-sm:hover, .cd-avatar-rounded-md:hover, .cd-avatar-rounded-xs:hover {
    transform: scale(1.05) translateY(-2px) !important;
  }
  .cd-avatar-rounded.active, .cd-avatar-rounded-sm.active, .cd-avatar-rounded-md.active, .cd-avatar-rounded-xs.active {
    box-shadow: 0 10px 40px -10px var(--cd-color-success), 0 4px 25px -5px var(--cd-color-success) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--cd-color-success) 35%, transparent), 0 4px 25px -5px color-mix(in srgb, var(--cd-color-success) 20%, transparent) !important;
    }
  }
  .cd-avatar-rounded.active:hover, .cd-avatar-rounded-sm.active:hover, .cd-avatar-rounded-md.active:hover, .cd-avatar-rounded-xs.active:hover {
    box-shadow: 0 15px 45px -10px var(--cd-color-success), 0 6px 30px -5px var(--cd-color-success) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 15px 45px -10px color-mix(in srgb, var(--cd-color-success) 40%, transparent), 0 6px 30px -5px color-mix(in srgb, var(--cd-color-success) 25%, transparent) !important;
    }
  }
  .cd-avatar-rounded.inactive, .cd-avatar-rounded-sm.inactive, .cd-avatar-rounded-md.inactive, .cd-avatar-rounded-xs.inactive {
    box-shadow: 0 10px 40px -10px var(--cd-text-secondary), 0 4px 25px -5px var(--cd-text-secondary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--cd-text-secondary) 30%, transparent), 0 4px 25px -5px color-mix(in srgb, var(--cd-text-secondary) 15%, transparent) !important;
    }
    position: relative;
    opacity: 0.65;
    filter: grayscale(20%) contrast(0.9);
  }
  .cd-avatar-rounded.inactive::before, .cd-avatar-rounded-sm.inactive::before, .cd-avatar-rounded-md.inactive::before, .cd-avatar-rounded-xs.inactive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-text-primary) 75%, transparent);
    }
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
    transition: all 0.2s ease;
  }
  .cd-avatar-rounded.inactive:hover, .cd-avatar-rounded-sm.inactive:hover, .cd-avatar-rounded-md.inactive:hover, .cd-avatar-rounded-xs.inactive:hover {
    box-shadow: 0 15px 45px -10px var(--cd-text-secondary), 0 6px 30px -5px var(--cd-text-secondary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 15px 45px -10px color-mix(in srgb, var(--cd-text-secondary) 35%, transparent), 0 6px 30px -5px color-mix(in srgb, var(--cd-text-secondary) 20%, transparent) !important;
    }
    opacity: 0.8;
    filter: grayscale(10%) contrast(0.95);
  }
  .cd-avatar-rounded.inactive:hover::before, .cd-avatar-rounded-sm.inactive:hover::before, .cd-avatar-rounded-md.inactive:hover::before, .cd-avatar-rounded-xs.inactive:hover::before {
    background: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-text-primary) 60%, transparent);
    }
  }
  .cd-avatar-rounded img, .cd-avatar-rounded-sm img, .cd-avatar-rounded-md img, .cd-avatar-rounded-xs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: inherit !important;
  }
  a.cd-avatar-rounded.no-image, a.cd-avatar-rounded-sm.no-image, a.cd-avatar-rounded-md.no-image, a.cd-avatar-rounded-xs.no-image, div.cd-avatar-rounded.no-image, div.cd-avatar-rounded-sm.no-image, div.cd-avatar-rounded-md.no-image, div.cd-avatar-rounded-xs.no-image, .cd-avatar-with-favorite .cd-avatar-rounded.no-image, .cd-avatar-with-favorite .cd-avatar-rounded-sm.no-image, .cd-avatar-with-favorite .cd-avatar-rounded-md.no-image, .cd-avatar-with-favorite .cd-avatar-rounded-xs.no-image,  .cd-sidebar .cd-avatar-rounded.no-image, .cd-sidebar .cd-avatar-rounded-sm.no-image, .cd-sidebar .cd-avatar-rounded-md.no-image, .cd-sidebar .cd-avatar-rounded-xs.no-image, [data-theme] .cd-sidebar .cd-avatar-rounded.no-image, [data-theme] .cd-sidebar .cd-avatar-rounded-sm.no-image, [data-theme] .cd-sidebar .cd-avatar-rounded-md.no-image, [data-theme] .cd-sidebar .cd-avatar-rounded-xs.no-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    background: var(--cd-color-shark) !important;
    color: var(--cd-color-white) !important;
  }
  .cd-avatar-rounded.no-image {
    font-size: var(--cd-text-2xl);
  }
  .cd-avatar-rounded-md.no-image {
    font-size: var(--cd-text-xl);
  }
  .cd-avatar-rounded-sm.no-image {
    font-size: var(--cd-text-xs);
  }
  @media (min-width: 640px) {
    .cd-avatar-rounded-sm.no-image {
      font-size: var(--cd-text-sm);
    }
  }
  @media (min-width: 1024px) {
    .cd-avatar-rounded-sm.no-image {
      font-size: var(--cd-text-base);
    }
  }
  .cd-avatar-rounded-xs.no-image {
    font-size: var(--cd-text-xs);
  }
  .cd-avatar-rounded.cd-trust-ring, .cd-avatar-rounded-md.cd-trust-ring, .cd-avatar-rounded-sm.cd-trust-ring, .cd-avatar-rounded-xs.cd-trust-ring, .cd-avatar-header-wrapper.cd-trust-ring {
    outline-style: solid;
    outline-offset: 2px;
    transition: transform 150ms, outline-color 0.25s ease;
  }
  .cd-trust-ring-trusted {
    outline-width: 2.5px;
    outline-color: var(--cd-color-forest-green);
  }
  .cd-trust-ring-highly-trusted {
    outline-width: 3px;
    outline-color: var(--cd-color-premium-gold, #d4af37);
  }
  .cd-avatar-with-favorite:has(.cd-trust-ring-highly-trusted) {
    filter: drop-shadow(0 0 6px var(--cd-color-premium-gold, #d4af37));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cd-color-premium-gold, #d4af37) 30%, transparent));
    }
  }
  .cd-avatar-upload-preview {
    width: 6rem;
    height: 6rem;
    border-radius: var(--cd-radius-xl);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #d1d5db;
    transition: all 200ms;
    background-color: var(--cd-color-athens-gray) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 4px 15px -5px var(--cd-text-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 15px -5px color-mix(in srgb, var(--cd-text-primary) 10%, transparent) !important;
    }
  }
  @media (min-width: 640px) {
    .cd-avatar-upload-preview {
      width: 7rem;
      height: 7rem;
    }
  }
  .cd-avatar-upload-preview:hover {
    border-color: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-science-blue) 40%, transparent);
    }
    background-color: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-science-blue) 5%, transparent);
    }
    transform: scale(1.02);
  }
  .cd-avatar-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: inherit !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .cd-avatar-upload-preview i {
    font-size: var(--cd-text-4xl);
    color: var(--cd-text-secondary);
    position: relative;
    z-index: 5;
  }
  .cd-avatar-upload-preview.has-image {
    border-style: solid;
    border-color: #e5e7eb;
    background: none !important;
  }
  .cd-avatar-upload-preview.has-image i {
    display: none;
  }
}
@layer components {
  .cd-avatar-stack {
    display: flex;
    align-items: center;
  }
  .cd-avatar-stack > .cd-avatar-with-favorite {
    margin-left: calc(var(--spacing) * -2);
    &:first-child {
      margin-left: calc(var(--spacing) * 0);
    }
    transition: transform 150ms;
  }
  .cd-avatar-stack > .cd-avatar-with-favorite:hover {
    z-index: 10;
    transform: translateY(-2px);
  }
  .cd-avatar-stack .cd-avatar-rounded-xs {
    box-shadow: 0 0 0 2px #fff, var(--avatar-shadow) !important;
  }
  .cd-avatar-stack-more {
    margin-left: calc(var(--spacing) * -2);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-100);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-white);
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;
  }
  @media (min-width: 640px) {
    .cd-avatar-stack-more {
      width: 2.25rem;
      height: 2.25rem;
    }
  }
  @media (min-width: 1024px) {
    .cd-avatar-stack-more {
      width: 2.5rem;
      height: 2.5rem;
    }
  }
}
@layer components {
  .cd-avatar-with-favorite {
    position: relative;
  }
  .cd-favorite-heart-indicator {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: white;
    border-radius: var(--cd-radius-full);
    box-shadow: var(--cd-shadow-lg);
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 300ms;
    transform: scale(0);
    opacity: 0;
    z-index: 10;
  }
  .cd-favorite-heart-indicator.active {
    transform: scale(1);
    opacity: 1;
    display: flex;
  }
  .cd-favorite-heart-indicator i {
    font-size: var(--cd-text-sm);
    color: var(--cd-color-error);
  }
  .cd-avatar-rounded-xs + .cd-favorite-heart-indicator, .cd-avatar-rounded-xs .cd-favorite-heart-indicator {
    width: 1rem;
    height: 1rem;
    top: -0.125rem;
    right: -0.125rem;
  }
  .cd-avatar-rounded-xs + .cd-favorite-heart-indicator i, .cd-avatar-rounded-xs .cd-favorite-heart-indicator i {
    font-size: var(--cd-text-micro);
  }
  .cd-avatar-rounded-sm + .cd-favorite-heart-indicator, .cd-avatar-rounded-sm .cd-favorite-heart-indicator {
    width: 1.25rem;
    height: 1.25rem;
    top: -0.25rem;
    right: -0.25rem;
  }
  .cd-avatar-rounded-sm + .cd-favorite-heart-indicator i, .cd-avatar-rounded-sm .cd-favorite-heart-indicator i {
    font-size: var(--cd-text-xs);
  }
  .cd-avatar-rounded-md + .cd-favorite-heart-indicator, .cd-avatar-rounded-md .cd-favorite-heart-indicator {
    width: 1.5rem;
    height: 1.5rem;
    top: -0.25rem;
    right: -0.25rem;
  }
  .cd-avatar-rounded-md + .cd-favorite-heart-indicator i, .cd-avatar-rounded-md .cd-favorite-heart-indicator i {
    font-size: var(--cd-text-sm);
  }
  .cd-avatar-rounded + .cd-favorite-heart-indicator, .cd-avatar-rounded .cd-favorite-heart-indicator {
    width: 1.75rem;
    height: 1.75rem;
    top: -0.375rem;
    right: -0.375rem;
  }
  .cd-avatar-rounded + .cd-favorite-heart-indicator i, .cd-avatar-rounded .cd-favorite-heart-indicator i {
    font-size: var(--cd-text-base);
  }
  .cd-favorite-heart-indicator.entering {
    animation: heartPulse 0.3s ease-out forwards;
  }
  .cd-favorite-heart-indicator.leaving {
    animation: heartShrink 0.3s ease-in forwards;
  }
  @keyframes heartPulse {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.8;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes heartShrink {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }
  .cd-flying-heart {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 1rem;
    color: var(--cd-color-error);
    will-change: transform, opacity;
    transform-origin: center center;
  }
  .cd-flying-heart.animate {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.45s ease-out;
  }
}
@layer components {
  .cd-profile-card-premium {
    background: linear-gradient(135deg, #f8fbff 0%,  #fafcff 100%  );
    border: 2px solid var(--cd-color-primary) !important;
    box-shadow: 0 0 0 1px var(--cd-color-primary), 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 0 20px var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--cd-color-primary) 15%, transparent), 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 0 20px color-mix(in srgb, var(--cd-color-primary) 6%, transparent) !important;
    }
    transition: all 0.3s ease;
  }
  .cd-profile-card-premium:hover {
    border-color: var(--cd-color-primary) !important;
    box-shadow: 0 0 0 1px var(--cd-color-primary), 0 8px 16px -4px rgba(0, 0, 0, 0.15), 0 0 30px var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--cd-color-primary) 20%, transparent), 0 8px 16px -4px rgba(0, 0, 0, 0.15), 0 0 30px color-mix(in srgb, var(--cd-color-primary) 10%, transparent) !important;
    }
    transform: translateY(-2px);
  }
  .cd-profile-card-professional {
    background: linear-gradient(to bottom, var(--membership-professional-secondary), var(--membership-professional-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to bottom, var(--membership-professional-secondary), color-mix(in srgb, var(--membership-professional-secondary) 92%, var(--membership-professional-primary)));
    }
    border: 2px solid var(--membership-professional-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--membership-professional-primary) 70%, transparent) !important;
    }
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-profile-card-professional:hover {
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 3px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  .cd-profile-card-professional .cd-profile-name-link {
    color: var(--membership-professional-primary) !important;
  }
  .cd-profile-card-professional .cd-profile-name-link:hover {
    color: var(--membership-professional-text) !important;
  }
  .cd-profile-card-business {
    background: linear-gradient(to bottom, var(--membership-business-secondary), var(--membership-business-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to bottom, var(--membership-business-secondary), color-mix(in srgb, var(--membership-business-secondary) 92%, var(--membership-business-primary)));
    }
    border: 2px solid var(--membership-business-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--membership-business-primary) 70%, transparent) !important;
    }
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-profile-card-business:hover {
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 3px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  .cd-profile-card-business .cd-profile-name-link {
    color: var(--membership-business-text) !important;
  }
  .cd-profile-card-business .cd-profile-name-link:hover {
    color: var(--membership-business-accent) !important;
  }
  .cd-card.cd-profile-card-professional {
    background: linear-gradient(to bottom, var(--membership-professional-secondary), var(--membership-professional-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to bottom, var(--membership-professional-secondary), color-mix(in srgb, var(--membership-professional-secondary) 92%, var(--membership-professional-primary)));
    }
    border: 2px solid var(--membership-professional-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--membership-professional-primary) 70%, transparent) !important;
    }
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-card.cd-profile-card-professional:hover {
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 3px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }
  .cd-card.cd-profile-card-business {
    background: linear-gradient(to bottom, var(--membership-business-secondary), var(--membership-business-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to bottom, var(--membership-business-secondary), color-mix(in srgb, var(--membership-business-secondary) 92%, var(--membership-business-primary)));
    }
    border: 2px solid var(--membership-business-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--membership-business-primary) 70%, transparent) !important;
    }
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-card.cd-profile-card-business:hover {
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 3px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }
  :is(.dark, [data-theme="dark"]) .cd-profile-card-professional, :is(.dark, [data-theme="dark"]) .cd-card.cd-profile-card-professional {
    background: linear-gradient(to bottom, var(--membership-professional-secondary), var(--membership-professional-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to bottom, color-mix(in srgb, var(--membership-professional-secondary) 20%, var(--cd-card-bg)), color-mix(in srgb, var(--membership-professional-secondary) 15%, var(--cd-card-bg)));
    }
  }
  :is(.dark, [data-theme="dark"]) .cd-profile-card-business, :is(.dark, [data-theme="dark"]) .cd-card.cd-profile-card-business {
    background: linear-gradient(to bottom, var(--membership-business-secondary), var(--membership-business-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to bottom, color-mix(in srgb, var(--membership-business-secondary) 20%, var(--cd-card-bg)), color-mix(in srgb, var(--membership-business-secondary) 15%, var(--cd-card-bg)));
    }
  }
}
@layer components {
  .cd-demo-ribbon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 25;
    border-radius: var(--cd-radius-xl);
    transition: transform 0.2s ease;
  }
  .cd-demo-ribbon {
    position: absolute;
    top: 14px;
    left: -35px;
    width: 120px;
    padding: 5px 0;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 40%, transparent 100% ), linear-gradient( 135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100% );
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transform: rotate(-45deg);
    box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  .cd-demo-ribbon::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4px 0 0;
    border-color: #7f1d1d transparent transparent transparent;
  }
  .cd-demo-ribbon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 55%, transparent 100% );
    pointer-events: none;
  }
  .cd-avatar-with-favorite:hover .cd-demo-ribbon-wrapper {
    transform: scale(1.05);
  }
  @media (max-width: 767px) {
    .cd-demo-ribbon {
      top: 10px;
      left: -38px;
      width: 110px;
      padding: 4px 0;
      font-size: 0.55rem;
    }
    .cd-demo-ribbon::before {
      border-width: 3px 3px 0 0;
    }
  }
  .cd-demo-ribbon-wrapper-sm {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 25;
    border-radius: var(--cd-radius-lg);
    transition: transform 0.2s ease;
  }
  .cd-demo-ribbon-wrapper-sm .cd-demo-ribbon {
    top: 8px;
    left: -32px;
    width: 85px;
    padding: 2px 0;
    font-size: 0.5rem;
    letter-spacing: 0.5px;
  }
  .cd-demo-ribbon-wrapper-sm .cd-demo-ribbon::before {
    border-width: 3px 3px 0 0;
  }
  @media (max-width: 767px) {
    .cd-demo-ribbon-wrapper-sm .cd-demo-ribbon {
      top: 6px;
      left: -34px;
      width: 80px;
      padding: 2px 0;
      font-size: 0.45rem;
    }
    .cd-demo-ribbon-wrapper-sm .cd-demo-ribbon::before {
      border-width: 2px 2px 0 0;
    }
  }
}
@layer components {
  .cd-pcomp {
    padding: 0.875rem 1rem 0.75rem;
  }
  .cd-pcomp-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary);
  }
  .cd-pcomp-title {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.15;
    color: var(--cd-text-primary);
  }
  .cd-pcomp-sub {
    font-size: 0.875rem;
    color: var(--cd-text-secondary);
  }
  .cd-pcomp-next {
    font-weight: 600;
    color: var(--cd-color-primary);
  }
  .cd-pcomp-ring-track {
    fill: none;
    stroke: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--cd-color-primary) 12%, transparent);
    }
    stroke-width: 4;
  }
  .cd-pcomp-ring-fill {
    fill: none;
    stroke: var(--cd-color-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 97.4;
    stroke-dashoffset: calc(97.4 - 0.974 * var(--pct, 0));
  }
  .cd-pcomp-pct {
    font-size: 0.9rem;
    color: var(--cd-color-primary);
  }
  .cd-pcomp-chip {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.12));
  }
  .cd-pcomp-chip--locked {
    background: var(--cd-color-warning-orange);
  }
  .cd-pcomp-chip--progress {
    background: var(--cd-color-premium, #f59e0b);
  }
  .cd-pcomp-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
  }
  .cd-pcomp-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    width: calc(var(--pct, 0) * 1%);
    border-radius: 3px;
    background: var(--cd-color-primary);
  }
  .cd-pcomp-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.75rem;
    font-size: 0.75rem;
  }
  @media (min-width: 640px) {
    .cd-pcomp-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem 0.875rem;
    }
  }
  .cd-pcomp-chip-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--cd-text-secondary);
  }
  .cd-pcomp-chk {
    color: var(--cd-color-success);
  }
  .cd-pcomp-chk--off {
    color: var(--cd-text-tertiary);
  }
  .cd-pcomp-cap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cd-color-warning, var(--cd-color-warning-orange));
  }
  .cd-pcomp-list {
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-pcomp-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 -0.625rem;
    padding: 0.625rem;
    text-decoration: none;
    transition: background-color 0.18s ease;
  }
  .cd-pcomp-row + .cd-pcomp-row {
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-pcomp-row:hover {
    background: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-secondary) 70%, transparent);
    }
  }
  .cd-pcomp-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 1px solid var(--cd-border-primary);
    color: var(--cd-text-tertiary);
    font-size: 0.625rem;
    flex-shrink: 0;
  }
  .cd-pcomp-ico--req {
    color: var(--cd-color-error);
  }
  .cd-pcomp-name {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--cd-text-primary);
  }
  .cd-pcomp-desc {
    margin-top: 0.1rem;
    font-size: 0.75rem;
    color: var(--cd-text-tertiary);
  }
  .cd-pcomp-chevron {
    font-size: 0.625rem;
    color: var(--cd-text-tertiary);
    flex-shrink: 0;
    transition: transform 0.18s ease, color 0.18s ease;
  }
  .cd-pcomp-row:hover .cd-pcomp-chevron {
    transform: translateX(3px);
    color: var(--cd-color-primary);
  }
}
@layer components {
  .cd-working-hours-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cd-working-hours-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--cd-bg-subtle, #f9fafb);
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
  }
  .cd-working-hours-row:hover {
    background-color: var(--cd-bg-muted, #f3f4f6);
  }
  .cd-working-hours-day {
    width: 6rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--cd-text-primary, #1f2937);
    flex-shrink: 0;
  }
  .cd-working-hours-closed-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex-shrink: 0;
  }
  .cd-working-hours-closed-toggle span {
    font-size: 0.875rem;
    color: var(--cd-text-secondary, #6b7280);
    user-select: none;
  }
  .cd-working-hours-times {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-end;
    transition: opacity 0.15s ease;
  }
  .cd-working-hours-times-disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  .cd-working-hours-time {
    width: 7rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    text-align: center;
  }
  .cd-working-hours-toggle-card {
    padding: 1rem;
    background-color: var(--cd-bg-subtle, #f9fafb);
    border-radius: 0.5rem;
    border: 1px solid var(--cd-border-secondary, #e5e7eb);
  }
  .cd-working-hours-grid-disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .cd-working-hours-grid-disabled .cd-working-hours-row {
    background-color: var(--cd-bg-muted, #f3f4f6);
  }
  .cd-working-hours-disabled-notice {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--cd-bg-muted, #f3f4f6);
    border-radius: 0.5rem;
    border: 1px dashed var(--cd-border-secondary, #d1d5db);
  }
  @media (max-width: 640px) {
    .cd-working-hours-row {
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .cd-working-hours-day {
      width: 100%;
      margin-bottom: 0.25rem;
    }
    .cd-working-hours-closed-toggle {
      order: 1;
    }
    .cd-working-hours-times {
      order: 2;
      flex: 1;
      min-width: 200px;
    }
    .cd-working-hours-time {
      flex: 1;
      max-width: 100px;
    }
    .cd-working-hours-toggle-card {
      padding: 0.875rem;
    }
    .cd-working-hours-toggle-card .w-10 {
      width: 2rem;
      height: 2rem;
    }
    .cd-working-hours-disabled-notice {
      padding: 0.625rem 0.75rem;
    }
  }
}
@layer components {
  .cd-quote-urgency-urgent {
    animation: cd-pulse-urgent 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: center;
    will-change: transform, box-shadow;
  }
  @keyframes cd-pulse-urgent {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--cd-color-error) 45%, transparent);
    }
    50% {
      transform: scale(1.03);
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--cd-color-error) 0%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-quote-urgency-urgent {
      animation: none;
    }
  }
  .cd-project-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    padding-block: calc(var(--spacing) * 4);
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
        }
      }
    }
    &:focus {
      background-color: color-mix(in srgb, #0066cc 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: color-mix(in srgb, #0066cc 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
      }
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    border-radius: 0.5rem;
    margin: 0 -0.5rem;
    padding: 1rem 0.5rem;
    cursor: pointer;
  }
  .cd-project-title {
    margin-bottom: calc(var(--spacing) * 1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-shark);
  }
  .cd-project-item:focus .cd-project-title {
    color: var(--color-science-blue);
  }
  .cd-quote-status-active {
    position: relative;
  }
  .cd-quote-status-active.cd-quote-urgent::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--cd-color-warning-orange);
    border-radius: 50%;
    animation: cd-pulse-urgent 2s infinite;
  }
  .cd-quote-status-awaiting {
    position: relative;
  }
  .cd-quote-status-responses {
    position: relative;
  }
  .cd-empty-state-icon {
    display: inline-block;
    animation: cd-float 3s ease-in-out infinite;
  }
  @keyframes cd-float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  .cd-quote-rail {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-items: flex-start;
  }
  .cd-quote-rail__price {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
  }
  .cd-quote-rail__price-currency {
    font-size: 1rem;
    align-self: flex-start;
    margin-top: 0.4375rem;
  }
  .cd-quote-rail__price-integer {
    font-size: 2.75rem;
    color: var(--cd-text-primary);
  }
  .cd-quote-rail__price-integer--range {
    font-size: 2rem;
  }
  .cd-quote-rail__price-cents {
    font-size: 0.9rem;
    align-self: flex-start;
    margin-top: 0.4375rem;
  }
  .cd-quote-rail__price-dash {
    font-family: var(--cd-font-numeral);
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--cd-text-tertiary);
    margin: 0 0.375rem;
    align-self: center;
  }
  .cd-quote-rail__price--consultation {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cd-color-warning-orange);
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
  }
  .cd-quote-rail__estimate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--cd-color-science-blue);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-science-blue) 10%, transparent);
    }
    color: var(--cd-color-science-blue);
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
  }
  .cd-quote-rail__budget-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.6875rem;
    border-radius: 999px;
  }
  .cd-quote-rail__budget-chip--within {
    background: var(--cd-color-forest-green);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-forest-green) 10%, transparent);
    }
    color: var(--cd-color-forest-green);
  }
  .cd-quote-rail__budget-chip--over {
    background: var(--cd-color-crimson-red);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-crimson-red) 10%, transparent);
    }
    color: var(--cd-color-crimson-red);
  }
  .cd-quote-rail__budget-chip--under {
    background: var(--cd-color-warning-orange);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning-orange) 10%, transparent);
    }
    color: var(--cd-color-warning-orange);
  }
  .cd-quote-rail__meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.25rem;
    width: 100%;
  }
  .cd-quote-rail__meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--cd-text-secondary);
  }
  .cd-quote-rail__meta-row i {
    width: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--cd-text-tertiary);
    flex-shrink: 0;
  }
  @media (min-width: 640px) {
    .cd-quote-rail {
      padding-left: 1.25rem;
      border-left: 1px solid var(--cd-border-hairline);
      width: 220px;
      flex-shrink: 0;
    }
  }
  @media (max-width: 639px) {
    .cd-quote-rail {
      border-top: 1px solid var(--cd-border-hairline);
      padding-top: 0.875rem;
      margin-top: 0.5rem;
      width: 100%;
    }
  }
  .cd-question-response-icon {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
}
@layer components {
  .cd-quote-section {
    background: var(--cd-bg-card, #fff);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-xl, 1rem);
    overflow: hidden;
  }
  .cd-quote-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem 0.875rem;
    border-bottom: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  .cd-quote-section__title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .cd-quote-section__title {
    font-family: var(--cd-font-numeral, "Iowan Old Style", Georgia, serif);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-section__count {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-section__count strong {
    font-family: var(--cd-font-numeral, "Iowan Old Style", Georgia, serif);
    font-size: 1.05rem;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-section__status-pills {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .cd-quote-section__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--cd-bg-chip, #f1f1f3);
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .cd-quote-section__status-pill--active {
    background: rgba(0, 102, 204, 0.08);
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-section__status-pill--active::before {
    width: 0.375rem;
    height: 0.375rem;
    content: "";
    border-radius: 999px;
    background: currentColor;
  }
  .cd-quote-section__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  .cd-quote-section__tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
  }
  .cd-quote-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .cd-quote-filter-bar__label {
    margin-right: 0.125rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-quote-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 999px;
    background: var(--cd-bg-card, #fff);
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }
  .cd-quote-filter-chip:hover {
    color: var(--cd-text-primary, #1d1d1f);
    border-color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-filter-chip--active {
    background: var(--cd-color-shark, #1d1d1f);
    border-color: var(--cd-color-shark, #1d1d1f);
    color: #fff;
  }
  .cd-quote-filter-chip--active.cd-quote-filter-chip--warranty {
    background: var(--cd-color-forest-green, #228b22);
    border-color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-filter-chip--active.cd-quote-filter-chip--materials {
    background: var(--cd-color-science-blue, #0066cc);
    border-color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
  }
  .cd-quote-empty {
    grid-column: 1 / -1;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.85rem;
  }
  .cd-quote-empty__reset {
    margin-top: 0.5rem;
    padding: 0.4rem 0.875rem;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 0.5rem);
    background: transparent;
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
  }
  .cd-quote-empty__reset:hover {
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-quote-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  .cd-quote-card-actions__decision, .cd-quote-card-actions__readmore {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .cd-quote-card-actions__readmore {
    gap: 0.25rem;
  }
  .cd-quote-card-actions__divider {
    width: 1px;
    height: 1.125rem;
    margin: 0 0.25rem;
    background: var(--cd-border-primary, #e5e5e7);
  }
  .cd-quote-card-actions .cd-btn {
    min-height: 1.85rem;
    padding: 0.35rem 0.75rem;
    gap: 0.4rem;
    font-size: 0.78rem;
  }
  .cd-quote-card-actions .cd-btn i {
    font-size: 0.78rem;
  }
  .cd-quote-list-card--modal {
    padding: 0;
    background: transparent;
  }
  .cd-quote-list-card--modal:hover {
    background: transparent;
  }
  .cd-quote-list-card--modal .cd-quote-list-card__top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity price" "body     body";
    align-items: start;
    gap: 1.25rem 1.5rem;
  }
  .cd-quote-list-card--modal .cd-quote-list-card__id {
    grid-area: identity;
  }
  .cd-quote-list-card--modal .cd-quote-list-card__rail {
    grid-area: price;
  }
  .cd-quote-list-card--modal .cd-quote-list-card__body {
    grid-area: body;
  }
  .cd-quote-list-card__price-label {
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.78rem;
    font-weight: 500;
  }
  .cd-quote-modal-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  .cd-quote-modal-section__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.95rem;
    font-weight: 700;
  }
  .cd-quote-modal-section__body {
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .cd-quote-modal-attachment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 0.5rem);
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-quote-modal-attachment__info {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    color: var(--cd-text-primary, #1d1d1f);
    font-size: 0.9rem;
    font-weight: 600;
  }
  .cd-quote-modal-attachment__info i {
    color: var(--cd-color-crimson-red, #dc143c);
    font-size: 1.05rem;
  }
  .cd-quote-modal-attachment__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-quote-modal-attachment__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .cd-quote-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
  }
  .cd-quote-list-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.125rem;
    border-radius: var(--cd-radius-lg, 0.75rem);
    background: var(--cd-bg-card, #fff);
    transition: background-color 0.15s ease;
  }
  .cd-quote-list-card:hover {
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-quote-list-card + .cd-quote-list-card {
    border-top: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  .cd-quote-list-card--muted {
    opacity: 0.6;
  }
  .cd-quote-list-card--best {
    background: linear-gradient(90deg, rgba(34, 139, 34, 0.06), transparent 55%);
  }
  .cd-quote-list-card__top {
    display: grid;
    grid-template-columns: minmax(15rem, 0.95fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.125rem;
  }
  .cd-quote-list-card__id {
    min-width: 0;
  }
  .cd-quote-list-card__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.5rem;
  }
  .cd-quote-list-card__quote {
    display: -webkit-box;
    overflow: hidden;
    border-left: 2px solid var(--cd-border-primary, #e5e5e7);
    padding-left: 0.625rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.86rem;
    font-style: italic;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .cd-quote-list-card__quote--full {
    display: block;
    overflow: visible;
    font-size: 0.95rem;
    line-height: 1.6;
    -webkit-line-clamp: unset;
  }
  .cd-quote-list-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .cd-quote-list-card__tag, .cd-quote-table__attr {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    background: var(--cd-bg-chip, #f1f1f3);
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .cd-quote-list-card__tag {
    padding: 0.2rem 0.55rem;
  }
  .cd-quote-list-card__tag--warranty, .cd-quote-table__attr--warranty {
    background: rgba(34, 139, 34, 0.08);
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-list-card__tag--materials, .cd-quote-table__attr--materials {
    background: rgba(0, 102, 204, 0.08);
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-list-card__tag--fast, .cd-quote-table__attr--fast {
    background: rgba(255, 107, 53, 0.08);
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-quote-attachment-chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(220, 20, 60, 0.2);
    border-radius: 999px;
    background: rgba(220, 20, 60, 0.04);
    color: var(--cd-color-crimson-red, #dc143c);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .cd-quote-attachment-chip:hover {
    border-color: rgba(220, 20, 60, 0.36);
    background: rgba(220, 20, 60, 0.08);
  }
  .cd-quote-attachment-chip i {
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-quote-list-card__rail {
    display: flex;
    min-width: 8.25rem;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    text-align: right;
  }
  .cd-quote-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.08rem;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1;
  }
  .cd-quote-price__currency {
    position: relative;
    top: -0.35em;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.85rem;
  }
  .cd-quote-price__integer {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
  }
  .cd-quote-price__integer--range {
    font-size: 1.35rem;
  }
  .cd-quote-price__cents, .cd-quote-price__dash {
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.8rem;
    font-weight: 600;
  }
  .cd-quote-price--consultation {
    align-items: center;
    gap: 0.35rem;
    color: var(--cd-color-warning-orange, #ff6b35);
    font-size: 0.95rem;
    font-weight: 700;
  }
  .cd-quote-budget-pip, .cd-quote-best-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .cd-quote-budget-pip {
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-budget-pip--over {
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-quote-budget-pip--under {
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-quote-budget-pip--consultation {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-quote-best-badge {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--cd-color-forest-green, #228b22);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .cd-quote-best-badge--inline {
    padding: 0.1rem 0.45rem;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }
  .cd-quote-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    margin-bottom: 0.5rem;
  }
  .cd-quote-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.75rem;
  }
  .cd-quote-card__notice {
    border-radius: var(--cd-radius-md, 0.5rem);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    background: var(--cd-bg-secondary, #f5f5f7);
    padding: 0.625rem 0.75rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.8rem;
  }
  .cd-quote-card__notice--danger {
    border-color: rgba(220, 20, 60, 0.2);
    background: rgba(220, 20, 60, 0.06);
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-quote-card__notice--success {
    border-color: rgba(34, 139, 34, 0.22);
    background: rgba(34, 139, 34, 0.06);
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-quote-grid-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-xl, 1rem);
    background: var(--cd-bg-card, #fff);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-quote-grid-card:hover {
    border-color: #d4d4d6;
    box-shadow: var(--cd-shadow-md, 0 4px 12px -2px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
  }
  .cd-quote-grid-card--muted {
    opacity: 0.6;
  }
  .cd-quote-grid-card--best {
    border-color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-grid-card__identity {
    padding-right: 5rem;
  }
  .cd-quote-grid-card__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--cd-radius-md, 0.5rem);
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-quote-grid-card__price-row .cd-quote-price__integer {
    font-size: 1.95rem;
  }
  .cd-quote-grid-card__attrs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.78rem;
  }
  .cd-quote-grid-card__attr {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.4rem;
  }
  .cd-quote-grid-card__attrs i {
    width: 0.875rem;
    flex-shrink: 0;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.72rem;
  }
  .cd-quote-grid-card__attr--active {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
  }
  .cd-quote-grid-card__attr--active i {
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-grid-card__quote {
    display: -webkit-box;
    overflow: hidden;
    border-left: 2px solid var(--cd-border-primary, #e5e5e7);
    padding-left: 0.625rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .cd-quote-table {
    margin: 1rem;
    overflow: hidden;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-xl, 1rem);
    background: var(--cd-bg-card, #fff);
  }
  .cd-quote-table__head, .cd-quote-table__row {
    display: grid;
    grid-template-columns: minmax(14rem, 1.35fr) minmax(12rem, 1fr) minmax(8rem, 0.65fr) minmax(18rem, auto);
    gap: 1rem;
    align-items: center;
  }
  .cd-quote-table__head {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--cd-border-faint, #f0f0f2);
    background: var(--cd-bg-soft, #fafafa);
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .cd-quote-table__row {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cd-border-faint, #f0f0f2);
    transition: background-color 0.15s ease;
  }
  .cd-quote-table__row:last-child {
    border-bottom: 0;
  }
  .cd-quote-table__row:hover {
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-quote-table__row--best {
    background: linear-gradient(90deg, rgba(34, 139, 34, 0.05), transparent 60%);
  }
  .cd-quote-table__row--muted {
    opacity: 0.6;
  }
  .cd-quote-table__cell-pro {
    min-width: 0;
  }
  .cd-quote-table__cell-quote {
    min-width: 0;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.8rem;
    line-height: 1.5;
  }
  .cd-quote-table__quote-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .cd-quote-table__attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.45rem;
  }
  .cd-quote-table__attr {
    padding: 0.15rem 0.45rem;
    font-size: 0.66rem;
  }
  .cd-quote-table__cell-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .cd-quote-table__cell-price .cd-quote-price__integer {
    font-size: 1.5rem;
  }
  .cd-quote-table__cell-actions .cd-quote-card-actions {
    justify-content: flex-end;
    padding-top: 0;
    border-top: 0;
  }
  .cd-quote-table__cell-actions .cd-quote-card-actions__decision, .cd-quote-table__cell-actions .cd-quote-card-actions__readmore {
    justify-content: flex-end;
  }
  .cd-quote-table__cell-actions .cd-quote-card-actions__label {
    display: none;
  }
  .cd-quote-table__cell-actions .cd-btn {
    min-height: 1.9rem;
    min-width: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    gap: 0;
  }
  .cd-quote-table__best-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  @media (max-width: 1024px) {
    .cd-quote-section__header {
      flex-direction: column;
      gap: 0.875rem;
    }
    .cd-quote-section__status-pills {
      justify-content: flex-start;
    }
    .cd-quote-list-card__top {
      grid-template-columns: 1fr auto;
    }
    .cd-quote-list-card__body {
      grid-column: 1 / -1;
      grid-row: 2;
    }
    .cd-quote-table {
      overflow-x: auto;
    }
    .cd-quote-table__head, .cd-quote-table__row {
      min-width: 58rem;
    }
  }
  @media (max-width: 768px) {
    .cd-quote-section__header, .cd-quote-section__controls {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .cd-quote-section__controls, .cd-quote-card-actions {
      align-items: stretch;
      flex-direction: column;
    }
    .cd-quote-sort {
      width: 100%;
      margin-left: 0;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }
    .cd-quote-sort .cd-form-select {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
    }
    .cd-quote-section__tools, .cd-quote-filter-bar, .cd-quote-card-actions__decision, .cd-quote-card-actions__readmore {
      width: 100%;
    }
    .cd-quote-filter-chip, .cd-quote-card-actions .cd-btn {
      flex: 1 1 auto;
    }
    .cd-quote-list-card__top {
      grid-template-columns: 1fr;
    }
    .cd-quote-list-card--modal .cd-quote-list-card__top {
      grid-template-columns: 1fr;
      grid-template-areas: "identity" "price" "body";
    }
    .cd-quote-list-card__rail {
      align-items: flex-start;
      text-align: left;
    }
    .cd-quote-grid {
      grid-template-columns: 1fr;
      padding: 0.75rem;
    }
    .cd-quote-grid-card__identity {
      padding-right: 0;
    }
    .cd-quote-grid-card__price-row, .cd-quote-grid-card__attrs {
      grid-template-columns: 1fr;
    }
    .cd-quote-table {
      margin: 0.75rem;
    }
  }
}
@layer components {
  .cd-quote-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    min-height: 2.5rem;
    border-radius: 0.7rem;
    border: 0;
    color: var(--cd-text-primary, #1d1d1f);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 140ms ease, transform 140ms ease;
    background-color: transparent;
  }
  .cd-quote-action .cd-tooltip {
    font-weight: 500;
    transition-delay: 220ms;
  }
  .cd-quote-action:not(:hover):not(:focus-visible) .cd-tooltip, .cd-quote-action:not(:hover):not(:focus-visible) .cd-tooltip-trigger .cd-tooltip {
    transition-delay: 0ms;
  }
  .cd-quote-action:focus-visible {
    outline: 2px solid var(--cd-color-primary, #0066ff);
    outline-offset: 2px;
  }
  .cd-quote-action:active {
    transform: scale(0.97);
  }
  .cd-quote-action[aria-disabled="true"], .cd-quote-action:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .cd-quote-action__icon {
    display: inline-block;
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
  }
  .cd-quote-action--accept, .cd-quote-action--contact, .cd-quote-action--reject, .cd-quote-action--info {
    background-color: color-mix(in srgb, #0f172a 5%, transparent);
  }
  .cd-quote-action--accept:hover {
    background-color: color-mix(in srgb, #228b22 16%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-forest-green) 16%, transparent);
    }
  }
  .cd-quote-action--accept .cd-quote-action__icon {
    color: var(--color-forest-green);
  }
  .cd-quote-action--contact:hover {
    background-color: color-mix(in srgb, #0066cc 16%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-science-blue) 16%, transparent);
    }
  }
  .cd-quote-action--contact .cd-quote-action__icon {
    color: var(--color-science-blue);
  }
  .cd-quote-action--reject:hover {
    background-color: color-mix(in srgb, #dc143c 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-crimson-red) 14%, transparent);
    }
  }
  .cd-quote-action--reject .cd-quote-action__icon {
    color: var(--color-crimson-red);
  }
  .cd-quote-action--info:hover {
    background-color: color-mix(in srgb, #0f172a 9%, transparent);
  }
  .cd-quote-action--info .cd-quote-action__icon {
    color: #475569;
  }
  .cd-quote-table__cell-actions .cd-quote-action {
    padding: 0.35rem 0.5rem;
    min-height: 2.25rem;
    min-width: 2.25rem;
    gap: 0;
  }
  .cd-quote-table__cell-actions .cd-quote-action__icon {
    font-size: 1.15rem;
  }
  .cd-quote-detail-compact .cd-quote-action, .cd-quote-list-card--modal .cd-quote-action {
    padding: 0.5rem 0.85rem;
    min-height: 2.75rem;
  }
  .cd-quote-detail-compact .cd-quote-action__icon, .cd-quote-list-card--modal .cd-quote-action__icon {
    font-size: 1.4rem;
  }
}
@layer components {
  .cd-quote-filter-chip:has(input:checked) {
    background: var(--cd-color-shark, #1d1d1f);
    border-color: var(--cd-color-shark, #1d1d1f);
    color: #fff;
  }
  .cd-quote-filter-chip--warranty:has(input:checked) {
    background: var(--cd-color-forest-green, #228b22);
    border-color: var(--cd-color-forest-green, #228b22);
  }
  .cd-quote-filter-chip--materials:has(input:checked) {
    background: var(--cd-color-science-blue, #0066cc);
    border-color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-filter-chip:has(input:checked) i {
    color: inherit;
  }
  .cd-table-comparison-compact .cd-table-header-cell {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-table-comparison-compact tbody tr td {
    border-bottom: 1px dashed var(--cd-border-faint, #f0f0f2);
  }
  .cd-table-comparison-compact tbody tr:last-child td {
    border-bottom: 0;
  }
  .cd-quote-matrix {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .cd-quote-matrix__titlebar {
    align-items: flex-start;
    background: var(--cd-bg-secondary, #f7f7f8);
  }
  .cd-quote-matrix .cd-section-header {
    margin-bottom: 0;
  }
  .cd-quote-matrix .cd-editorial-label i {
    margin-right: 0.25rem;
  }
  .cd-quote-matrix__copy {
    max-width: 48rem;
    margin-top: 0.35rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.875rem;
  }
  .cd-quote-matrix__count {
    white-space: nowrap;
  }
  .cd-quote-matrix__stat-range, .cd-quote-matrix__stat-score {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
  }
  .cd-quote-matrix__details {
    min-width: 0;
  }
  .cd-quote-matrix__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .cd-quote-matrix__fit {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
  }
  .cd-quote-matrix__fit-score {
    font-size: 1.05rem;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-matrix__fit-unit {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.78rem;
  }
  .cd-quote-matrix__rec-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.25rem;
    color: var(--cd-color-success, #228b22);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .cd-quote-matrix__rec-flag i {
    font-size: 0.85em;
  }
  .cd-quote-matrix__priority {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .cd-quote-matrix__priority-heading {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
  }
  .cd-quote-matrix__priority-heading i {
    color: var(--cd-color-primary, #0066cc);
  }
  .cd-quote-matrix__priority-help {
    max-width: 20rem;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.75rem;
  }
  .cd-quote-matrix__table {
    width: 100%;
    min-width: 980px;
  }
  .cd-quote-matrix__sticky-header, .cd-quote-matrix__sticky-row {
    position: sticky;
    left: 0;
    width: 11rem;
    min-width: 11rem;
    background: var(--cd-bg-secondary, #f7f7f8);
  }
  .cd-quote-matrix__sticky-header {
    z-index: 30;
  }
  .cd-quote-matrix__sticky-header i {
    margin-right: 0.375rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-quote-matrix__sticky-row {
    z-index: 20;
    border-right: 1px solid var(--cd-border-primary, #e5e5e7);
  }
  .cd-quote-matrix__quote-header {
    min-width: 13.5rem;
    background: var(--cd-bg-card, #fff);
    vertical-align: top;
  }
  .cd-quote-matrix__quote-header--recommended {
    background: var(--cd-color-primary, #0066cc);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary, #0066cc) 5%, transparent);
    }
  }
  .cd-quote-matrix__professional {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 0.75rem;
  }
  .cd-quote-matrix__professional-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .cd-quote-matrix__professional-name, .cd-quote-matrix__row-label, .cd-quote-matrix__cell-value {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 650;
  }
  .cd-quote-matrix__professional-business, .cd-quote-matrix__row-subtitle, .cd-quote-matrix__cell-detail, .cd-quote-matrix__empty {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.75rem;
  }
  .cd-quote-matrix__professional-business {
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-quote-matrix__header-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .cd-quote-matrix__header-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.875rem;
  }
  .cd-quote-matrix__view-action i {
    transition: transform 0.18s ease;
  }
  .cd-quote-matrix__header-actions .cd-quote-matrix__view-action:hover {
    background-color: var(--cd-color-primary, #0066cc);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary, #0066cc) 12%, transparent);
    }
    color: var(--cd-color-primary, #0066cc);
  }
  .cd-quote-matrix__view-action:hover i {
    transform: scale(1.2);
  }
  .cd-quote-matrix__row-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .cd-quote-matrix__row-icon {
    margin-top: 0.125rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-quote-matrix__cell--best {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 10%, transparent);
    }
    border-left: 4px solid var(--cd-color-success);
  }
  .cd-quote-matrix__cell {
    vertical-align: top;
  }
  .cd-quote-matrix__cell-stack {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .cd-quote-matrix__cell-value--price {
    font-size: 1.25rem;
    line-height: 1;
  }
  .cd-quote-matrix__cell-value--missing {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.875rem;
    font-style: italic;
  }
  .cd-quote-matrix__cell-detail--warning {
    color: var(--cd-color-warning);
  }
  .cd-quote-matrix__legend {
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--cd-border-primary, #e5e5e7);
    background: var(--cd-bg-secondary, #f7f7f8);
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.75rem;
  }
  .cd-quote-matrix__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .cd-quote-matrix__legend-swatch {
    width: 0.875rem;
    height: 0.875rem;
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 10%, transparent);
    }
    border-left: 4px solid var(--cd-color-success);
    border-radius: 0.25rem;
  }
  .cd-quote-matrix__signals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    padding: 1.25rem;
  }
  .cd-quote-matrix__signal {
    padding: 1rem;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 0.75rem;
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-quote-matrix__signal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.75rem;
    border-radius: var(--cd-radius-lg, 0.5rem);
  }
  .cd-quote-matrix__signal-icon--success {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 10%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-quote-matrix__signal-icon--warning {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 10%, transparent);
    }
    color: var(--cd-color-warning);
  }
  .cd-quote-matrix__signal-icon--info {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    color: var(--cd-color-primary);
  }
  .cd-quote-matrix__signal-title {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 650;
  }
  .cd-quote-matrix__signal-copy {
    margin-top: 0.25rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.875rem;
  }
  .cd-quote-matrix__empty {
    padding: 1.25rem;
    text-align: center;
  }
  .cd-quote-matrix__signals-grid > .cd-quote-matrix__empty {
    grid-column: 1 / -1;
  }
  @media (max-width: 1024px) {
    .cd-quote-matrix__priority {
      align-items: stretch;
      flex-direction: column;
    }
    .cd-quote-matrix__priority-help {
      max-width: none;
    }
    .cd-quote-matrix__priority .cd-tabs-nav-pill {
      width: 100%;
    }
  }
  @media (max-width: 768px) {
    .cd-quote-matrix__signals-grid {
      grid-template-columns: 1fr;
      padding: 1rem;
    }
    .cd-quote-matrix__signal {
      padding: 0.875rem;
    }
  }
}
@layer components {
  .cd-quote-card {
    position: relative;
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 20px);
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .cd-quote-card:hover {
    box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
  }
  .cd-quote-card--expired {
    background: var(--cd-bg-secondary, #f5f5f7);
    border-color: var(--cd-border-primary, #e5e5e7);
  }
  .cd-quote-card--expired > .cd-pulse-strip {
    background: #ededf0;
  }
  .cd-quote-card > .cd-pulse-strip {
    border-bottom: 1px solid var(--cd-border-soft, #f0f0f2);
    background: var(--cd-bg-soft, #fafafa);
    padding: 0.75rem 1.5rem;
    border-radius: 0;
  }
  .cd-quote-card-body {
    padding: 1.5rem 1.75rem 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem 1.75rem;
    align-items: start;
  }
  .cd-quote-card-title-block {
    min-width: 0;
  }
  .cd-quote-card-title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--cd-text-primary, #1d1d1f);
    margin-bottom: 0.25rem;
    word-break: break-word;
  }
  .cd-quote-card-title a {
    color: inherit;
    transition: color 0.15s ease;
  }
  .cd-quote-card-title a:hover {
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-card-budget {
    text-align: right;
    min-width: 7rem;
  }
  .cd-quote-card-budget .cd-quote-brief-budget-amount {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  }
  .cd-quote-card-pullquote {
    padding-top: 0.5rem;
    border-top: none;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-card-mini-pulse {
    margin: 0 1.75rem 0.5rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--cd-border-soft, #f0f0f2);
    border-radius: var(--cd-radius-lg, 14px);
    background: linear-gradient(180deg, #fcfcfd 0%, #f8f8fa 100%);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.5rem;
    align-items: center;
  }
  .cd-quote-card-mini-pulse-stats {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
  }
  .cd-quote-card-mini-pulse .cd-market-pulse-stat-value {
    font-size: 1.25rem;
  }
  .cd-quote-card-mini-pulse .cd-market-pulse-stat-label {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    margin-top: 0.2rem;
  }
  .cd-quote-card-mini-pulse .cd-market-pulse-bar {
    height: 0.5rem;
    background: #ececec;
  }
  .cd-quote-card-mini-pulse .cd-market-pulse-range {
    height: 0.5rem;
  }
  .cd-quote-card-mini-pulse .cd-market-pulse-dot {
    width: 0.7rem;
    height: 0.7rem;
  }
  .cd-quote-card-mini-pulse-dist {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }
  .cd-quote-card-mini-pulse .cd-market-pulse-distribution-label {
    text-transform: none;
    font-size: 0.78rem;
    letter-spacing: normal;
    color: var(--cd-text-secondary, #6b7280);
    font-weight: 500;
  }
  .cd-quote-card-mini-pulse .cd-market-pulse-distribution-label .within-budget {
    text-transform: none;
    letter-spacing: normal;
  }
  .cd-quote-card-responders {
    margin: 1.125rem 1.75rem 0;
    padding-top: 1.125rem;
    border-top: 1px solid var(--cd-border-soft, #f0f0f2);
  }
  .cd-quote-card-responders-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }
  .cd-quote-card-responders-count {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-quote-card-responders-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-quote-card-responders-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .cd-quote-card-responder {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    background: var(--cd-bg-secondary, #f5f5f7);
    border: none;
    border-radius: 0.625rem;
    min-width: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    transition: background 0.15s ease;
  }
  .cd-quote-card-responder:hover {
    background: #ececef;
  }
  .cd-quote-card-responder-meta {
    min-width: 0;
    flex: 1;
  }
  .cd-quote-card-responder-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-quote-card-responder-loc {
    font-size: 0.7rem;
    color: var(--cd-text-tertiary, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-quote-card-responder--more {
    justify-content: center;
    background: transparent;
    border: 1.5px dashed var(--cd-border-primary, #e5e5e7);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-quote-card-responder--more:hover {
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-quote-card-lifecycle {
    margin: 1.125rem 1.75rem 0;
  }
  .cd-quote-card-lifecycle .cd-lifecycle-rail {
    padding: 0.875rem 1rem;
  }
  .cd-quote-card-actions {
    margin-top: 1.25rem;
    padding: 1.125rem 1.75rem 1.25rem;
    border-top: 1px solid var(--cd-border-soft, #f0f0f2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .cd-quote-card-actions-secondary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .cd-quote-card-actions-secondary .cd-btn-secondary {
    background-color: transparent;
    border-color: transparent;
    color: var(--cd-text-secondary);
  }
  .cd-quote-card-actions-secondary .cd-btn-secondary:hover {
    background-color: var(--cd-bg-tertiary);
    border-color: transparent;
    color: var(--cd-text-primary);
  }
  .cd-schedule-card {
    display: flex;
    flex-direction: column;
  }
  .cd-schedule-card .cd-quote-card-actions {
    margin-top: auto;
  }
  .cd-schedule-card-assignee {
    margin: 1.125rem 1.75rem 0;
    padding-top: 1.125rem;
    border-top: 1px solid var(--cd-border-soft, #f0f0f2);
  }
  @media (max-width: 720px) {
    .cd-quote-card-body {
      grid-template-columns: 1fr;
    }
    .cd-quote-card-budget {
      text-align: left;
    }
    .cd-quote-card-responders-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cd-quote-card-mini-pulse {
      grid-template-columns: 1fr;
    }
    .cd-quote-card-mini-pulse-stats {
      justify-content: space-between;
      width: 100%;
    }
    .cd-quote-card-actions {
      flex-direction: column;
      align-items: stretch;
    }
    .cd-quote-card-actions .cd-btn {
      justify-content: center;
    }
    .cd-quote-card-actions-secondary {
      flex-wrap: wrap;
    }
    .cd-quote-card-actions-secondary .cd-btn {
      flex: 1;
      justify-content: center;
    }
  }
  .cd-pro-quote-card {
    position: relative;
  }
  .cd-quote-brief-subtitle-distance {
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-quote-brief-subtitle-distance i {
    color: inherit;
  }
  .cd-pro-quote-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 1.75rem 0.75rem;
  }
  .cd-pro-quote-card-images {
    margin: 0.25rem 1.75rem 1rem;
  }
  .cd-pro-quote-card-images-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .cd-pro-quote-card-images-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-pro-quote-card-images-scroller {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .cd-pro-quote-card-images-scroller::-webkit-scrollbar {
    display: none;
  }
  .cd-pro-quote-card-image {
    position: relative;
    flex-shrink: 0;
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
  }
  .cd-pro-quote-card-image img {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    object-fit: cover;
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  a.cd-pro-quote-card-image:hover img {
    border-color: var(--cd-color-science-blue, #0066cc);
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.08);
    transform: scale(1.03);
  }
  .cd-pro-quote-card-image-overflow {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.75rem;
  }
  .cd-pro-quote-card-pullquote::before {
    content: "\201C";
  }
  .cd-pro-quote-card-pullquote::after {
    content: "\201D";
  }
  .cd-pro-quote-card-actions-expired {
    align-items: flex-start;
  }
  .cd-pro-quote-card-actions-expired-context {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .cd-pro-quote-card-actions-end {
    justify-content: flex-end;
  }
  .cd-pro-quote-card-actions-tutorial {
    flex-direction: column;
    align-items: stretch;
  }
  .cd-pro-quote-card-tutorial-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgb(239 246 255);
    color: var(--cd-text-primary, #1d1d1f);
    border-radius: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .cd-pro-quote-card-tutorial-hint i {
    margin-top: 0.1rem;
    flex-shrink: 0;
  }
  .cd-pro-quote-card-lock-veil {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(3px);
    z-index: 10;
    pointer-events: none;
  }
  .cd-pro-quote-card-lock-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    pointer-events: none;
  }
  .cd-pro-quote-card-lock-badge--radius {
    top: 1rem;
    left: auto;
    right: 1rem;
    transform: none;
  }
  .cd-pro-quote-card-lock-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 1rem 1.5rem;
    background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.95) 60%, transparent 100%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  @media (max-width: 720px) {
    .cd-pro-quote-card-meta {
      margin: 0 1.25rem 0.75rem;
    }
    .cd-pro-quote-card-images {
      margin: 0.25rem 1.25rem 1rem;
    }
    .cd-pro-quote-card-actions-expired {
      flex-direction: column;
    }
    .cd-pro-quote-card-lock-footer {
      flex-direction: column;
      align-items: stretch;
    }
  }
}
@layer components {
  .cd-submit-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.75rem;
    align-items: start;
  }
  @media (max-width: 980px) {
    .cd-submit-shell {
      grid-template-columns: 1fr;
    }
  }
  .cd-submit-card {
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
    overflow: hidden;
  }
  .cd-submit-pulse {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 0.75rem 1.5rem;
    background: var(--cd-bg-soft, #fafafa);
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
    font-size: 0.82rem;
    color: var(--cd-text-secondary, #6b7280);
    flex-wrap: wrap;
  }
  .cd-submit-pulse .cd-pulse-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .cd-submit-pulse .cd-pulse-item i {
    font-size: 0.78rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-submit-pulse .cd-pulse-item strong {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
  }
  .cd-submit-pulse .cd-pulse-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-submit-pulse .cd-pulse-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cd-forest-green, #228b22);
  }
  .cd-submit-hero {
    padding: 1.75rem 2rem 1.375rem;
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-submit-hero-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
  }
  .cd-submit-hero-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 3px 9px;
    background: var(--cd-text-primary, #1d1d1f);
    color: #fff;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .cd-submit-hero h1 {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 0.375rem;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-submit-hero-lede {
    font-size: 0.95rem;
    color: var(--cd-text-secondary, #6b7280);
    max-width: 56ch;
  }
  .cd-submit-hero-lede em {
    color: var(--cd-text-primary, #1d1d1f);
    font-style: normal;
    font-weight: 600;
  }
  .cd-submit-section {
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-submit-section:last-of-type {
    border-bottom: none;
  }
  .cd-section-head {
    margin-bottom: 1.125rem;
  }
  .cd-section-head-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-bottom: 0.25rem;
    display: block;
  }
  .cd-section-head h2 {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--cd-text-primary, #1d1d1f);
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
  }
  .cd-section-head h2 .cd-section-ord {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--cd-text-tertiary, #9ca3af);
    font-family: var(--cd-font-numeral, Georgia, serif);
  }
  .cd-section-head-lede {
    font-size: 0.85rem;
    color: var(--cd-text-secondary, #6b7280);
    margin-top: 0.25rem;
  }
  .cd-pricing-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
  }
  @media (max-width: 720px) {
    .cd-pricing-choice-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-pricing-choice {
    position: relative;
    background: #fff;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
    padding: 0.875rem 1rem 0.875rem 2.375rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
  }
  .cd-pricing-choice:hover {
    border-color: #c7c7cc;
  }
  .cd-pricing-choice .cd-choice-marker {
    position: absolute;
    top: 1rem;
    left: 0.875rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    background: #fff;
    transition: all 0.15s;
  }
  .cd-pricing-choice .cd-choice-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .cd-pricing-choice .cd-choice-title i {
    font-size: 0.82rem;
  }
  .cd-pricing-choice .cd-choice-sub {
    font-size: 0.76rem;
    color: var(--cd-text-secondary, #6b7280);
    margin-top: 0.25rem;
  }
  .cd-pricing-choice.cd-choice-selected {
    border-color: var(--cd-text-primary, #1d1d1f);
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-pricing-choice.cd-choice-selected .cd-choice-marker {
    border-color: var(--cd-text-primary, #1d1d1f);
    background: var(--cd-text-primary, #1d1d1f);
    box-shadow: inset 0 0 0 3px #fff;
  }
  .cd-price-inputs {
    margin-top: 1.375rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    align-items: start;
  }
  @media (max-width: 720px) {
    .cd-price-inputs {
      grid-template-columns: 1fr;
    }
  }
  .cd-price-field {
    min-width: 0;
  }
  .cd-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cd-text-secondary, #6b7280);
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
  }
  .cd-field-label .cd-field-hint {
    font-size: 0.7rem;
    color: var(--cd-text-tertiary, #9ca3af);
    font-weight: 500;
  }
  .cd-field-label .cd-required {
    color: var(--cd-crimson-red, #dc143c);
  }
  .cd-field-label-block {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cd-text-secondary, #6b7280);
    display: block;
    margin-bottom: 0.375rem;
  }
  .cd-price-input-wrap {
    position: relative;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
    background: #fff;
    display: flex;
    align-items: baseline;
    padding: 0.875rem 1.125rem;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .cd-price-input-wrap:focus-within {
    border-color: var(--cd-text-primary, #1d1d1f);
    box-shadow: 0 0 0 3px rgba(29,29,31,0.06);
  }
  .cd-price-input-wrap .cd-currency {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-right: 0.375rem;
    line-height: 1;
  }
  .cd-price-input-wrap input {
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    width: 100%;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1.1;
    padding: 0;
  }
  .cd-price-input-wrap input::placeholder {
    color: #d0d0d4;
    font-weight: 500;
  }
  .cd-price-helper {
    font-size: 0.74rem;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 0.375rem;
  }
  .cd-hours-field {
    margin-top: 1.125rem;
    max-width: 320px;
  }
  .cd-hours-input-wrap {
    position: relative;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0.625rem 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .cd-hours-input-wrap:focus-within {
    border-color: var(--cd-text-primary, #1d1d1f);
    box-shadow: 0 0 0 3px rgba(29,29,31,0.06);
  }
  .cd-hours-input-wrap input {
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.1rem;
    font-weight: 600;
    width: 100%;
    padding: 0;
  }
  .cd-hours-input-wrap .cd-input-suffix {
    font-size: 0.8rem;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-left: 0.375rem;
    flex-shrink: 0;
  }
  .cd-budget-anchor {
    margin-top: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--cd-bg-soft, #fafafa);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    gap: 0.875rem;
    flex-wrap: wrap;
  }
  .cd-budget-anchor .cd-budget-left {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .cd-budget-anchor .cd-budget-anchor-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-budget-anchor .cd-budget-anchor-amount {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-budget-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cd-forest-green, #228b22);
  }
  .cd-budget-delta.cd-budget-warn {
    color: var(--cd-warning-orange, #ff6b35);
  }
  .cd-budget-delta.cd-budget-over {
    color: var(--cd-crimson-red, #dc143c);
  }
  .cd-editorial-input-wrap, .cd-editorial-select-wrap {
    position: relative;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0.6875rem 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    max-width: 460px;
  }
  .cd-editorial-input-wrap:focus-within, .cd-editorial-select-wrap:focus-within {
    border-color: var(--cd-text-primary, #1d1d1f);
    box-shadow: 0 0 0 3px rgba(29,29,31,0.06);
  }
  .cd-editorial-input-wrap input, .cd-editorial-select-wrap select {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 500;
    width: 100%;
    color: var(--cd-text-primary, #1d1d1f);
    appearance: none;
    padding: 0;
  }
  .cd-editorial-select-wrap select {
    cursor: pointer;
    padding-right: 1.5rem;
  }
  .cd-editorial-select-wrap::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 1rem;
    font-size: 0.72rem;
    color: var(--cd-text-tertiary, #9ca3af);
    pointer-events: none;
  }
  .cd-editorial-input-wrap .cd-icon-trail {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
  }
  .cd-field-helper {
    margin-top: 0.375rem;
    font-size: 0.76rem;
    color: var(--cd-text-tertiary, #9ca3af);
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
  }
  .cd-field-helper i {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-availability-tile-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.625rem;
  }
  @media (max-width: 960px) {
    .cd-availability-tile-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 640px) {
    .cd-availability-tile-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 420px) {
    .cd-availability-tile-row {
      grid-template-columns: 1fr;
    }
  }
  .cd-availability-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: var(--cd-bg-soft, #fafafa);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
  }
  .cd-availability-tile:hover {
    border-color: #d8d8dc;
    transform: translateY(-1px);
  }
  .cd-availability-tile:focus-visible {
    outline: 2px solid var(--cd-text-primary, #1d1d1f);
    outline-offset: 2px;
  }
  .cd-availability-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--cd-radius-sm, 8px);
    background: #fff;
    border: 1px solid var(--cd-border-hairline, #ececec);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.82rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .cd-availability-tile-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }
  .cd-availability-tile-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1.2;
  }
  .cd-availability-tile-sub {
    font-size: 0.72rem;
    color: var(--cd-text-secondary, #6b7280);
    margin-top: 0.1875rem;
    line-height: 1.3;
  }
  .cd-availability-tile.cd-term-on {
    border-color: var(--cd-text-primary, #1d1d1f);
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-availability-tile.cd-term-on .cd-availability-tile-icon {
    background: var(--cd-text-primary, #1d1d1f);
    color: #fff;
    border-color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-term-tile-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  @media (max-width: 720px) {
    .cd-term-tile-row {
      grid-template-columns: 1fr;
    }
  }
  .cd-term-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: var(--cd-bg-soft, #fafafa);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .cd-term-tile:hover {
    border-color: #d8d8dc;
  }
  .cd-term-tile .cd-term-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--cd-border-hairline, #ececec);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary, #9ca3af);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .cd-term-tile .cd-term-icon:has(img) {
    width: auto;
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .cd-term-tile .cd-term-icon.cd-term-icon--stack {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
  .cd-term-icon--stack > span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-term-tile .cd-term-body {
    flex: 1;
    min-width: 0;
  }
  .cd-term-tile .cd-term-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-term-tile .cd-term-sub {
    font-size: 0.78rem;
    color: var(--cd-text-secondary, #6b7280);
    margin-top: 0.125rem;
  }
  .cd-switch-track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 9999px;
    background: var(--cd-border-primary, #e5e5e7);
    flex-shrink: 0;
    transition: background 0.2s;
    align-self: center;
  }
  .cd-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  }
  .cd-term-tile.cd-term-on {
    border-color: #c9c9cf;
  }
  .cd-term-tile.cd-term-on .cd-switch-track {
    background: var(--cd-text-primary, #1d1d1f);
  }
  .cd-term-tile.cd-term-on .cd-switch-track::after {
    transform: translateX(16px);
  }
  .cd-warranty-detail-block {
    margin-top: 0.875rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px dashed var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
  }
  .cd-warranty-detail-block textarea {
    width: 100%;
    min-height: 70px;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-sm, 6px);
    padding: 0.625rem 0.75rem;
    font-size: 0.88rem;
    font-family: var(--cd-font-primary);
    resize: vertical;
    background: #fff;
    outline: 0;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-warranty-detail-block textarea:focus {
    border-color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-pitch-shell {
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s;
  }
  .cd-pitch-shell:focus-within {
    border-color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-pitch-shell .ck.ck-editor__main > .ck-editor__editable, .cd-pitch-shell .ck-editor__editable_inline {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 160px;
    padding: 1rem 1.125rem !important;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .cd-pitch-shell .ck.ck-toolbar {
    background: var(--cd-bg-soft, #fafafa);
    border: 0 !important;
    border-bottom: 1px solid var(--cd-border-hairline, #ececec) !important;
    border-radius: 0 !important;
  }
  .cd-pitch-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
    font-size: 0.72rem;
    color: var(--cd-text-tertiary, #9ca3af);
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-pitch-meta .cd-pitch-lock {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
  }
  .cd-pitch-meta .cd-counter-warn {
    color: var(--cd-warning-orange, #ff6b35);
  }
  .cd-pitch-meta .cd-counter-error {
    color: var(--cd-crimson-red, #dc143c);
  }
  .cd-pitch-prompts {
    margin-top: 0.875rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }
  @media (max-width: 720px) {
    .cd-pitch-prompts {
      grid-template-columns: 1fr;
    }
  }
  .cd-pitch-prompt {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    background: var(--cd-bg-paper, #fcfcfd);
  }
  .cd-pitch-prompt .cd-prompt-num {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cd-text-tertiary, #9ca3af);
    width: 18px;
    flex-shrink: 0;
    line-height: 1.4;
  }
  .cd-pitch-prompt .cd-prompt-copy {
    font-size: 0.8rem;
    color: var(--cd-text-secondary, #6b7280);
    line-height: 1.5;
  }
  .cd-pitch-prompt .cd-prompt-copy strong {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
  }
  .cd-upload-zone {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.375rem;
    background: var(--cd-bg-soft, #fafafa);
    border: 1.5px dashed var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
    transition: border-color 0.15s, background 0.15s;
  }
  .cd-upload-zone:hover {
    border-color: var(--cd-text-secondary, #6b7280);
    background: #fff;
  }
  .cd-upload-zone .cd-upload-icon-wrap {
    width: 48px;
    height: 48px;
    background: #fff;
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 1.2rem;
    flex-shrink: 0;
  }
  .cd-upload-zone .cd-upload-body {
    flex: 1;
    min-width: 0;
  }
  .cd-upload-zone .cd-upload-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-upload-zone .cd-upload-sub {
    font-size: 0.78rem;
    color: var(--cd-text-secondary, #6b7280);
    margin-top: 0.125rem;
  }
  .cd-upload-zone .cd-upload-action {
    flex-shrink: 0;
  }
  .cd-upload-zone.cd-upload-filled {
    background: rgba(0,102,204,0.04);
    border-style: solid;
    border-color: rgba(0,102,204,0.18);
  }
  .cd-upload-zone.cd-upload-filled .cd-upload-icon-wrap {
    color: var(--cd-crimson-red, #dc143c);
  }
  @media (max-width: 720px) {
    .cd-upload-zone {
      flex-wrap: wrap;
      row-gap: 0.625rem;
      padding: 1rem 1.125rem;
    }
    .cd-upload-zone .cd-upload-body {
      flex-basis: calc(100% - 64px);
    }
    .cd-upload-zone .cd-upload-action {
      flex-basis: 100%;
      justify-content: center;
    }
  }
  .cd-submit-footer {
    padding: 1.375rem 2rem 1.625rem;
    background: var(--cd-bg-paper, #fcfcfd);
    border-top: 1px solid var(--cd-border-hairline, #ececec);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cd-submit-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    flex-wrap: wrap;
  }
  .cd-submit-footer-assurance {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-submit-footer-assurance i {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-submit-footer-btn-group {
    display: inline-flex;
    gap: 0.625rem;
  }
  .cd-submit-footer-fineprint {
    font-size: 0.78rem;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 0.25rem;
  }
  .cd-preview-rail {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  @media (max-width: 980px) {
    .cd-preview-rail {
      position: static;
    }
  }
  .cd-preview-card {
    background: #fff;
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
    overflow: hidden;
  }
  .cd-preview-head {
    padding: 0.875rem 1.125rem;
    background: var(--cd-bg-soft, #fafafa);
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cd-preview-eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-preview-live {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cd-forest-green, #228b22);
  }
  .cd-preview-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cd-forest-green, #228b22);
    box-shadow: 0 0 0 3px rgba(34,139,34,0.18);
    animation: cd-preview-pulse 1.6s infinite;
  }
  @keyframes cd-preview-pulse {
    0%, 100% {
      box-shadow: 0 0 0 3px rgba(34,139,34,0.18);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(34,139,34,0);
    }
  }
  .cd-preview-body {
    padding: 1.25rem 1.375rem;
  }
  .cd-preview-price {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
  }
  .cd-preview-price .cd-preview-amount {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1.05;
  }
  .cd-preview-price .cd-preview-currency {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-preview-price .cd-preview-max {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-preview-price .cd-preview-placeholder {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 2rem;
    font-weight: 500;
    color: #d0d0d4;
  }
  .cd-preview-meta {
    display: flex;
    gap: 0.875rem;
    font-size: 0.78rem;
    color: var(--cd-text-secondary, #6b7280);
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
  }
  .cd-preview-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
  }
  .cd-preview-meta i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.72rem;
  }
  .cd-preview-divider {
    height: 1px;
    background: var(--cd-border-hairline, #ececec);
    margin: 0.875rem 0;
  }
  .cd-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
    gap: 0.75rem;
  }
  .cd-preview-row:last-child {
    margin-bottom: 0;
  }
  .cd-preview-row .cd-preview-k {
    color: var(--cd-text-tertiary, #9ca3af);
    flex-shrink: 0;
  }
  .cd-preview-row .cd-preview-v {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
    text-align: right;
  }
  .cd-preview-row .cd-preview-v.cd-preview-muted {
    color: var(--cd-text-tertiary, #9ca3af);
    font-weight: 500;
  }
  .cd-preview-checklist {
    background: var(--cd-bg-paper, #fcfcfd);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-lg, 14px);
    padding: 1rem 1.125rem;
  }
  .cd-preview-checklist .cd-preview-eyebrow {
    margin-bottom: 0.75rem;
    display: block;
  }
  .cd-preview-checklist ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }
  .cd-preview-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.5625rem;
    font-size: 0.82rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-preview-checklist li .cd-check-tick {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-tertiary, #9ca3af);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .cd-preview-checklist li.cd-check-done .cd-check-tick {
    background: var(--cd-forest-green, #228b22);
    color: #fff;
  }
  .cd-preview-checklist li.cd-check-done {
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-preview-checklist li.cd-check-done .cd-check-text {
    font-weight: 500;
  }
  .cd-preview-tips {
    background: #fff;
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-lg, 14px);
    padding: 1rem 1.125rem;
  }
  .cd-preview-tips .cd-preview-eyebrow {
    margin-bottom: 0.625rem;
    display: block;
  }
  .cd-preview-tip {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-preview-tip:last-child {
    margin-bottom: 0;
  }
  .cd-preview-tip .cd-tip-ic {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cd-bg-soft, #fafafa);
    color: var(--cd-text-tertiary, #9ca3af);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
  }
  .cd-preview-tip strong {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
  }
  .cd-submit-pulse .cd-pulse-item.cd-pulse-item-expired {
    color: var(--cd-crimson-red, #dc143c);
  }
  .cd-submit-pulse .cd-pulse-item.cd-pulse-item-expired i {
    color: var(--cd-crimson-red, #dc143c);
  }
  .cd-review-checklist {
    margin-top: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .cd-review-checklist li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-review-tick {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cd-forest-green, #228b22);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    flex-shrink: 0;
  }
  .cd-review-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  @media (max-width: 720px) {
    .cd-review-summary-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-review-summary-tile {
    background: var(--cd-bg-paper, #fcfcfd);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    padding: 0.875rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
  .cd-review-summary-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-review-summary-amount {
    font-size: 1.65rem;
    line-height: 1.1;
    color: var(--cd-text-primary, #1d1d1f);
    word-break: break-word;
  }
  .cd-review-summary-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1.25;
  }
  .cd-term-tile-row-review {
    margin-bottom: 1rem;
  }
  .cd-term-tile.cd-term-tile-readonly {
    cursor: default;
  }
  .cd-term-tile.cd-term-tile-readonly:hover {
    border-color: var(--cd-border-hairline, #ececec);
  }
  .cd-term-tile.cd-term-on.cd-term-tile-readonly:hover {
    border-color: rgba(0,102,204,0.22);
  }
  .cd-term-tile.cd-term-warranty.cd-term-on.cd-term-tile-readonly:hover {
    border-color: rgba(34,139,34,0.22);
  }
  .cd-term-marker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cd-border-hairline, #ececec);
    color: var(--cd-text-tertiary, #9ca3af);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
    align-self: center;
  }
  .cd-term-tile.cd-term-on .cd-term-marker {
    background: var(--cd-science-blue, #0066cc);
    color: #fff;
  }
  .cd-term-tile.cd-term-warranty.cd-term-on .cd-term-marker {
    background: var(--cd-forest-green, #228b22);
    color: #fff;
  }
  .cd-warranty-detail-block.cd-warranty-detail-block-readonly {
    margin-bottom: 1rem;
    background: var(--cd-bg-paper, #fcfcfd);
    border-style: solid;
    border-color: var(--cd-border-hairline, #ececec);
  }
  .cd-warranty-detail-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--cd-text-primary, #1d1d1f);
    margin-top: 0.375rem;
    white-space: pre-line;
  }
  .cd-review-attachment {
    margin-bottom: 1rem;
  }
  .cd-review-attachment-actions {
    display: inline-flex;
    gap: 0.5rem;
  }
  .cd-review-prose {
    margin-top: 0.5rem;
  }
  .cd-review-prose-eyebrow {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-bottom: 0.5rem;
  }
  .cd-review-prose-body {
    background: var(--cd-bg-paper, #fcfcfd);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    padding: 1rem 1.125rem;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1.6;
  }
  .cd-review-brief-body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--cd-text-primary, #1d1d1f);
    white-space: pre-wrap;
  }
  .cd-review-images {
    margin-top: 1.25rem;
  }
  .cd-review-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    margin-top: 0.5rem;
  }
  @media (min-width: 640px) {
    .cd-review-images-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 768px) {
    .cd-review-images-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .cd-review-images-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }
  .cd-review-image-tile {
    aspect-ratio: 2 / 1;
    border-radius: var(--cd-radius-md, 10px);
    overflow: hidden;
    background: var(--cd-bg-soft, #fafafa);
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
  }
  .cd-review-image-tile:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }
  .cd-review-image-tile:focus-visible {
    outline: 2px solid var(--cd-text-primary, #1d1d1f);
    outline-offset: 2px;
  }
  .cd-review-image-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cd-review-questionnaire-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
  }
  @media (max-width: 720px) {
    .cd-review-questionnaire-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-review-questionnaire-card {
    background: var(--cd-bg-paper, #fcfcfd);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    padding: 1.125rem;
  }
  .cd-submit-footer-confirm {
    text-align: center;
    padding: 2rem 2rem 2.25rem;
  }
  .cd-confirm-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
  }
  .cd-confirm-hero .cd-static-picture {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cd-confirm-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
  }
  .cd-confirm-title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary, #1d1d1f);
    margin: 0.5rem 0 0;
  }
  .cd-confirm-lede {
    font-size: 0.92rem;
    color: var(--cd-text-secondary, #6b7280);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.55;
  }
  .cd-confirm-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
    max-width: 36rem;
    margin: 0 auto 1.25rem;
    cursor: pointer;
    padding: 0.875rem 1.125rem;
    background: var(--cd-bg-soft, #fafafa);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    transition: border-color 0.15s, background 0.15s;
  }
  .cd-confirm-checkbox:hover {
    border-color: var(--cd-border-primary, #e5e5e7);
    background: #fff;
  }
  .cd-confirm-checkbox input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
  }
  .cd-confirm-checkbox-text {
    font-size: 0.88rem;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1.5;
  }
  .cd-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    max-width: 36rem;
    margin: 0 auto;
  }
  @media (max-width: 540px) {
    .cd-confirm-actions {
      flex-direction: column;
    }
    .cd-confirm-actions .cd-btn {
      width: 100%;
    }
  }
  .cd-confirmation-back {
    margin-bottom: 1rem;
  }
  .cd-confirmation-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-secondary, #6b7280);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-confirmation-back-link:hover {
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-confirmation-back-link i {
    font-size: 0.7rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-confirm-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.75rem;
    align-items: start;
  }
  @media (max-width: 980px) {
    .cd-confirm-shell {
      grid-template-columns: 1fr;
    }
  }
  .cd-confirm-rail {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  @media (max-width: 980px) {
    .cd-confirm-rail {
      position: static;
    }
  }
  .cd-confirm-rail .cd-your-quote-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .cd-confirm-rail .cd-quote-stat {
    padding: 0.85rem 0.6rem;
  }
  .cd-confirm-rail .cd-quote-stat .label {
    align-items: flex-start;
    gap: 0.3rem;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    line-height: 1.3;
    overflow-wrap: break-word;
    min-height: 1.6rem;
  }
  .cd-confirm-rail .cd-quote-stat .value {
    font-size: 1.15rem;
  }
  .cd-confirm-pro-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .cd-confirm-pro-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
  }
  .cd-your-quote-title-btn {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s ease;
  }
  .cd-your-quote-title-btn:hover {
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-verified-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--cd-radius-full, 999px);
    background: rgba(34, 139, 34, 0.1);
    color: var(--cd-color-forest-green, #228b22);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .cd-verified-chip i {
    font-size: 0.7rem;
  }
  .cd-rating-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-rating-row i {
    font-size: 0.72rem;
    color: var(--cd-border-primary, #e5e5e7);
  }
  .cd-rating-row i.is-on {
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-rating-row-text {
    margin-left: 0.15rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-rating-row-count {
    font-weight: 500;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-your-quote-card .cd-preview-price {
    margin-top: 0.25rem;
  }
  .cd-your-quote-card .cd-price-helper {
    margin-top: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-your-quote-card .cd-price-helper i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.78rem;
  }
  .cd-confirm-note {
    margin-top: 1.25rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-confirm-action-form {
    width: 100%;
    margin: 0;
  }
  .cd-attest-stack {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .cd-attest-tile {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-attest-tile:hover {
    border-color: #c7c7cc;
  }
  .cd-attest-tile:focus-within {
    border-color: var(--cd-text-primary, #1d1d1f);
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.06);
  }
  .cd-attest-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .cd-attest-marker {
    width: 22px;
    height: 22px;
    border-radius: var(--cd-radius-full, 999px);
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.66rem;
    flex-shrink: 0;
    margin-top: 1px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .cd-attest-tile:has(.cd-attest-input:checked) {
    border-color: var(--cd-text-primary, #1d1d1f);
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-attest-tile:has(.cd-attest-input:checked) .cd-attest-marker {
    background: var(--cd-text-primary, #1d1d1f);
    border-color: var(--cd-text-primary, #1d1d1f);
    color: #fff;
  }
  .cd-attest-tile--highlight {
    border-color: var(--cd-color-warning-orange, #ff6b35);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
  }
  .cd-attest-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
  .cd-attest-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1.3;
  }
  .cd-attest-sub {
    font-size: 0.82rem;
    color: var(--cd-text-secondary, #6b7280);
    line-height: 1.55;
  }
  .cd-attest-sub strong {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 700;
  }
  .cd-attest-sub a {
    color: var(--cd-color-science-blue, #0066cc);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .cd-attest-sub a:hover {
    text-decoration-thickness: 1.5px;
  }
  .cd-attest-version {
    margin-top: 1rem;
    font-size: 0.72rem;
    color: var(--cd-text-tertiary, #9ca3af);
    letter-spacing: 0.04em;
  }
  .cd-disclosure {
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    background: var(--cd-bg-paper, #fcfcfd);
  }
  .cd-disclosure[open] {
    background: var(--cd-bg-card, #ffffff);
  }
  .cd-disclosure-summary {
    padding: 0.875rem 1.125rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
  }
  .cd-disclosure-summary::-webkit-details-marker {
    display: none;
  }
  .cd-disclosure-summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--cd-text-tertiary, #9ca3af);
    transition: transform 0.2s ease;
  }
  .cd-disclosure[open] .cd-disclosure-summary::after {
    transform: rotate(180deg);
  }
  .cd-disclosure-body {
    padding: 0 1.125rem 1rem;
    font-size: 0.85rem;
    color: var(--cd-text-secondary, #6b7280);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .cd-disclosure-body ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .cd-disclosure-body strong {
    color: var(--cd-text-primary, #1d1d1f);
    font-weight: 600;
  }
  .cd-disclosure-body a {
    color: var(--cd-color-science-blue, #0066cc);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .cd-disclosure-fineprint {
    font-size: 0.78rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-field-error {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--cd-crimson-red, #dc143c);
  }
  .cd-field-error > i {
    font-size: 0.78rem;
    margin-top: 0.12rem;
    flex-shrink: 0;
  }
  .cd-price-input-wrap.cd-field-invalid, .cd-editorial-input-wrap.cd-field-invalid {
    border-color: var(--cd-crimson-red, #dc143c);
    box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.08);
  }
  input.cd-field-invalid, textarea.cd-field-invalid {
    border-color: var(--cd-crimson-red, #dc143c);
    box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.08);
  }
}
@layer components {
  .cd-password-editorial .cd-editorial-input-wrap .cd-password-toggle {
    position: static;
    transform: none;
    margin-left: 0.5rem;
    flex-shrink: 0;
    line-height: 1;
  }
  .cd-password-editorial .cd-pw-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-password-editorial .cd-pw-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cd-text-primary, #1d1d1f);
  }
  .cd-password-editorial .cd-pw-status.cd-pw-idle {
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-password-editorial .cd-pw-status.cd-pw-idle::before {
    background: var(--cd-border-primary, #e5e5e7);
  }
  .cd-password-editorial .cd-pw-meter {
    display: flex;
    gap: 0.3125rem;
    margin-bottom: 1rem;
  }
  .cd-password-editorial .cd-pw-seg {
    flex: 1;
    height: 4px;
    border-radius: 9999px;
    background: var(--cd-border-hairline, #ececec);
    transition: background 0.2s ease;
  }
  .cd-password-editorial .cd-pw-seg.is-on {
    background: var(--cd-text-primary, #1d1d1f);
  }
}
@layer components {
  .cd-settings-tab-title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1.2;
  }
  .cd-settings-tab-sub {
    font-size: 0.85rem;
    color: var(--cd-text-secondary, #6b7280);
    margin-top: 0.125rem;
  }
  .cd-settings-editorial input.cd-settings-field, .cd-settings-editorial select.cd-settings-field, .cd-settings-editorial textarea.cd-settings-field {
    display: block;
    width: 100%;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-radius-md, 10px);
    background: #fff;
    padding: 0.6875rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cd-text-primary, #1d1d1f);
    outline: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .cd-settings-editorial input.cd-settings-field:focus, .cd-settings-editorial select.cd-settings-field:focus, .cd-settings-editorial textarea.cd-settings-field:focus {
    border-color: var(--cd-text-primary, #1d1d1f);
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.06);
  }
  .cd-settings-editorial input.cd-settings-field::placeholder, .cd-settings-editorial textarea.cd-settings-field::placeholder {
    color: #b6b6bc;
  }
  .cd-settings-editorial .cd-fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }
  @media (max-width: 640px) {
    .cd-settings-editorial .cd-fact-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-settings-editorial .cd-fact-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-bottom: 0.25rem;
  }
  .cd-settings-editorial .cd-fact-value {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-settings-editorial .cd-fact-value.cd-fact-empty {
    color: var(--cd-text-tertiary, #9ca3af);
    font-style: italic;
    font-weight: 400;
  }
  .cd-settings-editorial .cd-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-settings-editorial .cd-setting-row:first-child {
    padding-top: 0;
  }
  .cd-settings-editorial .cd-setting-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .cd-settings-editorial .cd-setting-row-body {
    min-width: 0;
  }
  .cd-settings-editorial .cd-setting-row-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-settings-editorial .cd-setting-row-sub {
    font-size: 0.8rem;
    color: var(--cd-text-secondary, #6b7280);
    margin-top: 0.1875rem;
    line-height: 1.45;
  }
  .cd-settings-editorial .cd-setting-row-control {
    flex-shrink: 0;
  }
  .cd-settings-editorial .cd-setting-row.opacity-50 {
    opacity: 0.5;
  }
  .cd-submit-card.cd-settings-card-open {
    overflow: visible;
  }
  .cd-settings-editorial .cd-notif-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .cd-settings-editorial .cd-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .cd-settings-editorial .cd-notif-label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
  }
  .cd-settings-editorial .cd-notif-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cd-settings-editorial .cd-notif-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cd-settings-editorial .cd-notif-icon i {
    font-size: 1rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-settings-editorial .cd-notif-disclosure {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--cd-text-secondary, #6b7280);
    transition: color 0.15s;
  }
  .cd-settings-editorial .cd-notif-disclosure:hover {
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-settings-editorial .cd-notif-disclosure i {
    font-size: 0.7rem;
  }
  .cd-settings-editorial .cd-notif-details {
    margin-top: 0.25rem;
    padding: 0.875rem 1rem;
    background: var(--cd-bg-secondary, #f5f5f7);
    border-radius: var(--cd-radius-lg, 0.5rem);
  }
  .cd-settings-editorial .cd-notif-details-lede {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-bottom: 0.625rem;
  }
  .cd-settings-editorial .cd-notif-detail-row {
    font-size: 0.8rem;
    line-height: 1.45;
    padding: 0.25rem 0;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-settings-editorial .cd-notif-detail-term {
    font-weight: 600;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-settings-editorial .cd-notif-lock {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-settings-editorial .cd-notif-head .cd-segment-label {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
  }
  @media (max-width: 640px) {
    .cd-settings-editorial .cd-notif-head {
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
    }
  }
}
@layer components {
  .cd-verify-editorial .cd-verify-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.75rem;
    align-items: start;
  }
  @media (max-width: 980px) {
    .cd-verify-editorial .cd-verify-shell {
      grid-template-columns: 1fr;
    }
  }
  .cd-verify-editorial .cd-verify-card {
    background: var(--cd-bg-primary, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    overflow: hidden;
  }
  .cd-verify-editorial .cd-verify-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.75rem 2rem 1.375rem;
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
  }
  @media (max-width: 560px) {
    .cd-verify-editorial .cd-verify-hero {
      padding: 1.375rem 1.25rem 1.125rem;
    }
  }
  .cd-verify-editorial .cd-verify-hero-title {
    font-family: var(--cd-font-editorial, Georgia, serif);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--cd-text-primary, #1d1d1f);
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .cd-verify-editorial .cd-verify-hero-title i {
    font-size: 1.15rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-verify-editorial .cd-verify-body {
    padding: 1.75rem 2rem;
  }
  @media (max-width: 560px) {
    .cd-verify-editorial .cd-verify-body {
      padding: 1.375rem 1.25rem;
    }
  }
  .cd-verify-editorial .cd-alert-title.cd-verify-alert-title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: var(--cd-text-lg, 1.125rem);
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .cd-verify-editorial .cd-verify-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  @media (max-width: 560px) {
    .cd-verify-editorial .cd-verify-detail-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-verify-editorial .cd-verify-detail-item {
    padding: 0.875rem 1.125rem;
    background: var(--cd-bg-primary, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    min-width: 0;
  }
  .cd-verify-editorial .cd-verify-detail-item dt {
    margin-bottom: 0.375rem;
  }
  .cd-verify-editorial .cd-verify-detail-item dd {
    font-size: var(--cd-text-lg, 1.125rem);
    color: var(--cd-text-primary, #1d1d1f);
    word-break: break-word;
  }
  .cd-verify-editorial .cd-verify-doc-label {
    display: block;
    margin-bottom: 0.625rem;
  }
  .cd-verify-editorial .cd-verify-doc {
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-lg, 14px);
    overflow: hidden;
    max-width: 28rem;
  }
  .cd-verify-editorial .cd-verify-section {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-verify-editorial .cd-verify-section-head {
    margin-bottom: 1.125rem;
  }
  .cd-verify-editorial .cd-verify-section-title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-verify-editorial .cd-verify-doctype {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    background: var(--cd-bg-secondary, #fafafa);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  }
  .cd-verify-editorial .cd-verify-doctype:hover {
    border-color: var(--cd-text-tertiary, #9ca3af);
    transform: translateY(-1px);
  }
  .cd-verify-editorial .cd-verify-doctype-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--cd-radius-full, 9999px);
    background: var(--cd-bg-primary, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary, #9ca3af);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .cd-verify-editorial .cd-verify-doctype-icon i {
    font-size: 1.35rem;
  }
  .cd-verify-editorial .cd-verify-doctype-label {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-verify-editorial .cd-verify-doctype.cd-verify-doctype-selected {
    border-color: var(--cd-text-primary, #1d1d1f);
    background: var(--cd-bg-secondary, #fafafa);
  }
  .cd-verify-editorial .cd-verify-doctype-selected .cd-verify-doctype-icon {
    background: var(--cd-text-primary, #1d1d1f);
    color: #fff;
    border-color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-verify-editorial .cd-verify-doctype-selected .cd-verify-doctype-label {
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-verify-editorial .cd-verify-rail {
    position: sticky;
    top: 1.5rem;
    background: var(--cd-bg-primary, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 20px);
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    overflow: hidden;
  }
  @media (max-width: 980px) {
    .cd-verify-editorial .cd-verify-rail {
      position: static;
    }
  }
  .cd-verify-editorial .cd-verify-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--cd-bg-secondary, #fafafa);
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
  }
  .cd-verify-editorial .cd-verify-rail-head .cd-editorial-eyebrow {
    margin-bottom: 0;
  }
  .cd-verify-editorial .cd-verify-rail-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .cd-verify-editorial .cd-verify-rail-section-title {
    display: block;
    margin-bottom: 0.625rem;
  }
  .cd-verify-editorial .cd-verify-tips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .cd-verify-editorial .cd-verify-tips li {
    display: flex;
    align-items: flex-start;
    gap: 0.5625rem;
    font-size: 0.82rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-verify-editorial .cd-verify-tip-tick {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: var(--cd-radius-full, 9999px);
    background: var(--cd-color-forest-green, #228b22);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .cd-verify-editorial .cd-verify-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .cd-verify-editorial .cd-verify-chip {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-full, 9999px);
    color: var(--cd-text-secondary, #6b7280);
    background: var(--cd-bg-primary, #ffffff);
  }
  .cd-verify-editorial .cd-verify-prev-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.74rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-verify-editorial .cd-verify-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: var(--cd-bg-secondary, #fafafa);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-md, 10px);
  }
  .cd-verify-editorial .cd-verify-privacy i {
    color: var(--cd-color-forest-green, #228b22);
    margin-top: 0.125rem;
    flex-shrink: 0;
  }
  .cd-verify-editorial .cd-verify-privacy p {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--cd-text-secondary, #6b7280);
    margin: 0;
  }
}
@layer components {
  .cd-closure-reason-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  @media (min-width: 640px) {
    .cd-closure-reason-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cd-closure-reason-grid .cd-closure-reason-card--other {
      grid-column: 1 / -1;
    }
  }
  .cd-closure-reason-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: var(--cd-radius-xl);
    border: 2px solid var(--cd-border-primary);
    background-color: var(--cd-bg-card);
    cursor: pointer;
    transition: var(--cd-transition);
    user-select: none;
  }
  .cd-closure-reason-card:hover {
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 35%, transparent);
    }
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 4%, var(--cd-bg-card));
    }
  }
  .cd-closure-reason-card:focus-within {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-closure-reason-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .cd-closure-reason-card:has(input[type="radio"]:checked), .cd-closure-reason-card--selected {
    border-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, var(--cd-bg-card));
    }
  }
  .cd-closure-reason-card-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (min-width: 640px) {
    .cd-closure-reason-card-icon {
      width: 3rem;
      height: 3rem;
    }
  }
  .cd-closure-reason-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .cd-closure-reason-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .cd-closure-reason-card-label {
    font-weight: 600;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    line-height: 1.3;
  }
  @media (min-width: 640px) {
    .cd-closure-reason-card-label {
      font-size: var(--cd-text-base);
    }
  }
  .cd-closure-reason-card-desc {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
    line-height: 1.4;
  }
  @media (min-width: 640px) {
    .cd-closure-reason-card-desc {
      font-size: var(--cd-text-sm);
    }
  }
  .cd-closure-reason-card-check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background-color: var(--cd-color-primary);
    color: white;
    font-size: 0.625rem;
    display: none;
    align-items: center;
    justify-content: center;
  }
  .cd-closure-reason-card:has(input[type="radio"]:checked) .cd-closure-reason-card-check, .cd-closure-reason-card--selected .cd-closure-reason-card-check {
    display: flex;
  }
}
@layer components {
  .cd-dot-grid-bg {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .cd-dot-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--cd-z-behind);
    pointer-events: none;
    border-radius: inherit;
    background-image: radial-gradient( circle, var(--cd-color-primary) 1px, transparent 1px );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient( circle, color-mix(in srgb, var(--cd-color-primary) 15%, transparent) 1px, transparent 1px );
    }
    background-size: 24px 24px;
  }
  .cd-dot-grid-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--cd-z-behind);
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient( ellipse at center, transparent 30%, var(--cd-bg-primary) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( ellipse at center, transparent 30%, color-mix(in srgb, var(--cd-bg-primary) 80%, transparent) 100% );
    }
  }
}
@layer components {
  .cd-service-card-icon-container {
    width: var(--cd-space-16);
    height: var(--cd-space-16);
    border-radius: var(--cd-radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--cd-shadow-sm);
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 10%, transparent), color-mix(in srgb, var(--cd-color-primary) 20%, transparent));
    }
  }
  .cd-service-card-icon-container:has(img) {
    background: none;
    box-shadow: none;
  }
  .cd-service-card-icon {
    font-size: var(--cd-text-xl);
    line-height: 2rem;
    color: var(--cd-color-primary);
  }
  .cd-service-card-title {
    font-weight: 700;
    margin-bottom: var(--cd-space-1);
    font-size: var(--cd-text-lg);
    color: var(--cd-text-primary);
  }
  .cd-service-card-subtitle {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-service-card-edit-btn {
    width: var(--cd-space-10);
    height: var(--cd-space-10);
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms;
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary);
  }
  .cd-service-card-edit-btn:hover {
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-secondary);
  }
  .cd-edit-spinner {
    display: none !important;
  }
  .cd-service-card-edit-btn.htmx-request .cd-edit-icon {
    display: none !important;
  }
  .cd-service-card-edit-btn.htmx-request .cd-edit-spinner {
    display: inline-block !important;
  }
  .cd-service-card-edit-btn.htmx-request {
    pointer-events: none;
    opacity: 0.7;
  }
  .cd-service-card-description {
    line-height: 1.625;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-service-card-description-empty {
    font-style: italic;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-tertiary);
  }
  .cd-service-feature {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
  }
  .cd-service-feature-icon {
    width: var(--cd-space-8);
    height: var(--cd-space-8);
    border-radius: var(--cd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cd-service-feature-icon-success {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 15%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-service-feature-icon-premium {
    background-color: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-info) 15%, transparent);
    }
    color: var(--cd-color-info);
  }
  .cd-service-feature-icon-warning {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 15%, transparent);
    }
    color: var(--cd-color-warning);
  }
  .cd-service-feature-icon-primary {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    color: var(--cd-color-primary);
  }
  .cd-service-feature-text {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
  }
  .cd-service-price-main {
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: var(--cd-space-1);
    font-size: var(--cd-text-2xl);
    color: var(--cd-text-primary);
  }
  .cd-service-stats-box {
    border-radius: var(--cd-radius-xl);
    padding: var(--cd-space-4);
    text-align: center;
    background-color: var(--cd-bg-secondary);
  }
  .cd-service-stats-value {
    font-weight: 700;
    margin-bottom: var(--cd-space-1);
    font-size: var(--cd-text-2xl);
    color: var(--cd-text-primary);
  }
  .cd-service-stats-label {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
  }
  .cd-service-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--cd-space-32);
    height: var(--cd-space-32);
    border-bottom-left-radius: var(--cd-radius-full);
    z-index: -10;
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-info));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 5%, transparent), color-mix(in srgb, var(--cd-color-info) 5%, transparent));
    }
  }
}
@layer components {
  .cd-service-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-2);
    padding-bottom: var(--cd-space-2);
    margin-bottom: var(--cd-space-6);
  }
  .cd-service-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    padding: var(--cd-space-2) var(--cd-space-4);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-secondary);
    min-width: fit-content;
  }
  .cd-service-filter-pill:hover {
    background-color: var(--cd-bg-secondary);
    border-color: var(--cd-border-primary);
    color: var(--cd-text-primary);
  }
  .cd-service-filter-pill-active {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    padding: var(--cd-space-2) var(--cd-space-4);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
    background-color: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
    border: 1px solid var(--cd-color-primary);
    min-width: fit-content;
  }
  .cd-service-filter-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: var(--cd-text-xs);
    border-radius: 9999px;
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, currentColor 20%, transparent);
    }
  }
  .cd-service-group-card {
    border-bottom: 1px solid var(--cd-border-secondary);
    transition: background-color 0.15s ease;
  }
  .cd-service-group-card:last-child {
    border-bottom: 0;
  }
  .cd-service-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 22px 4px;
    transition: padding-left 0.15s ease;
    gap: var(--cd-space-4);
  }
  .cd-service-group-header:hover {
    padding-left: 12px;
  }
  .cd-service-group-header-info {
    display: flex;
    align-items: center;
    gap: var(--cd-space-5);
    flex: 1;
    min-width: 0;
  }
  .cd-service-group-title {
    font-family: var(--cd-font-editorial);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary);
  }
  .cd-service-group-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-service-group-toggle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.15s ease;
    cursor: pointer;
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    flex-shrink: 0;
  }
  .cd-service-group-toggle:hover {
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-text-primary);
  }
  .cd-service-group-toggle-expanded {
    transform: rotate(180deg);
  }
  .cd-service-group-content {
    padding: 8px 0 32px 0;
  }
  .cd-service-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  .cd-svc-card {
    position: relative;
    background: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-svc-card:hover {
    border-color: var(--cd-border-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  }
  .cd-svc-card-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .cd-svc-card-title {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: var(--cd-text-primary);
    margin: 0;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cd-svc-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
    margin-bottom: 4px;
    line-height: 1;
  }
  .cd-svc-card-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }
  .cd-svc-card-eyebrow.tone-hourly {
    color: var(--cd-color-accent);
  }
  .cd-svc-card-eyebrow.tone-per-issue {
    color: var(--cd-color-success);
  }
  .cd-svc-card-eyebrow.tone-flat-rate {
    color: var(--cd-color-primary);
  }
  .cd-svc-card-eyebrow.tone-neutral {
    color: var(--cd-text-tertiary);
  }
  .cd-svc-card .cd-service-card-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
  }
  .cd-svc-card-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--cd-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cd-svc-card-desc--empty {
    font-style: italic;
    color: var(--cd-text-tertiary);
    -webkit-line-clamp: 1;
  }
  .cd-svc-card-price {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--cd-border-secondary);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .cd-svc-card-price-main {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 20px;
    color: var(--cd-text-primary);
    letter-spacing: -0.01em;
  }
  .cd-svc-card-price-meta {
    font-size: 11px;
    color: var(--cd-text-tertiary);
    text-align: right;
    line-height: 1.4;
  }
  .cd-svc-card-price-contact {
    font-size: 14px;
    color: var(--cd-text-secondary);
    font-weight: 500;
  }
  @media (min-width: 768px) {
    .cd-service-preview-grid {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
  }
  .cd-svc-form-hero-title {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    color: var(--cd-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .cd-svc-form-hero-meta {
    font-size: 13px;
    color: var(--cd-text-tertiary);
    margin: 4px 0 0;
    letter-spacing: 0.02em;
  }
  .cd-form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }
  .cd-form-section-head-text {
    flex: 1;
    min-width: 0;
  }
  .cd-form-section-title {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-form-section-sub {
    font-size: 13px;
    color: var(--cd-text-secondary);
    margin: 4px 0 0;
  }
  .cd-service-search-container {
    position: relative;
    margin-bottom: var(--cd-space-4);
  }
  .cd-service-search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    font-size: var(--cd-text-sm);
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-primary);
  }
  .cd-service-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    border-color: var(--cd-color-primary);
  }
  .cd-service-search-icon {
    position: absolute;
    left: var(--cd-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--cd-text-tertiary);
  }
  .cd-service-group-empty {
    text-align: center;
    padding: 2rem 0;
  }
  .cd-service-group-empty-icon {
    width: var(--cd-space-16);
    height: var(--cd-space-16);
    margin: 0 auto var(--cd-space-4) auto;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary);
  }
  .cd-service-group-empty-text {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  @media (max-width: 768px) {
    .cd-service-group-card {
      padding: var(--cd-space-4);
    }
    .cd-service-group-header-info {
      gap: var(--cd-space-3);
    }
    .cd-service-group-title {
      font-size: var(--cd-text-base);
    }
    .cd-service-preview-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .cd-svc-card {
      min-width: 0;
    }
    .cd-svc-group-eyebrow {
      min-width: 0;
    }
    .cd-svc-eyebrow-text {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .cd-svc-group-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
  }
  .cd-svc-eyebrow-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.85;
    flex-shrink: 0;
  }
  .cd-svc-eyebrow-icon-fa {
    font-size: 11px;
    color: var(--cd-text-tertiary);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
  }
  .cd-svc-eyebrow-text {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
    line-height: 1.4;
  }
  .cd-svc-group-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 4px;
    font-size: var(--cd-text-xs);
    font-weight: 500;
    color: var(--cd-text-tertiary);
  }
  .cd-svc-from-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cd-text-xs);
    font-weight: 500;
    color: var(--cd-text-tertiary);
  }
  .cd-svc-from-price-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .cd-svc-from-price-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--cd-text-tertiary);
    flex-shrink: 0;
  }
  .cd-svc-from-price-stack {
    text-align: right;
    flex-shrink: 0;
    display: none;
  }
  @media (min-width: 640px) {
    .cd-svc-from-price-stack {
      display: block;
    }
  }
  .cd-svc-from-price-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
    line-height: 1.4;
  }
  .cd-svc-from-price-value {
    font-family: var(--cd-font-editorial);
    font-size: 18px;
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1.2;
  }
  .cd-svc-chip-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cd-bg-secondary);
    flex-shrink: 0;
    overflow: hidden;
  }
  .cd-svc-chip-icon:has(img) {
    background: transparent;
  }
  .cd-svc-chip-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cd-svc-chip-icon-glyph {
    font-size: 11px;
    color: var(--cd-text-secondary);
  }
  .cd-service-filter-pill-active .cd-svc-chip-icon {
    background-color: rgba(255, 255, 255, 0.16);
  }
  .cd-service-filter-pill-active .cd-svc-chip-icon-glyph {
    color: inherit;
  }
}
@layer components {
  .cd-pricing-card {
    padding: var(--cd-space-5);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    background: linear-gradient(to bottom, var(--cd-bg-card), var(--cd-bg-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to bottom, color-mix(in srgb, var(--cd-bg-card) 50%, transparent), color-mix(in srgb, var(--cd-bg-secondary) 30%, transparent));
    }
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: var(--cd-panel-border-width, 1px) solid color-mix(in srgb, var(--cd-border-primary) 50%, transparent);
    }
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-pricing-card:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  .cd-pricing-card-title {
    font-size: var(--cd-text-lg);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--cd-text-primary);
    font-family: var(--cd-font-primary);
  }
  .cd-pricing-breakdown {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .cd-pricing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    background-color: var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-bg-primary) 30%, transparent);
    }
    transition: background-color 200ms ease;
  }
  .cd-pricing-item:hover {
    background-color: var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-bg-primary) 50%, transparent);
    }
  }
  .cd-pricing-item-label {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-pricing-item-description {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
    margin-top: 0.125rem;
  }
  .cd-pricing-item-value {
    font-size: var(--cd-text-base);
    font-weight: 700;
    color: var(--cd-text-primary);
    white-space: nowrap;
  }
  .cd-pricing-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: var(--cd-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .cd-pricing-badge-hourly {
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 15%, transparent);
    }
    color: var(--cd-color-accent);
    border: 1px solid var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-accent) 30%, transparent);
    }
  }
  .cd-pricing-badge-per-issue {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 15%, transparent);
    }
    color: var(--cd-color-success);
    border: 1px solid var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-success) 30%, transparent);
    }
  }
  .cd-pricing-badge-flat-rate {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    color: var(--cd-color-primary);
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 30%, transparent);
    }
  }
  .cd-pricing-badge-warning {
    background-color: color-mix(in srgb, #f59e0b 15%, transparent);
    color: #d97706;
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
  }
  .cd-pricing-badge-neutral {
    background-color: color-mix(in srgb, #64748b 15%, transparent);
    color: #64748b;
    border: 1px solid color-mix(in srgb, #64748b 30%, transparent);
  }
  .cd-pricing-input-group {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .cd-pricing-input-full {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .cd-pricing-currency-wrapper {
    position: relative;
  }
  .cd-pricing-currency-wrapper.cd-pricing-currency-tight, .cd-pricing-percent-wrapper.cd-pricing-currency-tight {
    max-width: 200px;
  }
  .cd-pricing-currency-symbol {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--cd-text-sm);
    font-weight: 500;
    pointer-events: none;
    color: var(--cd-text-secondary);
  }
  .cd-pricing-currency-input {
    display: block;
    width: 100%;
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 8);
    &::placeholder {
      color: var(--color-gray-400);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    border: 1px solid var(--cd-border-input);
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-primary);
    font-family: var(--cd-font-primary);
    transition: var(--cd-transition);
  }
  .cd-pricing-currency-input:focus {
    border-color: var(--cd-color-primary);
  }
  .cd-pricing-currency-input::-webkit-outer-spin-button, .cd-pricing-currency-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .cd-pricing-currency-input[type=number] {
    -moz-appearance: textfield;
  }
  .cd-pricing-percent-wrapper {
    position: relative;
  }
  .cd-pricing-percent-wrapper .cd-pricing-currency-symbol {
    left: auto;
    right: 0.75rem;
  }
  .cd-pricing-percent-wrapper .cd-pricing-currency-input {
    padding-right: calc(var(--spacing) * 8);
    padding-left: calc(var(--spacing) * 4);
  }
  .cd-pricing-summary {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-pricing-summary-highlight {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--cd-text-primary);
  }
  .cd-pricing-comparison {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .cd-pricing-comparison-item {
    background-color: var(--cd-bg-card);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-sm));
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-pricing-comparison-item:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-md)));
  }
  .cd-segment-group {
    display: inline-flex;
    background-color: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-xl);
    padding: 4px;
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-segment-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--cd-text-secondary);
    background-color: transparent;
    flex: 1;
    text-align: center;
    white-space: nowrap;
  }
  .cd-segment-label:hover {
    color: var(--cd-text-primary);
  }
  input[type="radio"]:checked + .cd-segment-label {
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-primary);
    box-shadow: var(--cd-shadow-sm);
    font-weight: 600;
  }
  input[type="radio"]:focus + .cd-segment-label {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-segment-group-full {
    display: flex;
    width: 100%;
  }
  .cd-segment-group-full .cd-segment-label {
    flex: 1;
    min-width: 0;
  }
  @media (max-width: 640px) {
    .cd-segment-group-full {
      flex-direction: column;
      gap: 4px;
    }
    .cd-segment-group-full .cd-segment-label {
      width: 100%;
      justify-content: flex-start;
      padding: 0.75rem 1rem;
    }
  }
}
.cd-static-picture {
  display: contents;
}
@layer components {
  .cd-image-thumbnail-sm {
    width: var(--cd-space-12);
    height: var(--cd-space-12);
    object-fit: cover;
    border-radius: var(--cd-radius-lg);
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
    cursor: pointer;
  }
  .cd-image-thumbnail-sm:hover {
    border-color: var(--cd-color-primary);
    box-shadow: var(--cd-shadow-md);
    transform: scale(1.05);
  }
  .cd-image-grid {
    display: grid;
    gap: var(--cd-space-4);
  }
  .cd-image-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--cd-radius-lg);
    background-color: #f3f4f6;
  }
  .cd-image-container-square {
    aspect-ratio: 1;
  }
  .cd-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media (hover: none) {
    .cd-image-thumbnail-sm:hover {
      transform: scale(1);
    }
  }
  .image-grid-container {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
  }
  .cd-compact-preview .cd-image-grid, .cd-compact-preview .image-grid-container {
    display: flex;
    flex-wrap: wrap;
  }
  .cd-compact-preview .enhanced-image-item, .cd-compact-preview .new-image-preview {
    width: 6rem;
    height: 6rem;
  }
  .image-grid-container-lg {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .enhanced-image-item {
    position: relative;
    cursor: move;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    aspect-ratio: 1;
  }
  .image-container {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .enhanced-image-item.sortable-ghost {
    opacity: 50%;
  }
  .enhanced-image-item.sortable-chosen {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-science-blue);
  }
  .enhanced-image-display {
    height: 100%;
    width: 100%;
    cursor: move;
    object-fit: cover;
  }
  .image-controls {
    position: absolute;
    top: calc(var(--spacing) * 1);
    right: calc(var(--spacing) * 1);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .enhanced-image-item:hover .image-controls, .new-image-preview:hover .image-controls {
    opacity: 100%;
  }
  .image-control-btn {
    display: flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .image-control-drag {
    cursor: move;
    background-color: var(--color-gray-600);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .image-control-primary {
    background-color: var(--color-yellow-500);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-600);
      }
    }
  }
  .image-control-primary.active {
    background-color: var(--color-yellow-600);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-yellow-300);
  }
  .image-control-remove {
    background-color: var(--color-red-500);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-600);
      }
    }
  }
  .new-image-preview {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    aspect-ratio: 1;
  }
  .new-image-preview img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .remove-new-file-btn {
    position: absolute;
    top: calc(var(--spacing) * 1);
    right: calc(var(--spacing) * 1);
    display: flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-500);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-600);
      }
    }
  }
  .file-counter {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }
  .upload-state {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .upload-state.hidden {
    pointer-events: none;
    opacity: 0%;
  }
  .upload-icon-container {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .upload-success {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
    padding: calc(var(--spacing) * 3);
    color: var(--color-green-600);
  }
  .upload-feedback {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding: calc(var(--spacing) * 3);
    color: var(--color-red-600);
  }
  .upload-error-badge {
    display: none;
    position: absolute;
    top: -4px;
    left: -4px;
    width: 16px;
    height: 16px;
    background-color: oklch(63.7% 0.237 25.331);
    border-radius: 9999px;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 8px;
    pointer-events: none;
  }
  .cd-image-upload-wrapper:has(.upload-feedback:not(.hidden)) .upload-error-badge {
    display: flex;
  }
  .upload-icon-counter {
    font-size: 10px;
    line-height: 1.2;
    margin-top: 1px;
  }
  .cd-before-after-upload {
    width: 100%;
  }
  .cd-progress-requirements {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 4);
  }
  .requirement-item {
    display: flex;
    align-items: center;
  }
  .requirement-item.fulfilled i {
    color: var(--color-green-500);
  }
  .requirement-item.fulfilled span {
    color: var(--color-green-600);
  }
  .cd-upload-section {
    width: 100%;
  }
  .cd-dropzone-before {
    border-color: color-mix(in srgb, #ff6b35 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-warning-orange) 30%, transparent);
    }
    background-color: color-mix(in srgb, #ff6b35 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 5%, transparent);
    }
  }
  .cd-dropzone-before:hover, .cd-dropzone-before[data-upload-active="true"] {
    border-color: var(--color-warning-orange);
    background-color: color-mix(in srgb, #ff6b35 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 10%, transparent);
    }
  }
  .cd-dropzone-after {
    border-color: color-mix(in srgb, #0066cc 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-science-blue) 30%, transparent);
    }
    background-color: color-mix(in srgb, #0066cc 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
    }
  }
  .cd-dropzone-after:hover, .cd-dropzone-after[data-upload-active="true"] {
    border-color: var(--color-science-blue);
    background-color: color-mix(in srgb, #0066cc 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 10%, transparent);
    }
  }
  .cd-before-after-preview {
    width: 100%;
  }
  .before-image-count, .after-image-count {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-gray-500);
  }
  .cd-comparison-preview {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-50);
    padding: calc(var(--spacing) * 6);
  }
  .cd-comparison-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: center;
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .comparison-side {
    position: relative;
  }
  .comparison-header {
    margin-bottom: calc(var(--spacing) * 3);
    text-align: center;
  }
  .comparison-label {
    display: inline-block;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .comparison-before .comparison-label {
    background-color: var(--color-warning-orange);
    color: var(--color-white);
  }
  .comparison-after .comparison-label {
    background-color: var(--color-science-blue);
    color: var(--color-white);
  }
  .comparison-image-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    aspect-ratio: 4/3;
  }
  .comparison-image-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .comparison-image-container.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
  }
  .comparison-image-container.empty:before {
    content: "No image selected";
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .comparison-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--spacing) * 4);
  }
  .comparison-arrow {
    display: flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-deep-purple);
    color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .comparison-arrow i {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  @media (max-width: 1023px) {
    .cd-comparison-container {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: calc(var(--spacing) * 6);
    }
    .comparison-arrow {
      rotate: 90deg;
    }
    .comparison-divider {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .enhanced-image-item[data-image-type="before"] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: color-mix(in srgb, #ff6b35 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-warning-orange) 20%, transparent);
    }
  }
  .enhanced-image-item[data-image-type="after"] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: color-mix(in srgb, #0066cc 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
    }
  }
  .enhanced-image-item[data-image-type="before"]:hover {
    --tw-ring-color: color-mix(in srgb, #ff6b35 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-warning-orange) 40%, transparent);
    }
  }
  .enhanced-image-item[data-image-type="after"]:hover {
    --tw-ring-color: color-mix(in srgb, #0066cc 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-science-blue) 40%, transparent);
    }
  }
  .image-overlay {
    position: absolute;
    top: calc(var(--spacing) * 1);
    right: calc(var(--spacing) * 1);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .enhanced-image-item:hover .image-overlay {
    opacity: 100%;
  }
  .image-control {
    min-height: calc(var(--spacing) * 11);
    min-width: calc(var(--spacing) * 11);
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .image-control-primary {
    background-color: var(--color-yellow-500);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-600);
      }
    }
  }
  .image-control-primary.active {
    background-color: var(--color-yellow-600);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-yellow-300);
  }
  .image-control-remove {
    background-color: var(--color-red-500);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-600);
      }
    }
  }
  .image-info {
    position: absolute;
    right: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    background-color: color-mix(in srgb, #000 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
    padding: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-white);
  }
  .image-caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }
  .image-type {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
  }
  .cd-upload-section[data-drag-over="true"] .cd-dropzone {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .cd-upload-section[data-drag-over="true"] .cd-dropzone-before {
    border-color: var(--color-warning-orange);
    background-color: color-mix(in srgb, #ff6b35 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning-orange) 20%, transparent);
    }
  }
  .cd-upload-section[data-drag-over="true"] .cd-dropzone-after {
    border-color: var(--color-science-blue);
    background-color: color-mix(in srgb, #0066cc 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
    }
  }
  .cd-before-after-upload[data-validation-state="invalid"] .cd-progress-requirements {
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
  }
  .cd-before-after-upload[data-validation-state="valid"] .cd-progress-requirements {
    border-color: var(--color-green-200);
    background-color: var(--color-green-50);
  }
  .cd-dropzone:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-science-blue);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    outline-style: none;
  }
  .cd-dropzone[data-focused="true"] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-science-blue);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .cd-dropzone-before:focus-visible {
    --tw-ring-color: var(--color-warning-orange);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .cd-dropzone-before[data-focused="true"] {
    --tw-ring-color: var(--color-warning-orange);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .sr-only {
    position: absolute;
    margin: -1px;
    height: 1px;
    width: 1px;
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: calc(var(--spacing) * 0);
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
  }
  .cd-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .cd-live-region[aria-live="polite"] {
    display: block;
  }
  @media (prefers-contrast: high) {
    .cd-dropzone {
      border-style: var(--tw-border-style);
      border-width: 2px;
      --tw-border-style: solid;
      border-style: solid;
    }
    .image-control {
      border-style: var(--tw-border-style);
      border-width: 1px;
      --tw-border-style: solid;
      border-style: solid;
    }
  }
  .cd-document-upload-wrapper {
    width: 100%;
  }
  .cd-dropzone-document {
    min-height: 140px;
  }
  .cd-document-preview {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 4);
    border-color: var(--cd-border-secondary);
    background-color: var(--cd-bg-primary);
  }
  .cd-document-preview .document-icon {
    display: flex;
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 10%, transparent);
    }
  }
  .cd-document-preview .document-icon i {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    color: var(--cd-color-error);
  }
  .cd-document-preview .document-thumbnail {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    object-fit: cover;
    border-color: var(--cd-border-secondary);
  }
  .cd-document-info {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .cd-document-info .document-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--cd-text-primary);
  }
  .cd-document-info .document-size {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--cd-text-secondary);
  }
  .cd-document-actions {
    display: flex;
    flex-shrink: 0;
    gap: calc(var(--spacing) * 2);
  }
  .cd-document-action-btn {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--cd-text-secondary);
  }
  .cd-document-action-btn:hover {
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-document-action-btn.remove:hover {
    color: var(--cd-color-error);
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 10%, transparent);
    }
  }
  .cd-document-upload-wrapper .upload-state-converting {
    text-align: center;
  }
  @media (max-width: 639px) {
    .cd-document-preview {
      flex-direction: column;
      gap: calc(var(--spacing) * 3);
      padding: calc(var(--spacing) * 3);
      text-align: center;
    }
    .cd-document-info {
      width: 100%;
    }
    .cd-document-info .document-name {
      text-align: center;
    }
    .cd-document-actions {
      justify-content: center;
    }
  }
}
@layer components {
  img.text-xs {
    width: 0.75rem;
    height: 0.75rem;
    object-fit: contain;
  }
  img.text-sm {
    width: 0.875rem;
    height: 0.875rem;
    object-fit: contain;
  }
  img.text-base {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
  }
  img.text-lg {
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
  }
  img.text-xl {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
  }
  img.text-2xl {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
  }
  img.text-3xl {
    width: 1.875rem;
    height: 1.875rem;
    object-fit: contain;
  }
  img.cd-hero-watermark {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    opacity: 0.32;
    pointer-events: none;
    user-select: none;
    margin-bottom: var(--cd-space-2);
    margin-left: auto;
    margin-right: auto;
  }
  @media (min-width: 768px) {
    img.cd-hero-watermark {
      width: 48px;
      height: 48px;
    }
  }
  img.cd-card-category-profession-icon {
    width: 0.875rem;
    height: 0.875rem;
    object-fit: contain;
  }
  .cd-category-section-icon:has(img) {
    background-color: transparent;
    padding: 0;
  }
  .cd-category-section-icon img {
    width: 100%;
    height: 100%;
    max-width: 3rem;
    max-height: 3rem;
    object-fit: contain;
  }
  .cd-card-interactive-icon-neutral:has(img) {
    background-color: transparent;
  }
  .cd-card-interactive-icon img {
    width: 100%;
    height: 100%;
    max-width: 2.5rem;
    max-height: 2.5rem;
    object-fit: contain;
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  .cd-card-interactive:hover .cd-card-interactive-icon-neutral:has(img) {
    background-color: transparent;
  }
  .cd-card-interactive:hover .cd-card-interactive-icon:has(img) img {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 8px var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--cd-color-primary) 25%, transparent));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-card-interactive:hover .cd-card-interactive-icon:has(img) img {
      transform: none;
    }
  }
  .cd-card-category-icon:has(img) {
    background-color: transparent;
  }
  .cd-card-category-icon img {
    width: 100%;
    height: 100%;
    max-width: 3.5rem;
    max-height: 3.5rem;
    object-fit: contain;
  }
  .cd-btn-filter img, .cd-btn-filter-active img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
  }
  .cd-wizard-card-icon:has(img) {
    background: transparent;
  }
  .cd-wizard-card:hover .cd-wizard-card-icon:has(img), .cd-wizard-card-selected .cd-wizard-card-icon:has(img), .cd-wizard-card:has(input:checked) .cd-wizard-card-icon:has(img) {
    background: transparent;
  }
  .cd-wizard-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cd-bg-tertiary:has(> img) {
    background-color: transparent;
  }
  .cd-bg-tertiary > img {
    width: 100%;
    height: 100%;
    max-width: 3rem;
    max-height: 3rem;
    object-fit: contain;
  }
  .cd-btn img {
    width: 1.5em;
    height: 1.5em;
    object-fit: contain;
    vertical-align: -0.2em;
  }
  .cd-card-related-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--cd-space-3);
    padding: var(--cd-space-6) var(--cd-space-4);
    background-color: var(--cd-bg-primary);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
    position: relative;
  }
  .cd-card-related-service:hover {
    border-color: var(--cd-color-primary);
    transform: translateY(-3px);
    box-shadow: var(--cd-panel-hover-shadow, 0 8px 24px -8px var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--cd-panel-hover-shadow, 0 8px 24px -8px color-mix(in srgb, var(--cd-color-primary) 20%, transparent));
    }
  }
  .cd-card-related-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    transition: transform 0.2s ease;
  }
  .cd-card-related-service:hover .cd-card-related-service-icon {
    transform: scale(1.08);
  }
  .cd-card-related-service-icon img.cd-card-related-service-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cd-card-related-service-icon:has(i) {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: var(--cd-bg-secondary);
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .cd-card-related-service-icon i.cd-card-related-service-icon-img {
    font-size: 1.5rem;
    color: var(--cd-text-secondary);
    transition: color 0.2s ease;
  }
  .cd-card-related-service:hover .cd-card-related-service-icon:has(i) {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, var(--cd-bg-secondary));
    }
  }
  .cd-card-related-service:hover .cd-card-related-service-icon i {
    color: var(--cd-color-primary);
  }
  .cd-card-related-service-title {
    font-size: var(--cd-text-base);
    font-weight: 600;
    color: var(--cd-text-primary);
    transition: color 0.2s ease;
    margin: 0;
  }
  .cd-card-related-service:hover .cd-card-related-service-title {
    color: var(--cd-color-primary);
  }
  .cd-card-related-service-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1-5, 0.375rem);
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    margin: 0;
  }
  .cd-card-related-service-arrow {
    position: absolute;
    bottom: var(--cd-space-3);
    right: var(--cd-space-3);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-xs);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }
  .cd-card-related-service:hover .cd-card-related-service-arrow {
    opacity: 1;
    transform: translateX(0);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 12%, transparent);
    }
    color: var(--cd-color-primary);
  }
  .cd-card-related-service:focus-visible {
    outline: none;
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 3px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 25%, transparent);
    }
  }
  .cd-card-related-service:focus-visible .cd-card-related-service-arrow {
    opacity: 1;
    transform: translateX(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-card-related-service, .cd-card-related-service-icon, .cd-card-related-service-arrow {
      transition: none;
    }
    .cd-card-related-service:hover, .cd-card-related-service:hover .cd-card-related-service-icon {
      transform: none;
    }
  }
}
@layer components {
  .cd-preview-card {
    background-color: var(--cd-bg-card);
    border-color: var(--cd-border-primary);
  }
  .cd-preview-navbar {
    background-color: var(--cd-bg-primary);
    border-color: var(--cd-border-primary);
  }
  .cd-preview-content {
    background-color: var(--cd-bg-primary);
  }
  .cd-preview-border {
    border: 1px solid var(--cd-border-primary);
    background-color: var(--cd-bg-card);
  }
  .cd-preview-text-xs {
    font-size: var(--cd-text-xs);
  }
  .cd-preview-text-sm {
    font-size: var(--cd-text-sm);
  }
  .cd-preview-text-base {
    font-size: var(--cd-text-base);
  }
  .cd-preview-text-lg {
    font-size: var(--cd-text-lg);
  }
  .cd-preview-text-xl {
    font-size: var(--cd-text-xl);
  }
  .cd-preview-text-primary {
    color: var(--cd-text-primary);
  }
  .cd-preview-text-secondary {
    color: var(--cd-text-secondary);
  }
  .cd-preview-text-success {
    color: var(--cd-color-success);
  }
  .cd-preview-text-error {
    color: var(--cd-color-error);
  }
  .cd-preview-text-accent {
    color: var(--cd-color-primary);
  }
  .cd-preview-nav-item {
    color: var(--cd-text-primary);
    font-size: var(--cd-text-sm);
  }
  .cd-preview-nav-item-active {
    background-color: var(--cd-color-primary);
    color: white;
    font-size: var(--cd-text-sm);
  }
  .cd-preview-heading {
    color: var(--cd-text-primary);
    font-size: var(--cd-text-xl);
  }
  .cd-preview-body {
    color: var(--cd-text-primary);
    font-size: var(--cd-text-base);
  }
  .cd-preview-label {
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-xs);
  }
  .cd-preview-caption {
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-sm);
  }
  .cd-preview-bg-primary {
    background-color: var(--cd-bg-primary);
  }
  .cd-preview-bg-card {
    background-color: var(--cd-bg-card);
  }
  .cd-preview-bg-accent {
    background-color: var(--cd-color-primary);
  }
  .cd-preview-bg-success {
    background-color: var(--cd-color-success);
  }
  .cd-preview-icon-xs {
    font-size: var(--cd-text-sm);
  }
  .cd-preview-icon-sm {
    font-size: var(--cd-text-base);
  }
  .cd-preview-badge {
    font-size: var(--cd-text-xs);
  }
  .cd-preview-badge-success {
    color: var(--cd-color-success);
    font-size: var(--cd-text-xs);
  }
  .cd-preview-badge-success-bg {
    color: var(--cd-color-success);
    font-size: var(--cd-text-base);
  }
  .cd-preview-badge-primary {
    color: var(--cd-color-primary);
    font-size: var(--cd-text-xs);
  }
  .cd-preview-border-secondary {
    border-color: var(--cd-text-secondary);
  }
}
@layer components {
  .portfolio-view {
    transition: opacity 0.2s ease-in-out;
  }
  .portfolio-view.hidden {
    opacity: 0;
  }
  .portfolio-view.active {
    opacity: 1;
  }
  #portfolio-view-toggle .cd-view-toggle-btn {
    cursor: pointer;
  }
}
@layer components {
  .cd-portfolio-breadcrumb {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--cd-text-tertiary);
  }
  .cd-portfolio-breadcrumb a {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .cd-portfolio-breadcrumb a:hover {
    color: var(--color-science-blue);
  }
  .cd-portfolio-breadcrumb-current {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--cd-text-primary);
  }
  .cd-portfolio-breadcrumb-separator {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--cd-text-tertiary);
  }
  .cd-portfolio-section-title {
    margin-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--cd-text-primary);
    line-height: 1.3;
  }
  .cd-portfolio-section-description {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--cd-text-secondary);
    line-height: 1.5;
  }
  .cd-portfolio-info-box {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
    --tw-gradient-to: color-mix(in oklab, var(--color-trust-blue) 5%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
    padding: calc(var(--spacing) * 4);
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .cd-portfolio-info-box-icon {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--cd-color-science-blue), var(--cd-color-trust-blue));
    color: white;
    font-size: 0.875rem;
  }
  .cd-portfolio-info-box-warning {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: color-mix(in oklab, var(--color-warning-orange) 5%, transparent);
    --tw-gradient-to: color-mix(in oklab, var(--color-warning-orange) 10%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    border-color: color-mix(in oklab, var(--color-warning-orange) 20%, transparent);
  }
  .cd-portfolio-info-box-warning .cd-portfolio-info-box-icon {
    background: linear-gradient(135deg, var(--cd-color-warning-orange), #f59e0b);
  }
  .cd-portfolio-info-box-success {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-green-50);
    --tw-gradient-to: var(--color-emerald-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    border-color: var(--color-green-200);
  }
  .cd-portfolio-info-box-success .cd-portfolio-info-box-icon {
    background: linear-gradient(135deg, #10b981, #059669);
  }
  .cd-portfolio-info-box-content {
    flex: 1;
  }
  .cd-portfolio-info-box-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--cd-text-primary);
  }
  .cd-portfolio-info-box-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .cd-portfolio-info-box-list li {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--cd-text-secondary);
  }
  .cd-portfolio-info-box-list li::before {
    content: "→";
    margin-top: calc(var(--spacing) * 0.5);
    flex-shrink: 0;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-science-blue);
  }
  .cd-portfolio-info-box-warning .cd-portfolio-info-box-list li::before {
    color: var(--color-warning-orange);
  }
  .cd-portfolio-info-box-success .cd-portfolio-info-box-list li::before {
    color: var(--color-green-600);
  }
  .cd-portfolio-collapsible-wrapper {
    overflow: hidden;
    border-radius: var(--radius-lg);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    border: 1px solid var(--cd-border-primary);
  }
  .cd-portfolio-collapsible-wrapper-active {
    border-color: color-mix(in srgb, #0066cc 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-science-blue) 20%, transparent);
    }
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .cd-portfolio-collapsible-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing) * 4);
    cursor: pointer;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    background-color: var(--cd-bg-secondary);
  }
  .cd-portfolio-collapsible-trigger:hover {
    background-color: var(--cd-bg-tertiary);
  }
  .cd-portfolio-collapsible-trigger-active {
    background-color: color-mix(in srgb, #0066cc 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-science-blue) 5%, transparent);
    }
  }
  .cd-portfolio-collapsible-icon-container {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--cd-bg-tertiary);
  }
  .cd-portfolio-collapsible-icon-container i {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--cd-text-secondary);
  }
  .cd-portfolio-collapsible-title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--cd-text-primary);
  }
  .cd-portfolio-collapsible-chevron {
    color: var(--cd-text-tertiary);
  }
  .cd-portfolio-collapsible-content {
    overflow: hidden;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    max-height: 0;
    opacity: 0;
  }
  .cd-portfolio-collapsible-content-open {
    max-height: 2000px;
    opacity: 1;
  }
  .cd-portfolio-collapsible-content-open .cd-portfolio-info-box {
    border-radius: 0;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: calc(var(--spacing) * 0);
    background: rgb(46 144 250 / 0.05);
  }
  .cd-portfolio-collapsible-content-open .cd-portfolio-info-box-content {
    padding: calc(var(--spacing) * 4);
  }
  .cd-portfolio-collapsible-content-open .cd-portfolio-info-box-icon {
    margin-top: calc(var(--spacing) * 4);
    margin-left: calc(var(--spacing) * 4);
  }
  .cd-portfolio-collapsible-icon {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .cd-portfolio-collapsible-icon-open {
    rotate: 180deg;
  }
}
@layer components {
  .cd-question-item {
    position: relative;
    transition: var(--cd-transition);
    border-left: 4px solid transparent;
  }
  .cd-question-item:hover {
    border-left-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 2%, var(--cd-bg-primary));
    }
  }
  .cd-question-item.cd-question-item-active {
    border-left-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 5%, var(--cd-bg-primary));
    }
  }
  .cd-question-drag-handle {
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 40px;
    background-color: var(--cd-color-primary);
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: var(--cd-transition);
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-question-item:hover .cd-question-drag-handle {
    opacity: 1;
  }
  .cd-question-drag-handle::before {
    content: '⋮⋮';
    color: white;
    font-size: 10px;
    line-height: 1;
    transform: rotate(90deg);
  }
  .cd-filter-btn.active {
    background-color: var(--cd-color-primary);
    color: white;
    border-color: var(--cd-color-primary);
  }
  .cd-filter-btn:not(.active) {
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-secondary);
    border-color: var(--cd-border-primary);
  }
  .cd-filter-btn:not(.active):hover {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, var(--cd-bg-primary));
    }
    color: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
  }
  .cd-icon-preview-large {
    width: 512px;
    height: 512px;
    object-fit: contain;
  }
  .cd-question-table-row td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
  }
  .cd-question-table-row {
    cursor: default;
    transition: background-color 120ms ease;
  }
  .cd-question-table-row:hover {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 3%, transparent);
    }
  }
  .cd-question-table-row--active {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    box-shadow: inset 3px 0 0 var(--cd-color-primary);
  }
  .cd-question-table-row--active:hover {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 12%, transparent);
    }
  }
  .cd-question-drag-handle--table {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    opacity: 0.5;
    transition: opacity 120ms ease;
  }
  .cd-question-drag-handle--table::before {
    content: none;
  }
  .cd-question-table-row:hover .cd-question-drag-handle--table {
    opacity: 1;
  }
  .cd-question-table-label {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--cd-text-primary);
    font-weight: 500;
    cursor: pointer;
    max-width: 100%;
  }
  .cd-question-table-label:hover {
    color: var(--cd-color-primary);
    text-decoration: underline;
  }
  .cd-question-table-label:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
  }
  .cd-question-table-action {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .cd-question-table-action:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
  }
  .cd-question-edit-drawer {
    height: 100vh;
    max-height: 100vh;
  }
  .cd-question-edit-drawer .cd-modal-body::-webkit-scrollbar {
    width: 6px;
  }
  .cd-question-edit-drawer .cd-modal-body::-webkit-scrollbar-thumb {
    background: var(--cd-border-secondary);
    border-radius: 3px;
  }
}
@layer components {
  .cd-article-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-card-bg);
    border: 1px solid var(--cd-border-secondary);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .cd-article-card:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
    transform: translateY(-2px);
  }
  .cd-article-card-featured {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-card-bg);
    border: 1px solid var(--cd-border-secondary);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  @media (min-width: 768px) {
    .cd-article-card-featured {
      flex-direction: row;
    }
    .cd-article-card-featured .cd-article-cover {
      width: 50%;
      flex-shrink: 0;
    }
  }
  .cd-article-card-featured:hover {
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
    transform: translateY(-2px);
  }
  .cd-article-card-hero {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--cd-radius-lg);
    aspect-ratio: 2 / 1;
  }
  @media (max-width: 639px) {
    .cd-article-card-hero {
      aspect-ratio: 4 / 3;
    }
  }
  .cd-article-hero-image {
    position: absolute;
    inset: 0;
  }
  .cd-article-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .cd-article-card-hero:hover .cd-article-hero-image img {
    transform: scale(1.04);
  }
  .cd-article-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 0deg, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.45) 45%, rgb(0 0 0 / 0.08) 100% );
    display: flex;
    align-items: flex-end;
  }
  .cd-article-hero-content {
    padding: var(--cd-space-5) var(--cd-space-5);
    width: 100%;
  }
  @media (min-width: 768px) {
    .cd-article-hero-content {
      padding: var(--cd-space-8) var(--cd-space-8);
    }
  }
  .cd-article-card-compact {
    display: flex;
    flex-direction: row;
    gap: var(--cd-space-3);
    overflow: hidden;
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-card-bg);
    border: 1px solid var(--cd-border-secondary);
    padding: var(--cd-space-3);
    transition: box-shadow 0.2s ease;
  }
  .cd-article-card-compact:hover {
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.06);
  }
  .cd-article-card-compact .cd-article-cover {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    border-radius: var(--cd-radius-md);
  }
  .cd-article-cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--cd-bg-secondary);
  }
  .cd-article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .cd-article-card:hover .cd-article-cover img, .cd-article-card-featured:hover .cd-article-cover img {
    transform: scale(1.03);
  }
  .cd-article-body {
    max-width: 82ch;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--cd-text-lg);
    line-height: 1.75;
    color: var(--cd-text-primary);
  }
  .cd-article-body h2 {
    font-size: var(--cd-text-2xl);
    font-weight: 700;
    margin-top: var(--cd-space-8);
    margin-bottom: var(--cd-space-4);
    color: var(--cd-text-primary);
  }
  .cd-article-body h3 {
    font-size: var(--cd-text-xl);
    font-weight: 600;
    margin-top: var(--cd-space-6);
    margin-bottom: var(--cd-space-3);
    color: var(--cd-text-primary);
  }
  .cd-article-body h4 {
    font-size: var(--cd-text-lg);
    font-weight: 600;
    margin-top: var(--cd-space-5);
    margin-bottom: var(--cd-space-3);
    color: var(--cd-text-primary);
  }
  .cd-article-body p {
    margin-bottom: var(--cd-space-4);
  }
  .cd-article-body ul, .cd-article-body ol {
    margin-bottom: var(--cd-space-4);
    padding-left: var(--cd-space-6);
  }
  .cd-article-body li {
    margin-bottom: var(--cd-space-2);
  }
  .cd-article-body ul li {
    list-style-type: disc;
  }
  .cd-article-body ol li {
    list-style-type: decimal;
  }
  .cd-article-body blockquote {
    border-left: 4px solid var(--cd-color-primary);
    padding-left: var(--cd-space-4);
    margin: var(--cd-space-6) 0;
    font-style: italic;
    color: var(--cd-text-secondary);
  }
  .cd-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--cd-radius-lg);
    margin: var(--cd-space-6) 0;
  }
  .cd-article-body figure, .cd-article-body p:has(> img) {
    position: relative;
  }
  .cd-article-body figure::after, .cd-article-body p:has(> img)::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--cd-radius-lg);
    box-shadow: inset 0 0 40px 20px var(--cd-bg-primary), inset 0 0 80px 40px rgba(255, 255, 255, 0.4);
  }
  .cd-article-body a {
    color: var(--cd-color-primary);
    text-decoration: underline;
  }
  .cd-article-body a:hover {
    opacity: 0.8;
  }
  .cd-article-body pre {
    background-color: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-md);
    padding: var(--cd-space-4);
    overflow-x: auto;
    margin-bottom: var(--cd-space-4);
    font-size: var(--cd-text-sm);
  }
  .cd-article-body code {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.9em;
  }
  .cd-article-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--cd-bg-secondary);
    margin-inline: auto;
  }
  .cd-article-hero img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .cd-article-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 80px 40px white;
  }
  .cd-category-pills-scroll {
    display: flex;
    gap: var(--cd-space-2);
    overflow-x: auto;
    padding-bottom: var(--cd-space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .cd-category-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1);
    white-space: nowrap;
    padding: var(--cd-space-2) var(--cd-space-4);
    border-radius: 9999px;
    font-size: var(--cd-text-sm);
    font-weight: 500;
    transition: all 0.2s ease;
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-secondary);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-category-pill:hover {
    border-color: var(--cd-color-primary);
    color: var(--cd-color-primary);
  }
  .cd-category-pill-active {
    background-color: var(--cd-color-primary);
    color: white;
    border-color: var(--cd-color-primary);
  }
  .cd-category-pill-active:hover {
    opacity: 0.9;
    color: white;
  }
  .cd-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--cd-space-1) var(--cd-space-3);
    border-radius: 9999px;
    font-size: var(--cd-text-xs);
    font-weight: 500;
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    transition: color 0.15s ease;
  }
  .cd-tag-pill:hover {
    color: var(--cd-color-primary);
  }
  .cd-share-bar {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3) 0;
    border-top: 1px solid var(--cd-border-secondary);
    border-bottom: 1px solid var(--cd-border-secondary);
  }
  .cd-share-bar a, .cd-share-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
    color: var(--cd-text-tertiary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-share-bar a:hover, .cd-share-bar button:hover {
    color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
  }
  .cd-share-dropdown-item {
    transition: background-color 0.15s ease;
  }
  .cd-share-dropdown-item:hover, .cd-share-dropdown-item:focus-visible {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
  }
  .cd-toc-link {
    display: block;
    padding: var(--cd-space-1) var(--cd-space-2) var(--cd-space-1) var(--cd-space-3);
    font-size: var(--cd-text-sm);
    font-weight: 500;
    color: var(--cd-text-tertiary);
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.4;
    border-left: 2px solid transparent;
    border-radius: 0 var(--cd-radius-sm) var(--cd-radius-sm) 0;
  }
  .cd-toc-link:hover {
    color: var(--cd-text-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 6%, transparent);
    }
    border-left-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-left-color: color-mix(in srgb, var(--cd-color-primary) 30%, transparent);
    }
    transform: translateX(2px);
  }
  .cd-toc-link-active {
    color: var(--cd-color-primary);
    font-weight: 600;
    border-left-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
  }
  .cd-toc-link-h2 {
    font-weight: 500;
  }
  .cd-toc-link-h3 {
    font-size: var(--cd-text-xs);
    font-weight: 400;
    padding-left: var(--cd-space-4);
    color: var(--cd-text-tertiary);
    opacity: 0.85;
  }
  .cd-toc-link-h3:hover {
    opacity: 1;
  }
  .cd-toc-link-h3.cd-toc-link-active {
    opacity: 1;
    font-weight: 500;
  }
  .cd-toc-sub-items {
    border-left: 1px solid var(--cd-border-secondary);
    margin-left: var(--cd-space-3);
    padding-left: 0;
  }
}
@layer components {
  .cd-article-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .cd-article-list-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.125rem;
    border-radius: var(--cd-radius-lg, 0.75rem);
    background: var(--cd-bg-card, #fff);
    transition: background-color 0.15s ease;
  }
  .cd-article-list-card:hover {
    background: var(--cd-bg-soft, #fafafa);
  }
  .cd-article-list-card + .cd-article-list-card {
    border-top: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  .cd-article-list-card--muted {
    opacity: 0.7;
  }
  .cd-article-list-card__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.125rem;
  }
  .cd-article-list-card__thumb {
    flex-shrink: 0;
    width: 7rem;
    height: 4.75rem;
    overflow: hidden;
    border-radius: var(--cd-radius-md, 0.5rem);
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-article-list-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cd-article-list-card__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 1.5rem;
  }
  .cd-article-list-card__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.4rem;
  }
  .cd-article-list-card__title {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--cd-font-numeral, "Iowan Old Style", Georgia, serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cd-text-primary, #1d1d1f);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color 0.15s ease;
  }
  .cd-article-list-card__title:hover {
    color: var(--cd-color-primary, #0066cc);
  }
  .cd-article-list-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    border-left: 2px solid var(--cd-border-primary, #e5e5e7);
    padding-left: 0.625rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.86rem;
    font-style: italic;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .cd-article-list-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .cd-article-list-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--cd-bg-chip, #f1f1f3);
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .cd-article-list-card__tag i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.66rem;
  }
  .cd-article-list-card__rail {
    display: flex;
    min-width: 6rem;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    text-align: right;
  }
  .cd-article-list-card__metric {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: var(--cd-text-primary, #1d1d1f);
    line-height: 1;
  }
  .cd-article-list-card__metric-value {
    font-size: 1.6rem;
  }
  .cd-article-list-card__metric-unit {
    font-size: 0.78rem;
  }
  .cd-article-list-card__rail-sub {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.72rem;
    font-weight: 500;
  }
  .cd-article-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    color: var(--cd-text-secondary, #6b7280);
    font-size: 0.75rem;
  }
  .cd-article-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  @media (max-width: 768px) {
    .cd-article-list-card__top {
      grid-template-columns: auto 1fr;
    }
    .cd-article-list-card__rail {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: baseline;
      gap: 0.5rem;
      text-align: left;
    }
  }
}
@layer components {
  .cd-editorial-modal {
    --cd-modal-accent: var(--cd-color-premium);
  }
  .cd-modal-plan-change--tier-core {
    --cd-modal-accent: var(--membership-core-primary, #2F855A);
  }
  .cd-modal-plan-change--tier-professional {
    --cd-modal-accent: var(--membership-professional-primary, #0B4F8C);
  }
  .cd-modal-plan-change--tier-business {
    --cd-modal-accent: var(--membership-business-primary, #d4af37);
  }
  .cd-editorial-modal .cd-editorial-modal-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    padding: 0.5rem 0;
  }
  @media (max-width: 720px) {
    .cd-editorial-modal .cd-editorial-modal-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }
  .cd-editorial-modal .cd-editorial-modal-col-left, .cd-editorial-modal .cd-editorial-modal-col-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .cd-editorial-modal .cd-editorial-modal-rhythm, .cd-editorial-modal .cd-editorial-modal-downgrade {
    max-width: 32rem;
    margin: 0 auto;
    text-align: center;
    padding: 1rem 0 0.5rem;
  }
  .cd-editorial-modal .cd-editorial-modal-eyebrow {
    font-family: var(--cd-font-editorial);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-modal-accent);
    margin-bottom: 1.5rem;
  }
  .cd-editorial-modal .cd-editorial-modal-downgrade .cd-editorial-modal-eyebrow {
    color: var(--cd-text-secondary);
  }
  .cd-editorial-modal .cd-editorial-modal-headline {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 0.95;
    color: var(--cd-text-primary);
    margin: 0 0 1.5rem 0;
  }
  .cd-editorial-modal .cd-editorial-modal-headline-accent {
    color: var(--cd-modal-accent);
  }
  .cd-editorial-modal .cd-editorial-dropcap {
    float: left;
    font-family: var(--cd-font-editorial);
    font-size: 4.5rem;
    line-height: 0.85;
    padding: 0.3rem 0.6rem 0 0;
    color: var(--cd-modal-accent);
    font-weight: 700;
  }
  .cd-editorial-modal .cd-editorial-modal-lede {
    font-family: var(--cd-font-editorial);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--cd-text-secondary);
    margin: 0;
  }
  .cd-editorial-modal .cd-editorial-modal-lede.has-dropcap::after {
    content: "";
    display: block;
    clear: both;
  }
  .cd-editorial-modal .cd-editorial-modal-numeral-hero {
    font-size: clamp(3.5rem, 7.5vw, 5.75rem);
    color: var(--cd-text-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
  }
  .cd-editorial-modal .cd-editorial-modal-numeral-currency {
    color: var(--cd-modal-accent);
    margin-right: 0.05em;
  }
  .cd-editorial-modal .cd-editorial-modal-numeral-cents {
    font-size: 0.55em;
    color: var(--cd-text-tertiary);
  }
  .cd-editorial-modal .cd-editorial-modal-caption {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
    margin-top: 0.25rem;
  }
  .cd-editorial-modal .cd-editorial-modal-caption-note {
    font-family: var(--cd-font-editorial);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--cd-text-tertiary);
    letter-spacing: 0;
    text-transform: none;
    margin-top: 0.25rem;
    display: block;
  }
  .cd-editorial-modal .cd-editorial-modal-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
  }
  .cd-editorial-modal .cd-editorial-modal-stat-value {
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--cd-text-primary);
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }
  .cd-editorial-modal .cd-editorial-modal-chip {
    background: var(--cd-modal-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-modal-accent) 18%, transparent);
    }
    color: var(--cd-modal-accent);
    font-family: var(--cd-font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    letter-spacing: 0;
  }
  .cd-editorial-modal .cd-editorial-modal-list {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
  }
  .cd-editorial-modal .cd-editorial-modal-list > li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--cd-border-primary);
    font-family: var(--cd-font-editorial);
    font-size: 1rem;
    color: var(--cd-text-primary);
  }
  .cd-editorial-modal .cd-editorial-modal-list > li:last-child {
    border-bottom: 0;
  }
  .cd-editorial-modal .cd-editorial-modal-ordinal {
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--cd-modal-accent);
    letter-spacing: 0.05em;
  }
  .cd-editorial-modal .cd-editorial-modal-list-more {
    margin-top: 0.25rem;
  }
  .cd-editorial-modal .cd-editorial-modal-list-more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0;
    font-family: var(--cd-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--cd-modal-accent);
    border-bottom: 1px dashed var(--cd-border-primary);
    width: 100%;
  }
  .cd-editorial-modal .cd-editorial-modal-list-more > summary::-webkit-details-marker {
    display: none;
  }
  .cd-editorial-modal .cd-editorial-modal-list-more[open] > summary {
    border-bottom: 0;
  }
  .cd-editorial-modal .cd-editorial-modal-list-more-chevron {
    transition: transform 0.18s ease;
  }
  .cd-editorial-modal .cd-editorial-modal-list-more[open] .cd-editorial-modal-list-more-chevron {
    transform: rotate(180deg);
  }
  .cd-editorial-modal .cd-editorial-modal-list-more-hide, .cd-editorial-modal .cd-editorial-modal-list-more[open] .cd-editorial-modal-list-more-show {
    display: none;
  }
  .cd-editorial-modal .cd-editorial-modal-list-more[open] .cd-editorial-modal-list-more-hide {
    display: inline;
  }
  .cd-editorial-modal .cd-editorial-modal-list-tail {
    margin-top: 0;
  }
  .cd-editorial-modal .cd-editorial-modal-list-caption {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cd-border-primary);
  }
  .cd-editorial-modal .cd-editorial-modal-trail {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cd-border-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
    display: grid;
    grid-template-columns: auto minmax(1.5rem, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
  }
  .cd-editorial-modal .cd-editorial-modal-trail-from {
    color: var(--cd-text-primary);
    margin-left: 0.4em;
  }
  .cd-editorial-modal .cd-editorial-modal-trail-arrow {
    color: var(--cd-modal-accent);
    justify-self: center;
  }
  .cd-editorial-modal .cd-editorial-modal-trail-to {
    color: var(--cd-modal-accent);
    justify-self: end;
  }
  .cd-editorial-modal .cd-editorial-modal-downgrade .cd-editorial-modal-trail-arrow, .cd-editorial-modal .cd-editorial-modal-downgrade .cd-editorial-modal-trail-to {
    color: var(--cd-text-primary);
  }
  .cd-editorial-modal .cd-editorial-modal-rhythm .cd-editorial-modal-trail, .cd-editorial-modal .cd-editorial-modal-downgrade .cd-editorial-modal-trail {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    margin-top: 1.5rem;
  }
  .cd-modal-plan-change .cd-modal-content {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .cd-modal-plan-change .cd-modal-content:hover {
    scrollbar-color: var(--cd-border-secondary) transparent;
  }
  .cd-modal-plan-change .cd-modal-content::-webkit-scrollbar {
    width: 6px;
  }
  .cd-modal-plan-change .cd-modal-content::-webkit-scrollbar-track {
    background: transparent;
  }
  .cd-modal-plan-change .cd-modal-content::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
  }
  .cd-modal-plan-change .cd-modal-content:hover::-webkit-scrollbar-thumb {
    background-color: var(--cd-border-secondary);
  }
}
@layer components {
  .cd-info-card {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    text-align: center;
    background-color: var(--cd-bg-secondary);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
  }
  .cd-info-card-flex {
    display: flex;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 3);
    background-color: var(--cd-bg-secondary);
  }
  @keyframes cd-pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.05);
      opacity: 0.9;
    }
  }
  @keyframes cd-ping {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }
  .cd-animate-pulse {
    animation: cd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .cd-animate-ping {
    animation: cd-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  .cd-success-ring {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 4px;
    border-color: color-mix(in srgb, #228b22 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-forest-green) 20%, transparent);
    }
  }
  .cd-feature-unlock-card {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: color-mix(in srgb, #228b22 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-forest-green) 20%, transparent);
    }
    padding: calc(var(--spacing) * 4);
    background-color: rgba(var(--cd-forest-green-rgb, 16 185 129), 0.05);
  }
  .cd-feature-unlock-icon {
    display: flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: rgba(var(--cd-forest-green-rgb, 16 185 129), 0.2);
  }
  .cd-feature-icon-chip {
    display: flex;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
  }
  .cd-feature-icon-chip i {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .cd-next-steps-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 6);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
  }
  .cd-next-steps-card:hover {
    border-color: var(--color-science-blue);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .cd-next-steps-icon {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .cd-usage-section-bg {
    background-color: var(--cd-bg-secondary);
  }
  .cd-upgrade-warning-card {
    margin-top: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-warning-orange);
    padding: calc(var(--spacing) * 4);
    background-color: rgba(var(--cd-warning-orange-rgb, 251 146 60), 0.05);
  }
  .cd-upgrade-warning-icon-box {
    display: flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: rgba(var(--cd-warning-orange-rgb, 251 146 60), 0.2);
  }
  .cd-btn-current-plan {
    width: 100%;
    text-align: center;
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    border: 2px solid var(--cd-border-secondary);
    padding: var(--cd-space-3) var(--cd-space-5);
    border-radius: var(--button-radius);
    font-weight: 600;
    font-size: var(--cd-text-sm);
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-2);
  }
  .cd-btn-current-plan-tag {
    margin-left: calc(var(--spacing) * 2);
    display: inline-block;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-tertiary);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .cd-plan-badge-corner {
    position: absolute;
    top: calc(var(--spacing) * 0);
    right: calc(var(--spacing) * 0);
    border-bottom-left-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
  }
  .cd-plan-badge-popular {
    background-color: var(--cd-color-primary);
    color: white;
  }
  .cd-plan-badge-value {
    background-color: var(--cd-color-success);
    color: white;
  }
  .cd-plan-badge-current {
    background: linear-gradient(135deg, var(--cd-color-primary) 0%, var(--color-science-blue) 100%);
    color: white;
  }
  .cd-plan-badge-current-professional {
    background: linear-gradient(135deg, var(--membership-professional-primary) 0%, var(--membership-professional-accent) 100% );
    color: white;
  }
  .cd-plan-badge-current-business {
    background: linear-gradient(135deg, var(--membership-business-primary) 0%, var(--membership-business-accent) 100% );
    color: white;
  }
  .cd-plan-badge-current-free {
    background: linear-gradient(135deg, var(--membership-free-primary) 0%, var(--membership-free-accent) 100% );
    color: white;
  }
  .cd-plan-badge-current-core {
    background: linear-gradient(135deg, var(--membership-core-primary) 0%, var(--membership-core-accent) 100% );
    color: white;
  }
  .cd-pricing-comparison-current {
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-pricing-comparison-current.cd-pricing-card-professional {
    background: linear-gradient(135deg, white 0%, var(--membership-professional-secondary) 50%, white 100% );
    border: 2px solid var(--membership-professional-primary);
    box-shadow: 0 0 0 1px var(--membership-professional-primary), var(--cd-panel-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1)), 0 0 15px rgba(11, 79, 140, 0.12);
  }
  .cd-pricing-comparison-current.cd-pricing-card-business {
    background: linear-gradient(135deg, white 0%, var(--membership-business-secondary) 50%, white 100% );
    border: 2px solid var(--membership-business-primary);
    box-shadow: 0 0 0 1px var(--membership-business-primary), var(--cd-panel-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1)), 0 0 15px rgba(212, 175, 55, 0.12);
  }
  .cd-pricing-comparison-current.cd-pricing-card-free {
    background: linear-gradient(135deg, white 0%, var(--membership-free-secondary) 50%, white 100% );
    border: 2px solid var(--membership-free-primary);
    box-shadow: 0 0 0 1px var(--membership-free-primary), var(--cd-panel-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1)), 0 0 10px rgba(107, 114, 128, 0.08);
  }
  .cd-pricing-comparison-current.cd-pricing-card-core {
    background: linear-gradient(135deg, white 0%, var(--membership-core-secondary) 50%, white 100% );
    border: 2px solid var(--membership-core-primary);
    box-shadow: 0 0 0 1px var(--membership-core-primary), var(--cd-panel-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1)), 0 0 15px rgba(47, 133, 90, 0.12);
  }
  :root {
    --membership-free-primary: #6B7280;
    --membership-free-secondary: #F3F4F6;
    --membership-free-accent: #9CA3AF;
    --membership-free-text: #374151;
    --membership-core-primary: #2F855A;
    --membership-core-secondary: #E6F4EA;
    --membership-core-accent: #48BB78;
    --membership-core-text: #276749;
    --membership-professional-primary: #0B4F8C;
    --membership-professional-secondary: #E6F3FF;
    --membership-professional-accent: #60A5FA;
    --membership-professional-text: #1E40AF;
    --membership-business-primary: #d4af37;
    --membership-business-secondary: #fef9e7;
    --membership-business-accent: #c9a227;
    --membership-business-text: #8b6914;
  }
  .cd-profile-card-premium {
    position: relative;
    overflow: visible;
  }
  @keyframes subtle-pulse {
    0%, 100% {
      box-shadow: 0 0 0 2px var(--membership-business-primary), 0 10px 15px -3px rgba(34, 139, 34, 0.1), 0 0 20px rgba(34, 139, 34, 0.12);
    }
    50% {
      box-shadow: 0 0 0 2px var(--membership-business-primary), 0 10px 15px -3px rgba(34, 139, 34, 0.15), 0 0 25px rgba(34, 139, 34, 0.15);
    }
  }
  .cd-avatar-rounded-md.premium {
    border: 2px solid var(--membership-professional-primary);
    box-shadow: 0 0 0 1px var(--membership-professional-secondary), 0 0 10px rgba(11, 79, 140, 0.15);
  }
  .cd-avatar-rounded-md.premium-business {
    border: 3px solid var(--membership-business-primary);
    box-shadow: 0 0 0 2px var(--membership-business-secondary), 0 0 15px rgba(34, 139, 34, 0.2);
    position: relative;
  }
  .cd-avatar-rounded-md.premium-business::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient( 45deg, var(--membership-business-primary), var(--membership-business-accent) );
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.5;
    animation: rotate-gradient 3s linear infinite;
  }
  @keyframes rotate-gradient {
    to {
      transform: rotate(360deg);
    }
  }
  .cd-membership-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .cd-membership-indicator-professional {
    background: linear-gradient( 135deg, var(--membership-professional-primary), var(--membership-professional-accent) );
  }
  .cd-membership-indicator-business {
    background: linear-gradient( 135deg, var(--membership-business-primary), var(--membership-business-accent) );
    animation: indicator-pulse 2s ease-in-out infinite;
  }
  @keyframes indicator-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }
  .cd-tier-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }
  .cd-tier-badge i {
    color: white;
    font-size: 0.5rem;
  }
  .cd-tier-badge-business {
    background-color: var(--membership-business-primary, #d4af37);
  }
  .cd-tier-badge-professional {
    background-color: var(--membership-professional-primary, #0B4F8C);
  }
  .cd-tier-badge-core {
    background-color: var(--membership-core-primary, #2F855A);
  }
  .cd-tier-badge.cd-tier-badge-image {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    width: 38px;
    height: 38px;
    bottom: -12px;
    right: -12px;
  }
  .cd-avatar-with-favorite:has(.cd-avatar-rounded-md) .cd-tier-badge.cd-tier-badge-image {
    width: 28px;
    height: 28px;
    bottom: -8px;
    right: -8px;
  }
  .cd-avatar-with-favorite:has(.cd-avatar-rounded-sm) .cd-tier-badge.cd-tier-badge-image {
    width: 24px;
    height: 24px;
    bottom: -7px;
    right: -7px;
  }
  .cd-avatar-with-favorite:has(.cd-avatar-rounded-xs) .cd-tier-badge.cd-tier-badge-image {
    width: 20px;
    height: 20px;
    bottom: -6px;
    right: -6px;
  }
  .cd-tier-badge-image-inner {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
  }
  .cd-tier-glyph {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.2em;
    object-fit: contain;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
  }
  .cd-badge-soft-primary[data-membership="Professional"] {
    background: linear-gradient( 135deg, var(--membership-professional-secondary), white );
    border: 1px solid var(--membership-professional-primary);
    color: var(--membership-professional-text);
  }
  .cd-profile-card-professional:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--membership-professional-primary), 0 10px 15px -3px rgba(11, 79, 140, 0.15), 0 0 25px rgba(11, 79, 140, 0.1);
  }
  .cd-profile-card-business:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 0 2px var(--membership-business-primary), 0 20px 25px -5px rgba(34, 139, 34, 0.15), 0 0 30px rgba(34, 139, 34, 0.15);
  }
  .cd-avatar-header.premium {
    border-color: var(--membership-professional-primary);
    box-shadow: 0 0 0 3px var(--membership-professional-secondary), 0 0 15px rgba(11, 79, 140, 0.2);
  }
  .cd-avatar-header.premium-business {
    border-color: var(--membership-business-primary);
    box-shadow: 0 0 0 3px var(--membership-business-secondary), 0 0 20px rgba(34, 139, 34, 0.25);
  }
  .cd-avatar-header-wrapper.premium.active {
    border: 3px solid var(--membership-professional-primary);
    box-shadow: 0 0 0 3px var(--membership-professional-secondary), 0 0 15px rgba(11, 79, 140, 0.3), var(--cd-shadow-xl) !important;
  }
  .cd-avatar-header-wrapper.premium-business.active {
    border: 3px solid var(--membership-business-primary);
    box-shadow: 0 0 0 3px var(--membership-business-secondary), 0 0 20px rgba(34, 139, 34, 0.35), var(--cd-shadow-xl) !important;
  }
  .cd-avatar-header-wrapper.premium.inactive {
    border: 3px solid var(--membership-professional-primary);
    box-shadow: 0 0 0 3px var(--membership-professional-secondary), 0 0 15px rgba(11, 79, 140, 0.2), var(--cd-shadow-lg) !important;
    opacity: 0.65;
  }
  .cd-avatar-header-wrapper.premium-business.inactive {
    border: 3px solid var(--membership-business-primary);
    box-shadow: 0 0 0 3px var(--membership-business-secondary), 0 0 20px rgba(34, 139, 34, 0.25), var(--cd-shadow-lg) !important;
    opacity: 0.65;
  }
  .cd-modal-reviews .cd-avatar-rounded-md.premium {
    border-color: var(--membership-professional-primary);
  }
  .cd-modal-reviews .cd-avatar-rounded-md.premium-business {
    border-color: var(--membership-business-primary);
  }
  .cd-limit-card {
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    border: var(--cd-panel-border-width, 2px) solid var(--cd-border-primary);
    box-shadow: var(--cd-panel-shadow, none);
    transition: all 0.2s ease;
    background: var(--cd-card-bg);
    padding: var(--cd-space-4);
    margin-bottom: var(--cd-space-4);
  }
  .cd-limit-card:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  .cd-limit-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-3);
  }
  .cd-limit-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cd-space-3);
  }
  .cd-limit-card-label {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--cd-text-primary);
  }
  .cd-limit-card-usage {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--cd-text-primary);
    display: flex;
    align-items: baseline;
    gap: var(--cd-space-1);
  }
  .cd-limit-card-usage-separator {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--cd-text-tertiary);
    margin: 0 var(--cd-space-1);
  }
  .cd-limit-card-progress {
    margin: var(--cd-space-1) 0;
  }
  .cd-limit-track {
    width: 100%;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    height: 8px;
    background-color: var(--cd-bg-secondary);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .cd-limit-bar {
    height: 100%;
    border-radius: calc(infinity * 1px);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 500ms;
    transition-duration: 500ms;
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .cd-limit-bar-success {
    background: linear-gradient(90deg, var(--cd-color-success), var(--cd-color-success));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-success), color-mix(in srgb, var(--cd-color-success) 80%, white));
    }
  }
  .cd-limit-bar-warning {
    background: linear-gradient(90deg, var(--cd-color-warning), var(--cd-color-warning));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-warning), color-mix(in srgb, var(--cd-color-warning) 80%, white));
    }
  }
  .cd-limit-bar-danger {
    background: linear-gradient(90deg, var(--cd-color-error), var(--cd-color-error));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-error), color-mix(in srgb, var(--cd-color-error) 80%, white));
    }
  }
  .cd-limit-bar-critical {
    background: linear-gradient(90deg, var(--cd-color-error), var(--cd-color-error));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-error), color-mix(in srgb, var(--cd-color-error) 70%, white));
    }
    animation: pulse-limit-bar 2s ease-in-out infinite;
  }
  @keyframes pulse-limit-bar {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
    }
  }
  .cd-limit-card-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cd-space-3);
    flex-wrap: wrap;
  }
  .cd-limit-card-message {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--cd-text-secondary);
    flex: 1;
    min-width: 150px;
  }
  .cd-limit-card-message-warning {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--cd-color-warning);
  }
  .cd-limit-card-message-error {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--cd-color-error);
  }
  .cd-limit-card-cta {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    white-space: nowrap;
  }
  .cd-limit-card-cta-upgrade {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 10%, transparent);
    }
    border: 2px solid var(--cd-color-warning);
    color: var(--cd-color-warning);
  }
  .cd-limit-card-cta-upgrade:hover {
    background-color: var(--cd-color-warning);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .cd-limit-card-cta-primary {
    background: linear-gradient(135deg, var(--cd-color-primary), var(--color-science-blue));
    border: 2px solid transparent;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .cd-limit-card-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
  .cd-limit-card-healthy {
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 30%, transparent);
    }
    background: linear-gradient( to bottom right, white, var(--cd-color-success) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( to bottom right, white, color-mix(in srgb, var(--cd-color-success) 2%, transparent) );
    }
  }
  .cd-limit-card-warning {
    border-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning) 40%, transparent);
    }
    background: linear-gradient( to bottom right, white, var(--cd-color-warning) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( to bottom right, white, color-mix(in srgb, var(--cd-color-warning) 3%, transparent) );
    }
  }
  .cd-limit-card-critical {
    border-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-error) 50%, transparent);
    }
    background: linear-gradient( to bottom right, white, var(--cd-color-error) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( to bottom right, white, color-mix(in srgb, var(--cd-color-error) 4%, transparent) );
    }
  }
  .cd-limit-card-blocked {
    border-color: var(--cd-color-error);
    background: linear-gradient( to bottom right, white, var(--cd-color-error) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( to bottom right, white, color-mix(in srgb, var(--cd-color-error) 5%, transparent) );
    }
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
  }
  .cd-limit-card-unlimited {
    border-color: var(--cd-color-info);
    background: linear-gradient( 135deg, white, var(--cd-color-info), color-mix(in srgb, #483d8b 2%, transparent) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, white, color-mix(in srgb, var(--cd-color-info) 3%, transparent), color-mix(in srgb, var(--color-midnight-purple) 2%, transparent) );
    }
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.08);
  }
  @media (max-width: 640px) {
    .cd-limit-card {
      padding: var(--cd-space-3);
    }
    .cd-limit-card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: calc(var(--spacing) * 2);
    }
    .cd-limit-card-status {
      flex-direction: column;
      align-items: stretch;
    }
    .cd-limit-card-cta {
      width: 100%;
      justify-content: center;
    }
    .cd-limit-card-message {
      min-width: unset;
    }
  }
  .cd-success-hero-professional {
    margin-bottom: calc(var(--spacing) * 8);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    background: linear-gradient( 135deg, white 0%, var(--membership-professional-secondary) 50%, white 100% );
    border-bottom: 3px solid var(--membership-professional-primary);
  }
  .cd-success-hero-business {
    margin-bottom: calc(var(--spacing) * 8);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    background: linear-gradient( 135deg, white 0%, var(--membership-business-secondary) 50%, white 100% );
    border-bottom: 3px solid var(--membership-business-primary);
  }
  .cd-success-hero-free {
    margin-bottom: calc(var(--spacing) * 8);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    background: linear-gradient( 135deg, white 0%, var(--membership-free-secondary) 50%, white 100% );
    border-bottom: 3px solid var(--membership-free-primary);
  }
  .cd-success-hero-core {
    margin-bottom: calc(var(--spacing) * 8);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    background: linear-gradient( 135deg, white 0%, var(--membership-core-secondary) 50%, white 100% );
    border-bottom: 3px solid var(--membership-core-primary);
  }
  .cd-success-hero {
    position: relative;
    overflow: hidden;
  }
  .cd-success-hero-grid {
    position: relative;
    z-index: 10;
    margin-inline: auto;
    display: grid;
    max-width: var(--container-5xl);
    align-items: center;
    gap: calc(var(--spacing) * 8);
    grid-template-columns: 1fr;
  }
  @media (min-width: 1024px) {
    .cd-success-hero-grid {
      grid-template-columns: 1.4fr 1fr;
      gap: 3rem;
    }
  }
  .cd-success-hero-body {
    text-align: center;
  }
  @media (min-width: 1024px) {
    .cd-success-hero-body {
      text-align: left;
    }
  }
  .cd-success-eyebrow {
    margin-bottom: calc(var(--spacing) * 5);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    padding: 6px 14px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    border: 1px solid;
  }
  .cd-success-eyebrow i {
    color: var(--cd-color-success);
  }
  .cd-success-hero-professional .cd-success-eyebrow {
    color: var(--membership-professional-primary);
    border-color: var(--membership-professional-secondary);
  }
  .cd-success-hero-business .cd-success-eyebrow {
    color: var(--membership-business-primary);
    border-color: var(--membership-business-secondary);
  }
  .cd-success-hero-core .cd-success-eyebrow {
    color: var(--membership-core-primary);
    border-color: var(--membership-core-secondary);
  }
  .cd-success-hero-free .cd-success-eyebrow {
    color: var(--membership-free-primary);
    border-color: var(--membership-free-secondary);
  }
  .cd-success-headline {
    margin-bottom: calc(var(--spacing) * 4);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    font-size: 2.25rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--cd-text-primary);
  }
  @media (min-width: 1024px) {
    .cd-success-headline {
      font-size: 2.5rem;
    }
  }
  .cd-success-headline-accent {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .cd-success-hero-professional .cd-success-headline-accent {
    background-image: linear-gradient(135deg, var(--membership-professional-primary), var(--membership-professional-text, var(--membership-professional-primary)));
  }
  .cd-success-hero-business .cd-success-headline-accent {
    background-image: linear-gradient(135deg, var(--membership-business-primary), var(--membership-business-text, var(--membership-business-primary)));
  }
  .cd-success-hero-core .cd-success-headline-accent {
    background-image: linear-gradient(135deg, var(--membership-core-primary), var(--membership-core-text));
  }
  .cd-success-hero-free .cd-success-headline-accent {
    background-image: linear-gradient(135deg, var(--membership-free-primary), var(--membership-free-text, var(--membership-free-primary)));
  }
  .cd-success-lede {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 7);
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
    font-size: 1.05rem;
    color: var(--cd-text-secondary);
    max-width: 540px;
  }
  .cd-success-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 5);
    @media (width >= 64rem) {
      justify-content: flex-start;
    }
  }
  .cd-success-primary-cta {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-success-primary-cta:hover {
    transform: translateY(-1px);
  }
  .cd-success-hero-professional .cd-success-primary-cta {
    box-shadow: 0 8px 24px rgba(11, 79, 140, 0.32);
  }
  .cd-success-hero-business .cd-success-primary-cta {
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.32);
  }
  .cd-success-hero-core .cd-success-primary-cta {
    box-shadow: 0 8px 24px rgba(47, 133, 90, 0.32);
  }
  .cd-success-hero-free .cd-success-primary-cta {
    box-shadow: 0 8px 24px rgba(107, 114, 128, 0.25);
  }
  .cd-success-secondary-link {
    display: inline-flex;
    align-items: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--cd-text-secondary);
    font-size: 0.95rem;
  }
  .cd-success-secondary-link:hover {
    color: var(--cd-text-primary);
  }
  .cd-success-hero-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-success-hero-illustration img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.10));
  }
  .cd-success-confetti {
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    overflow: hidden;
  }
  .cd-success-confetti span {
    position: absolute;
    border-radius: calc(infinity * 1px);
    width: 8px;
    height: 8px;
    opacity: 0;
    animation: cd-confetti-fall 5s ease-out forwards;
  }
  .cd-success-confetti span:nth-child(1) {
    left: 10%;
    top: 10%;
    animation-delay: 0.0s;
  }
  .cd-success-confetti span:nth-child(2) {
    left: 20%;
    top: 30%;
    animation-delay: 0.2s;
  }
  .cd-success-confetti span:nth-child(3) {
    left: 35%;
    top: 15%;
    animation-delay: 0.4s;
    width: 6px;
    height: 6px;
  }
  .cd-success-confetti span:nth-child(4) {
    left: 70%;
    top: 20%;
    animation-delay: 0.1s;
  }
  .cd-success-confetti span:nth-child(5) {
    left: 85%;
    top: 40%;
    animation-delay: 0.5s;
  }
  .cd-success-confetti span:nth-child(6) {
    left: 60%;
    top: 12%;
    animation-delay: 0.3s;
    width: 10px;
    height: 10px;
  }
  .cd-success-confetti span:nth-child(7) {
    left: 50%;
    top: 8%;
    animation-delay: 0.6s;
  }
  .cd-success-confetti span:nth-child(8) {
    left: 90%;
    top: 18%;
    animation-delay: 0.15s;
    width: 6px;
    height: 6px;
  }
  .cd-success-hero-professional .cd-success-confetti span {
    background: var(--membership-professional-primary);
  }
  .cd-success-hero-business .cd-success-confetti span {
    background: var(--membership-business-primary);
  }
  .cd-success-hero-core .cd-success-confetti span {
    background: var(--membership-core-primary);
  }
  .cd-success-hero-free .cd-success-confetti span {
    background: var(--membership-free-primary);
  }
  .cd-success-confetti span:nth-child(3), .cd-success-confetti span:nth-child(6) {
    background: var(--cd-color-success) !important;
  }
  .cd-success-confetti span:nth-child(5), .cd-success-confetti span:nth-child(8) {
    background: var(--membership-business-primary) !important;
  }
  @keyframes cd-confetti-fall {
    0% {
      opacity: 0;
      transform: translateY(-20px) rotate(0deg);
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(120px) rotate(360deg);
    }
  }
  @keyframes subtle-glow {
    0%, 100% {
      box-shadow: 0 0 40px rgba(212, 175, 55, 0.25);
    }
    50% {
      box-shadow: 0 0 50px rgba(212, 175, 55, 0.35);
    }
  }
  .cd-cancel-hero {
    position: relative;
    margin-bottom: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 7);
  }
  .cd-cancel-hero-inner {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: center;
    gap: calc(var(--spacing) * 7);
  }
  @media (min-width: 1024px) {
    .cd-cancel-hero-inner {
      grid-template-columns: minmax(0, 1fr) minmax(17rem, 34%);
      column-gap: clamp(2rem, 5vw, 5rem);
    }
  }
  .cd-cancel-hero-body {
    max-width: var(--container-3xl);
    text-align: left;
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  }
  .cd-cancel-hero-visual {
    display: none;
  }
  .cd-cancel-hero-picture {
    display: block;
    width: min(100%, 19rem);
  }
  .cd-cancel-hero-image {
    display: block;
    height: auto;
    width: 100%;
    object-fit: contain;
  }
  @media (min-width: 640px) {
    .cd-cancel-hero-picture {
      width: min(78%, 24rem);
    }
  }
  @media (min-width: 1024px) {
    .cd-cancel-hero-visual {
      display: flex;
      justify-content: flex-end;
    }
    .cd-cancel-hero-picture {
      width: min(100%, 25rem);
    }
  }
  .cd-cancel-eyebrow {
    margin-bottom: calc(var(--spacing) * 5);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    padding: 6px 14px;
    font-family: "Fraunces", Georgia, serif;
    font-variant-caps: small-caps;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: var(--cd-text-secondary);
    background-color: var(--cd-text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-secondary) 8%, transparent);
    }
  }
  .cd-cancel-headline {
    margin-bottom: calc(var(--spacing) * 5);
    font-family: "Fraunces", Georgia, serif;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--cd-text-primary);
  }
  .cd-cancel-headline em {
    font-style: italic;
    font-weight: 600;
  }
  @media (min-width: 1024px) {
    .cd-cancel-headline {
      font-size: 3rem;
      line-height: 1.1;
    }
  }
  .cd-cancel-lede {
    margin-bottom: calc(var(--spacing) * 7);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    line-height: 1.55;
    color: var(--cd-text-secondary);
    max-width: 52ch;
  }
  .cd-cancel-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: calc(var(--spacing) * 7);
    row-gap: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--cd-text-secondary);
  }
  .cd-cancel-stats .cd-editorial-numeral {
    font-size: 1.625rem;
    line-height: 1;
  }
  .cd-cancel-stats .cd-editorial-unit {
    font-size: 1rem;
    margin-left: 3px;
  }
  @media (min-width: 640px) {
    .cd-cancel-stats .cd-editorial-numeral {
      font-size: 2rem;
    }
    .cd-cancel-stats .cd-editorial-unit {
      font-size: 1.125rem;
    }
  }
  .cd-cancel-meta {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-cancel-meta-date {
    font-family: var(--cd-font-numeral);
    font-weight: 600;
    font-feature-settings: "tnum" 1, "lnum" 1;
    color: var(--cd-text-secondary);
  }
  .cd-cancel-disclosure {
    margin-top: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--cd-border-primary);
    background-color: var(--cd-bg-primary);
  }
  .cd-cancel-disclosure-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--cd-text-primary);
    cursor: pointer;
  }
  .cd-cancel-disclosure-trigger:hover {
    background-color: var(--cd-text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-text-secondary) 4%, transparent);
    }
  }
  .cd-cancel-disclosure-trigger .fa-chevron-down {
    transition: transform 0.2s ease;
  }
  .cd-cancel-disclosure[data-open="true"] .cd-cancel-disclosure-trigger .fa-chevron-down {
    transform: rotate(180deg);
  }
  .cd-cancel-disclosure-body {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 6);
    row-gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 5);
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    border-top: 1px solid var(--cd-border-primary);
    color: var(--cd-text-secondary);
  }
  .cd-cancel-disclosure-body .fa-xmark {
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    opacity: 0.55;
  }
  .cd-cancel-actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      flex-direction: row;
    }
    @media (width >= 40rem) {
      flex-wrap: wrap;
    }
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .cd-cancel-actions-leading {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      flex-direction: row;
    }
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .cd-cancel-value-strip {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: calc(var(--spacing) * 7);
    row-gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    padding-top: 18px;
    border-top: 1px solid var(--cd-text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--cd-text-secondary) 12%, transparent);
    }
  }
  .cd-cancel-value-strip-lede {
    font-style: italic;
    color: var(--cd-text-secondary);
  }
  .cd-cancel-value-strip .cd-editorial-numeral {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--cd-text-secondary);
    margin-right: 0.25rem;
  }
  .cd-cancel-value-strip .cd-editorial-unit {
    font-size: 0.8125rem;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  @media (min-width: 640px) {
    .cd-cancel-value-strip .cd-editorial-numeral {
      font-size: 1.25rem;
    }
  }
  .cd-cancel-reason-grid {
    margin-top: calc(var(--spacing) * 2);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2.5);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .cd-cancel-reason-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px 12px 12px;
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    border-radius: 12px;
    background: var(--cd-bg-primary);
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-cancel-reason-card:hover {
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 60%, transparent);
    }
  }
  .cd-cancel-reason-card:has(.cd-cancel-reason-input:focus-visible) {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-cancel-reason-card:has(.cd-cancel-reason-input:checked) {
    border-color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 6%, var(--cd-bg-primary));
    }
  }
  .cd-cancel-reason-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .cd-cancel-reason-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 14px;
    transition: var(--cd-transition);
  }
  .cd-cancel-reason-card:has(.cd-cancel-reason-input:checked) .cd-cancel-reason-icon {
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-cancel-reason-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cd-cancel-reason-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cd-text-primary);
    line-height: 1.25;
  }
  .cd-cancel-reason-reframe {
    font-size: 12px;
    line-height: 1.4;
    color: var(--cd-text-secondary);
  }
  .cd-cancel-reason-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--cd-border-primary, #e5e5e7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: transparent;
    transition: var(--cd-transition);
    margin-top: 2px;
  }
  .cd-cancel-reason-card:has(.cd-cancel-reason-input:checked) .cd-cancel-reason-check {
    border-color: var(--cd-color-primary);
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-cancel-reason-foot {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .cd-cancel-reason-clear {
    font-size: 12px;
    font-weight: 600;
    color: var(--cd-color-primary);
    background: transparent;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-cancel-reason-clear:hover {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
  }
  #cancelConfirmModal .cd-modal-title-editorial {
    font-family: "Fraunces", Georgia, serif;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
  }
  .cd-roi-section {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .cd-roi-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 0.375rem;
    padding: 0.5rem 0;
    align-items: center;
  }
  .cd-roi-stat > .cd-roi-stat-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .cd-roi-stat > .cd-roi-stat-value {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .cd-roi-stat > .cd-roi-stat-headline {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .cd-roi-stat > .cd-roi-stat-context {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  @media (min-width: 768px) {
    .cd-roi-grid .cd-roi-stat:not(:last-child) {
      padding-right: 1.5rem;
      border-right: 1px solid var(--cd-border-soft, #f0f0f3);
    }
  }
  .cd-roi-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-secondary);
  }
  .cd-roi-stat-icon:hover {
    transform: scale(1.05);
  }
  .cd-roi-stat-icon-professional, .cd-roi-stat-icon-business, .cd-roi-stat-icon-core, .cd-roi-stat-icon-free {
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-secondary);
  }
  .cd-roi-stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--cd-text-primary);
  }
  .cd-roi-stat-value-professional {
    color: var(--membership-professional-primary);
  }
  .cd-roi-stat-value-business {
    color: var(--membership-business-primary);
  }
  .cd-roi-stat-value-core {
    color: var(--membership-core-primary);
  }
  .cd-roi-stat-value-free {
    color: var(--membership-free-primary);
  }
  .cd-roi-stat-unit {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cd-text-secondary);
    margin-left: 0.25rem;
  }
  .cd-roi-stat-headline {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--cd-text-primary);
    margin-top: 0.125rem;
  }
  .cd-roi-stat-context {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--cd-text-tertiary);
    margin-top: auto;
    padding-top: 0.25rem;
  }
  .cd-hero-feature-icon {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
  }
  .cd-hero-feature-icon-professional {
    background: var(--membership-professional-secondary);
    color: var(--membership-professional-primary);
  }
  .cd-hero-feature-icon-business {
    background: var(--membership-business-secondary);
    color: var(--membership-business-primary);
  }
  .cd-hero-feature-icon-core {
    background: var(--membership-core-secondary, var(--cd-bg-secondary, #f5f5f7));
    color: var(--membership-core-primary, var(--cd-text-secondary));
  }
  .cd-hero-feature-icon-free {
    background: var(--cd-bg-secondary, #f5f5f7);
    color: var(--cd-text-secondary);
  }
  .cd-hero-feature-name {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--cd-text-primary);
  }
  .cd-hero-feature-description {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--cd-text-secondary);
  }
  .cd-feature-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .cd-feature-card-header .cd-hero-feature-icon {
    margin-bottom: 0;
  }
  .cd-feature-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 12%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-feature-active-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background-color: var(--cd-color-success);
    box-shadow: 0 0 0 3px var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-success) 18%, transparent);
    }
    flex-shrink: 0;
  }
  .cd-feature-card-footer {
    margin-top: auto;
    padding-top: 0.875rem;
    border-top: 1px solid var(--cd-border-hairline, var(--cd-border-soft, #f0f0f3));
  }
  .cd-feature-card-limit {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--cd-text-primary);
  }
  .cd-feature-card-limit-professional {
    color: var(--membership-professional-primary);
  }
  .cd-feature-card-limit-business {
    color: var(--membership-business-primary);
  }
  .cd-feature-card-limit-core {
    color: var(--membership-core-primary, var(--cd-text-primary));
  }
  .cd-feature-card-limit-free {
    color: var(--cd-text-primary);
  }
  .cd-badge-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    padding: 0 0.5rem;
  }
  .cd-badge-round-success {
    background-color: var(--cd-color-success);
    color: white;
  }
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .cd-animate-fade-in {
    animation: fade-in-up 0.4s ease-out forwards;
    opacity: 0;
  }
  .cd-animate-delay-1 {
    animation-delay: 0.1s;
  }
  .cd-animate-delay-2 {
    animation-delay: 0.2s;
  }
  .cd-animate-delay-3 {
    animation-delay: 0.3s;
  }
  .cd-animate-delay-4 {
    animation-delay: 0.4s;
  }
  .cd-features-toggle {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--cd-text-secondary);
  }
  .cd-features-toggle:hover {
    color: var(--cd-text-primary);
  }
  .cd-success-section-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }
  .cd-success-section-icon-professional {
    background: var(--membership-professional-secondary);
    color: var(--membership-professional-primary);
  }
  .cd-success-section-icon-business {
    background: var(--membership-business-secondary);
    color: var(--membership-business-primary);
  }
  .cd-success-section-icon-core {
    background: var(--membership-core-secondary);
    color: var(--membership-core-primary);
  }
  .cd-success-section-icon-free {
    background: var(--membership-free-secondary);
    color: var(--membership-free-primary);
  }
  .cd-success-social-proof {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 5);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    padding: 18px 24px;
    border: 1px solid var(--cd-border);
  }
  .cd-success-social-proof-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    background: rgba(34, 139, 34, 0.10);
    color: var(--cd-color-success);
  }
  .cd-success-social-proof-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--cd-text-primary);
  }
  .cd-success-social-proof-text strong {
    font-weight: 700;
  }
  .cd-success-hero-professional ~ .cd-success-social-proof .cd-success-social-proof-text strong, .cd-success-social-proof-cta {
    color: var(--cd-text-primary);
  }
  .cd-success-social-proof-cta {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    font-size: 0.9rem;
    color: var(--cd-text-link, #0066cc);
  }
  .cd-success-social-proof-cta:hover {
    color: var(--cd-text-link-hover, #004999);
  }
  .cd-success-checklist-card {
    position: relative;
    overflow: hidden;
  }
  .cd-success-checklist-card::before {
    content: "";
    position: absolute;
    top: calc(var(--spacing) * 0);
    right: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    height: 3px;
    background: linear-gradient(90deg, var(--membership-professional-primary), var(--cd-color-success));
  }
  .cd-success-checklist-progress {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 5);
    border-bottom: 1px solid var(--cd-border);
  }
  .cd-success-checklist-ring {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
  }
  .cd-success-checklist-ring svg {
    transform: rotate(-90deg);
    transition: all 0.4s ease;
  }
  .cd-success-checklist-ring circle {
    transition: stroke-dashoffset 0.4s ease;
  }
  .cd-success-checklist-ring-text {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    font-size: 0.85rem;
    color: var(--cd-text-primary);
  }
  .cd-success-checklist-items {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .cd-success-checklist-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    padding: 14px;
    border: 1px solid var(--cd-border);
    color: inherit;
    text-decoration: none;
  }
  .cd-success-checklist-item:hover {
    background: var(--cd-bg-secondary, #f5f5f7);
  }
  .cd-success-hero-professional ~ * .cd-success-checklist-item:hover {
    border-color: var(--membership-professional-primary);
  }
  .cd-success-hero-business ~ * .cd-success-checklist-item:hover {
    border-color: var(--membership-business-primary);
  }
  .cd-success-hero-core ~ * .cd-success-checklist-item:hover {
    border-color: var(--membership-core-primary);
  }
  .cd-success-hero-free ~ * .cd-success-checklist-item:hover {
    border-color: var(--membership-free-primary);
  }
  .cd-success-checklist-item.is-done {
    background: var(--cd-bg-secondary, #f8fafc);
    border-color: var(--cd-border-soft, var(--cd-border));
  }
  .cd-success-checklist-item.is-done .cd-success-checklist-title {
    text-decoration: line-through;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-success-checklist-check {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    width: 28px;
    height: 28px;
    border: 2px solid var(--cd-border);
    color: white;
    font-size: 0.7rem;
    transition: all 0.15s ease;
  }
  .cd-success-checklist-item.is-done .cd-success-checklist-check {
    background: var(--cd-color-success);
    border-color: var(--cd-color-success);
  }
  .cd-success-checklist-body {
    flex: 1;
  }
  .cd-success-checklist-title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.92rem;
    color: var(--cd-text-primary);
    margin-bottom: 2px;
  }
  .cd-success-checklist-desc {
    font-size: 0.8rem;
    color: var(--cd-text-secondary);
  }
  .cd-success-checklist-arrow {
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    transition: transform 0.15s ease, color 0.15s ease;
  }
  .cd-success-checklist-item:hover .cd-success-checklist-arrow {
    transform: translateX(2px);
  }
  .cd-success-plan-card {
    position: relative;
  }
  .cd-success-plan-eyebrow {
    margin-bottom: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
  }
  .cd-success-plan-card-professional .cd-success-plan-eyebrow {
    color: var(--membership-professional-primary);
  }
  .cd-success-plan-card-business .cd-success-plan-eyebrow {
    color: var(--membership-business-primary);
  }
  .cd-success-plan-card-core .cd-success-plan-eyebrow {
    color: var(--membership-core-primary);
  }
  .cd-success-plan-card-free .cd-success-plan-eyebrow {
    color: var(--membership-free-primary);
  }
  .cd-success-plan-eyebrow-suffix {
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    font-weight: 600;
    margin-left: 4px;
  }
  .cd-success-plan-inline-date {
    font-size: inherit;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-success-plan-price-row {
    display: flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 1.5);
  }
  .cd-success-plan-price {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    font-size: 2.25rem;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary);
  }
  .cd-success-plan-period {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    color: var(--cd-text-secondary);
  }
  .cd-success-plan-details {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--cd-border);
    gap: 1px;
  }
  .cd-success-plan-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-white);
    padding: 12px 14px;
    font-size: 0.88rem;
  }
  .cd-success-plan-detail-row > span:first-child {
    color: var(--cd-text-secondary);
  }
  .cd-success-plan-detail-row > span:last-child {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--cd-text-primary);
  }
  .cd-success-status-pill {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    background: rgba(34, 139, 34, 0.12);
    color: var(--cd-color-success);
    padding: 4px 10px;
    font-size: 0.78rem;
  }
  .cd-success-plan-actions {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .cd-success-payment-card {
    padding: 18px 20px;
  }
  .cd-success-payment-header {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    font-size: 0.82rem;
    color: var(--cd-color-success);
  }
  .cd-success-payment-amount {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary);
    margin-bottom: 2px;
  }
  .cd-success-payment-date {
    font-size: 0.85rem;
    color: var(--cd-text-secondary);
    margin-bottom: 12px;
  }
  .cd-success-payment-toggle {
    display: inline-flex;
    align-items: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.82rem;
    color: var(--cd-text-link, #0066cc);
  }
  @media (max-width: 640px) {
    .cd-success-hero-professional, .cd-success-hero-business, .cd-success-hero-free, .cd-success-hero-core {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 8);
    }
    .cd-success-headline {
      font-size: 1.875rem;
    }
    .cd-success-hero-illustration img {
      max-width: 220px;
    }
    .cd-success-social-proof {
      flex-direction: column;
      align-items: flex-start;
      gap: calc(var(--spacing) * 3);
      padding: 16px 18px;
    }
    .cd-success-checklist-progress {
      gap: calc(var(--spacing) * 3);
    }
  }
  .cd-membership-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  .cd-membership-icon-sm {
    width: 1.1em;
    height: 1.1em;
  }
  .cd-membership-icon-lg {
    width: 1.6em;
    height: 1.6em;
  }
  .cd-membership-icon-professional {
    filter: drop-shadow(0 1px 2px rgba(11, 79, 140, 0.3));
  }
  .cd-membership-icon-professional:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 4px rgba(11, 79, 140, 0.4));
  }
  .cd-membership-icon-business {
    filter: drop-shadow(0 1px 3px rgba(212, 168, 83, 0.4));
  }
  .cd-membership-icon-business:hover {
    transform: scale(1.15) rotate(-3deg);
    filter: drop-shadow(0 3px 6px rgba(212, 168, 83, 0.5));
  }
  @keyframes icon-shimmer {
    0% {
      filter: drop-shadow(0 1px 2px rgba(212, 168, 83, 0.3));
    }
    50% {
      filter: drop-shadow(0 2px 4px rgba(212, 168, 83, 0.5));
    }
    100% {
      filter: drop-shadow(0 1px 2px rgba(212, 168, 83, 0.3));
    }
  }
  .cd-membership-icon-business.cd-animate-shimmer {
    animation: icon-shimmer 3s ease-in-out infinite;
  }
  .cd-membership-icon:focus {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
    border-radius: 4px;
  }
  @media (prefers-color-scheme: dark) {
    .cd-membership-icon-professional {
      filter: drop-shadow(0 1px 3px rgba(106, 175, 230, 0.4));
    }
    .cd-membership-icon-business {
      filter: drop-shadow(0 1px 4px rgba(245, 217, 152, 0.5));
    }
  }
  .cd-membership-card-professional {
    border-left: 4px solid var(--membership-professional-primary);
    background: linear-gradient( to right, var(--membership-professional-secondary), white 25% );
  }
  .cd-membership-card-professional:hover {
    box-shadow: 0 4px 12px rgba(11, 79, 140, 0.1);
  }
  .cd-membership-card-business {
    border-left: 4px solid var(--membership-business-primary);
    background: linear-gradient( to right, var(--membership-business-secondary), white 20% );
    animation: subtle-pulse 3s ease-in-out infinite;
  }
  .cd-membership-card-business:hover {
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
  }
  .cd-membership-card-free {
    border-left: 4px solid var(--membership-free-primary);
    background: linear-gradient( to right, var(--membership-free-secondary), white 30% );
  }
  .cd-membership-card-icon {
    display: flex;
    height: calc(var(--spacing) * 14);
    width: calc(var(--spacing) * 14);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-membership-card-icon:hover {
    transform: scale(1.05);
  }
  .cd-membership-card-icon-professional {
    background: var(--membership-professional-secondary);
    color: var(--membership-professional-primary);
    box-shadow: 0 0 20px rgba(11, 79, 140, 0.2);
  }
  .cd-membership-card-icon-professional:hover {
    box-shadow: 0 0 25px rgba(11, 79, 140, 0.3);
  }
  .cd-membership-card-icon-business {
    background: var(--membership-business-secondary);
    color: var(--membership-business-primary);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
    animation: subtle-glow 3s ease-in-out infinite;
  }
  .cd-membership-card-icon-business:hover {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.35);
  }
  .cd-membership-card-icon-free {
    background: var(--membership-free-secondary);
    color: var(--membership-free-primary);
    box-shadow: 0 0 10px rgba(107, 114, 128, 0.1);
  }
  .cd-pricing-card-core {
    border: 2px solid var(--membership-core-primary);
    box-shadow: 0 0 0 1px var(--membership-core-primary), 0 4px 12px rgba(47, 133, 90, 0.1);
  }
  .cd-pricing-card-core:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--membership-core-primary), 0 8px 20px rgba(47, 133, 90, 0.15);
  }
  .cd-pricing-card-professional {
    border: 2px solid var(--membership-professional-primary);
    box-shadow: 0 0 0 1px var(--membership-professional-primary), 0 4px 12px rgba(11, 79, 140, 0.1);
  }
  .cd-pricing-card-professional:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--membership-professional-primary), 0 8px 20px rgba(11, 79, 140, 0.15);
  }
  .cd-pricing-card-business {
    border: 2px solid var(--membership-business-primary);
    box-shadow: 0 0 0 1px var(--membership-business-primary), 0 4px 12px rgba(212, 175, 55, 0.15);
  }
  .cd-pricing-card-business:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--membership-business-primary), 0 8px 20px rgba(212, 175, 55, 0.2);
  }
  .cd-pricing-header-icon {
    margin-right: calc(var(--spacing) * 3);
    display: flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
  }
  .cd-pricing-header-icon-professional {
    background: var(--membership-professional-secondary);
    color: var(--membership-professional-primary);
  }
  .cd-pricing-header-icon-business {
    background: var(--membership-business-secondary);
    color: var(--membership-business-primary);
  }
  .cd-pricing-header-icon-free {
    background: var(--membership-free-secondary);
    color: var(--membership-free-primary);
  }
  .cd-pricing-header-icon-core {
    background: var(--membership-core-secondary);
    color: var(--membership-core-primary);
  }
  .cd-pricing-header-icon:has(.cd-tier-glyph) {
    margin-right: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 14);
    width: calc(var(--spacing) * 14);
    background: transparent;
    overflow: visible;
  }
  .cd-pricing-header-icon .cd-tier-glyph {
    width: 100%;
    height: 100%;
  }
  .cd-plan-card {
    display: flex;
    flex-direction: column;
    padding: calc(var(--spacing) * 6);
    background-color: var(--cd-bg-card);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-sm));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-plan-card-current {
    background: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-secondary) 45%, var(--cd-bg-card));
    }
  }
  .cd-plan-card-head {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-height: 2.5rem;
  }
  .cd-plan-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
  }
  .cd-plan-eyebrow-value {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 12%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-plan-eyebrow-core {
    background: var(--membership-core-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--membership-core-primary) 12%, transparent);
    }
    color: var(--membership-core-text);
  }
  .cd-plan-eyebrow-professional {
    background: var(--membership-professional-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--membership-professional-primary) 12%, transparent);
    }
    color: var(--membership-professional-text);
  }
  .cd-plan-eyebrow-business {
    background: var(--membership-business-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--membership-business-primary) 14%, transparent);
    }
    color: var(--membership-business-text);
  }
  .cd-plan-card-name {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--cd-text-primary);
    margin-bottom: 0.5rem;
  }
  .cd-plan-card-desc {
    flex-grow: 1;
    min-height: 60px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--cd-text-secondary);
  }
  .cd-plan-card-pricing {
    margin-bottom: 1.25rem;
  }
  .cd-plan-card-price {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--cd-text-primary);
  }
  .cd-plan-card-price-core {
    color: var(--membership-core-primary);
  }
  .cd-plan-card-price-professional {
    color: var(--membership-professional-primary);
  }
  .cd-plan-card-price-business {
    color: var(--membership-business-primary);
  }
  .cd-plan-card-price-unit {
    font-size: 0.95rem;
  }
  .cd-plan-card-price-sub {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
  }
  .cd-plan-card-cta {
    margin-top: auto;
  }
  .cd-membership-sidebar-professional {
    border-top: 3px solid var(--membership-professional-primary);
  }
  .cd-membership-sidebar-business {
    border-top: 3px solid var(--membership-business-primary);
  }
  .cd-membership-sidebar-free {
    border-top: 3px solid var(--membership-free-primary);
  }
  .cd-demo-banner {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #93C5FD;
    border-radius: var(--cd-radius-lg);
    color: #1E3A8A;
    flex-wrap: wrap;
  }
  .cd-demo-banner-icon {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: #2563EB;
  }
  .cd-demo-banner-message {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .cd-demo-banner-message strong {
    font-weight: 600;
    color: #1E3A8A;
  }
  .cd-demo-banner-message span {
    color: #1E40AF;
    opacity: 0.9;
  }
  .cd-demo-banner-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: white;
    background-color: #2563EB;
    border-radius: var(--cd-radius-md);
    transition: background-color 0.15s ease;
  }
  .cd-demo-banner-cta:hover {
    background-color: #1D4ED8;
    color: white;
  }
  .cd-free-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-sm));
    flex-wrap: wrap;
  }
  .cd-free-summary-current {
    background: linear-gradient(135deg, white 0%, var(--membership-free-secondary) 60%, white 100% );
    border: 2px solid var(--membership-free-primary);
  }
  .cd-free-summary .cd-pricing-header-icon {
    flex-shrink: 0;
    margin-right: 0;
  }
  .cd-free-summary-body {
    flex: 1 1 240px;
    min-width: 0;
  }
  .cd-free-summary-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    margin: 0 0 0.125rem 0;
  }
  .cd-free-summary-desc {
    font-size: 0.8125rem;
    color: var(--cd-text-secondary);
    margin: 0;
    line-height: 1.4;
  }
  .cd-free-summary-cta {
    flex-shrink: 0;
  }
  .cd-plan-statement {
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 12px;
    box-shadow: var(--cd-shadow-sm);
    overflow: hidden;
    position: relative;
    margin-bottom: 1.5rem;
  }
  .cd-plan-statement::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--membership-free-primary);
  }
  .cd-plan-statement-tier-core::before {
    background: var(--membership-core-primary);
  }
  .cd-plan-statement-tier-professional::before {
    background: var(--membership-professional-primary);
  }
  .cd-plan-statement-tier-business::before {
    background: var(--membership-business-primary);
  }
  .cd-plan-statement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
  }
  .cd-plan-statement-cell {
    padding: 2rem;
    border-right: 1px solid var(--cd-border-primary);
  }
  .cd-plan-statement-cell:last-child {
    border-right: none;
  }
  .cd-plan-statement-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cd-text-tertiary);
    font-weight: 600;
    margin-bottom: 0.625rem;
  }
  .cd-plan-statement-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1.1;
    margin-bottom: 0.375rem;
  }
  .cd-plan-statement-meta {
    font-size: 0.85rem;
    color: var(--cd-text-secondary);
  }
  .cd-plan-auto-renew {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-forest-green);
    font-weight: 500;
  }
  .cd-plan-auto-renew i {
    font-size: 0.5rem;
  }
  .cd-plan-auto-renew-off {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--cd-text-tertiary);
    font-weight: 500;
  }
  .cd-plan-auto-renew-off i {
    font-size: 0.5rem;
  }
  .cd-plan-statement-actions {
    border-top: 1px solid var(--cd-border-primary);
    background: var(--cd-bg-secondary);
    padding: 0.875rem 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }
  .cd-plan-statement-action {
    color: var(--cd-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.25rem 0.875rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.15s ease;
  }
  .cd-plan-statement-action:first-child {
    padding-left: 0;
  }
  .cd-plan-statement-action:hover {
    color: var(--color-science-blue);
  }
  .cd-plan-statement-action:not(:last-child)::after {
    content: '·';
    position: absolute;
    right: -2px;
    top: 0.25rem;
    color: var(--cd-text-tertiary);
  }
  .cd-plan-statement-action-danger:hover {
    color: var(--color-crimson-red);
  }
  .cd-plan-statement-action-primary {
    color: var(--color-science-blue);
    font-weight: 600;
  }
  .cd-plan-statement-demo-note {
    color: var(--cd-text-tertiary);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .cd-plan-this-month {
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
  }
  .cd-plan-this-month-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cd-text-tertiary);
    font-weight: 600;
    margin-bottom: 0.875rem;
  }
  .cd-plan-usage-line {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0.375rem 0;
  }
  .cd-plan-usage-line + .cd-plan-usage-line {
    border-top: 1px solid var(--cd-border-primary);
    margin-top: 0.75rem;
    padding-top: 1.125rem;
  }
  .cd-plan-usage-text {
    font-size: 0.95rem;
    color: var(--cd-text-primary);
  }
  .cd-plan-usage-text strong {
    font-weight: 600;
  }
  .cd-plan-usage-bar-wrap {
    width: 200px;
    height: 6px;
    background: var(--cd-bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
  }
  .cd-plan-usage-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--color-forest-green);
    transition: width 0.3s ease;
  }
  .cd-plan-usage-bar-caution {
    background: var(--color-warning-orange);
  }
  .cd-plan-usage-bar-warning {
    background: #eab308;
  }
  .cd-plan-usage-bar-critical {
    background: var(--color-crimson-red);
  }
  .cd-plan-included {
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }
  .cd-plan-included:hover, .cd-plan-included[open] {
    border-color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-text-primary) 16%, var(--cd-border-hairline));
    }
    box-shadow: var(--cd-shadow-sm);
    transform: translateY(-1px);
  }
  .cd-plan-included summary {
    padding: 1.25rem 1.75rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .cd-plan-included summary::-webkit-details-marker {
    display: none;
  }
  .cd-plan-included-label {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
  }
  .cd-plan-included-heading {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }
  .cd-plan-included-kicker {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary);
  }
  .cd-plan-included-title {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary);
  }
  .cd-plan-included-count {
    flex-shrink: 0;
    font-family: var(--cd-font-numeral);
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cd-text-secondary);
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--cd-border-hairline);
    border-radius: 999px;
    white-space: nowrap;
  }
  .cd-plan-included-chev {
    flex-shrink: 0;
    color: var(--cd-text-tertiary);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
  }
  .cd-plan-included[open] .cd-plan-included-chev {
    transform: rotate(180deg);
  }
  .cd-plan-perks-grid {
    padding: 1.5rem 1.75rem 1.75rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.125rem 1.5rem;
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-plan-perk {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--cd-text-primary);
    min-width: 0;
  }
  .cd-plan-perk-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-hairline);
    color: var(--cd-text-tertiary);
    border-radius: 999px;
    font-size: 0.72rem;
    flex-shrink: 0;
  }
  .cd-plan-compare-footer {
    margin-top: 1.5rem;
    text-align: right;
  }
  .cd-plan-compare-link {
    font-size: 0.85rem;
    color: var(--cd-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-plan-compare-link:hover {
    color: var(--color-science-blue);
  }
  .cd-plan-compare-link i {
    margin-left: 0.375rem;
    font-size: 0.75rem;
  }
  @media (max-width: 880px) {
    .cd-plan-statement-grid {
      grid-template-columns: 1fr;
    }
    .cd-plan-statement-cell {
      border-right: none;
      border-bottom: 1px solid var(--cd-border-primary);
    }
    .cd-plan-statement-cell:last-child {
      border-bottom: none;
    }
    .cd-plan-statement-actions {
      padding: 0.875rem 1.25rem;
    }
    .cd-plan-this-month {
      padding: 1.25rem 1.25rem;
    }
    .cd-plan-usage-line {
      grid-template-columns: 1fr;
    }
    .cd-plan-usage-bar-wrap {
      width: 100%;
    }
    .cd-plan-included summary, .cd-plan-perks-grid {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .cd-plan-perks-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-locked-features {
    background: var(--cd-bg-card, var(--cd-bg-primary));
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-lg, 0.75rem);
    padding: 1.5rem;
    box-shadow: var(--cd-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
  }
  .cd-locked-features-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-locked-features-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary);
    font-size: 0.875rem;
    flex-shrink: 0;
  }
  .cd-locked-features-header-text {
    line-height: 1.3;
  }
  .cd-locked-features-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-locked-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cd-locked-features-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
  }
  .cd-locked-features-row + .cd-locked-features-row {
    border-top: 1px solid var(--cd-border-primary);
  }
  .cd-locked-features-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--cd-text-tertiary);
    font-size: 0.6875rem;
    flex-shrink: 0;
  }
  .cd-locked-features-row-name {
    flex: 1 1 auto;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cd-text-primary);
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .cd-locked-features-row-meta {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--cd-text-tertiary);
  }
  .cd-locked-features-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--cd-transition, all 0.15s ease);
    background: transparent;
    border: 1.5px solid var(--cd-border-primary);
    color: var(--cd-text-primary);
    flex-shrink: 0;
  }
  .cd-locked-features-chip i {
    font-size: 0.625rem;
    opacity: 0.7;
  }
  .cd-locked-features-chip-label {
    font-weight: 400;
    opacity: 0.7;
  }
  .cd-locked-features-chip-core {
    border-color: var(--membership-core-primary);
    color: var(--membership-core-primary);
  }
  .cd-locked-features-chip-core:hover {
    background: var(--membership-core-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-locked-features-chip-core:hover .cd-locked-features-chip-label, .cd-locked-features-chip-core:hover i {
    opacity: 1;
  }
  .cd-locked-features-chip-professional {
    border-color: var(--membership-professional-primary);
    color: var(--membership-professional-primary);
  }
  .cd-locked-features-chip-professional:hover {
    background: var(--membership-professional-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-locked-features-chip-professional:hover .cd-locked-features-chip-label, .cd-locked-features-chip-professional:hover i {
    opacity: 1;
  }
  .cd-locked-features-chip-business {
    border-color: var(--membership-business-primary);
    color: var(--membership-business-primary);
  }
  .cd-locked-features-chip-business:hover {
    background: var(--membership-business-primary);
    color: var(--cd-text-on-premium);
  }
  .cd-locked-features-chip-business:hover .cd-locked-features-chip-label, .cd-locked-features-chip-business:hover i {
    opacity: 1;
  }
  @media (max-width: 640px) {
    .cd-locked-features {
      padding: 1.125rem;
    }
    .cd-locked-features-row {
      flex-wrap: wrap;
    }
    .cd-locked-features-chip {
      margin-left: 1.75rem;
    }
  }
  .cd-wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .cd-wizard-pills {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .cd-wizard-pill {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--cd-border);
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .cd-wizard-pill.is-done {
    background: var(--cd-color-success);
  }
  .cd-wizard-pill.is-active {
    background: var(--cd-primary);
    transform: scale(1.35);
  }
  .cd-wizard-gratitude-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 9999px;
    background: linear-gradient( 135deg, var(--membership-business-primary), var(--membership-business-accent, var(--membership-business-primary)) );
    color: var(--membership-business-text, #fff);
    font-size: 1.5rem;
    box-shadow: 0 6px 18px -8px var(--membership-business-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--membership-business-primary) 55%, transparent);
    }
  }
}
@layer components {
  .cd-modal-beta-notice .cd-beta-notice-body {
    padding: 0.5rem 0;
  }
  .cd-modal-beta-notice .cd-beta-notice-typovisual {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-modal-beta-notice .cd-beta-notice-typovisual-line {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: var(--cd-text-primary);
    font-size: clamp(2.5rem, 5.5vw, 4rem);
  }
  .cd-modal-beta-notice .cd-beta-notice-typovisual-line--accent {
    color: var(--cd-color-accent);
  }
  .cd-modal-beta-notice .cd-beta-notice-typovisual-glyph {
    font-family: var(--cd-font-editorial);
    font-size: 1.5rem;
    color: var(--cd-color-accent);
    line-height: 1;
    margin-bottom: 0.5rem;
  }
  .cd-modal-beta-notice .cd-editorial-modal-eyebrow {
    color: var(--cd-color-accent);
  }
  .cd-modal-beta-notice .cd-editorial-dropcap {
    color: var(--cd-color-accent);
  }
  .cd-modal-beta-notice .cd-editorial-modal-headline-accent {
    color: var(--cd-color-accent);
  }
  .cd-modal-beta-notice .cd-editorial-modal-trail-arrow, .cd-modal-beta-notice .cd-editorial-modal-trail-to {
    color: var(--cd-color-accent);
  }
  .cd-modal-beta-notice .cd-beta-notice-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .cd-modal-beta-notice .cd-beta-notice-form-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
    margin-bottom: 0.25rem;
  }
  .cd-modal-beta-notice .cd-beta-notice-role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
  }
  .cd-modal-beta-notice .cd-beta-notice-role-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: 0.5rem;
    background: var(--cd-bg-surface, transparent);
    color: var(--cd-text-secondary);
    font-family: var(--cd-font-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
  }
  .cd-modal-beta-notice .cd-beta-notice-role-chip:hover {
    border-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-accent) 40%, var(--cd-border-primary));
    }
    color: var(--cd-text-primary);
  }
  .cd-modal-beta-notice .cd-beta-notice-role-chip[aria-pressed="true"] {
    border-color: var(--cd-color-accent);
    color: var(--cd-text-primary);
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 8%, transparent);
    }
  }
  .cd-modal-beta-notice .cd-beta-notice-role-chip i {
    color: var(--cd-color-accent);
  }
  .cd-modal-beta-notice .cd-beta-notice-email-input {
    width: 100%;
  }
  .cd-modal-beta-notice .cd-beta-notice-submit {
    width: 100%;
    justify-content: center;
  }
  .cd-modal-beta-notice .cd-beta-notice-feedback {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--cd-text-tertiary);
    text-align: center;
  }
  .cd-modal-beta-notice .cd-beta-notice-feedback a {
    color: var(--cd-color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }
  .cd-modal-beta-notice .cd-beta-notice-feedback a:hover {
    color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-color-accent) 80%, black);
    }
  }
  .cd-modal-beta-notice .cd-beta-notice-form-success {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem 0.25rem;
    text-align: left;
  }
  .cd-modal-beta-notice .cd-beta-notice-form-success-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .cd-modal-beta-notice .cd-beta-notice-form-success-icon {
    color: var(--cd-color-accent);
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .cd-modal-beta-notice .cd-beta-notice-form-success-title {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-modal-beta-notice .cd-beta-notice-form-success-note {
    font-family: var(--cd-font-editorial);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--cd-text-secondary);
    margin: 0;
  }
  .cd-modal-beta-notice .cd-beta-notice-error {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-error) 35%, var(--cd-border-primary));
    }
    background: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-error) 8%, transparent);
    }
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--cd-text-primary);
    margin-bottom: 0.5rem;
  }
  .cd-modal-beta-notice .cd-beta-notice-error-icon {
    color: var(--cd-color-error);
    font-size: 1rem;
    line-height: 1.4;
    flex-shrink: 0;
  }
  .cd-modal-beta-notice .cd-beta-notice-error-text {
    line-height: 1.4;
  }
  #cd-beta-notice-modal-source {
    display: none;
  }
  .cd-beta-notice-dev-trigger {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: var(--cd-z-topbar-dropdown);
    display: inline-flex;
    align-items: stretch;
    background: #141416;
    color: #fff;
    border-radius: 9999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--cd-font-primary);
    font-size: 0.75rem;
    overflow: hidden;
  }
  .cd-beta-notice-dev-trigger-open, .cd-beta-notice-dev-trigger-reset {
    background: transparent;
    color: #fff;
    border: 0;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
    transition: background 150ms ease, color 150ms ease;
  }
  .cd-beta-notice-dev-trigger-open:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .cd-beta-notice-dev-trigger-open i {
    color: var(--cd-color-accent);
    font-size: 0.8rem;
  }
  .cd-beta-notice-dev-trigger-open span {
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .cd-beta-notice-dev-trigger-reset {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: #a3a3a3;
    padding: 0.4rem 0.625rem;
  }
  .cd-beta-notice-dev-trigger-reset:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  .cd-beta-notice-dev-trigger-reset.is-confirmed {
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 30%, transparent);
    }
    color: var(--cd-color-accent);
  }
}
@layer components {
  .cd-portfolio-modal-editorial {
    --cd-portfolio-accent: var(--cd-color-premium);
  }
  .cd-portfolio-modal-editorial .cd-portfolio-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--cd-font-editorial);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-portfolio-accent);
    margin-bottom: 0.625rem;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-headline {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.05;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-gallery-frame {
    background: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-hairline);
    border-radius: var(--cd-radius-xl, 0.75rem);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-gallery-frame > img {
    width: 100%;
    height: min(52vh, 440px);
    object-fit: cover;
    display: block;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-gallery-frame--contain {
    min-height: 16rem;
    padding: 1.25rem;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-gallery-frame--contain > img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(52vh, 440px);
    object-fit: contain;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-thumb {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    background: var(--cd-bg-secondary);
    box-shadow: 0 0 0 1px var(--cd-border-hairline);
    transition: box-shadow 0.18s ease;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-thumb:hover {
    box-shadow: 0 0 0 2px var(--cd-portfolio-accent);
  }
  .cd-portfolio-modal-editorial .cd-portfolio-thumb--active {
    box-shadow: 0 0 0 2px var(--cd-portfolio-accent);
  }
  .cd-portfolio-modal-editorial .cd-portfolio-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    border-top: 1px solid var(--cd-border-primary);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-portfolio-modal-editorial .cd-portfolio-metric {
    padding: 1rem 1.25rem;
    border-left: 1px solid var(--cd-border-hairline);
  }
  .cd-portfolio-modal-editorial .cd-portfolio-metric:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-metric-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
    margin-bottom: 0.375rem;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-metric-value {
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--cd-text-primary);
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-section {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--cd-border-primary);
  }
  .cd-portfolio-modal-editorial .cd-portfolio-section--flush {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-section-title {
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--cd-text-primary);
    margin: 0 0 0.875rem 0;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-prose {
    font-family: var(--cd-font-editorial);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cd-text-secondary);
    white-space: pre-wrap;
    margin: 0;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-prose--lede::first-letter {
    float: left;
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    padding-right: 0.5rem;
    color: var(--cd-portfolio-accent);
  }
  .cd-portfolio-modal-editorial .cd-portfolio-pullquote {
    position: relative;
    font-family: var(--cd-font-editorial);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.35;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-pullquote::before {
    content: "\201C";
    font-family: var(--cd-font-editorial);
    font-style: normal;
    font-size: 2rem;
    line-height: 0;
    color: var(--cd-portfolio-accent);
    margin-right: 0.15rem;
    vertical-align: -0.18em;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-pullquote::after {
    content: "\201D";
    font-family: var(--cd-font-editorial);
    font-style: normal;
    font-size: 2rem;
    line-height: 0;
    color: var(--cd-portfolio-accent);
    margin-left: 0.15rem;
    vertical-align: -0.18em;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-pullquote-cite {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
    font-style: normal;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-pullquote-cite i {
    color: var(--cd-portfolio-accent);
  }
  .cd-portfolio-modal-editorial .cd-portfolio-before-after {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    align-items: center;
  }
  @media (max-width: 720px) {
    .cd-portfolio-modal-editorial .cd-portfolio-before-after {
      grid-template-columns: 1fr;
    }
  }
  .cd-portfolio-modal-editorial .cd-portfolio-ba-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-hairline);
    border-radius: var(--cd-radius-xl, 0.75rem);
    overflow: hidden;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-ba-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cd-portfolio-modal-editorial .cd-portfolio-ba-label {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-primary) 85%, transparent);
    }
    backdrop-filter: blur(4px);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-primary);
  }
  .cd-portfolio-modal-editorial .cd-portfolio-ba-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-portfolio-accent);
    font-size: 1.1rem;
    padding: 0.5rem 0;
  }
  @media (max-width: 720px) {
    .cd-portfolio-modal-editorial .cd-portfolio-ba-arrow {
      transform: rotate(90deg);
    }
  }
  .cd-portfolio-modal-editorial .cd-portfolio-ba-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--cd-text-tertiary);
    font-size: 0.85rem;
  }
  .cd-portfolio-modal-editorial .cd-modal-content {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .cd-portfolio-modal-editorial .cd-modal-content:hover {
    scrollbar-color: var(--cd-border-secondary) transparent;
  }
  .cd-portfolio-modal-editorial .cd-modal-content::-webkit-scrollbar {
    width: 4px;
  }
  .cd-portfolio-modal-editorial .cd-modal-content::-webkit-scrollbar-track {
    background: transparent;
  }
  .cd-portfolio-modal-editorial .cd-modal-content::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
  }
  .cd-portfolio-modal-editorial .cd-modal-content:hover::-webkit-scrollbar-thumb {
    background-color: var(--cd-border-secondary);
  }
}
@layer components {
  .cd-portfolio-card {
    --cd-portfolio-accent: var(--cd-color-premium);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    background: var(--cd-bg-card, #fff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-portfolio-card:hover {
    border-color: #d4d4d6;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.06);
  }
  .cd-portfolio-card__media {
    position: relative;
    height: 14rem;
    overflow: hidden;
    background: var(--cd-bg-secondary, #f7f7f8);
    border-bottom: 1px solid var(--cd-border-hairline, #ececee);
    cursor: pointer;
  }
  @media (min-width: 640px) {
    .cd-portfolio-card__media {
      height: 16rem;
    }
  }
  .cd-portfolio-card__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cd-portfolio-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--cd-portfolio-accent);
  }
  .cd-portfolio-card__placeholder i {
    font-size: 2.25rem;
  }
  .cd-portfolio-card__placeholder span {
    font-family: var(--cd-font-editorial);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-portfolio-card__featured {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.375rem;
    background: var(--cd-bg-primary, #fff);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-primary, #fff) 82%, transparent);
    }
    backdrop-filter: blur(4px);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-portfolio-accent);
  }
  .cd-portfolio-card__ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
  }
  .cd-portfolio-card__ba-half {
    position: relative;
    overflow: hidden;
  }
  .cd-portfolio-card__ba-half img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cd-portfolio-card__ba-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: var(--cd-bg-secondary, #f7f7f8);
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .cd-portfolio-card__ba-label {
    position: absolute;
    bottom: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    background: var(--cd-bg-primary, #fff);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-primary, #fff) 85%, transparent);
    }
    backdrop-filter: blur(4px);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-portfolio-card__ba-label--before {
    left: 0.5rem;
  }
  .cd-portfolio-card__ba-label--after {
    right: 0.5rem;
  }
  .cd-portfolio-card__ba-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    border-radius: var(--cd-radius-full, 999px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cd-bg-primary, #fff);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-primary, #fff) 90%, transparent);
    }
    box-shadow: 0 0 0 1px var(--cd-border-hairline, #ececee);
    color: var(--cd-portfolio-accent);
    font-size: 0.85rem;
  }
  .cd-portfolio-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.125rem;
  }
  .cd-portfolio-card__eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .cd-portfolio-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-family: var(--cd-font-editorial);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cd-portfolio-accent);
  }
  .cd-portfolio-card__eyebrow i {
    font-size: 0.8rem;
  }
  .cd-portfolio-card__eyebrow-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-portfolio-card__edit {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: var(--cd-text-tertiary, #9ca3af);
    background: transparent;
    transition: color 0.15s ease, background-color 0.15s ease;
  }
  .cd-portfolio-card__edit:hover {
    color: var(--cd-portfolio-accent);
    background: var(--cd-portfolio-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-portfolio-accent) 10%, transparent);
    }
  }
  .cd-portfolio-card__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--cd-text-primary, #1d1d1f);
    cursor: pointer;
    transition: color 0.15s ease;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  @media (min-width: 640px) {
    .cd-portfolio-card__title {
      font-size: 1.5rem;
    }
  }
  .cd-portfolio-card__title:hover {
    color: var(--cd-portfolio-accent);
  }
  .cd-portfolio-card__subtitle {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-family: var(--cd-font-editorial);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--cd-text-secondary, #6b7280);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .cd-portfolio-card__description {
    font-family: var(--cd-font-editorial);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-portfolio-card__description-content {
    max-height: calc(1.45em * 3);
    overflow: hidden;
  }
  .cd-portfolio-card__description.is-expanded .cd-portfolio-card__description-content {
    max-height: none;
  }
  .cd-portfolio-card__description-content > :first-child {
    margin-top: 0;
  }
  .cd-portfolio-card__description-content > :last-child {
    margin-bottom: 0;
  }
  .cd-portfolio-card__description-content p, .cd-portfolio-card__description-content ul, .cd-portfolio-card__description-content ol {
    margin: 0.35rem 0 0;
  }
  .cd-portfolio-card__description-content ul, .cd-portfolio-card__description-content ol {
    padding-left: 1.1rem;
  }
  .cd-portfolio-card__description-content a {
    color: var(--cd-portfolio-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
  }
  .cd-portfolio-card__more {
    display: inline-flex;
    align-items: center;
    margin-top: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-portfolio-accent);
    cursor: pointer;
  }
  .cd-portfolio-card__more:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
  .cd-portfolio-card__more:focus-visible {
    outline: 2px solid var(--cd-portfolio-accent);
    outline-offset: 3px;
    border-radius: 0.25rem;
  }
  .cd-portfolio-card__more[hidden] {
    display: none;
  }
  .cd-portfolio-card__markers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .cd-portfolio-card__marker {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-portfolio-accent);
  }
  .cd-portfolio-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    color: var(--cd-portfolio-accent);
    font-size: 0.72rem;
  }
  .cd-portfolio-card__metrics {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.125rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  .cd-portfolio-card__metric {
    padding: 0 0.875rem;
    border-left: 1px solid var(--cd-border-hairline, #ececee);
  }
  .cd-portfolio-card__metric:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .cd-portfolio-card__metric-label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-portfolio-card__metric-value {
    font-size: 1.05rem;
    line-height: 1.1;
    color: var(--cd-text-primary, #1d1d1f);
  }
  .cd-portfolio-card__metric--cost .cd-portfolio-card__metric-value {
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-portfolio-card__pullquote {
    margin-top: 0.125rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  .cd-portfolio-card__pullquote-text {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-family: var(--cd-font-editorial);
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--cd-text-primary, #1d1d1f);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .cd-portfolio-card__pullquote-text::before {
    content: "\201C";
    font-style: normal;
    color: var(--cd-portfolio-accent);
    margin-right: 0.1rem;
  }
  .cd-portfolio-card__pullquote-cite {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cd-text-secondary, #6b7280);
    font-style: normal;
  }
  .cd-portfolio-card__pullquote-cite i {
    color: var(--cd-portfolio-accent);
  }
  .cd-portfolio-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0 1.125rem 1.125rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  .cd-portfolio-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-portfolio-card__meta-item i {
    font-size: 0.72rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-portfolio-card__meta-item--muted, .cd-portfolio-card__meta-item--muted i {
    color: var(--cd-text-tertiary, #9ca3af);
  }
}
@layer components {
  .cd-pf-delete {
    --cd-pfd-accent: var(--cd-color-error);
  }
  .cd-pf-delete__record {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-space-4);
    padding: var(--cd-space-5) 0 var(--cd-space-6);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-pf-delete__record-media {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    border-radius: var(--cd-radius-lg);
    object-fit: cover;
    background-color: var(--cd-bg-secondary);
  }
  .cd-pf-delete__record-media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-tertiary);
    font-size: 1.25rem;
  }
  .cd-pf-delete__title {
    font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.75rem);
    line-height: 1.1;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-pf-delete__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cd-space-2) var(--cd-space-4);
    margin-top: var(--cd-space-2);
    font-size: 0.8125rem;
    color: var(--cd-text-secondary);
  }
  .cd-pf-delete__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
  }
  .cd-pf-delete__meta-item i {
    color: var(--cd-text-tertiary);
  }
  .cd-pf-delete__desc {
    margin: var(--cd-space-3) 0 0;
    font-size: 0.975rem;
    line-height: 1.55;
    color: var(--cd-text-secondary);
  }
  .cd-pf-delete__eyebrow {
    font-family: var(--cd-font-editorial);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-pfd-accent);
    margin: var(--cd-space-6) 0 var(--cd-space-2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .cd-pf-delete__ledger {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cd-pf-delete__row {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--cd-space-4);
    align-items: baseline;
    padding: var(--cd-space-3) 0;
    border-bottom: 1px dashed var(--cd-border-primary);
  }
  .cd-pf-delete__row:last-child {
    border-bottom: 0;
  }
  .cd-pf-delete__marker {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--cd-pfd-accent);
    text-align: center;
  }
  .cd-pf-delete__label {
    display: block;
    font-family: var(--cd-font-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
    margin-bottom: 0.15rem;
  }
  .cd-pf-delete__value {
    font-size: 0.975rem;
    line-height: 1.45;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-pf-delete__value .cd-pf-delete__count {
    font-size: 1.05rem;
    color: var(--cd-text-primary);
  }
  .cd-pf-delete__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--cd-space-3);
    margin-top: var(--cd-space-7);
    padding-top: var(--cd-space-5);
    border-top: 1px solid var(--cd-border-primary);
  }
  .cd-pf-delete--modal .cd-pf-delete__eyebrow {
    margin-top: 0;
  }
  .cd-pf-delete__modal-lede {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--cd-text-secondary);
    margin: 0 0 var(--cd-space-3);
  }
  @media (min-width: 640px) {
    .cd-pf-delete__record {
      grid-template-columns: 5rem minmax(0, 1fr);
      gap: var(--cd-space-5);
      align-items: start;
    }
  }
}
@layer components {
  .cd-social-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    background: var(--cd-bg-card, #fff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-social-card:hover {
    border-color: #d4d4d6;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.06);
  }
  .cd-social-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 1.125rem 0.75rem;
  }
  .cd-social-card__icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--cd-radius-lg, 0.75rem);
    background: var(--cd-bg-primary, #fff);
    border: 1px solid var(--cd-border-primary, #e5e5e7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
  }
  .cd-social-card__icon i {
    font-size: 1.15rem;
    color: var(--cd-text-secondary, #6b7280);
    line-height: 1;
  }
  .cd-social-card__headings {
    flex: 1;
    min-width: 0;
  }
  .cd-social-card__platform {
    display: block;
    font-family: var(--cd-font-editorial);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, #9ca3af);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-social-card__edit {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: var(--cd-text-tertiary, #9ca3af);
    background: transparent;
    transition: color 0.15s ease, background-color 0.15s ease;
  }
  .cd-social-card__edit:hover {
    color: var(--cd-color-accent, var(--cd-color-primary));
    background: var(--cd-color-accent, var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent, var(--cd-color-primary)) 10%, transparent);
    }
  }
  .cd-social-card__body {
    flex: 1;
    padding: 0 1.125rem 1rem;
  }
  .cd-social-card__handle {
    display: block;
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--cd-text-primary, #1d1d1f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  a.cd-social-card__handle:hover {
    color: var(--cd-color-accent, var(--cd-color-primary));
  }
  .cd-social-card__url {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--cd-text-secondary, #6b7280);
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .cd-social-card__url--empty {
    color: var(--cd-text-tertiary, #9ca3af);
    font-style: italic;
    word-break: normal;
  }
  .cd-social-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0 1.125rem 1.125rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cd-border-faint, #f0f0f2);
  }
  .cd-social-card__marker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-social-card__marker i {
    font-size: 0.7rem;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-social-card__marker--primary, .cd-social-card__marker--primary i {
    color: var(--cd-color-premium, #b8860b);
  }
  .cd-social-card__marker--hidden, .cd-social-card__marker--hidden i {
    color: var(--cd-color-warning-orange, #d97706);
  }
  .cd-social-card[data-platform="linkedin"] .cd-social-card__icon i {
    color: #0a66c2;
  }
  .cd-social-card[data-platform="twitter"] .cd-social-card__icon i {
    color: #1d9bf0;
  }
  .cd-social-card[data-platform="instagram"] .cd-social-card__icon i {
    color: #e1306c;
  }
  .cd-social-card[data-platform="facebook"] .cd-social-card__icon i {
    color: #1877f2;
  }
  .cd-social-card[data-platform="youtube"] .cd-social-card__icon i {
    color: #ff0000;
  }
  .cd-social-card[data-platform="tiktok"] .cd-social-card__icon i {
    color: #010101;
  }
  .cd-social-card[data-platform="website"] .cd-social-card__icon i {
    color: #0d9488;
  }
  .cd-social-card[data-platform="whatsapp"] .cd-social-card__icon i {
    color: #25d366;
  }
  .cd-social-card[data-platform="pinterest"] .cd-social-card__icon i {
    color: #e60023;
  }
  .cd-social-card[data-platform="discord"] .cd-social-card__icon i {
    color: #5865f2;
  }
  .cd-social-card[data-platform="snapchat"] .cd-social-card__icon i {
    color: #e0a800;
  }
  .cd-social-card[data-platform="reddit"] .cd-social-card__icon i {
    color: #ff4500;
  }
  .cd-social-card[data-platform="telegram"] .cd-social-card__icon i {
    color: #229ed9;
  }
}
@layer components {
  .cd-profile-card-editorial {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 30px -18px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
  }
  .cd-profile-card-editorial:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 22px 48px -22px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
  }
  .cd-pce-label {
    font-family: var(--cd-font-primary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cd-text-tertiary);
  }
  .cd-pce-rule {
    border: 0;
    border-top: 1px solid var(--cd-border-secondary);
  }
  .cd-pce-rule--ink {
    border: 0;
    border-top: 1.5px solid var(--cd-text-primary);
  }
  .cd-pce-figure {
    font-size: 2.5rem;
    line-height: 0.9;
    color: var(--cd-text-primary);
  }
  .cd-pce-trust-plate {
    min-width: 4.5rem;
  }
  .cd-pce-plate-divider {
    width: 1px;
    align-self: stretch;
    background-color: var(--cd-border-secondary);
  }
  .cd-pce-metrics {
    min-width: 0;
  }
  .cd-pce-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.35rem, 1fr));
    gap: 0;
    min-width: 0;
    align-items: stretch;
  }
  .cd-pce-stat {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    min-height: 3.4rem;
    padding-inline: 0.75rem;
    text-align: center;
  }
  .cd-pce-stat + .cd-pce-stat::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    left: 0;
    width: 1px;
    background-color: var(--cd-border-secondary);
  }
  .cd-pce-stat .cd-pce-label {
    letter-spacing: 0.1em;
  }
  .cd-pce-stat-value {
    display: inline-flex;
    min-width: 0;
    min-height: 1.75rem;
    align-items: baseline;
    justify-content: center;
    gap: 0.18rem;
    color: var(--cd-text-primary);
    white-space: nowrap;
  }
  .cd-pce-stat-number {
    font-size: 1.5rem;
    color: var(--cd-text-primary);
  }
  .cd-pce-stat-unit {
    font-size: 0.72rem;
    line-height: 1;
    color: var(--cd-text-tertiary);
  }
  .cd-pce-stat-modifier {
    align-self: center;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
  }
  .cd-pce-stat-text, .cd-pce-stat-empty {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cd-text-primary);
  }
  @container (max-width: 26rem) {
    .cd-profile-card-editorial .cd-pce-metrics {
      flex-direction: column;
      align-items: stretch;
      gap: 0.85rem;
    }
    .cd-profile-card-editorial .cd-pce-metrics--trust-response-only {
      flex-direction: row;
      align-items: stretch;
      gap: 0.75rem;
    }
    .cd-profile-card-editorial .cd-pce-trust-plate {
      width: 100%;
      min-width: 0;
    }
    .cd-profile-card-editorial .cd-pce-metrics--trust-response-only .cd-pce-trust-plate {
      width: auto;
      flex: 1 1 0;
    }
    .cd-profile-card-editorial .cd-pce-plate-divider {
      width: 100%;
      height: 1px;
      align-self: auto;
    }
    .cd-profile-card-editorial .cd-pce-metrics--trust-response-only .cd-pce-plate-divider {
      width: 1px;
      height: auto;
      align-self: stretch;
    }
    .cd-profile-card-editorial .cd-pce-metric-grid {
      grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
      width: 100%;
    }
    .cd-profile-card-editorial .cd-pce-metrics--trust-response-only .cd-pce-metric-grid {
      width: auto;
    }
    .cd-profile-card-editorial .cd-pce-stat {
      min-height: 3rem;
      padding-inline: 0.35rem;
      gap: 0.25rem;
    }
    .cd-profile-card-editorial .cd-pce-stat .cd-pce-label {
      font-size: 0.58rem;
      letter-spacing: 0.08em;
    }
    .cd-profile-card-editorial .cd-pce-stat-number {
      font-size: 1.35rem;
    }
  }
  .cd-profile-card-editorial .cd-pce-name {
    font-size: var(--cd-text-lg);
  }
  @container (min-width: 26rem) {
    .cd-profile-card-editorial .cd-pce-name {
      font-size: var(--cd-text-xl);
    }
  }
  .cd-profile-card-editorial .cd-pce-avatar .cd-avatar-rounded {
    --avatar-size: 3.75rem;
  }
  @container (min-width: 26rem) {
    .cd-profile-card-editorial .cd-pce-avatar .cd-avatar-rounded {
      --avatar-size: 4.5rem;
    }
  }
  .cd-pce-bio {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-text-primary) 84%, transparent);
    }
  }
  .cd-pce-cred {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cd-text-primary);
  }
  .cd-pce-cred > i {
    width: 16px;
    padding-top: 0.1rem;
    text-align: center;
    flex-shrink: 0;
  }
  .cd-pce-cred-copy {
    min-width: 0;
  }
  .cd-pce-cred-label {
    color: var(--cd-text-primary);
  }
  .cd-pce-cred-detail {
    font-weight: 400;
    color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-text-primary) 48%, transparent);
    }
  }
  .cd-pce-cred-hours {
    font-size: 0.8rem;
    color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-text-primary) 68%, transparent);
    }
  }
  .cd-pce-trade-icon {
    display: inline-flex;
    width: 1.65rem;
    height: 1.65rem;
    align-items: center;
    justify-content: center;
    color: var(--cd-text-primary);
  }
  .cd-pce-trade-icon__glyph {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    font-size: 1rem;
    line-height: 1;
  }
  .cd-pce-trade-icon i.cd-pce-trade-icon__glyph, .cd-pce-trade-icon__glyph.fa, .cd-pce-trade-icon__glyph.fas, .cd-pce-trade-icon__glyph.far, .cd-pce-trade-icon__glyph.fab {
    width: auto;
    height: auto;
  }
  .cd-pce-plate {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--cd-bg-tertiary);
  }
  .cd-pce-plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cd-pce-plate-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
  }
  .cd-pce-availability-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .cd-pce-availability-footer.pt-3 {
    border-top: 1px solid var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--cd-text-primary) 6%, transparent);
    }
  }
  .cd-pce-language-list {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--cd-text-secondary);
  }
  .cd-pce-language-separator {
    color: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--cd-text-primary) 25%, transparent);
    }
  }
  .cd-pce-status {
    display: inline-flex;
    min-width: 0;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cd-text-secondary);
  }
  .cd-pce-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background-color: var(--cd-text-tertiary);
  }
  .cd-pce-status--available {
    color: var(--cd-color-success);
  }
  .cd-pce-status--available .cd-pce-status-dot {
    background-color: var(--cd-color-success);
  }
  .cd-pce-status--emergency {
    color: var(--cd-color-error);
  }
  .cd-pce-status--emergency .cd-pce-status-dot {
    background-color: var(--cd-color-error);
  }
  .cd-pce-status--busy {
    color: var(--cd-color-warning);
  }
  .cd-pce-status--busy .cd-pce-status-dot {
    background-color: var(--cd-color-warning);
  }
  .cd-pce-status--away .cd-pce-status-dot {
    background-color: var(--cd-text-tertiary);
  }
}
@layer components {
  .cd-visit-card {
    position: relative;
    background: var(--cd-bg-card, #ffffff);
    border: 1px solid var(--cd-border-hairline, #ececec);
    border-radius: var(--cd-radius-xl, 20px);
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .cd-visit-card:hover {
    box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
  }
  .cd-visit-card-body {
    padding: 1.5rem 1.75rem 1.25rem;
  }
  .cd-visit-card-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }
  .cd-visit-card-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-visit-card-title {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--cd-text-primary, #1d1d1f);
    margin-bottom: 0.5rem;
    word-break: break-word;
  }
  .cd-visit-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .cd-visit-card-title a:hover {
    color: var(--cd-color-science-blue, #0066cc);
  }
  .cd-visit-card-title--hero {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.15;
  }
  .cd-visit-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-visit-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .cd-visit-card-meta i {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 0.8rem;
  }
  .cd-visit-card-meta-followup, .cd-visit-card-meta-followup i {
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-visit-card-pullquote {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-visit-card-actions {
    padding: 1.125rem 1.75rem 1.25rem;
    border-top: 1px solid var(--cd-border-soft, #f0f0f2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .cd-visit-section-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cd-border-hairline, #ececec);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .cd-visit-detail-band {
    margin: -0.75rem -0.75rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--cd-bg-soft, #fafafa);
    border-bottom: 1px solid var(--cd-border-soft, #f0f0f2);
  }
  .cd-visit-detail-title-row {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
  }
  .cd-btn-ghost.cd-visit-detail-delete {
    color: var(--cd-color-error, #dc143c);
  }
  .cd-btn-ghost.cd-visit-detail-delete:hover {
    background-color: var(--cd-color-error, #dc143c);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error, #dc143c) 10%, transparent);
    }
  }
  .cd-visit-card-eyebrow--warning {
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-visit-fact-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
  }
  .cd-visit-fact {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .cd-visit-fact-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-visit-fact-value {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary, #1d1d1f);
  }
  @media (max-width: 720px) {
    .cd-visit-card-body {
      padding: 1.25rem 1.25rem 1rem;
    }
    .cd-visit-card-actions {
      padding: 1rem 1.25rem 1.125rem;
      flex-direction: column;
      align-items: stretch;
    }
    .cd-visit-card-actions .cd-btn {
      justify-content: center;
    }
  }
}
@layer components {
  .cd-profile-content-layout {
    --cd-profile-connected-rule: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --cd-profile-connected-rule: color-mix(in srgb, var(--cd-text-primary) 88%, var(--cd-border-primary));
    }
    --cd-profile-connected-border: var(--cd-border-primary);
  }
  .cd-profile-content-layout > .cd-profile-sticky-subnav:has(+ .cd-pced-main-grid) {
    margin-block-end: 0 !important;
  }
  .cd-profile-sticky-subnav + .cd-pced-main-grid {
    margin-top: 0 !important;
  }
  .cd-pced-main-grid:has(+ .cd-pced-ops) {
    margin-block-end: 0 !important;
  }
  .cd-pced-main-grid {
    gap: 0 !important;
  }
  .cd-pced-main-grid > .cd-card, .cd-pced-place > .cd-card-flush {
    border-color: var(--cd-profile-connected-border);
    border-radius: 0;
    border-top: 0;
    box-shadow: none;
  }
  .cd-pced-main-grid > .cd-card:hover, .cd-pced-place > .cd-card-flush:hover {
    transform: none;
    box-shadow: none;
  }
  @media (min-width: 1024px) {
    .cd-pced-place > .cd-card-flush {
      border-left: 0;
    }
  }
  .cd-pced-about {
    display: block;
    padding: 1.75rem;
  }
  @media (min-width: 1024px) {
    .cd-pced-about {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr);
      gap: 1.75rem;
    }
  }
  .cd-pced-rail {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  @media (max-width: 1023px) {
    .cd-pced-rail {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem 1.25rem;
      margin-bottom: 1.5rem;
      padding-bottom: 1.25rem;
      border-bottom: 1px solid var(--cd-border-primary);
    }
  }
  @media (min-width: 1024px) {
    .cd-pced-rail {
      padding-right: 1.5rem;
      border-right: 1px solid var(--cd-border-primary);
    }
  }
  .cd-pced-score {
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--cd-border-primary);
  }
  @media (max-width: 1023px) {
    .cd-pced-score {
      grid-column: 1 / -1;
      padding-bottom: 0;
      border-bottom: 0;
    }
  }
  .cd-pced-figure {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--cd-text-primary);
    font-size: 3.6rem;
  }
  .cd-pced-label {
    margin: 0;
    color: var(--cd-text-tertiary);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .cd-pced-score-caption {
    margin: 0.35rem 0 0;
    color: var(--cd-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .cd-pced-fact {
    display: grid;
    gap: 0.15rem;
  }
  .cd-pced-fact strong {
    color: var(--cd-text-primary);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
  }
  .cd-pced-fact span {
    color: var(--cd-text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .cd-pced-copy {
    min-width: 0;
  }
  .cd-pced-eyebrow {
    margin: 0 0 0.4rem;
    color: var(--cd-text-tertiary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .cd-pced-title {
    margin: 0;
    color: var(--cd-text-primary);
    font-family: var(--cd-font-editorial);
    font-size: clamp(1.7rem, 2.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    font-feature-settings: "ss01" 1;
  }
  .cd-pced-bio .prose, .cd-pced-bio > p {
    color: var(--cd-text-secondary);
    font-family: var(--cd-font-numeral);
    font-size: 1.02rem;
    line-height: 1.65;
  }
  .cd-pced-bio-copy--collapsed {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
  }
  .cd-pced-bio-copy--expanded {
    display: block;
    overflow: visible;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: unset;
  }
  .cd-pced-bio-toggle {
    display: inline-flex;
    margin-top: 0.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cd-color-primary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: underline;
  }
  .cd-pced-creds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-top: 1.75rem;
    border-top: 1px solid var(--cd-border-primary);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-pced-cred-item {
    min-width: 0;
    padding: 1rem 1rem 1rem 0;
  }
  .cd-pced-cred-item + .cd-pced-cred-item {
    padding-left: 1rem;
    border-left: 1px solid var(--cd-border-primary);
  }
  .cd-pced-cred-item strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--cd-text-primary);
    font-size: 0.92rem;
    font-weight: 800;
  }
  .cd-pced-cred-item span {
    display: block;
    margin-top: 0.2rem;
    color: var(--cd-text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .cd-pced-footer {
    padding-right: 1.75rem;
    padding-bottom: 1.5rem;
    padding-left: 1.75rem;
  }
  .cd-pced-place h3 {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    letter-spacing: -0.025em;
  }
  .cd-pced-place .cd-address-radius-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.875rem;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--cd-border-primary);
  }
  .cd-pced-place .cd-address-radius-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    color: var(--cd-color-primary);
    font-size: 0.9rem;
  }
  .cd-pced-place .cd-address-radius-copy {
    min-width: 0;
  }
  .cd-pced-place .cd-address-radius-copy strong {
    display: block;
    color: var(--cd-text-primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
  }
  .cd-pced-place .cd-address-radius-copy span {
    display: block;
    margin-top: 0.15rem;
    color: var(--cd-text-secondary);
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.4;
  }
  .cd-pced-place h4 {
    font-family: inherit;
  }
  .cd-pced-ops {
    margin-top: 0 !important;
    border: 1px solid var(--cd-profile-connected-border);
    border-top: 0;
  }
  .cd-pced-ops-panel {
    min-width: 0;
    padding: 1.5rem 1.75rem 1.25rem;
  }
  .cd-pced-ops-panel + .cd-pced-ops-panel {
    border-top: 1px solid var(--cd-border-primary);
  }
  @media (min-width: 1024px) {
    .cd-pced-ops-panel + .cd-pced-ops-panel {
      border-top: 0;
      border-left: 1px solid var(--cd-border-primary);
    }
  }
  .cd-pced-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.875rem;
    margin-bottom: 1.1rem;
  }
  .cd-pced-panel-title {
    margin: 0.3rem 0 0;
    color: var(--cd-text-primary);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
  }
  .cd-pced-count-tag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--cd-border-primary);
    border-radius: 9999px;
    color: var(--cd-text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .cd-pced-contact-actions {
    margin-top: 1.5rem;
  }
  .cd-pced-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.6rem;
    padding: 0 1rem;
    border: 1px solid var(--cd-text-primary);
    border-radius: 0.5rem;
    background: var(--cd-bg-card);
    color: var(--cd-text-primary);
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .cd-pced-save-btn:hover {
    background: var(--cd-bg-secondary);
  }
}
@layer components {
  .cd-search-editorial .cd-se-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-space-6);
    padding-top: var(--cd-space-8);
    padding-bottom: var(--cd-space-6);
  }
  @media (min-width: 1024px) {
    .cd-search-editorial .cd-se-masthead {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }
  }
  .cd-search-editorial .cd-se-title {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: var(--cd-text-4xl);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-feature-settings: "ss01" 1;
    color: var(--cd-text-primary);
  }
  @media (min-width: 1024px) {
    .cd-search-editorial .cd-se-title {
      font-size: var(--cd-text-5xl);
    }
  }
  .cd-search-editorial .cd-se-snapshot {
    display: flex;
    gap: var(--cd-space-4);
  }
  @media (min-width: 640px) {
    .cd-search-editorial .cd-se-snapshot {
      gap: var(--cd-space-6);
    }
  }
  .cd-search-editorial .cd-se-stat-figure {
    display: block;
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-size: var(--cd-text-3xl);
    line-height: 1;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums lining-nums;
  }
  .cd-search-editorial .cd-se-stat-label {
    display: block;
    margin-top: var(--cd-space-1);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
  }
  .cd-search-editorial .cd-se-command {
    position: sticky;
    top: var(--cd-total-navbar-offset);
    z-index: 25;
    margin-bottom: var(--cd-space-6);
    background: var(--cd-bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-primary) 90%, transparent);
    }
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--cd-border-hairline);
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-search-editorial .cd-se-command-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-space-2);
    padding-block: var(--cd-space-3);
  }
  @media (min-width: 1024px) {
    .cd-search-editorial .cd-se-command-inner {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
      align-items: center;
    }
  }
  .cd-search-editorial .cd-se-field {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    min-height: 2.75rem;
    padding: 0 var(--cd-space-3);
    border: 1px solid var(--cd-border-secondary);
    border-radius: var(--cd-radius-lg);
    background: var(--cd-bg-card);
    transition: border-color 0.15s ease;
  }
  .cd-search-editorial .cd-se-field:focus-within {
    border-color: var(--cd-color-primary);
  }
  .cd-search-editorial .cd-se-field > i {
    color: var(--cd-text-tertiary);
    width: 1.1rem;
    text-align: center;
    flex: 0 0 auto;
  }
  .cd-search-editorial .cd-se-field input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cd-text-primary);
    font-size: var(--cd-text-base);
  }
  .cd-search-editorial .cd-se-field input::placeholder {
    color: var(--cd-text-tertiary);
  }
  .cd-search-editorial .cd-se-filter-label {
    font-family: var(--cd-font-primary);
    font-size: var(--cd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-text-tertiary);
    margin-bottom: var(--cd-space-2);
  }
  .cd-search-editorial .cd-se-divider {
    height: 1px;
    border: 0;
    margin: var(--cd-space-5) 0;
    background: var(--cd-border-hairline);
  }
  .cd-search-editorial .cd-search-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    min-height: 2.25rem;
    padding: 0 var(--cd-space-3);
    border: 1px solid var(--cd-border-secondary);
    border-radius: 9999px;
    background: var(--cd-bg-card);
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }
  .cd-search-editorial .cd-search-chip:hover {
    border-color: var(--cd-border-primary);
    color: var(--cd-text-primary);
  }
  .cd-search-editorial .cd-search-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .cd-search-editorial .cd-search-chip:focus-within {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-search-editorial .cd-search-chip:has(input:checked) {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 12%, transparent);
    }
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 45%, transparent);
    }
    color: var(--cd-color-primary);
  }
  .cd-search-editorial .cd-search-chip:has(input:checked) i {
    color: inherit;
  }
  .cd-search-editorial .cd-search-chip--danger:has(input:checked) {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 14%, transparent);
    }
    border-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-warning) 45%, transparent);
    }
    color: var(--cd-color-warning);
  }
  .cd-search-editorial .cd-search-chip--success:has(input:checked) {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 14%, transparent);
    }
    border-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-success) 45%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-search-editorial .cd-se-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-2);
  }
  .cd-search-editorial .cd-se-count {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: var(--cd-text-3xl);
    line-height: 1;
    letter-spacing: -0.015em;
    font-feature-settings: "ss01" 1, "tnum" 1, "lnum" 1;
    color: var(--cd-text-primary);
  }
  .cd-search-editorial .cd-se-context-line {
    margin-top: var(--cd-space-1);
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-search-editorial .cd-se-eyebrow {
    font-family: var(--cd-font-primary);
    font-size: var(--cd-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cd-text-tertiary);
  }
  .cd-search-editorial .cd-se-toolbar {
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-search-editorial .cd-se-viewtoggle {
    background-color: var(--cd-bg-secondary);
  }
  .cd-search-editorial .cd-se-maximize-btn {
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-lg);
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
  }
  .cd-search-editorial .cd-se-maximize-btn:hover {
    color: var(--cd-text-primary);
  }
  .cd-search-editorial .cd-se-maximize-btn.is-active {
    background-color: var(--cd-bg-card);
    color: var(--cd-text-primary);
    box-shadow: var(--cd-shadow-sm);
  }
  @media (min-width: 1024px) {
    .cd-search-editorial .cd-se-rail {
      border-right: 1px solid var(--cd-border-hairline);
      padding-right: var(--cd-space-6);
    }
    .cd-search-editorial .cd-se-rail-inner {
      position: sticky;
      top: calc(var(--cd-total-navbar-offset) + 4.75rem);
    }
  }
}
.cd-search-editorial .cd-se-command-inner .cd-form-label {
  display: none;
}
.cd-search-editorial .cd-se-command-inner .mb-6 {
  margin-bottom: 0;
}
@layer components {
  .cd-quote-guide-editorial {
    --cd-qsg-accent: var(--cd-color-premium);
  }
  .cd-quote-guide-editorial .cd-qsg-head {
    margin-bottom: 1.75rem;
  }
  .cd-quote-guide-editorial .cd-qsg-eyebrow {
    font-family: var(--cd-font-editorial);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-qsg-accent);
    margin: 0 0 0.5rem 0;
  }
  .cd-quote-guide-editorial .cd-qsg-headline {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.05;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-quote-guide-editorial .cd-qsg-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5rem;
    padding-bottom: 1.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-quote-guide-editorial .cd-qsg-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .cd-quote-guide-editorial .cd-qsg-entry-stem {
    width: 1px;
    height: 1.25rem;
    background: var(--cd-qsg-accent);
    margin: 0.5rem 0;
  }
  .cd-quote-guide-editorial .cd-qsg-fork-stem {
    width: 1px;
    height: 1.25rem;
    background: var(--cd-qsg-accent);
    margin-top: 0.5rem;
  }
  .cd-quote-guide-editorial .cd-qsg-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
  }
  .cd-quote-guide-editorial .cd-qsg-node-num {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--cd-qsg-accent);
  }
  .cd-quote-guide-editorial .cd-qsg-node-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
  }
  .cd-quote-guide-editorial .cd-qsg-node--hub .cd-qsg-node-num {
    color: var(--cd-text-primary);
  }
  .cd-quote-guide-editorial .cd-qsg-node--hub .cd-qsg-node-label {
    color: var(--cd-text-primary);
  }
  .cd-quote-guide-editorial .cd-qsg-outcomes {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
    padding-top: 1.5rem;
  }
  .cd-quote-guide-editorial .cd-qsg-outcomes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cd-qsg-accent);
  }
  .cd-quote-guide-editorial .cd-qsg-outcome {
    position: relative;
    padding: 0 0.5rem;
  }
  .cd-quote-guide-editorial .cd-qsg-outcome::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 1.5rem;
    background: var(--cd-qsg-accent);
  }
  @media (max-width: 640px) {
    .cd-quote-guide-editorial .cd-qsg-fork-stem {
      display: none;
    }
    .cd-quote-guide-editorial .cd-qsg-outcomes {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem 0.5rem;
      padding-top: 1.5rem;
      margin-top: 1rem;
      border-top: 1px solid var(--cd-border-hairline);
    }
    .cd-quote-guide-editorial .cd-qsg-outcomes::before, .cd-quote-guide-editorial .cd-qsg-outcome::before {
      display: none;
    }
  }
  .cd-quote-guide-editorial .cd-qsg-defs {
    list-style: none;
    margin: 2rem 0 0 0;
    padding: 0;
  }
  .cd-quote-guide-editorial .cd-qsg-def {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    padding: 1.125rem 0;
    border-bottom: 1px dashed var(--cd-border-primary);
  }
  .cd-quote-guide-editorial .cd-qsg-def:last-child {
    border-bottom: 0;
  }
  .cd-quote-guide-editorial .cd-qsg-def-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .cd-quote-guide-editorial .cd-qsg-def-num {
    font-size: 0.95rem;
    line-height: 1;
    color: var(--cd-qsg-accent);
  }
  .cd-quote-guide-editorial .cd-qsg-def-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
  }
  .cd-quote-guide-editorial .cd-qsg-def-pic {
    display: inline-flex;
    flex-shrink: 0;
  }
  .cd-quote-guide-editorial .cd-qsg-def-img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    display: block;
  }
  .cd-quote-guide-editorial .cd-qsg-def-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-primary);
  }
  .cd-quote-guide-editorial .cd-qsg-def-text {
    font-family: var(--cd-font-editorial);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--cd-text-secondary);
    margin: 0;
  }
  .cd-quote-guide-editorial .cd-qsg-pullquote-wrap {
    margin: 2rem 0 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cd-border-primary);
  }
  .cd-quote-guide-editorial .cd-qsg-pullquote {
    position: relative;
    font-family: var(--cd-font-editorial);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-quote-guide-editorial .cd-qsg-pullquote::before {
    content: "\201C";
    font-family: var(--cd-font-editorial);
    font-style: normal;
    font-size: 2rem;
    line-height: 0;
    color: var(--cd-qsg-accent);
    margin-right: 0.15rem;
    vertical-align: -0.18em;
  }
  .cd-quote-guide-editorial .cd-qsg-pullquote::after {
    content: "\201D";
    font-family: var(--cd-font-editorial);
    font-style: normal;
    font-size: 2rem;
    line-height: 0;
    color: var(--cd-qsg-accent);
    margin-left: 0.15rem;
    vertical-align: -0.18em;
  }
  .cd-quote-guide-editorial .cd-qsg-pullquote-cite {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
  }
  .cd-quote-guide-editorial .cd-qsg-pullquote-cite i {
    color: var(--cd-qsg-accent);
  }
}
@layer components {
  .cd-quote-help-modal {
    --cd-qh-accent: var(--cd-color-premium);
  }
  .cd-quote-help-modal .cd-qh-head {
    margin-bottom: 1.5rem;
  }
  .cd-quote-help-modal .cd-qh-eyebrow {
    font-family: var(--cd-font-editorial);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-qh-accent);
    margin: 0 0 0.5rem 0;
  }
  .cd-quote-help-modal .cd-qh-headline {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.05;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-quote-help-modal .cd-qh-sub {
    font-family: var(--cd-font-editorial-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cd-text-secondary);
    margin: 0.6rem 0 0 0;
  }
  .cd-quote-help-modal .cd-qh-defs {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cd-quote-help-modal .cd-qh-def {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    padding: 1.125rem 0;
    border-bottom: 1px dashed var(--cd-border-primary);
  }
  .cd-quote-help-modal .cd-qh-def:first-child {
    padding-top: 0;
  }
  .cd-quote-help-modal .cd-qh-def:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .cd-quote-help-modal .cd-qh-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }
  .cd-quote-help-modal .cd-qh-num {
    font-size: 0.95rem;
    line-height: 1;
    color: var(--cd-qh-accent);
  }
  .cd-quote-help-modal .cd-qh-icon {
    font-size: 1rem;
    line-height: 1;
    color: var(--cd-text-tertiary);
  }
  .cd-quote-help-modal .cd-qh-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-primary);
    margin-bottom: 0.4rem;
  }
  .cd-quote-help-modal .cd-qh-text {
    font-family: var(--cd-font-editorial);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--cd-text-secondary);
    margin: 0;
  }
  .cd-quote-help-modal .cd-qh-note {
    margin-top: 0.65rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.5rem;
    background: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-secondary) 60%, transparent);
    }
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--cd-text-secondary);
  }
  .cd-quote-help-modal .cd-qh-note i {
    color: var(--cd-text-tertiary);
    margin-right: 0.3rem;
  }
  .cd-quote-help-modal .cd-qh-note strong {
    color: var(--cd-text-primary);
  }
  .cd-quote-help-modal .cd-qh-foot {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cd-border-primary);
  }
  .cd-quote-help-modal .cd-qh-tip {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--cd-text-tertiary);
    margin: 0 0 0.9rem 0;
  }
  .cd-quote-help-modal .cd-qh-tip i {
    color: var(--cd-qh-accent);
    margin-right: 0.35rem;
  }
  .cd-quote-help-modal .cd-qh-tip strong {
    color: var(--cd-text-secondary);
  }
  .cd-quote-help-modal .cd-qh-faq-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--cd-qh-accent);
    padding-bottom: 2px;
    transition: color 0.15s ease;
  }
  .cd-quote-help-modal .cd-qh-faq-link:hover {
    color: var(--cd-qh-accent);
  }
  .cd-quote-help-modal .cd-qh-faq-link i {
    color: var(--cd-qh-accent);
  }
  .cd-quote-faq {
    --cd-qh-accent: var(--cd-color-premium);
  }
  .cd-quote-faq .cd-qh-hero {
    margin-bottom: 2.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-quote-faq .cd-qh-hero-eyebrow {
    font-family: var(--cd-font-editorial);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-qh-accent);
    margin: 0 0 0.6rem 0;
  }
  .cd-quote-faq .cd-qh-hero-title {
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    line-height: 1.05;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-quote-faq .cd-qh-hero-lede {
    font-family: var(--cd-font-editorial-body);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--cd-text-secondary);
    margin: 0.85rem 0 0 0;
    max-width: 52ch;
  }
  .cd-quote-faq .cd-qh-section {
    margin-top: 2.75rem;
  }
  .cd-quote-faq .cd-qh-section:first-of-type {
    margin-top: 0;
  }
  .cd-quote-faq .cd-qh-section-head {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-quote-faq .cd-qh-section-num {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--cd-qh-accent);
  }
  .cd-quote-faq .cd-qh-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-primary);
  }
  .cd-quote-faq .cd-qh-q {
    border-bottom: 1px dashed var(--cd-border-primary);
  }
  .cd-quote-faq .cd-qh-q-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
  }
  .cd-quote-faq .cd-qh-q-title {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    font-family: var(--cd-font-editorial);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cd-text-primary);
  }
  .cd-quote-faq .cd-qh-q-num {
    flex-shrink: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--cd-qh-accent);
  }
  .cd-quote-faq .cd-qh-q-chevron {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--cd-text-tertiary);
    transition: transform 0.2s ease;
  }
  .cd-quote-faq .cd-qh-a {
    padding: 0 0 1.3rem 2.05rem;
  }
  .cd-quote-faq .cd-qh-a, .cd-quote-faq .cd-qh-a p {
    font-family: var(--cd-font-editorial-body);
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--cd-text-secondary);
  }
  .cd-quote-faq .cd-qh-a p {
    margin: 0 0 0.7rem 0;
  }
  .cd-quote-faq .cd-qh-a p:last-child {
    margin-bottom: 0;
  }
  .cd-quote-faq .cd-qh-a strong {
    color: var(--cd-text-primary);
    font-weight: 600;
  }
  .cd-quote-faq .cd-qh-a ul, .cd-quote-faq .cd-qh-a ol {
    margin: 0 0 0.7rem 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .cd-quote-faq .cd-qh-a ul {
    list-style: disc;
  }
  .cd-quote-faq .cd-qh-a ol {
    list-style: decimal;
  }
  .cd-quote-faq .cd-qh-callout {
    margin: 0.4rem 0 0 0;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    background: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-secondary) 60%, transparent);
    }
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--cd-text-secondary);
  }
  .cd-quote-faq .cd-qh-callout i {
    color: var(--cd-qh-accent);
    margin-right: 0.35rem;
  }
  .cd-quote-faq .cd-qh-callout strong {
    color: var(--cd-text-primary);
  }
  .cd-quote-faq .cd-qh-tiers {
    margin: 0.5rem 0 0.7rem 0;
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-quote-faq .cd-qh-tier {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cd-border-hairline);
  }
  .cd-quote-faq .cd-qh-tier-name {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cd-text-primary);
  }
  .cd-quote-faq .cd-qh-tier-value {
    font-family: var(--cd-font-numeral);
    font-size: 0.95rem;
    color: var(--cd-text-secondary);
  }
}
@layer components {
  .cd-upsell-editorial {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-9);
    max-width: 64rem;
    padding-bottom: var(--cd-space-12);
  }
  .cd-upsell-eyebrow {
    font-family: var(--cd-font-primary);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cd-text-tertiary);
  }
  .cd-upsell-section__label {
    padding-bottom: var(--cd-space-2);
    margin-bottom: var(--cd-space-5);
    border-bottom: 2px solid var(--cd-color-shark);
  }
  .cd-upsell-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-space-7);
    align-items: center;
  }
  .cd-upsell-headline {
    margin: var(--cd-space-3) 0 var(--cd-space-4);
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.7rem);
    color: var(--cd-text-primary);
  }
  .cd-upsell-lede {
    max-width: 34rem;
    font-size: 1.075rem;
    line-height: 1.55;
    color: var(--cd-text-secondary);
  }
  .cd-upsell-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cd-space-5);
    margin-top: var(--cd-space-6);
  }
  .cd-upsell-textlink {
    font-family: var(--cd-font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cd-color-accent);
    text-underline-offset: 3px;
  }
  .cd-upsell-textlink:hover {
    text-decoration: underline;
  }
  .cd-upsell-hero {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-upsell-hero__picture {
    display: block;
    width: 100%;
  }
  .cd-upsell-hero__img {
    display: block;
    width: 100%;
    height: auto;
  }
  .cd-upsell-benefits-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-space-7);
  }
  .cd-upsell-benefit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .cd-upsell-benefit__art {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: 9rem;
    margin-bottom: var(--cd-space-3);
  }
  .cd-upsell-benefit__picture {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 13rem;
    height: 100%;
  }
  .cd-upsell-benefit__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left bottom;
  }
  .cd-upsell-benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    font-size: 2rem;
    color: var(--cd-color-accent);
  }
  .cd-upsell-benefit__title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-1);
  }
  .cd-upsell-benefit__desc {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cd-text-secondary);
  }
  .cd-upsell-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--cd-space-4);
  }
  .cd-upsell-swatch {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    margin: 0;
    padding: var(--cd-space-3);
    border: 1px solid var(--cd-border-hairline);
    border-radius: var(--cd-radius-xl);
  }
  .cd-upsell-swatch__chip {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cd-radius-full);
    box-shadow: inset 0 0 0 1px var(--cd-color-shark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd-color-shark) 12%, transparent);
    }
  }
  .cd-upsell-swatch figcaption {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .cd-upsell-swatch__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-upsell-swatch__desc {
    font-size: 0.85rem;
    color: var(--cd-text-secondary);
  }
  .cd-upsell-plans {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--cd-space-5);
  }
  .cd-upsell-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 14rem;
    max-width: 22rem;
    padding: var(--cd-space-6);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-2xl);
  }
  .cd-upsell-plan.is-recommended {
    border: 2px solid var(--cd-color-shark);
  }
  .cd-upsell-plan__flag {
    position: absolute;
    top: 0;
    right: var(--cd-space-5);
    transform: translateY(-50%);
    padding: 0.2rem 0.6rem;
    font-family: var(--cd-font-primary);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cd-bg-primary);
    background-color: var(--cd-color-shark);
    border-radius: var(--cd-radius-full);
  }
  .cd-upsell-plan__name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cd-text-primary);
  }
  .cd-upsell-plan__desc {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--cd-text-secondary);
    margin: var(--cd-space-2) 0 var(--cd-space-4);
  }
  .cd-upsell-plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: var(--cd-space-5);
  }
  .cd-upsell-plan__price .cd-editorial-numeral {
    font-size: 2.1rem;
    color: var(--cd-text-primary);
  }
  .cd-upsell-plan__price .cd-editorial-unit {
    font-size: 0.85rem;
  }
  .cd-upsell-plan__cta {
    margin-top: auto;
    width: 100%;
  }
  .cd-upsell-compare {
    margin-top: var(--cd-space-6);
    text-align: left;
  }
  .cd-upsell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cd-space-4);
    padding: var(--cd-space-8) var(--cd-space-4);
    text-align: center;
    color: var(--cd-text-secondary);
  }
  @media (min-width: 640px) {
    .cd-upsell-benefits-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .cd-upsell-benefits-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .cd-upsell-masthead {
      grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
      gap: var(--cd-space-9);
      min-height: 18rem;
    }
  }
}
@layer components {
  .cd-radius-guide {
    --cd-rg-accent: var(--cd-color-premium);
    padding: var(--cd-space-7) var(--cd-space-6);
    background-color: var(--cd-bg-secondary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-radius-2xl);
  }
  .cd-radius-guide__masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-space-5);
    align-items: center;
    padding-bottom: var(--cd-space-6);
    margin-bottom: var(--cd-space-2);
    border-bottom: 1px solid var(--cd-border-primary);
  }
  .cd-radius-guide__art {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cd-radius-guide__art-img {
    display: block;
    width: 6rem;
    height: auto;
  }
  .cd-radius-guide__eyebrow {
    font-family: var(--cd-font-editorial);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-rg-accent);
    margin: 0 0 0.4rem 0;
  }
  .cd-radius-guide__headline {
    font-size: clamp(1.45rem, 1.1rem + 1.6vw, 1.95rem);
    line-height: 1.08;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-radius-guide__lede {
    max-width: 40rem;
    margin: 0.65rem 0 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--cd-text-secondary);
  }
  .cd-radius-guide__ledger {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cd-radius-guide__row {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: var(--cd-space-4);
    align-items: baseline;
    padding: var(--cd-space-4) 0;
    border-bottom: 1px dashed var(--cd-border-primary);
  }
  .cd-radius-guide__row:last-child {
    border-bottom: 0;
    padding-bottom: var(--cd-space-2);
  }
  .cd-radius-guide__num {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--cd-rg-accent);
  }
  .cd-radius-guide__label {
    display: block;
    font-family: var(--cd-font-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cd-text-primary);
    margin-bottom: 0.2rem;
  }
  .cd-radius-guide__text {
    font-size: 0.975rem;
    line-height: 1.5;
    color: var(--cd-text-secondary);
    margin: 0;
  }
  .cd-radius-guide__text strong {
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-radius-guide__footer {
    margin-top: var(--cd-space-5);
    padding-top: var(--cd-space-4);
    border-top: 1px solid var(--cd-border-primary);
  }
  .cd-radius-guide__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--cd-font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cd-rg-accent);
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .cd-radius-guide__link:hover {
    text-decoration: underline;
  }
  @media (min-width: 640px) {
    .cd-radius-guide {
      padding: var(--cd-space-8) var(--cd-space-7);
    }
    .cd-radius-guide__masthead {
      grid-template-columns: 6rem minmax(0, 1fr);
      gap: var(--cd-space-6);
    }
  }
  @media (min-width: 1024px) {
    .cd-radius-guide__ledger {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--cd-space-8);
    }
    .cd-radius-guide__row:last-child {
      grid-column: 1 / -1;
    }
    .cd-radius-guide__row:nth-last-child(2) {
      border-bottom: 1px dashed var(--cd-border-primary);
    }
  }
}
@layer components {
  .cd-assign-modal__eyebrow {
    font-family: var(--cd-font-editorial);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-color-accent);
    margin-bottom: 0.5rem;
  }
  .cd-assign-modal__hat {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
  }
  .cd-assign-modal__subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--cd-text-secondary);
  }
  .cd-assign-modal__search {
    position: relative;
    margin-bottom: 0.5rem;
  }
  .cd-assign-modal__search-icon {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    pointer-events: none;
  }
  .cd-assign-modal__search .cd-assign-modal__search-input {
    padding-left: 2.4rem;
  }
  .cd-assign-modal__search-results:not(:empty) {
    margin-bottom: 0.75rem;
  }
  .cd-assign-modal__section-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    margin-bottom: 0.35rem;
  }
  .cd-assign-modal__search-empty {
    font-size: 0.875rem;
    color: var(--cd-text-secondary);
    padding: 0.5rem 0.25rem;
  }
  .cd-assign-modal__divider {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-assign-pro-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem;
    border-radius: var(--cd-radius-lg, 0.5rem);
    cursor: pointer;
    transition: background-color 0.18s ease;
  }
  .cd-assign-pro-row:hover {
    background-color: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 7%, var(--cd-bg-primary));
    }
  }
  .cd-assign-pro-row:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-bg-primary), 0 0 0 4px var(--cd-color-accent);
  }
  .cd-assign-pro-row__name {
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-assign-pro-row__meta {
    color: var(--cd-text-secondary);
  }
  .cd-assign-pro-row__chevron {
    color: var(--cd-text-tertiary, var(--cd-text-secondary));
    transition: color 0.18s ease, transform 0.18s ease;
  }
  .cd-assign-pro-row:hover .cd-assign-pro-row__chevron {
    color: var(--cd-color-accent);
    transform: translateX(2px);
  }
  .cd-assign-modal__list > form + form, .cd-assign-modal__list > button + button {
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-assign-modal__browse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cd-color-accent);
    transition: opacity 0.15s ease;
  }
  .cd-assign-modal__browse:hover {
    opacity: 0.8;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .cd-assign-modal__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
  }
  .cd-assign-modal__empty-hat {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    margin-bottom: 0.75rem;
    opacity: 0.9;
  }
  .cd-assign-modal__empty-title {
    font-family: var(--cd-font-editorial);
    font-size: 1.125rem;
    color: var(--cd-text-primary);
  }
  .cd-assign-modal__empty-sub {
    font-size: 0.875rem;
    color: var(--cd-text-secondary);
    margin-top: 0.25rem;
  }
}
@layer components {
  .cd-usage-detail-container {
    padding: var(--cd-space-6);
    max-width: 1400px;
    margin: 0 auto;
  }
  @media (min-width: 768px) {
    .cd-usage-detail-container {
      padding: var(--cd-space-8);
    }
  }
  .cd-usage-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    margin-bottom: var(--cd-space-6);
    font-size: var(--cd-text-sm);
  }
  .cd-breadcrumb-link {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    color: var(--color-science-blue);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .cd-breadcrumb-link:hover {
    color: var(--color-trust-blue);
  }
  .cd-breadcrumb-separator {
    color: var(--cd-text-tertiary);
    font-size: var(--cd-text-xs);
  }
  .cd-breadcrumb-current {
    color: var(--cd-text-secondary);
  }
  .cd-usage-hero {
    background: linear-gradient(135deg, var(--cd-card-bg) 0%, var(--cd-bg-secondary) 100%);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: var(--cd-space-6);
    margin-bottom: var(--cd-space-6);
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-sm));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-usage-hero:hover {
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, var(--cd-shadow-sm)));
  }
  @media (min-width: 768px) {
    .cd-usage-hero {
      padding: var(--cd-space-8);
    }
  }
  .cd-usage-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-4);
  }
  @media (min-width: 768px) {
    .cd-usage-hero-content {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
  .cd-usage-hero-main {
    display: flex;
    align-items: center;
    gap: var(--cd-space-4);
  }
  .cd-usage-hero-badge {
    flex-shrink: 0;
  }
  .cd-usage-status-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--cd-radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
  }
  @media (min-width: 768px) {
    .cd-usage-status-icon {
      width: 80px;
      height: 80px;
      font-size: 2.5rem;
    }
  }
  .cd-usage-status-icon.cd-usage-status-success {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-success);
  }
  .cd-usage-status-icon.cd-usage-status-info {
    background: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-info) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-info);
  }
  .cd-usage-status-icon.cd-usage-status-warning {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-warning);
  }
  .cd-usage-status-icon.cd-usage-status-danger {
    background: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-error) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-error);
  }
  .cd-usage-hero-text {
    flex: 1;
    min-width: 0;
  }
  .cd-usage-hero-title {
    font-size: var(--cd-text-2xl);
    font-weight: 700;
    color: var(--cd-text-primary);
    margin: 0 0 var(--cd-space-2) 0;
    line-height: 1.2;
  }
  @media (min-width: 768px) {
    .cd-usage-hero-title {
      font-size: var(--cd-text-3xl);
    }
  }
  .cd-usage-hero-subtitle {
    font-size: var(--cd-text-base);
    color: var(--cd-text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cd-space-2);
  }
  .cd-usage-hero-profile-type {
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-usage-hero-divider {
    color: var(--cd-text-tertiary);
  }
  .cd-usage-hero-profile-name {
    font-weight: 500;
  }
  .cd-usage-hero-status {
    flex-shrink: 0;
  }
  .cd-usage-status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--cd-space-2) var(--cd-space-4);
    border-radius: var(--cd-radius-xl);
    font-size: var(--cd-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  @media (min-width: 768px) {
    .cd-usage-status-badge {
      padding: var(--cd-space-3) var(--cd-space-6);
      font-size: var(--cd-text-base);
    }
  }
  .cd-usage-status-badge-success {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-success);
  }
  .cd-usage-status-badge-info {
    background-color: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-info) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-info);
  }
  .cd-usage-status-badge-warning {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-warning);
  }
  .cd-usage-status-badge-danger {
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-error);
  }
  .cd-usage-progress-section {
    background: var(--cd-card-bg);
    border: 1px solid var(--cd-card-border);
    border-radius: var(--cd-radius-2xl);
    padding: var(--cd-space-6);
    margin-bottom: var(--cd-space-6);
    box-shadow: var(--cd-shadow-sm);
  }
  @media (min-width: 768px) {
    .cd-usage-progress-section {
      padding: var(--cd-space-8);
    }
  }
  .cd-usage-progress-wrapper {
    max-width: 800px;
    margin: 0 auto;
  }
  .cd-usage-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--cd-space-4);
  }
  .cd-usage-progress-label {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: var(--cd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cd-usage-progress-percentage {
    font-size: var(--cd-text-3xl);
    font-weight: 700;
    line-height: 1;
  }
  @media (min-width: 768px) {
    .cd-usage-progress-percentage {
      font-size: var(--cd-text-4xl);
    }
  }
  .cd-usage-progress-percentage.cd-usage-status-success {
    color: var(--cd-color-success);
  }
  .cd-usage-progress-percentage.cd-usage-status-info {
    color: var(--cd-color-info);
  }
  .cd-usage-progress-percentage.cd-usage-status-warning {
    color: var(--cd-color-warning);
  }
  .cd-usage-progress-percentage.cd-usage-status-danger {
    color: var(--cd-color-error);
  }
  .cd-usage-progress-bar-large {
    width: 100%;
    height: 32px;
    background: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-xl);
    overflow: hidden;
    margin-bottom: var(--cd-space-3);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  }
  .cd-usage-progress-fill {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--cd-radius-xl);
    position: relative;
    overflow: hidden;
  }
  .cd-usage-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% );
    animation: shimmer 2s infinite;
  }
  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  .cd-usage-progress-fill-success {
    background: linear-gradient(90deg, var(--cd-color-success) 0%, var(--cd-color-success) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-success) 0%, color-mix(in srgb, var(--cd-color-success) 70%, var(--cd-color-info)) 100%);
    }
  }
  .cd-usage-progress-fill-info {
    background: linear-gradient(90deg, var(--cd-color-info) 0%, var(--cd-color-info) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-info) 0%, color-mix(in srgb, var(--cd-color-info) 70%, var(--cd-color-accent)) 100%);
    }
  }
  .cd-usage-progress-fill-warning {
    background: linear-gradient(90deg, var(--cd-color-warning) 0%, var(--cd-color-warning) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-warning) 0%, color-mix(in srgb, var(--cd-color-warning) 70%, var(--cd-color-error)) 100%);
    }
  }
  .cd-usage-progress-fill-danger {
    background: linear-gradient(90deg, var(--cd-color-error) 0%, var(--cd-color-error) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--cd-color-error) 0%, color-mix(in srgb, var(--cd-color-error) 80%, var(--cd-color-shark)) 100%);
    }
  }
  .cd-usage-progress-text {
    text-align: center;
    font-size: var(--cd-text-base);
    color: var(--cd-text-secondary);
    font-weight: 500;
  }
  .cd-usage-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-space-4);
    margin-bottom: var(--cd-space-6);
  }
  @media (min-width: 640px) {
    .cd-usage-metrics-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .cd-usage-metrics-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--cd-space-6);
    }
  }
  .cd-usage-metric-card {
    background: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: var(--cd-space-5);
    display: flex;
    align-items: center;
    gap: var(--cd-space-4);
    box-shadow: var(--cd-panel-shadow, var(--cd-shadow-sm));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  @media (min-width: 768px) {
    .cd-usage-metric-card {
      padding: var(--cd-space-6);
    }
  }
  .cd-usage-metric-card:hover {
    transform: var(--cd-panel-hover-transform, translateY(-2px));
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-shadow-md));
  }
  .cd-usage-metric-card.cd-metric-card-warning {
    border-color: var(--cd-color-warning);
    background: linear-gradient(135deg, var(--cd-color-warning) 0%, var(--cd-card-bg) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-warning) 10%, var(--cd-bg-primary)) 0%, var(--cd-card-bg) 100%);
    }
  }
  .cd-usage-metric-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--cd-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
  }
  @media (min-width: 768px) {
    .cd-usage-metric-icon {
      width: 64px;
      height: 64px;
      font-size: 1.75rem;
    }
  }
  .cd-metric-icon-current {
    background: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-info) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-info);
  }
  .cd-metric-icon-limit {
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-accent);
  }
  .cd-metric-icon-remaining {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-warning);
  }
  .cd-usage-metric-content {
    flex: 1;
    min-width: 0;
  }
  .cd-usage-metric-value {
    font-size: var(--cd-text-3xl);
    font-weight: 700;
    color: var(--cd-text-primary);
    line-height: 1;
    margin-bottom: var(--cd-space-2);
  }
  @media (min-width: 768px) {
    .cd-usage-metric-value {
      font-size: var(--cd-text-4xl);
    }
  }
  .cd-usage-metric-label {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    font-weight: 500;
  }
  .cd-usage-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-space-6);
  }
  @media (min-width: 1024px) {
    .cd-usage-content-grid {
      grid-template-columns: 1fr 350px;
      gap: var(--cd-space-8);
    }
  }
  @media (min-width: 1280px) {
    .cd-usage-content-grid {
      grid-template-columns: 1fr 400px;
    }
  }
  .cd-usage-main-column {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-6);
  }
  .cd-usage-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-6);
  }
  .cd-usage-panel {
    background: var(--cd-card-bg);
    border: 1px solid var(--cd-card-border);
    border-radius: var(--cd-radius-2xl);
    overflow: hidden;
    box-shadow: var(--cd-shadow-sm);
  }
  .cd-usage-panel-header {
    background: var(--cd-bg-secondary);
    padding: var(--cd-space-5) var(--cd-space-6);
    border-bottom: 1px solid var(--cd-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--cd-space-4);
  }
  @media (min-width: 768px) {
    .cd-usage-panel-header {
      padding: var(--cd-space-6) var(--cd-space-8);
    }
  }
  .cd-usage-panel-header-content {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
  }
  .cd-usage-panel-icon {
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-lg);
  }
  .cd-usage-panel-title {
    font-size: var(--cd-text-lg);
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-usage-panel-body {
    padding: var(--cd-space-6);
  }
  @media (min-width: 768px) {
    .cd-usage-panel-body {
      padding: var(--cd-space-8);
    }
  }
  .cd-needs-reset-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    padding: var(--cd-space-2) var(--cd-space-3);
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-warning);
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cd-usage-config-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-space-6);
  }
  @media (min-width: 768px) {
    .cd-usage-config-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .cd-usage-config-item {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-2);
  }
  .cd-usage-config-item-full {
    grid-column: 1 / -1;
  }
  .cd-usage-config-label {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    font-size: var(--cd-text-xs);
    font-weight: 600;
    color: var(--cd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cd-usage-config-label i {
    color: var(--cd-text-tertiary);
  }
  .cd-usage-config-value {
    font-size: var(--cd-text-base);
    color: var(--cd-text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cd-space-2);
  }
  .cd-usage-config-description {
    line-height: 1.6;
  }
  .cd-config-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    padding: var(--cd-space-2) var(--cd-space-3);
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cd-config-badge-quota {
    background: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-info) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-info);
  }
  .cd-config-badge-inventory {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-success);
  }
  .cd-config-badge-config {
    background: var(--cd-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-accent) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-accent);
  }
  .cd-config-badge-toggle {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-warning);
  }
  .cd-config-badge-neutral {
    background: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-config-hint {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
    font-weight: 400;
    font-style: italic;
  }
  .cd-usage-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-4);
    margin-bottom: var(--cd-space-6);
  }
  .cd-usage-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-4);
  }
  .cd-usage-timeline-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--cd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
  }
  .cd-timeline-icon-past {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-success);
  }
  .cd-timeline-icon-future {
    background: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-info) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-info);
  }
  .cd-usage-timeline-content {
    flex: 1;
    padding-top: var(--cd-space-2);
  }
  .cd-usage-timeline-label {
    font-size: var(--cd-text-xs);
    font-weight: 600;
    color: var(--cd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--cd-space-1);
  }
  .cd-usage-timeline-value {
    font-size: var(--cd-text-lg);
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: var(--cd-space-1);
  }
  .cd-usage-timeline-time {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-tertiary);
  }
  .cd-usage-timeline-countdown {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    margin-top: var(--cd-space-2);
    padding: var(--cd-space-2) var(--cd-space-3);
    background: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    font-weight: 600;
  }
  .cd-usage-timeline-connector {
    width: 2px;
    height: 24px;
    background: var(--cd-card-border);
    margin-left: 23px;
  }
  .cd-usage-reset-stats {
    padding-top: var(--cd-space-4);
    border-top: 1px solid var(--cd-card-border);
  }
  .cd-usage-reset-stat {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    font-weight: 500;
  }
  .cd-usage-reset-stat i {
    color: var(--cd-text-tertiary);
  }
  .cd-usage-json-display {
    background: var(--cd-bg-secondary);
    border: 1px solid var(--cd-card-border);
    border-radius: var(--cd-radius-lg);
    padding: var(--cd-space-4);
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    overflow-x: auto;
    margin: 0;
    line-height: 1.6;
  }
  .cd-usage-sidebar-card {
    background: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-card-border);
    border-radius: var(--cd-radius-2xl);
    overflow: hidden;
    box-shadow: var(--cd-shadow-sm);
  }
  .cd-usage-sidebar-card-header {
    padding: var(--cd-space-4) var(--cd-space-5);
    background: var(--cd-bg-secondary);
    border-bottom: 1px solid var(--cd-card-border);
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
  }
  .cd-usage-sidebar-card-header i {
    color: var(--cd-text-secondary);
    font-size: var(--cd-text-base);
  }
  .cd-usage-sidebar-card-title {
    font-size: var(--cd-text-base);
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-usage-sidebar-card-subtitle {
    padding: var(--cd-space-3) var(--cd-space-5);
    background: var(--cd-bg-secondary);
    border-bottom: 1px solid var(--cd-card-border);
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  .cd-usage-sidebar-card-body {
    padding: var(--cd-space-5);
  }
  .cd-usage-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-4);
  }
  .cd-usage-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-1);
  }
  .cd-usage-info-item-highlight {
    padding: var(--cd-space-3);
    background: var(--cd-bg-secondary);
    border-radius: var(--cd-radius-lg);
    border: 1px solid var(--cd-card-border);
  }
  .cd-usage-info-label {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    font-size: var(--cd-text-xs);
    font-weight: 600;
    color: var(--cd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cd-usage-info-label i {
    color: var(--cd-text-tertiary);
  }
  .cd-usage-info-value {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    font-weight: 500;
  }
  .cd-usage-info-email {
    word-break: break-all;
  }
  .cd-membership-name {
    font-weight: 700;
    color: var(--color-premium-gold-dark);
  }
  .cd-membership-none {
    color: var(--cd-text-tertiary);
    font-style: italic;
  }
  .cd-usage-timestamp {
    display: flex;
    align-items: baseline;
    gap: var(--cd-space-2);
  }
  .cd-usage-timestamp-time {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
  }
  .cd-usage-actions {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-2);
    margin-top: var(--cd-space-4);
    padding-top: var(--cd-space-4);
    border-top: 1px solid var(--cd-card-border);
  }
  .cd-usage-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-2);
    padding: var(--cd-space-3) var(--cd-space-4);
    background: var(--cd-card-bg);
    border: 1px solid var(--cd-card-border);
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: var(--cd-text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
  }
  .cd-usage-action-button:hover {
    background: var(--cd-bg-secondary);
    border-color: var(--color-science-blue);
    color: var(--color-science-blue);
  }
  .cd-usage-comparison-list {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-4);
  }
  .cd-usage-comparison-item {
    padding: var(--cd-space-4);
    background: var(--cd-bg-secondary);
    border: 1px solid var(--cd-card-border);
    border-radius: var(--cd-radius-lg);
  }
  .cd-usage-comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--cd-space-2);
    gap: var(--cd-space-2);
  }
  .cd-usage-comparison-name {
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: var(--cd-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-usage-comparison-badge {
    padding: var(--cd-space-1) var(--cd-space-2);
    border-radius: var(--cd-radius-base);
    font-size: var(--cd-text-xs);
    font-weight: 700;
    flex-shrink: 0;
  }
  .cd-comparison-badge-success {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-success);
  }
  .cd-comparison-badge-warning {
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-warning);
  }
  .cd-comparison-badge-danger {
    background: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-error) 15%, var(--cd-bg-primary));
    }
    color: var(--cd-color-error);
  }
  .cd-usage-comparison-details {
    margin-bottom: var(--cd-space-2);
  }
  .cd-usage-comparison-usage {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
  }
  .cd-usage-comparison-bar {
    width: 100%;
    height: 6px;
    background: var(--cd-card-bg);
    border-radius: var(--cd-radius-base);
    overflow: hidden;
  }
  .cd-usage-comparison-fill {
    height: 100%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cd-comparison-fill-success {
    background: var(--cd-color-success);
  }
  .cd-comparison-fill-warning {
    background: var(--cd-color-warning);
  }
  .cd-comparison-fill-danger {
    background: var(--cd-color-error);
  }
  .cd-usage-comparison-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-2);
    margin-top: var(--cd-space-4);
    padding: var(--cd-space-3);
    background: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning) 10%, var(--cd-bg-primary));
    }
    border: 1px solid var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-warning) 30%, var(--cd-bg-primary));
    }
    border-radius: var(--cd-radius-lg);
    font-size: var(--cd-text-xs);
    color: var(--cd-color-warning);
    line-height: 1.5;
  }
  .cd-usage-comparison-insight i {
    color: var(--cd-color-warning);
    font-size: var(--cd-text-sm);
    flex-shrink: 0;
    margin-top: 2px;
  }
  @media (max-width: 767px) {
    .cd-usage-metrics-grid {
      gap: var(--cd-space-3);
    }
    .cd-usage-metric-card {
      flex-direction: column;
      text-align: center;
    }
    .cd-usage-metric-icon {
      margin: 0 auto;
    }
    .cd-usage-panel-body, .cd-usage-progress-section {
      padding: var(--cd-space-4);
    }
    .cd-usage-config-grid {
      gap: var(--cd-space-4);
    }
  }
  @media (max-width: 1023px) {
    .cd-usage-sidebar-column {
      order: 2;
    }
    .cd-usage-main-column {
      order: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-usage-metric-card, .cd-usage-action-button, .cd-usage-progress-fill, .cd-usage-comparison-fill {
      transition: none !important;
    }
    .cd-usage-metric-card:hover {
      transform: none !important;
    }
    .cd-usage-progress-fill::after {
      animation: none !important;
    }
  }
}
@layer components {
  .cd-support-reply-card {
    background-color: var(--cd-bg-secondary);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-secondary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: var(--cd-space-6);
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cd-ticket-number {
    font-family: 'Courier New', monospace;
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: var(--cd-text-secondary);
  }
  .cd-priority-badge-high {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-1_5) var(--cd-space-3);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 600;
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 10%, transparent);
    }
    color: var(--cd-color-error);
    border: 1px solid var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-error) 30%, transparent);
    }
  }
  .cd-priority-badge-medium {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-1_5) var(--cd-space-3);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 600;
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 10%, transparent);
    }
    color: var(--cd-color-warning);
    border: 1px solid var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-warning) 30%, transparent);
    }
  }
  .cd-priority-badge-normal {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-1_5) var(--cd-space-3);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 600;
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    color: var(--cd-color-primary);
    border: 1px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--cd-color-primary) 30%, transparent);
    }
  }
  .cd-status-badge-open {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-1_5) var(--cd-space-3);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 500;
    background-color: var(--cd-color-success);
    color: var(--cd-text-on-dark);
  }
  .cd-status-badge-in-progress {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-1_5) var(--cd-space-3);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 500;
    background-color: var(--cd-color-warning);
    color: var(--cd-text-on-dark);
  }
  .cd-status-badge-waiting {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-1_5) var(--cd-space-3);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 500;
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 20%, transparent);
    }
    color: var(--cd-color-warning);
    border: 1px solid var(--cd-color-warning);
  }
  .cd-status-badge-resolved {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-1_5) var(--cd-space-3);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 500;
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    border: 1px solid var(--cd-border-secondary);
  }
  .cd-status-badge-closed {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1_5);
    padding: var(--cd-space-1_5) var(--cd-space-3);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-xs);
    font-weight: 500;
    background-color: var(--cd-color-accent);
    color: var(--cd-text-on-dark);
  }
  .cd-conversation-thread {
    background-color: var(--cd-bg-secondary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    padding: var(--cd-space-6);
    margin-bottom: var(--cd-space-6);
    max-height: 600px;
    overflow-y: auto;
    box-shadow: var(--cd-panel-shadow, none);
  }
  .cd-message-wrapper {
    margin-bottom: var(--cd-space-4);
  }
  .cd-message-wrapper:last-child {
    margin-bottom: 0;
  }
  .cd-message-user {
    background-color: var(--cd-card-bg);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: var(--cd-space-4);
    max-width: 80%;
    margin-left: 0;
    position: relative;
    box-shadow: var(--cd-panel-shadow, none);
  }
  .cd-message-user::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--cd-border-primary);
  }
  .cd-message-staff {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, var(--cd-card-bg));
    }
    border: var(--cd-panel-border-width, 1px) solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: var(--cd-panel-border-width, 1px) solid color-mix(in srgb, var(--cd-color-primary) 30%, var(--cd-border-primary));
    }
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: var(--cd-space-4);
    max-width: 80%;
    margin-left: auto;
    position: relative;
    box-shadow: var(--cd-panel-shadow, none);
  }
  .cd-message-staff::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-left: 8px solid color-mix(in srgb, var(--cd-color-primary) 30%, var(--cd-border-primary));
    }
  }
  .cd-message-author {
    font-size: var(--cd-text-xs);
    font-weight: 600;
    color: var(--cd-text-secondary);
    margin-bottom: var(--cd-space-2);
  }
  .cd-message-content {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
    line-height: 1.6;
    word-wrap: break-word;
  }
  .cd-message-timestamp {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-tertiary);
    margin-top: var(--cd-space-2);
    font-style: italic;
  }
  .cd-attachment-preview {
    background-color: var(--cd-bg-secondary);
    border: var(--cd-panel-border-width, 1px) solid var(--cd-border-secondary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    padding: var(--cd-space-3);
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    margin-top: var(--cd-space-3);
    box-shadow: var(--cd-panel-shadow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }
  .cd-attachment-preview:hover {
    background-color: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-bg-secondary) 50%, var(--cd-bg-tertiary));
    }
    transform: var(--cd-panel-hover-transform, none);
    box-shadow: var(--cd-panel-hover-shadow, var(--cd-panel-shadow, none));
  }
  .cd-attachment-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--cd-radius);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cd-attachment-icon i {
    font-size: var(--cd-text-lg);
    color: var(--cd-color-primary);
  }
  .cd-attachment-info {
    flex: 1;
    min-width: 0;
  }
  .cd-attachment-filename {
    font-size: var(--cd-text-sm);
    font-weight: 500;
    color: var(--cd-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-attachment-size {
    font-size: var(--cd-text-xs);
    color: var(--cd-text-secondary);
  }
  .cd-attachment-list {
    margin-top: var(--cd-space-4);
  }
  .cd-support-empty-state {
    text-align: center;
    padding: var(--cd-space-12) var(--cd-space-6);
    color: var(--cd-text-secondary);
  }
  .cd-support-empty-state-icon {
    font-size: var(--cd-text-4xl);
    color: var(--cd-text-tertiary);
    margin-bottom: var(--cd-space-4);
  }
  .cd-support-empty-state-message {
    font-size: var(--cd-text-base);
    margin-bottom: var(--cd-space-2);
  }
  .cd-support-empty-state-hint {
    font-size: var(--cd-text-sm);
    color: var(--cd-text-tertiary);
  }
  .cd-ticket-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    margin-bottom: var(--cd-space-6);
    padding: var(--cd-space-4);
    background-color: var(--cd-bg-secondary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-xl));
    box-shadow: var(--cd-panel-shadow, none);
  }
  .cd-support-pill {
    padding: var(--cd-space-2) var(--cd-space-4);
    border-radius: var(--cd-radius-full);
    font-size: var(--cd-text-sm);
    font-weight: 500;
    background-color: var(--cd-card-bg);
    border: 1px solid var(--cd-border-secondary);
    color: var(--cd-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .cd-support-pill:hover {
    border-color: var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 5%, var(--cd-card-bg));
    }
  }
  .cd-support-pill.active {
    background-color: var(--cd-color-primary) !important;
    border-color: var(--cd-color-primary) !important;
    color: var(--cd-text-on-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 3px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-contact-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cd-space-6);
    text-align: center;
  }
  .cd-contact-hero-cat {
    order: -1;
  }
  .cd-contact-hero-cat-img {
    width: 160px;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.1));
    animation: cd-cat-float 4s ease-in-out infinite;
  }
  @keyframes cd-cat-float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }
  .cd-contact-hero-text {
    max-width: 600px;
  }
  @media (min-width: 768px) {
    .cd-contact-hero {
      flex-direction: row;
      justify-content: center;
      text-align: left;
      gap: var(--cd-space-10);
    }
    .cd-contact-hero-cat {
      order: 0;
    }
    .cd-contact-hero-cat-img {
      width: 200px;
    }
  }
  @media (min-width: 1024px) {
    .cd-contact-hero-cat-img {
      width: 240px;
    }
  }
  @media (max-width: 640px) {
    .cd-message-user, .cd-message-staff {
      max-width: 90%;
    }
  }
  .cd-support-ed-layout {
    display: grid;
    grid-template-columns: 1fr 296px;
    gap: var(--cd-space-10, 2.5rem);
    align-items: start;
  }
  @media (max-width: 920px) {
    .cd-support-ed-layout {
      grid-template-columns: 1fr;
      gap: var(--cd-space-7, 1.75rem);
    }
  }
  .cd-support-ed-section {
    margin-top: var(--cd-space-9, 2.25rem);
  }
  .cd-support-ed-section:first-child {
    margin-top: 0;
  }
  .cd-support-ed-bar {
    display: flex;
    align-items: baseline;
    gap: var(--cd-space-3);
    border-bottom: 2px solid var(--cd-text-primary);
    padding-bottom: var(--cd-space-2);
    margin-bottom: var(--cd-space-5);
  }
  .cd-support-ed-bar__num {
    font-family: var(--cd-font-editorial);
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--cd-color-primary);
  }
  .cd-support-ed-bar__title {
    font-size: 1.3rem;
    line-height: 1.1;
    color: var(--cd-text-primary);
  }
  .cd-support-ed-bar__meta {
    margin-left: auto;
    font-size: var(--cd-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cd-text-tertiary);
  }
  .cd-support-ed-bar__meta--req {
    color: var(--cd-color-error);
  }
  .cd-support-ed-bar__meta .cd-support-ed-bar__opt {
    color: var(--cd-text-tertiary);
    font-weight: 500;
  }
  .cd-support-ed-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cd-space-4);
  }
  @media (max-width: 560px) {
    .cd-support-ed-cat-grid {
      grid-template-columns: 1fr;
    }
  }
  .cd-support-ed-cat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-4);
    width: 100%;
    text-align: left;
    padding: var(--cd-space-4) var(--cd-space-5);
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  }
  .cd-support-ed-cat:hover {
    transform: translateY(-2px);
    border-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--cd-color-primary) 45%, var(--cd-border-primary));
    }
    box-shadow: 0 10px 24px -16px rgb(0 0 0 / 0.35);
  }
  .cd-support-ed-cat:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--cd-bg-primary), 0 0 0 4px var(--cd-color-primary);
  }
  .cd-support-ed-cat.is-selected {
    border-color: var(--cd-color-primary);
    box-shadow: inset 0 0 0 1px var(--cd-color-primary);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 6%, var(--cd-bg-primary));
    }
  }
  .cd-support-ed-cat__ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: var(--cd-radius-lg, 0.75rem);
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
    font-size: 1.05rem;
    transition: background-color 0.18s ease, color 0.18s ease;
  }
  .cd-support-ed-cat.is-selected .cd-support-ed-cat__ico {
    background-color: var(--cd-text-primary);
    color: var(--cd-bg-primary);
  }
  .cd-support-ed-cat__title {
    display: block;
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
    color: var(--cd-text-primary);
  }
  .cd-support-ed-cat__desc {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--cd-text-sm);
    line-height: 1.4;
    color: var(--cd-text-secondary);
  }
  .cd-support-ed-cat__check {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: none;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--cd-radius-full);
    background-color: var(--cd-color-primary);
    color: #fff;
    font-size: 0.62rem;
  }
  .cd-support-ed-cat.is-selected .cd-support-ed-cat__check {
    display: grid;
  }
  .cd-support-ed-cat-error {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    margin-top: var(--cd-space-4);
    font-size: var(--cd-text-sm);
    font-weight: 500;
    color: var(--cd-color-error);
  }
  .cd-support-ed-aside {
    position: sticky;
    top: var(--cd-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-4);
  }
  @media (max-width: 920px) {
    .cd-support-ed-aside {
      position: static;
    }
  }
  .cd-support-ed-aside-card {
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    padding: var(--cd-space-5) var(--cd-space-5);
  }
  .cd-support-ed-aside-card__label {
    font-size: var(--cd-text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cd-text-tertiary);
    margin-bottom: var(--cd-space-4);
  }
  .cd-support-ed-identity {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
  }
  .cd-support-ed-identity__avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.875rem;
    height: 2.875rem;
    border-radius: var(--cd-radius-full);
    background-color: var(--cd-text-primary);
    color: var(--cd-bg-primary);
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 1rem;
  }
  .cd-support-ed-identity__name {
    display: block;
    font-weight: 600;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-primary);
  }
  .cd-support-ed-identity__email {
    display: block;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
    word-break: break-word;
  }
  .cd-support-ed-expect {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-4);
  }
  .cd-support-ed-expect li {
    display: flex;
    align-items: flex-start;
    gap: var(--cd-space-3);
  }
  .cd-support-ed-expect__ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--cd-radius-lg, 0.75rem);
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    color: var(--cd-color-primary);
    font-size: 0.78rem;
  }
  .cd-support-ed-expect__title {
    display: block;
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-support-ed-expect__sub {
    display: block;
    margin-top: 1px;
    font-size: var(--cd-text-sm);
    line-height: 1.4;
    color: var(--cd-text-secondary);
  }
  .cd-support-ed-help-link {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding: var(--cd-space-4);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    background-color: var(--cd-bg-primary);
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .cd-support-ed-help-link:hover {
    border-color: var(--cd-text-primary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-support-ed-help-link__ico {
    color: var(--cd-color-primary);
    font-size: 1rem;
  }
  .cd-support-ed-help-link__title {
    display: block;
    font-size: var(--cd-text-sm);
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-support-ed-help-link__sub {
    display: block;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-support-ed-help-link__arrow {
    margin-left: auto;
    color: var(--cd-text-tertiary);
    font-size: 0.78rem;
  }
  .cd-support-ed-confirm-bar {
    position: sticky;
    bottom: var(--cd-space-4);
    margin-top: var(--cd-space-7, 1.75rem);
    display: flex;
    align-items: center;
    gap: var(--cd-space-4);
    padding: var(--cd-space-3) var(--cd-space-5);
    background-color: var(--cd-bg-primary);
    border: 1px solid var(--cd-border-primary);
    border-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.22);
  }
  .cd-support-ed-confirm-bar__summary {
    min-width: 0;
    font-size: var(--cd-text-sm);
    color: var(--cd-text-secondary);
  }
  .cd-support-ed-confirm-bar__summary strong {
    color: var(--cd-text-primary);
    font-weight: 600;
  }
  .cd-support-ed-confirm-bar__actions {
    margin-left: auto;
    display: flex;
    gap: var(--cd-space-3);
  }
  @media (max-width: 560px) {
    .cd-support-ed-confirm-bar {
      flex-direction: column;
      align-items: stretch;
      gap: var(--cd-space-3);
    }
    .cd-support-ed-confirm-bar__actions {
      margin-left: 0;
    }
    .cd-support-ed-confirm-bar__actions .cd-btn {
      flex: 1;
      justify-content: center;
    }
  }
  .cd-ticket-brief-number {
    font-family: var(--cd-font-numeral, Georgia, serif);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-ticket-brief-priority {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
  }
  .cd-ticket-brief-priority--high {
    background: var(--cd-color-crimson-red, #dc143c);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-crimson-red, #dc143c) 12%, transparent);
    }
    color: var(--cd-color-crimson-red, #dc143c);
  }
  .cd-ticket-brief-priority--medium {
    background: var(--cd-color-warning-orange, #ff6b35);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-warning-orange, #ff6b35) 12%, transparent);
    }
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-ticket-brief-waiting, .cd-ticket-brief-resolved {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
  }
  .cd-ticket-brief-waiting {
    color: var(--cd-color-warning-orange, #ff6b35);
  }
  .cd-ticket-brief-resolved {
    color: var(--cd-color-forest-green, #228b22);
  }
  .cd-ticket-brief-waiting i, .cd-ticket-brief-resolved i {
    font-size: 0.78rem;
  }
}
@layer components {
  .cd-credential-attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--cd-border-color);
    padding-bottom: 0.5rem;
  }
  .cd-credential-attachment-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .cd-credential-attachment-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cd-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-credential-attachment-meta {
    font-size: 0.75rem;
    color: var(--cd-text-muted);
  }
  .cd-credential-audit-row-danger {
    padding-left: calc(var(--spacing) * 3);
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 8%, transparent);
    }
    border-left: 3px solid var(--cd-color-error);
  }
  .cd-credential-audit-row-critical {
    background-color: var(--cd-color-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 16%, transparent);
    }
    border-left-width: 5px;
  }
  .cd-credential-text-primary {
    color: var(--cd-text-primary);
  }
  .cd-credential-text-muted {
    color: var(--cd-text-muted);
  }
  .cd-credential-themed-border {
    border-color: var(--cd-border-color);
  }
  .cd-credential-type-tile {
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
  }
  .cd-credential-type-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .cd-credential-type-icon--sm {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
    margin-bottom: 0;
  }
  .cd-credential-type-icon--primary {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 14%, transparent);
    }
    color: var(--cd-color-primary);
  }
  .cd-credential-type-icon--success {
    background-color: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-success) 14%, transparent);
    }
    color: var(--cd-color-success);
  }
  .cd-credential-type-icon--info {
    background-color: var(--cd-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-info) 14%, transparent);
    }
    color: var(--cd-color-info);
  }
  .cd-credential-type-icon--warning {
    background-color: var(--cd-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-warning) 14%, transparent);
    }
    color: var(--cd-color-warning);
  }
  .cd-credential-type-icon--neutral {
    background-color: var(--cd-bg-secondary);
    color: var(--cd-text-secondary);
  }
}
@layer components {
  .cd-tm-picker {
    position: relative;
    width: 100%;
  }
  .cd-tm-picker__native {
    display: block;
    width: 100%;
  }
  .cd-tm-picker__enhanced {
    display: none;
  }
  .cd-tm-picker--ready .cd-tm-picker__native {
    display: none;
  }
  .cd-tm-picker--ready .cd-tm-picker__enhanced {
    display: block;
  }
  .cd-tm-picker__trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--cd-bg-input, #fff);
    border: 1px solid var(--cd-border-input, #d1d5db);
    border-radius: 0.5rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .cd-tm-picker__trigger:hover {
    border-color: var(--cd-border-input-hover, #9ca3af);
  }
  .cd-tm-picker__trigger:focus, .cd-tm-picker__trigger:focus-visible {
    outline: none;
    border-color: var(--cd-color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--cd-color-primary-soft, rgba(37, 99, 235, 0.15));
  }
  .cd-tm-picker--error .cd-tm-picker__trigger {
    border-color: var(--cd-color-error, #dc2626);
  }
  .cd-tm-picker__trigger-selected {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .cd-tm-picker__trigger-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }
  .cd-tm-picker__placeholder {
    flex: 1 1 auto;
    color: var(--cd-text-muted, #6b7280);
    font-size: 0.9375rem;
  }
  .cd-tm-picker__chevron {
    color: var(--cd-text-muted, #6b7280);
    font-size: 0.875rem;
    flex-shrink: 0;
  }
  .cd-tm-picker__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--cd-bg-card, #fff);
    border: 1px solid var(--cd-border-input, #d1d5db);
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-height: 22rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .cd-tm-picker__search {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--cd-border-input, #d1d5db);
    background: transparent;
    font-size: 0.9375rem;
    color: var(--cd-text-primary, #111827);
  }
  .cd-tm-picker__search:focus, .cd-tm-picker__search:focus-visible {
    outline: none;
    background: var(--cd-bg-input-focus, #f9fafb);
  }
  .cd-tm-picker__options {
    list-style: none;
    padding: 0.25rem;
    margin: 0;
    overflow-y: auto;
    flex: 1 1 auto;
  }
  .cd-tm-picker__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
  }
  .cd-tm-picker__option--highlighted, .cd-tm-picker__option:hover {
    background: var(--cd-bg-hover, #f3f4f6);
  }
  .cd-tm-picker__option--selected {
    background: var(--cd-color-primary-soft, rgba(37, 99, 235, 0.1));
  }
  .cd-tm-picker__option-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }
  .cd-tm-picker__option-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cd-text-primary, #111827);
  }
  .cd-tm-picker__option-email {
    font-size: 0.75rem;
    color: var(--cd-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-tm-picker__empty {
    padding: 1rem 0.75rem;
    color: var(--cd-text-muted, #6b7280);
    font-size: 0.875rem;
    text-align: center;
  }
  .cd-tm-picker__avatar, .cd-tm-display__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background: var(--cd-color-primary-soft, rgba(37, 99, 235, 0.12));
    color: var(--cd-color-primary, #2563eb);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
  }
  .cd-tm-picker__badge, .cd-tm-display__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: var(--cd-bg-tag, #f3f4f6);
    color: var(--cd-text-muted, #6b7280);
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    flex-shrink: 0;
  }
  .cd-tm-picker__name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cd-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-tm-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .cd-tm-display__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }
  .cd-tm-display__name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cd-text-primary, #111827);
  }
  .cd-tm-display__email {
    font-size: 0.75rem;
    color: var(--cd-text-muted, #6b7280);
  }
  .cd-tm-display--compact .cd-tm-display__avatar {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.6875rem;
  }
  .cd-tm-display--compact .cd-tm-display__name {
    font-size: 0.875rem;
  }
}
@layer components {
  .marker-quote-in-radius {
    background-color: var(--cd-color-science-blue, #0066cc);
    border-radius: 50%;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
  }
  .marker-quote-in-radius:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }
  .marker-quote-outside {
    background-color: #9ca3af;
    border-radius: 50%;
    cursor: pointer;
    width: 14px;
    height: 14px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    opacity: 0.7;
  }
  .marker-quote-outside:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    opacity: 1;
  }
  .marker-address {
    background-color: #0066cc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .marker-address::after {
    content: '';
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
  }
  .marker-project-site {
    background-color: #0066cc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .marker-project-site:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }
  .marker-job-site {
    background-color: #2563eb;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: pointer;
  }
  .marker-your-address {
    background-color: #16a34a;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: pointer;
  }
  .marker-won-quote {
    background-color: #f59e0b;
    border-radius: 50%;
    cursor: pointer;
    width: 16px;
    height: 16px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
  }
  .marker-won-quote:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }
  .marker-province-professional {
    background-color: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    width: 16px;
    height: 16px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
  }
  .marker-province-professional:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }
  .marker-province-quote {
    background-color: #f97316;
    border-radius: 50%;
    cursor: pointer;
    width: 14px;
    height: 14px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
  }
  .marker-province-quote:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }
  #quotes-map {
    border-radius: 0.75rem;
  }
  #professional-dashboard-map {
    border-bottom-left-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    border-bottom-right-radius: var(--cd-panel-radius, var(--cd-radius-2xl));
    overflow: hidden;
  }
  .cd-map-popup-compact .mapboxgl-popup-content {
    padding: 0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    max-width: 280px;
  }
  .cd-map-popup-compact .mapboxgl-popup-close-button {
    font-size: 1rem !important;
    padding: 0.5rem !important;
    color: #6b7280 !important;
    right: 0 !important;
    top: 0 !important;
  }
  .cd-map-popup-compact .mapboxgl-popup-close-button:hover {
    background-color: var(--cd-bg-secondary) !important;
    color: var(--cd-text-primary) !important;
    border-top-right-radius: 0.5rem !important;
  }
  .cd-map-popup {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 240px;
    font-family: var(--cd-font-primary, system-ui, -apple-system, sans-serif);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--cd-text-secondary);
  }
  .cd-map-popup-title {
    font-family: var(--cd-font-primary, system-ui, -apple-system, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary);
    padding-right: 1.25rem;
    margin: 0;
  }
  .cd-map-popup-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem 0.375rem 0.625rem;
    border-radius: 9999px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    max-width: 100%;
  }
  .cd-map-popup-pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cd-map-popup-icon {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    display: inline-block;
  }
  i.cd-map-popup-icon {
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-align: center;
    color: var(--cd-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cd-map-popup-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
  }
  .cd-map-popup-status-pill i {
    font-size: 0.8125rem;
  }
  .cd-map-popup-status-pill--in {
    background: var(--cd-color-emerald, #22c55e);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-emerald, #22c55e) 14%, transparent);
    }
    color: var(--cd-color-emerald, #22c55e);
  }
  .cd-map-popup-status-pill--out {
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary);
  }
  .cd-map-popup-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.625rem;
  }
  .cd-map-popup-details {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cd-map-popup-details li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--cd-text-secondary);
  }
  .cd-map-popup-details li i {
    width: 0.875rem;
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--cd-text-tertiary);
    text-align: center;
  }
  .cd-map-popup-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    background: var(--cd-text-primary);
    color: var(--cd-bg-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.05s ease;
    margin-top: 0.125rem;
  }
  .cd-map-popup-cta:hover {
    background: var(--cd-text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-text-primary) 88%, transparent);
    }
  }
  .cd-map-popup-cta:active {
    transform: translateY(1px);
  }
  .cd-map-popup-cta i {
    font-size: 0.75rem;
  }
  .cd-map-popup-body {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 220px;
    font-family: var(--cd-font-primary, system-ui, -apple-system, sans-serif);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--cd-text-secondary);
  }
  .cd-map-popup-status {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.1;
  }
  .cd-map-popup-location {
    margin: 0;
    font-size: 0.75rem;
    color: var(--cd-text-tertiary);
  }
  .cd-map-popup-hint {
    font-size: 0.6875rem;
    color: var(--cd-text-tertiary);
    text-align: center;
    margin: 0.125rem 0 0;
  }
  .address-map-wrapper .cd-card {
    border-radius: 0.75rem;
  }
  .address-map-wrapper #address-radius-map {
    min-height: 16rem;
  }
  .address-map-wrapper.hidden {
    display: none;
  }
  .marker-quote-active {
    background-color: var(--cd-color-emerald, #22c55e);
  }
  .marker-quote-completed {
    background-color: var(--cd-color-science-blue, #3b82f6);
  }
  .marker-quote-expired {
    background-color: #9ca3af;
  }
  .marker-quote-cancelled {
    background-color: #ef4444;
  }
  .marker-quote-paused {
    background-color: #f59e0b;
  }
  .marker-quote-draft {
    background-color: #6b7280;
  }
  .marker-quote-closed {
    background-color: #8b5cf6;
  }
  .marker {
    background-color: var(--cd-color-primary);
    border-radius: 50%;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
  }
  .marker:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }
  .marker.hovered {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-color-primary) 30%, transparent);
    }
  }
  .marker.selected {
    background-color: var(--cd-color-warning);
    transform: scale(1.3);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
    border-width: 3px;
  }
  .marker.featured {
    background-color: var(--cd-warning-orange);
    width: 24px;
    height: 24px;
    border-width: 3px;
    z-index: 10;
  }
  .marker.featured:hover {
    transform: scale(1.15);
  }
  .marker.featured.selected {
    transform: scale(1.35);
  }
  .cd-map-popup-admin .mapboxgl-popup-content {
    padding: 0 !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  }
  .cd-map-popup-admin .mapboxgl-popup-close-button {
    font-size: 1.25rem !important;
    padding: 0.5rem 0.75rem !important;
    color: #64748b !important;
  }
  .cd-map-popup-admin .mapboxgl-popup-close-button:hover {
    background: transparent !important;
    color: #1e293b !important;
  }
}
@layer components {
  .cd-discovery-container {
    width: 100%;
    max-width: var(--cd-container-2xl);
    margin: 0 auto;
    padding: 0 1rem;
  }
  @media (min-width: 1024px) {
    .cd-discovery-container {
      padding: 0 1.5rem;
    }
  }
  .cd-discovery-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
  }
  .cd-discovery-filters::-webkit-scrollbar {
    display: none;
  }
  .cd-discovery-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cd-text-primary);
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    border-radius: 9999px;
    cursor: pointer;
    transition: var(--cd-transition);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cd-discovery-filter-pill:hover {
    background-color: var(--cd-bg-hover);
    border-color: var(--cd-border-primary);
  }
  .cd-discovery-filter-pill i:first-child {
    color: var(--cd-text-secondary);
    font-size: 0.75rem;
  }
  .cd-discovery-filter-pill i:last-child {
    color: var(--cd-text-tertiary);
    font-size: 0.625rem;
    margin-left: 0.25rem;
  }
  .cd-discovery-filter-pill-active {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    border-color: var(--cd-color-primary);
    color: var(--cd-color-primary);
  }
  .cd-discovery-filter-pill-active i:first-child {
    color: var(--cd-color-primary);
  }
  .cd-discovery-results-count {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cd-text-secondary);
    background-color: var(--cd-bg-secondary);
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cd-discovery-panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    color: var(--cd-text-secondary);
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--cd-transition);
    flex-shrink: 0;
  }
  .cd-discovery-panel-toggle:hover {
    background-color: var(--cd-bg-hover);
    color: var(--cd-text-primary);
  }
  .cd-discovery-panel-toggle.is-active {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    color: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
  }
  .cd-discovery-map-wrapper {
    position: relative;
    display: flex;
    gap: 0;
    height: calc(100vh - 280px);
    min-height: 450px;
    max-height: 700px;
    border-radius: var(--cd-radius-xl);
    overflow: hidden;
    background-color: var(--cd-bg-card);
    box-shadow: var(--cd-shadow-md);
  }
  .cd-discovery-map {
    flex: 1;
    min-width: 0;
    height: 100%;
  }
  .cd-discovery-map #map {
    width: 100%;
    height: 100%;
  }
  .cd-discovery-panel {
    display: none;
    flex-direction: column;
    width: 380px;
    flex-shrink: 0;
    height: 100%;
    background-color: var(--cd-bg-card);
    border-left: 1px solid var(--cd-border-secondary);
  }
  @media (min-width: 1024px) {
    .cd-discovery-panel {
      display: flex;
    }
  }
  .cd-discovery-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cd-border-secondary);
    background-color: var(--cd-bg-secondary);
    flex-shrink: 0;
  }
  .cd-discovery-panel-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-discovery-panel-header h3 span {
    font-weight: 400;
    color: var(--cd-text-secondary);
  }
  .cd-discovery-panel-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--cd-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--cd-radius-lg);
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-discovery-panel-close:hover {
    background-color: var(--cd-bg-hover);
    color: var(--cd-text-primary);
  }
  .cd-discovery-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
  }
  .cd-discovery-panel-body::-webkit-scrollbar {
    width: 6px;
  }
  .cd-discovery-panel-body::-webkit-scrollbar-track {
    background: transparent;
  }
  .cd-discovery-panel-body::-webkit-scrollbar-thumb {
    background: var(--cd-border-secondary);
    border-radius: 3px;
  }
  .cd-discovery-panel-body::-webkit-scrollbar-thumb:hover {
    background: var(--cd-border-primary);
  }
  .cd-discovery-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
  }
  .cd-discovery-panel-empty i {
    font-size: 2.5rem;
    color: var(--cd-text-tertiary);
    margin-bottom: 1rem;
  }
  .cd-discovery-panel-empty p {
    font-size: 0.875rem;
    color: var(--cd-text-secondary);
    margin: 0;
  }
  .cd-discovery-mini-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background-color: var(--cd-bg-card);
    border: 1px solid transparent;
    border-radius: var(--cd-radius-lg);
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-discovery-mini-card:hover {
    background-color: var(--cd-bg-hover);
  }
  .cd-discovery-mini-card:last-child {
    margin-bottom: 0;
  }
  .cd-discovery-mini-card-selected {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 8%, transparent);
    }
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 1px var(--cd-color-primary);
  }
  .cd-discovery-mini-card-selected:hover {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 12%, transparent);
    }
  }
  .cd-discovery-mini-card-featured {
    border-left: 3px solid var(--cd-warning-orange);
  }
  .cd-discovery-mini-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cd-warning-orange), transparent);
  }
  .cd-discovery-mini-card-info {
    flex: 1;
    min-width: 0;
  }
  .cd-discovery-mini-card-name {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cd-text-primary);
    margin-bottom: 0.125rem;
  }
  .cd-discovery-mini-card-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-discovery-mini-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem 0.375rem;
    font-size: 0.75rem;
    color: var(--cd-text-secondary);
    min-width: 0;
  }
  .cd-discovery-mini-card-meta > * {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .cd-discovery-mini-card-meta .profession {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    gap: 0.3rem;
  }
  .cd-discovery-mini-card-meta .profession > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .cd-discovery-mini-card-meta .profession i {
    flex-shrink: 0;
    opacity: 0.85;
  }
  .cd-discovery-mini-card-meta .rating {
    color: var(--cd-warning-orange);
    font-weight: 500;
    line-height: 1;
  }
  .cd-discovery-mini-card-meta .rating .fa-star {
    font-size: 0.7rem;
    line-height: 1;
    transform: translateY(0.5px);
  }
  .cd-discovery-mini-card-meta .rating > span {
    line-height: 1;
  }
  .cd-discovery-mini-card-meta .rating .count {
    color: var(--cd-text-secondary);
    font-weight: 400;
  }
  .cd-discovery-mini-card-meta .separator {
    color: var(--cd-text-tertiary);
  }
  .cd-discovery-mini-card-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
  }
  .cd-discovery-mini-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
    color: var(--cd-text-secondary);
    background-color: var(--cd-bg-secondary);
    border: none;
    border-radius: var(--cd-radius-md);
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-discovery-mini-card-action:hover {
    background-color: var(--cd-bg-tertiary);
    color: var(--cd-color-primary);
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .cd-discovery-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: 380px;
      max-width: 85vw;
      height: 100vh;
      z-index: calc(var(--cd-z-modal-elevated) + 1);
      transform: translateX(100%);
      transition: transform 0.3s ease;
      border-left: none;
      box-shadow: -4px 0 12px var(--cd-text-primary);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: -4px 0 12px color-mix(in srgb, var(--cd-text-primary) 12%, transparent);
      }
    }
    .cd-discovery-panel.open {
      display: flex;
      transform: translateX(0);
    }
    .cd-discovery-panel-close {
      display: flex;
    }
    .cd-discovery-panel-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: var(--cd-z-modal-elevated);
    }
  }
  @media (max-width: 767px) {
    .cd-discovery-map-wrapper {
      flex-direction: column;
      border-radius: var(--cd-radius-lg);
    }
    .cd-discovery-map {
      height: 50vh;
      min-height: 300px;
      max-height: 400px;
      border-radius: var(--cd-radius-lg) var(--cd-radius-lg) 0 0;
    }
    .cd-discovery-panel {
      display: flex;
      width: 100%;
      max-height: 50vh;
      border-left: none;
      border-top: 1px solid var(--cd-border-secondary);
      border-radius: 0 0 var(--cd-radius-lg) var(--cd-radius-lg);
    }
    .cd-discovery-panel-toggle {
      display: none;
    }
    .cd-discovery-panel-overlay {
      display: none !important;
    }
    .cd-discovery-mini-card {
      padding: 0.625rem;
    }
    .cd-discovery-mini-card-actions {
      display: none;
    }
  }
  .cd-discovery-cta {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  @media (max-width: 767px) {
    .cd-discovery-cta {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
  }
  .cd-discovery-filter-dropdown {
    position: fixed;
    min-width: 280px;
    max-height: 320px;
    background-color: var(--cd-bg-card);
    border: 1px solid var(--cd-border-secondary);
    border-radius: var(--cd-radius-xl);
    box-shadow: var(--cd-shadow-lg);
    overflow: hidden;
    z-index: 9999;
  }
  .cd-discovery-filter-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cd-border-secondary);
    background-color: var(--cd-bg-secondary);
  }
  .cd-discovery-filter-dropdown-header h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0;
  }
  .cd-discovery-filter-dropdown-body {
    max-height: 250px;
    overflow-y: auto;
    padding: 0.5rem;
  }
  .cd-discovery-filter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: var(--cd-text-primary);
    border-radius: var(--cd-radius-lg);
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-discovery-filter-dropdown-item:hover {
    background-color: var(--cd-bg-hover);
  }
  .cd-discovery-filter-dropdown-item.selected {
    background-color: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    color: var(--cd-color-primary);
    font-weight: 500;
  }
  .cd-discovery-radius-slider {
    padding: 1rem;
  }
  .cd-discovery-radius-slider label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cd-text-primary);
    margin-bottom: 0.75rem;
  }
  .cd-discovery-radius-slider input[type="range"] {
    width: 100%;
  }
  .cd-discovery-radius-slider .range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--cd-text-secondary);
    margin-top: 0.5rem;
  }
}
@layer components {
  .cd-discovery-kicker {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cd-text-tertiary);
    margin-bottom: 0.5rem;
  }
  .cd-discovery-statline {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-top: 1.25rem;
  }
  .cd-discovery-statline__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
  }
  .cd-discovery-statline__num {
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cd-text-primary);
  }
  .cd-discovery-statline__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cd-text-secondary);
  }
  .cd-discovery-statline__divider {
    width: 1px;
    height: 1.1rem;
    background: var(--cd-border-secondary);
  }
  @media (max-width: 480px) {
    .cd-discovery-statline__divider {
      display: none;
    }
  }
  .cd-discovery-masthead-alt {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.875rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cd-text-secondary);
    text-decoration: none;
  }
  .cd-discovery-masthead-alt:hover {
    color: var(--cd-color-accent);
  }
  .cd-discovery-panel__kicker {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cd-text-tertiary);
    line-height: 1.2;
  }
  .cd-discovery-panel__title {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.1;
    color: var(--cd-text-primary);
  }
  .cd-discovery-panel__title .count {
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
    color: var(--cd-text-tertiary);
  }
  .cd-discovery-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem 0.625rem;
    border-radius: var(--cd-radius-lg);
    cursor: pointer;
    transition: background-color 0.18s ease;
  }
  .cd-discovery-entry + .cd-discovery-entry {
    border-top: 1px solid var(--cd-border-hairline);
  }
  .cd-discovery-entry:hover {
    background: var(--cd-bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-bg-secondary) 70%, transparent);
    }
  }
  .cd-discovery-entry.is-selected {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 7%, transparent);
    }
  }
  .cd-discovery-entry.is-selected + .cd-discovery-entry, .cd-discovery-entry.is-selected {
    border-top-color: transparent;
  }
  .cd-discovery-entry__index {
    flex-shrink: 0;
    width: 1.6rem;
    padding-top: 0.15rem;
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-size: 0.92rem;
    line-height: 1;
    color: var(--cd-text-tertiary);
    text-align: right;
  }
  .cd-discovery-entry.is-selected .cd-discovery-entry__index {
    color: var(--cd-color-primary);
  }
  .cd-discovery-entry__avatar {
    flex-shrink: 0;
  }
  .cd-discovery-entry__body {
    flex: 1;
    min-width: 0;
  }
  .cd-discovery-entry__name {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.2;
    color: var(--cd-text-primary);
  }
  .cd-discovery-entry__name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .cd-discovery-entry:hover .cd-discovery-entry__name {
    color: var(--cd-color-accent);
  }
  .cd-discovery-entry__tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-warning-orange);
    background: var(--cd-warning-orange);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-warning-orange) 13%, transparent);
    }
  }
  .cd-discovery-entry__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.1rem 0.55rem;
    margin-top: 0.25rem;
    font-size: 0.76rem;
    color: var(--cd-text-secondary);
  }
  .cd-discovery-entry__meta > * {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .cd-discovery-entry__rating {
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-discovery-entry__rating .num {
    font-family: var(--cd-font-numeral);
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .cd-discovery-entry__rating .fa-star {
    font-size: 0.7rem;
    color: var(--cd-warning-orange);
  }
  .cd-discovery-entry__rating .denom, .cd-discovery-entry__rating .count {
    font-weight: 400;
    color: var(--cd-text-tertiary);
  }
  .cd-discovery-entry__dist {
    color: var(--cd-text-secondary);
  }
  .cd-discovery-entry__dist .num {
    font-family: var(--cd-font-numeral);
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-discovery-entry__prof {
    flex: 0 0 100%;
    min-width: 0;
    margin-top: 0.05rem;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cd-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cd-discovery-entry__prof i {
    font-size: 0.62rem;
  }
  .cd-discovery-entry__trail {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    align-self: center;
  }
  .cd-discovery-entry__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.78rem;
    color: var(--cd-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--cd-radius-md);
    cursor: pointer;
    transition: var(--cd-transition);
  }
  .cd-discovery-entry__action:hover {
    background: var(--cd-bg-secondary);
    color: var(--cd-color-primary);
  }
  .cd-discovery-entry__chevron {
    font-size: 0.72rem;
    color: var(--cd-text-tertiary);
    transition: transform 0.18s ease, color 0.18s ease;
  }
  .cd-discovery-entry:hover .cd-discovery-entry__chevron {
    transform: translateX(3px);
    color: var(--cd-color-primary);
  }
  .cd-map-popup-name {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    line-height: 1.15;
  }
  .cd-map-popup-rule {
    height: 1px;
    background: var(--cd-border-hairline);
    margin: 0.75rem 0;
  }
  .cd-map-popup-num {
    font-family: var(--cd-font-numeral);
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .cd-map-popup-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-warning-orange);
    background: var(--cd-warning-orange);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-warning-orange) 13%, transparent);
    }
  }
  .cd-discovery-section-head {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .cd-discovery-section-head .rule {
    display: block;
    width: 2.5rem;
    height: 1px;
    margin: 0 auto 0.75rem;
    background: var(--cd-text-primary);
    opacity: 0.6;
  }
  .cd-discovery-section-head h2 {
    font-family: var(--cd-font-editorial);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--cd-text-primary);
  }
  .cd-discovery-section-head p {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--cd-text-secondary);
  }
  @media (max-width: 767px) {
    .cd-discovery-map-wrapper {
      height: auto;
      max-height: none;
      box-shadow: none;
      background: transparent;
    }
    .cd-discovery-map {
      height: 45vh;
      min-height: 280px;
      max-height: 420px;
      box-shadow: var(--cd-shadow-md);
    }
    .cd-discovery-panel {
      max-height: none;
    }
    .cd-discovery-panel-body {
      overflow-y: visible;
    }
    .cd-discovery-entry__trail {
      display: flex;
    }
  }
}
@layer components {
  .cd-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--cd-z-tour);
    pointer-events: auto;
    transition: opacity 0.3s ease;
  }
  .cd-tour-overlay svg {
    width: 100%;
    height: 100%;
  }
  .cd-tour-spotlight {
    position: fixed;
    pointer-events: none;
    z-index: var(--cd-z-tour-popover);
    border-radius: 8px;
    box-shadow: 0 0 0 4px var(--cd-color-primary), 0 0 0 6px rgba(255, 255, 255, 0.5), 0 0 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px var(--cd-color-primary), 0 0 0 6px rgba(255, 255, 255, 0.5), 0 0 20px color-mix(in srgb, var(--cd-color-primary) 40%, transparent);
    }
    animation: cd-tour-pulse 2s ease-in-out infinite;
    transition: top 0.3s ease-out, left 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out;
  }
  @keyframes cd-tour-pulse {
    0%, 100% {
      box-shadow: 0 0 0 4px var(--cd-color-primary), 0 0 0 6px rgba(255, 255, 255, 0.5), 0 0 20px color-mix(in srgb, var(--cd-color-primary) 40%, transparent);
    }
    50% {
      box-shadow: 0 0 0 4px var(--cd-color-primary), 0 0 0 8px rgba(255, 255, 255, 0.3), 0 0 30px color-mix(in srgb, var(--cd-color-primary) 60%, transparent);
    }
  }
  .cd-tour-tooltip {
    position: fixed;
    z-index: var(--cd-z-tour-highlight);
    background: var(--cd-card-bg, #ffffff);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    max-width: 440px;
    min-width: 380px;
    padding: 0;
    animation: cd-tour-tooltip-enter 0.3s ease-out;
  }
  @keyframes cd-tour-tooltip-enter {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .cd-tour-tooltip--transitioning {
    transition: opacity 0.2s ease-out;
  }
  .cd-tour-tooltip--slide-out-left {
    opacity: 0;
  }
  .cd-tour-tooltip--slide-out-right {
    opacity: 0;
  }
  .cd-tour-tooltip--slide-in-right {
    opacity: 0;
  }
  .cd-tour-tooltip--slide-in-left {
    opacity: 0;
  }
  .cd-tour-tooltip--visible {
    opacity: 1;
  }
  #cd-tour-cutout {
    transition: x 0.3s ease-out, y 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out;
  }
  .cd-tour-tooltip::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--cd-card-bg, #ffffff);
    transform: rotate(45deg);
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05);
  }
  .cd-tour-tooltip--arrow-top::before {
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
  .cd-tour-tooltip--arrow-bottom::before {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
  }
  .cd-tour-tooltip--arrow-left::before {
    left: -8px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .cd-tour-tooltip--arrow-right::before {
    right: -8px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.05);
  }
  .cd-tour-tooltip--centered {
    max-width: 520px;
    min-width: 420px;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .cd-tour-tooltip--centered:has(.cd-tour-nav-buttons) {
    height: min(700px, calc(100dvh - 40px));
  }
  .cd-tour-tooltip--centered::before {
    display: none;
  }
  .cd-tour-tooltip--centered .cd-tour-tooltip-header {
    padding: 24px 24px 16px;
    border-bottom: none;
  }
  .cd-tour-tooltip--centered .cd-tour-tooltip-title {
    font-size: 22px;
  }
  .cd-tour-tooltip--centered .cd-tour-tooltip-body {
    padding: 16px 28px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
  }
  .cd-tour-tooltip--centered .cd-tour-tooltip-description {
    font-size: 15px;
    max-width: 400px;
    margin: 0 auto 16px;
  }
  .cd-tour-tooltip--centered .cd-tour-body-nav {
    flex: 1;
  }
  .cd-tour-tooltip--centered .cd-tour-tooltip-footer {
    padding: 12px 24px 20px;
    border-top: none;
  }
  .cd-tour-welcome-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 7rem;
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
    animation: cd-tour-tooltip-enter 0.5s ease-out;
    animation-delay: 0.3s;
    animation-fill-mode: backwards;
  }
  @media (min-width: 640px) {
    .cd-tour-welcome-image {
      width: 9rem;
    }
  }
  .cd-tour-illustration {
    width: 100%;
    max-width: 340px;
    height: 227px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .cd-tour-illustration picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .cd-tour-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-mask-image: radial-gradient(ellipse at center, black 65%, transparent 92%);
    mask-image: radial-gradient(ellipse at center, black 65%, transparent 92%);
  }
  .cd-tour-illustration--icon, .cd-tour-illustration--fallback {
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 12%, transparent), color-mix(in srgb, var(--cd-color-primary) 6%, transparent) );
    }
    border-radius: 12px;
  }
  .cd-tour-illustration--icon i, .cd-tour-illustration--fallback i {
    font-size: 64px;
    color: var(--cd-color-primary);
    opacity: 0.8;
  }
  .cd-tour-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin: 16px 0;
    background: linear-gradient(135deg, var(--cd-color-warning, #f59e0b), var(--cd-color-warning, #f59e0b) );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-warning, #f59e0b) 10%, transparent), color-mix(in srgb, var(--cd-color-warning, #f59e0b) 5%, transparent) );
    }
    border-radius: 10px;
    border-left: 3px solid var(--cd-color-warning, #f59e0b);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cd-text-secondary);
    text-align: left;
  }
  .cd-tour-tip i {
    color: var(--cd-color-warning, #f59e0b);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .cd-tour-choice {
    position: relative;
    z-index: 1;
  }
  .cd-tour-body-nav .cd-tour-btn-skip {
    position: relative;
    z-index: 1;
  }
  .cd-tour-tooltip-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--cd-card-border, var(--cd-border-primary));
  }
  .cd-tour-tooltip--centered .cd-tour-tooltip-header {
    background: var(--cd-bg-secondary, #f5f5f7);
    border-radius: 12px 12px 0 0;
  }
  .cd-tour-tooltip-step {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-color-primary);
    margin-bottom: 4px;
  }
  .cd-tour-tooltip-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cd-text-primary);
    margin: 0;
    line-height: 1.3;
  }
  .cd-tour-tooltip-title i {
    color: var(--cd-color-primary);
    margin-right: 8px;
    font-size: 18px;
  }
  .cd-tour-tooltip-body {
    padding: 12px 20px 8px;
  }
  .cd-tour-tooltip-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--cd-text-secondary, #6b7280);
    margin: 0 0 16px 0;
  }
  .cd-tour-body-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
  }
  .cd-tour-body-nav--centered {
    flex-direction: column;
    gap: 14px;
  }
  .cd-tour-body-nav--centered .cd-tour-nav-buttons {
    margin-top: auto;
  }
  .cd-tour-nav-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .cd-tour-nav-buttons .cd-tour-btn-skip {
    margin-right: auto;
  }
  .cd-tour-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--cd-card-border, var(--cd-border-primary));
  }
  .cd-tour-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
  }
  .cd-tour-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cd-card-border, var(--cd-border-primary));
    transition: all 0.2s ease;
  }
  .cd-tour-progress-dot--active {
    background: var(--cd-color-primary);
    transform: scale(1.2);
  }
  .cd-tour-progress-dot--completed {
    background: var(--cd-color-primary);
    opacity: 0.5;
  }
  .cd-tour-quip {
    margin-top: 6px;
    padding: 4px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cd-text-secondary);
    font-style: normal;
    text-align: center;
    width: 100%;
    min-height: 26px;
    background: transparent;
  }
  .cd-tour-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    gap: 6px;
    min-height: 44px;
  }
  .cd-tour-btn-skip {
    background: transparent;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-tour-btn-skip:hover {
    color: var(--cd-text-secondary, #6b7280);
    background: var(--cd-bg-secondary);
  }
  .cd-tour-btn-prev {
    background: var(--cd-bg-secondary);
    color: var(--cd-text-primary);
  }
  .cd-tour-btn-prev:hover {
    background: var(--cd-card-border, var(--cd-border-primary));
  }
  .cd-tour-btn-next {
    background: var(--cd-color-primary);
    color: var(--cd-text-on-primary);
  }
  .cd-tour-btn-next:hover {
    background: var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-primary) 85%, black);
    }
    transform: translateY(-1px);
  }
  .cd-tour-btn-finish {
    background: var(--cd-color-success, #10b981);
    color: var(--cd-text-on-success);
  }
  .cd-tour-btn-finish:hover {
    background: var(--cd-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--cd-color-success) 85%, black);
    }
    transform: translateY(-1px);
  }
  .cd-tour-choice {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 16px;
  }
  .cd-tour-btn-quick, .cd-tour-btn-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 16px 20px;
    border-radius: 10px;
    background: var(--cd-bg-secondary);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 600;
    color: var(--cd-text-primary);
    gap: 4px;
  }
  .cd-tour-btn-quick:hover, .cd-tour-btn-full:hover {
    border-color: var(--cd-color-primary);
    background: var(--cd-bg-primary);
  }
  .cd-tour-btn-quick i, .cd-tour-btn-full i {
    font-size: 18px;
    margin-bottom: 4px;
    color: var(--cd-color-primary);
  }
  .cd-tour-choice-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--cd-text-tertiary, #9ca3af);
    margin-top: 2px;
  }
  .cd-tour-tooltip--centered .cd-tour-choice {
    margin-top: 8px;
  }
  .cd-tour-tooltip--centered .cd-tour-body-nav--choice {
    flex-direction: column;
    gap: 12px;
  }
  @media (max-width: 640px) {
    .cd-tour-tooltip {
      max-width: calc(100vw - 32px);
      min-width: 260px;
    }
    .cd-tour-tooltip--centered {
      max-width: calc(100vw - 24px);
      min-width: unset;
    }
    .cd-tour-tooltip--centered:has(.cd-tour-nav-buttons) {
      height: min(620px, calc(100dvh - 40px));
    }
    .cd-tour-tooltip-header {
      padding: 14px 16px 10px;
    }
    .cd-tour-tooltip-body {
      padding: 10px 16px 8px;
    }
    .cd-tour-tooltip-description {
      margin-bottom: 12px;
    }
    .cd-tour-body-nav {
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .cd-tour-tooltip-footer {
      padding: 10px 16px 14px;
    }
    .cd-tour-btn {
      padding: 12px 18px;
      font-size: 15px;
    }
    .cd-tour-nav-buttons {
      flex-wrap: wrap;
      gap: 8px;
    }
    .cd-tour-nav-buttons .cd-tour-btn-skip {
      order: 3;
      width: 100%;
      margin-right: 0;
      margin-top: 4px;
      background: var(--cd-bg-secondary);
    }
    .cd-tour-nav-buttons .cd-tour-btn-prev {
      order: 1;
      flex: 0 0 auto;
    }
    .cd-tour-nav-buttons .cd-tour-btn-next, .cd-tour-nav-buttons .cd-tour-btn-finish {
      order: 2;
      flex: 1;
    }
    .cd-tour-btn-quick, .cd-tour-btn-full {
      padding: 14px 16px;
    }
    .cd-tour-illustration {
      height: 140px;
      max-width: 280px;
    }
    .cd-tour-illustration--icon i, .cd-tour-illustration--fallback i {
      font-size: 48px;
    }
    .cd-tour-tip {
      font-size: 12px;
      padding: 10px 12px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-tour-overlay {
      transition: none;
    }
    .cd-tour-spotlight {
      animation: none;
      transition: none;
      box-shadow: 0 0 0 4px var(--cd-color-primary), 0 0 0 6px rgba(255, 255, 255, 0.5);
    }
    .cd-tour-tooltip {
      animation: none;
    }
    .cd-tour-tooltip--transitioning {
      transition: none;
    }
    .cd-tour-tooltip--slide-out-left, .cd-tour-tooltip--slide-out-right, .cd-tour-tooltip--slide-in-right, .cd-tour-tooltip--slide-in-left {
      transform: none;
    }
    #cd-tour-cutout {
      transition: none;
    }
    .cd-tour-btn:hover {
      transform: none;
    }
  }
  .cd-tour-btn:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
}
@layer components {
  .driver-popover.cd-driver-popover {
    background: var(--cd-card-bg, #ffffff);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 40px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 40px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
    max-width: 420px;
    min-width: 340px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--cd-card-border, var(--cd-border-primary));
  }
  .driver-popover.cd-driver-popover .driver-popover-progress-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cd-color-primary);
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 8%, transparent), color-mix(in srgb, var(--cd-color-primary) 4%, transparent));
    }
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid var(--cd-card-border, var(--cd-border-primary));
  }
  .driver-popover.cd-driver-popover .driver-popover-progress-text i {
    color: var(--cd-color-primary);
  }
  .driver-popover.cd-driver-popover .driver-popover-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--cd-text-primary);
    margin: 0;
    padding: 20px 20px 8px;
    line-height: 1.3;
  }
  .cd-driver-title-icon {
    color: var(--cd-color-primary);
    font-size: 16px;
  }
  .driver-popover.cd-driver-popover .driver-popover-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--cd-text-secondary, #6b7280);
    margin: 0;
    padding: 0 20px 20px;
  }
  .driver-popover.cd-driver-popover .driver-popover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--cd-bg-secondary);
    border-top: 1px solid var(--cd-card-border, var(--cd-border-primary));
    gap: 12px;
  }
  .driver-popover.cd-driver-popover .driver-popover-navigation-btns {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
  }
  .driver-popover.cd-driver-popover button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    gap: 6px;
  }
  .driver-popover.cd-driver-popover .driver-popover-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary, #9ca3af);
    border-radius: 8px;
    font-size: 18px;
    z-index: 10;
  }
  .driver-popover.cd-driver-popover .driver-popover-close-btn:hover {
    background: var(--cd-bg-tertiary);
    color: var(--cd-text-secondary, #6b7280);
  }
  .driver-popover.cd-driver-popover .driver-popover-prev-btn {
    background: var(--cd-bg-primary);
    color: var(--cd-text-primary);
    border: 1px solid var(--cd-card-border, var(--cd-border-primary));
  }
  .driver-popover.cd-driver-popover .driver-popover-prev-btn:hover {
    background: var(--cd-bg-secondary);
    border-color: var(--cd-text-tertiary, #9ca3af);
  }
  .driver-popover.cd-driver-popover .driver-popover-next-btn {
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-primary), color-mix(in srgb, var(--cd-color-primary) 85%, black));
    }
    color: var(--cd-text-on-primary);
    box-shadow: 0 4px 14px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 14px color-mix(in srgb, var(--cd-color-primary) 35%, transparent);
    }
  }
  .driver-popover.cd-driver-popover .driver-popover-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 6px 20px color-mix(in srgb, var(--cd-color-primary) 45%, transparent);
    }
  }
  .driver-popover.cd-driver-popover .driver-popover-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
  }
  .driver-popover.cd-driver-popover .driver-popover-arrow {
    border: 10px solid transparent;
  }
  .driver-popover.cd-driver-popover .driver-popover-arrow-side-left {
    border-right-color: var(--cd-card-bg, #ffffff);
  }
  .driver-popover.cd-driver-popover .driver-popover-arrow-side-right {
    border-left-color: var(--cd-card-bg, #ffffff);
  }
  .driver-popover.cd-driver-popover .driver-popover-arrow-side-top {
    border-bottom-color: var(--cd-card-bg, #ffffff);
  }
  .driver-popover.cd-driver-popover .driver-popover-arrow-side-bottom {
    border-top-color: var(--cd-card-bg, #ffffff);
  }
  .driver-active-element {
    box-shadow: 0 0 0 4px var(--cd-color-primary), 0 0 0 8px var(--cd-color-primary), 0 0 30px var(--cd-color-primary) !important;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px var(--cd-color-primary), 0 0 0 8px color-mix(in srgb, var(--cd-color-primary) 25%, transparent), 0 0 30px color-mix(in srgb, var(--cd-color-primary) 40%, transparent) !important;
    }
    border-radius: 10px !important;
  }
  .cd-driver-welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--cd-z-tour);
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cd-driver-overlay-fade-in 0.3s ease;
    pointer-events: auto;
  }
  @keyframes cd-driver-overlay-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .cd-driver-welcome-modal {
    position: relative;
    background: var(--cd-card-bg, #ffffff);
    border-radius: 20px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    max-width: 440px;
    width: 100%;
    animation: cd-driver-modal-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    pointer-events: auto;
  }
  .cd-driver-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: var(--cd-bg-secondary);
    color: var(--cd-text-tertiary, #9ca3af);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    pointer-events: auto;
  }
  .cd-driver-close-btn:hover {
    background: var(--cd-bg-tertiary);
    color: var(--cd-text-secondary, #6b7280);
  }
  .cd-driver-close-btn:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  @keyframes cd-driver-modal-enter {
    from {
      opacity: 0;
      transform: translateY(30px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .cd-driver-welcome-header {
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 8%, transparent), color-mix(in srgb, var(--cd-color-primary) 2%, transparent));
    }
    padding: 32px 28px 24px;
    text-align: center;
    border-bottom: 1px solid var(--cd-card-border, var(--cd-border-primary));
  }
  .cd-driver-welcome-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-primary), color-mix(in srgb, var(--cd-color-primary) 85%, black));
    }
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px var(--cd-color-primary), 0 0 0 4px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 10px 30px color-mix(in srgb, var(--cd-color-primary) 35%, transparent), 0 0 0 4px color-mix(in srgb, var(--cd-color-primary) 15%, transparent);
    }
  }
  .cd-driver-welcome-icon i {
    font-size: 28px;
    color: var(--cd-text-on-primary);
  }
  .cd-driver-welcome-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--cd-text-primary);
    margin: 0 0 6px 0;
    line-height: 1.3;
  }
  .cd-driver-welcome-subtitle {
    font-size: 15px;
    color: var(--cd-text-secondary, #6b7280);
    margin: 0;
  }
  .cd-driver-welcome-body {
    padding: 24px 28px;
  }
  .cd-driver-welcome-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--cd-text-secondary, #6b7280);
    margin: 0 0 20px 0;
    text-align: center;
  }
  .cd-driver-welcome-choice {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-driver-choice-btn {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--cd-bg-secondary);
    border: 2px solid var(--cd-card-border, var(--cd-border-primary));
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    gap: 14px;
    pointer-events: auto;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
  .cd-driver-choice-btn:hover {
    border-color: var(--cd-color-primary);
    background: var(--cd-bg-primary);
    box-shadow: 0 4px 12px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-color-primary) 10%, transparent);
    }
    transform: translateY(-2px);
  }
  .cd-driver-choice-recommended {
    border-color: var(--cd-color-primary);
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--cd-color-primary) 6%, transparent), color-mix(in srgb, var(--cd-color-primary) 2%, transparent));
    }
  }
  .cd-driver-choice-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    background: linear-gradient(135deg, var(--cd-color-primary), var(--cd-color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--cd-color-primary), color-mix(in srgb, var(--cd-color-primary) 85%, black));
    }
    color: var(--cd-text-on-primary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px var(--cd-color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 2px 8px color-mix(in srgb, var(--cd-color-primary) 40%, transparent);
    }
  }
  .cd-driver-choice-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--cd-bg-primary);
    border: 1px solid var(--cd-card-border, var(--cd-border-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cd-driver-choice-icon i {
    font-size: 18px;
    color: var(--cd-color-primary);
  }
  .cd-driver-choice-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cd-driver-choice-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cd-text-primary);
  }
  .cd-driver-choice-desc {
    font-size: 13px;
    color: var(--cd-text-tertiary, #9ca3af);
  }
  .cd-driver-choice-arrow {
    color: var(--cd-text-tertiary, #9ca3af);
    font-size: 14px;
    transition: transform 0.2s ease;
  }
  .cd-driver-choice-btn:hover .cd-driver-choice-arrow {
    transform: translateX(4px);
    color: var(--cd-color-primary);
  }
  .cd-driver-welcome-footer {
    padding: 16px 28px 24px;
    display: flex;
    justify-content: center;
  }
  .cd-driver-skip-btn {
    background: transparent;
    color: var(--cd-text-tertiary, #9ca3af);
    border: none;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    border-radius: 8px;
    font-family: inherit;
  }
  .cd-driver-skip-btn:hover {
    color: var(--cd-text-secondary, #6b7280);
    background: var(--cd-bg-secondary);
  }
  @media (max-width: 640px) {
    .driver-popover.cd-driver-popover {
      max-width: calc(100vw - 24px);
      min-width: 280px;
      border-radius: 14px;
    }
    .driver-popover.cd-driver-popover .driver-popover-title {
      font-size: 16px;
      padding: 16px 16px 6px;
    }
    .driver-popover.cd-driver-popover .driver-popover-description {
      font-size: 13px;
      padding: 0 16px 16px;
    }
    .driver-popover.cd-driver-popover .driver-popover-footer {
      padding: 12px 16px;
      flex-wrap: wrap;
      gap: 8px;
    }
    .driver-popover.cd-driver-popover .driver-popover-navigation-btns {
      width: 100%;
      justify-content: stretch;
    }
    .driver-popover.cd-driver-popover .driver-popover-prev-btn, .driver-popover.cd-driver-popover .driver-popover-next-btn {
      flex: 1;
    }
    .driver-popover.cd-driver-popover button {
      padding: 12px 16px;
    }
    .cd-driver-welcome-modal {
      max-width: calc(100vw - 24px);
      border-radius: 16px;
    }
    .cd-driver-welcome-header {
      padding: 24px 20px 20px;
    }
    .cd-driver-welcome-icon {
      width: 56px;
      height: 56px;
    }
    .cd-driver-welcome-icon i {
      font-size: 24px;
    }
    .cd-driver-welcome-title {
      font-size: 20px;
    }
    .cd-driver-welcome-body {
      padding: 20px;
    }
    .cd-driver-choice-btn {
      padding: 14px 14px;
    }
    .cd-driver-choice-icon {
      width: 40px;
      height: 40px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cd-driver-welcome-overlay {
      animation: none;
    }
    .cd-driver-welcome-modal {
      animation: none;
    }
    .driver-popover.cd-driver-popover .driver-popover-next-btn:hover, .cd-driver-choice-btn:hover {
      transform: none;
    }
    .cd-driver-choice-btn:hover .cd-driver-choice-arrow {
      transform: none;
    }
  }
  .driver-popover.cd-driver-popover button:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-driver-choice-btn:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
  .cd-driver-skip-btn:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 2px;
  }
}
@layer components {
  .cd-profile-card-lazy {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }
}
@layer components {
  #main-content {
    transition: opacity 150ms ease-in;
  }
  #main-content.cd-content-entering {
    opacity: 0;
    transition: none;
  }
}
@layer components {
  html {
    font-family: var(--cd-font-primary);
    overflow-x: clip;
  }
  body {
    background-color: var(--cd-bg-primary);
    color: var(--cd-text-primary);
    overflow-x: clip;
  }
  [data-theme] .bg-shark {
    background-color: var(--cd-color-primary) !important;
  }
  [data-theme] .text-shark {
    color: var(--cd-color-primary) !important;
  }
  [data-theme] .border-shark {
    border-color: var(--cd-color-primary) !important;
  }
  [data-theme] .bg-accent {
    background-color: var(--cd-color-accent) !important;
  }
  [data-theme] .text-accent {
    color: var(--cd-color-accent) !important;
  }
  [data-theme] .border-accent {
    border-color: var(--cd-color-accent) !important;
  }
  [data-theme] .bg-forest-green {
    background-color: var(--cd-color-success) !important;
  }
  [data-theme] .text-forest-green {
    color: var(--cd-color-success) !important;
  }
  [data-theme] .bg-crimson-red {
    background-color: var(--cd-color-error) !important;
  }
  [data-theme] .text-crimson-red {
    color: var(--cd-color-error) !important;
  }
  [data-theme] .bg-warning-orange {
    background-color: var(--cd-color-warning) !important;
  }
  [data-theme] .text-warning-orange {
    color: var(--cd-color-warning) !important;
  }
  [data-theme] .bg-science-blue {
    background-color: var(--cd-color-science-blue) !important;
  }
  [data-theme] .text-science-blue {
    color: var(--cd-color-science-blue) !important;
  }
  [data-theme] .bg-deep-purple {
    background-color: var(--cd-color-deep-purple) !important;
  }
  [data-theme] .text-deep-purple {
    color: var(--cd-color-deep-purple) !important;
  }
  [data-theme] .bg-white {
    background-color: var(--cd-bg-primary) !important;
  }
  [data-theme] .bg-athens-gray {
    background-color: var(--cd-bg-secondary) !important;
  }
  [data-theme] .bg-gray-50, [data-theme] .bg-gray-100 {
    background-color: var(--cd-bg-secondary) !important;
  }
  [data-theme] .bg-gray-200 {
    background-color: var(--cd-bg-tertiary) !important;
  }
  [data-theme] .text-white {
    color: var(--cd-text-on-dark) !important;
  }
  [data-theme] .text-gray-800, [data-theme] .text-gray-900 {
    color: var(--cd-text-primary) !important;
  }
  [data-theme] .text-gray-600, [data-theme] .text-gray-700 {
    color: var(--cd-text-secondary) !important;
  }
  [data-theme] .text-gray-300, [data-theme] .text-gray-400, [data-theme] .text-gray-500 {
    color: var(--cd-text-tertiary) !important;
  }
  [data-theme] .border-gray-100, [data-theme] .border-gray-200 {
    border-color: var(--cd-border-primary) !important;
  }
  [data-theme] .border-gray-300, [data-theme] .border-gray-400 {
    border-color: var(--cd-border-secondary) !important;
  }
  [data-theme] .hover\\:bg-gray-50:hover, [data-theme] .hover\\:bg-athens-gray:hover {
    background-color: var(--cd-bg-secondary) !important;
  }
  [data-theme] .hover\\:bg-gray-100:hover {
    background-color: var(--cd-bg-tertiary) !important;
  }
  [data-theme] .hover\\:bg-red-50:hover {
    background-color: var(--cd-color-error) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 10%, transparent) !important;
    }
  }
  [data-theme] .hover\\:text-accent:hover {
    color: var(--cd-color-accent) !important;
  }
  [data-theme] .hover\\:border-accent:hover {
    border-color: var(--cd-color-accent) !important;
  }
  [data-theme] .focus\\:ring-accent:focus {
    --tw-ring-color: var(--cd-color-accent) !important;
  }
  [data-theme] .focus\\:border-accent:focus {
    border-color: var(--cd-color-accent) !important;
  }
  button:not([class*="cd-progress-step"]):not(.cd-shape-preview-btn), .btn, .cd-btn, input[type="submit"], input[type="button"] {
    border-radius: var(--button-radius) !important;
  }
  [data-theme] .cd-nav-logout {
    color: var(--cd-color-error) !important;
  }
  [data-theme] .cd-nav-logout:hover {
    color: var(--cd-color-error) !important;
    background-color: var(--cd-color-error) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-error) 5%, transparent) !important;
    }
  }
  [data-theme] .bg-blue-50 {
    background-color: var(--cd-color-accent) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--cd-color-accent) 10%, var(--cd-bg-primary)) !important;
    }
  }
  [data-theme] .text-blue-600 {
    color: var(--cd-color-accent) !important;
  }
  [data-theme] .border-blue-500 {
    border-color: var(--cd-color-accent) !important;
  }
  [data-theme="neobrutalism"] .cd-card, [data-theme="neobrutalism"] .cd-card-alt, [data-theme="neobrutalism"] .cd-card-outline, [data-theme="neobrutalism"] .cd-card-hover, [data-theme="neobrutalism"] .cd-card-compact {
    box-shadow: var(--cd-shadow-brutal-md);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-card-hover:hover {
    box-shadow: var(--cd-shadow-brutal-lg);
    transform: translate(-2px, -2px);
  }
  [data-theme="neobrutalism"] .cd-btn {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-btn:hover {
    box-shadow: var(--cd-shadow-brutal-md);
    transform: translate(-1px, -1px);
  }
  [data-theme="neobrutalism"] .cd-btn:active {
    box-shadow: none;
    transform: translate(2px, 2px);
  }
  [data-theme="neobrutalism"] .cd-sidebar .cd-sidebar-item {
    border: 2px solid transparent;
    transition: all 0.15s ease;
  }
  [data-theme="neobrutalism"] .cd-sidebar .cd-sidebar-item:hover {
    border-color: #000000;
    box-shadow: var(--cd-shadow-brutal-sm);
    transform: translate(-1px, -1px);
  }
  [data-theme="neobrutalism"] .cd-sidebar .cd-sidebar-item-active {
    background-color: var(--cd-color-accent);
    color: #000000;
    border: 2px solid #000000;
    box-shadow: var(--cd-shadow-brutal-sm);
  }
  [data-theme="neobrutalism"] .cd-sidebar .cd-sidebar-item-active:hover {
    transform: translate(1px, 1px);
    box-shadow: none;
  }
  [data-theme="neobrutalism"] .cd-review-stat-card {
    box-shadow: var(--cd-shadow-brutal-md);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-review-panel {
    box-shadow: var(--cd-shadow-brutal-md);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-metric-card {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-profile-card {
    box-shadow: var(--cd-shadow-brutal-md);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-service-card {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-insights-table {
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-insights-table thead {
    border-bottom: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-card-premium, [data-theme="neobrutalism"] .cd-card-premium-interactive {
    box-shadow: var(--cd-shadow-brutal-md);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-card-premium-interactive:hover {
    box-shadow: var(--cd-shadow-brutal-lg);
    transform: translate(-2px, -2px);
  }
  [data-theme="neobrutalism"] .cd-pricing-card {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-service-stats-box {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-theme-selection-card {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-theme-selection-card:hover {
    box-shadow: var(--cd-shadow-brutal-md);
    transform: translate(-1px, -1px);
  }
  [data-theme="neobrutalism"] .cd-theme-selection-card.ring-2 {
    box-shadow: var(--cd-shadow-brutal-md);
  }
  [data-theme="neobrutalism"] .cd-preview-card {
    box-shadow: var(--cd-shadow-brutal-lg);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-filter-form {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-card-interactive {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-card-interactive:hover {
    box-shadow: var(--cd-shadow-brutal-md);
    transform: translate(-1px, -1px);
  }
  [data-theme="neobrutalism"] .cd-pricing-comparison-item {
    box-shadow: var(--cd-shadow-brutal-md);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-pricing-comparison-item:hover {
    box-shadow: var(--cd-shadow-brutal-lg);
    transform: translate(-2px, -2px);
  }
  [data-theme="neobrutalism"] .cd-pricing-comparison-current {
    box-shadow: var(--cd-shadow-brutal-lg);
    border: 3px solid var(--cd-color-primary);
    background: var(--cd-color-accent);
  }
  [data-theme="neobrutalism"] .cd-plan-badge-corner {
    border: 2px solid var(--cd-color-primary);
    border-top: none;
    border-right: none;
  }
  [data-theme="neobrutalism"] .cd-btn-current-plan {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-service-group-card {
    box-shadow: var(--cd-shadow-brutal-md);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-service-group-card:hover {
    box-shadow: var(--cd-shadow-brutal-lg);
    transform: translate(-2px, -2px);
  }
  [data-theme="neobrutalism"] .cd-service-card-wizard {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-service-card-wizard:hover {
    box-shadow: var(--cd-shadow-brutal-md);
    transform: translate(-1px, -1px);
  }
  [data-theme="neobrutalism"] .cd-service-card-selected {
    background: var(--cd-color-accent);
    box-shadow: var(--cd-shadow-brutal-md);
  }
  [data-theme="neobrutalism"] .cd-service-filter-pill-active {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-conversation-row-card {
    box-shadow: var(--cd-shadow-brutal-md);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-conversation-row-card:hover {
    box-shadow: var(--cd-shadow-brutal-lg);
    transform: translate(-2px, -2px);
  }
  [data-theme="neobrutalism"] .cd-conversation-unread {
    border-left: 4px solid var(--cd-color-accent);
  }
  [data-theme="neobrutalism"] .cd-conversation-item {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
  [data-theme="neobrutalism"] .cd-conversation-item:hover {
    box-shadow: var(--cd-shadow-brutal-md);
    transform: translate(-1px, -1px);
  }
  [data-theme="neobrutalism"] .cd-filter-toggle {
    box-shadow: var(--cd-shadow-brutal-sm);
    border: 2px solid var(--cd-color-primary);
  }
}
@layer components {
  .cd-brand-logo-text {
    font-family: var(--cd-font-editorial);
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .cd-brand-subtext {
    font-family: var(--cd-font-editorial);
    font-weight: 400;
    font-style: italic;
  }
}
@layer components {
  .cd-env-glow-green {
    animation: cd-env-pulse 2.5s ease-in-out infinite;
    --cd-env-glow-color: 22 163 74;
  }
  .cd-env-glow-orange {
    animation: cd-env-pulse 2.5s ease-in-out infinite;
    --cd-env-glow-color: 249 115 22;
  }
  .cd-env-glow-blue {
    animation: cd-env-pulse 2.5s ease-in-out infinite;
    --cd-env-glow-color: 59 130 246;
  }
  .cd-env-glow-red {
    animation: cd-env-pulse 2.5s ease-in-out infinite;
    --cd-env-glow-color: 220 38 38;
  }
  .cd-env-glow-yellow {
    animation: cd-env-pulse 2.5s ease-in-out infinite;
    --cd-env-glow-color: 234 179 8;
  }
}
@keyframes cd-env-pulse {
  0%, 100% {
    box-shadow: 0 0 4px 1px rgb(var(--cd-env-glow-color) / 0.4), 0 0 8px 2px rgb(var(--cd-env-glow-color) / 0.2);
  }
  50% {
    box-shadow: 0 0 8px 3px rgb(var(--cd-env-glow-color) / 0.6), 0 0 16px 6px rgb(var(--cd-env-glow-color) / 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-env-glow-green, .cd-env-glow-orange, .cd-env-glow-blue, .cd-env-glow-red, .cd-env-glow-yellow {
    animation: none;
    box-shadow: 0 0 6px 2px rgb(var(--cd-env-glow-color) / 0.5), 0 0 12px 4px rgb(var(--cd-env-glow-color) / 0.25);
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-pan-x {
  syntax: "*";
  inherits: false;
}
@property --tw-pan-y {
  syntax: "*";
  inherits: false;
}
@property --tw-pinch-zoom {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-pan-x: initial;
      --tw-pan-y: initial;
      --tw-pinch-zoom: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-x-reverse: 0;
      --tw-border-style: solid;
      --tw-divide-y-reverse: 0;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --cd-trust-gauge-fill: 0%;
    }
  }
}