/* BeatUI Tailwind bundle: assumes Tailwind v4 preflight and base tokens via preset */
@layer base;
@layer components;

@layer base {
:root {
  --color-white: white;
  --color-black: black;
  --color-inherit: inherit;
  --color-red-50: oklch(0.971 0.013 17.38);
  --color-red-100: oklch(0.936 0.032 17.717);
  --color-red-200: oklch(0.885 0.062 18.334);
  --color-red-300: oklch(0.808 0.114 19.571);
  --color-red-400: oklch(0.704 0.191 22.216);
  --color-red-500: oklch(0.637 0.237 25.331);
  --color-red-600: oklch(0.577 0.245 27.325);
  --color-red-700: oklch(0.505 0.213 27.518);
  --color-red-800: oklch(0.444 0.177 26.899);
  --color-red-900: oklch(0.396 0.141 25.723);
  --color-red-950: oklch(0.258 0.092 26.042);
  --color-orange-50: oklch(0.98 0.016 73.684);
  --color-orange-100: oklch(0.954 0.038 75.164);
  --color-orange-200: oklch(0.901 0.076 70.697);
  --color-orange-300: oklch(0.837 0.128 66.29);
  --color-orange-400: oklch(0.75 0.183 55.934);
  --color-orange-500: oklch(0.705 0.213 47.604);
  --color-orange-600: oklch(0.646 0.222 41.116);
  --color-orange-700: oklch(0.553 0.195 38.402);
  --color-orange-800: oklch(0.47 0.157 37.304);
  --color-orange-900: oklch(0.408 0.123 38.172);
  --color-orange-950: oklch(0.266 0.079 36.259);
  --color-amber-50: oklch(0.987 0.022 95.277);
  --color-amber-100: oklch(0.962 0.059 95.617);
  --color-amber-200: oklch(0.924 0.12 95.746);
  --color-amber-300: oklch(0.879 0.169 91.605);
  --color-amber-400: oklch(0.828 0.189 84.429);
  --color-amber-500: oklch(0.769 0.188 70.08);
  --color-amber-600: oklch(0.666 0.179 58.318);
  --color-amber-700: oklch(0.555 0.163 48.998);
  --color-amber-800: oklch(0.473 0.137 46.201);
  --color-amber-900: oklch(0.414 0.112 45.904);
  --color-amber-950: oklch(0.279 0.077 45.635);
  --color-yellow-50: oklch(0.987 0.026 102.212);
  --color-yellow-100: oklch(0.973 0.071 103.193);
  --color-yellow-200: oklch(0.945 0.129 101.54);
  --color-yellow-300: oklch(0.905 0.182 98.111);
  --color-yellow-400: oklch(0.852 0.199 91.936);
  --color-yellow-500: oklch(0.795 0.184 86.047);
  --color-yellow-600: oklch(0.681 0.162 75.834);
  --color-yellow-700: oklch(0.554 0.135 66.442);
  --color-yellow-800: oklch(0.476 0.114 61.907);
  --color-yellow-900: oklch(0.421 0.095 57.708);
  --color-yellow-950: oklch(0.286 0.066 53.813);
  --color-lime-50: oklch(0.986 0.031 120.757);
  --color-lime-100: oklch(0.967 0.067 122.328);
  --color-lime-200: oklch(0.938 0.127 124.321);
  --color-lime-300: oklch(0.897 0.196 126.665);
  --color-lime-400: oklch(0.841 0.238 128.85);
  --color-lime-500: oklch(0.768 0.233 130.85);
  --color-lime-600: oklch(0.648 0.2 131.684);
  --color-lime-700: oklch(0.532 0.157 131.589);
  --color-lime-800: oklch(0.453 0.124 130.933);
  --color-lime-900: oklch(0.405 0.101 131.063);
  --color-lime-950: oklch(0.274 0.072 132.109);
  --color-green-50: oklch(0.982 0.018 155.826);
  --color-green-100: oklch(0.962 0.044 156.743);
  --color-green-200: oklch(0.925 0.084 155.995);
  --color-green-300: oklch(0.871 0.15 154.449);
  --color-green-400: oklch(0.792 0.209 151.711);
  --color-green-500: oklch(0.723 0.219 149.579);
  --color-green-600: oklch(0.627 0.194 149.214);
  --color-green-700: oklch(0.527 0.154 150.069);
  --color-green-800: oklch(0.448 0.119 151.328);
  --color-green-900: oklch(0.393 0.095 152.535);
  --color-green-950: oklch(0.266 0.065 152.934);
  --color-emerald-50: oklch(0.979 0.021 166.113);
  --color-emerald-100: oklch(0.95 0.052 163.051);
  --color-emerald-200: oklch(0.905 0.093 164.15);
  --color-emerald-300: oklch(0.845 0.143 164.978);
  --color-emerald-400: oklch(0.765 0.177 163.223);
  --color-emerald-500: oklch(0.696 0.17 162.48);
  --color-emerald-600: oklch(0.596 0.145 163.225);
  --color-emerald-700: oklch(0.508 0.118 165.612);
  --color-emerald-800: oklch(0.432 0.095 166.913);
  --color-emerald-900: oklch(0.378 0.077 168.94);
  --color-emerald-950: oklch(0.262 0.051 172.552);
  --color-teal-50: oklch(0.984 0.014 180.72);
  --color-teal-100: oklch(0.953 0.051 180.801);
  --color-teal-200: oklch(0.91 0.096 180.426);
  --color-teal-300: oklch(0.855 0.138 181.071);
  --color-teal-400: oklch(0.777 0.152 181.912);
  --color-teal-500: oklch(0.704 0.14 182.503);
  --color-teal-600: oklch(0.6 0.118 184.704);
  --color-teal-700: oklch(0.511 0.096 186.391);
  --color-teal-800: oklch(0.437 0.078 188.216);
  --color-teal-900: oklch(0.386 0.063 188.416);
  --color-teal-950: oklch(0.277 0.046 192.524);
  --color-cyan-50: oklch(0.984 0.019 200.873);
  --color-cyan-100: oklch(0.956 0.045 203.388);
  --color-cyan-200: oklch(0.917 0.08 205.041);
  --color-cyan-300: oklch(0.865 0.127 207.078);
  --color-cyan-400: oklch(0.789 0.154 211.53);
  --color-cyan-500: oklch(0.715 0.143 215.221);
  --color-cyan-600: oklch(0.609 0.126 221.723);
  --color-cyan-700: oklch(0.52 0.105 223.128);
  --color-cyan-800: oklch(0.45 0.085 224.283);
  --color-cyan-900: oklch(0.398 0.07 227.392);
  --color-cyan-950: oklch(0.302 0.056 229.695);
  --color-sky-50: oklch(0.977 0.013 236.62);
  --color-sky-100: oklch(0.951 0.026 236.824);
  --color-sky-200: oklch(0.901 0.058 230.902);
  --color-sky-300: oklch(0.828 0.111 230.318);
  --color-sky-400: oklch(0.746 0.16 232.661);
  --color-sky-500: oklch(0.685 0.169 237.323);
  --color-sky-600: oklch(0.588 0.158 241.966);
  --color-sky-700: oklch(0.5 0.134 242.749);
  --color-sky-800: oklch(0.443 0.11 240.79);
  --color-sky-900: oklch(0.391 0.09 240.876);
  --color-sky-950: oklch(0.293 0.066 243.157);
  --color-blue-50: oklch(0.97 0.014 254.604);
  --color-blue-100: oklch(0.932 0.032 255.585);
  --color-blue-200: oklch(0.882 0.059 254.128);
  --color-blue-300: oklch(0.809 0.105 251.813);
  --color-blue-400: oklch(0.707 0.165 254.624);
  --color-blue-500: oklch(0.623 0.214 259.815);
  --color-blue-600: oklch(0.546 0.245 262.881);
  --color-blue-700: oklch(0.488 0.243 264.376);
  --color-blue-800: oklch(0.424 0.199 265.638);
  --color-blue-900: oklch(0.379 0.146 265.522);
  --color-blue-950: oklch(0.282 0.091 267.935);
  --color-indigo-50: oklch(0.962 0.018 272.314);
  --color-indigo-100: oklch(0.93 0.034 272.788);
  --color-indigo-200: oklch(0.87 0.065 274.039);
  --color-indigo-300: oklch(0.785 0.115 274.713);
  --color-indigo-400: oklch(0.673 0.182 276.935);
  --color-indigo-500: oklch(0.585 0.233 277.117);
  --color-indigo-600: oklch(0.511 0.262 276.966);
  --color-indigo-700: oklch(0.457 0.24 277.023);
  --color-indigo-800: oklch(0.398 0.195 277.366);
  --color-indigo-900: oklch(0.359 0.144 278.697);
  --color-indigo-950: oklch(0.257 0.09 281.288);
  --color-violet-50: oklch(0.969 0.016 293.756);
  --color-violet-100: oklch(0.943 0.029 294.588);
  --color-violet-200: oklch(0.894 0.057 293.283);
  --color-violet-300: oklch(0.811 0.111 293.571);
  --color-violet-400: oklch(0.702 0.183 293.541);
  --color-violet-500: oklch(0.606 0.25 292.717);
  --color-violet-600: oklch(0.541 0.281 293.009);
  --color-violet-700: oklch(0.491 0.27 292.581);
  --color-violet-800: oklch(0.432 0.232 292.759);
  --color-violet-900: oklch(0.38 0.189 293.745);
  --color-violet-950: oklch(0.283 0.141 291.089);
  --color-purple-50: oklch(0.977 0.014 308.299);
  --color-purple-100: oklch(0.946 0.033 307.174);
  --color-purple-200: oklch(0.902 0.063 306.703);
  --color-purple-300: oklch(0.827 0.119 306.383);
  --color-purple-400: oklch(0.714 0.203 305.504);
  --color-purple-500: oklch(0.627 0.265 303.9);
  --color-purple-600: oklch(0.558 0.288 302.321);
  --color-purple-700: oklch(0.496 0.265 301.924);
  --color-purple-800: oklch(0.438 0.218 303.724);
  --color-purple-900: oklch(0.381 0.176 304.987);
  --color-purple-950: oklch(0.291 0.149 302.717);
  --color-fuchsia-50: oklch(0.977 0.017 320.058);
  --color-fuchsia-100: oklch(0.952 0.037 318.852);
  --color-fuchsia-200: oklch(0.903 0.076 319.62);
  --color-fuchsia-300: oklch(0.833 0.145 321.434);
  --color-fuchsia-400: oklch(0.74 0.238 322.16);
  --color-fuchsia-500: oklch(0.667 0.295 322.15);
  --color-fuchsia-600: oklch(0.591 0.293 322.896);
  --color-fuchsia-700: oklch(0.518 0.253 323.949);
  --color-fuchsia-800: oklch(0.452 0.211 324.591);
  --color-fuchsia-900: oklch(0.401 0.17 325.612);
  --color-fuchsia-950: oklch(0.293 0.136 325.661);
  --color-pink-50: oklch(0.971 0.014 343.198);
  --color-pink-100: oklch(0.948 0.028 342.258);
  --color-pink-200: oklch(0.899 0.061 343.231);
  --color-pink-300: oklch(0.823 0.12 346.018);
  --color-pink-400: oklch(0.718 0.202 349.761);
  --color-pink-500: oklch(0.656 0.241 354.308);
  --color-pink-600: oklch(0.592 0.249 0.584);
  --color-pink-700: oklch(0.525 0.223 3.958);
  --color-pink-800: oklch(0.459 0.187 3.815);
  --color-pink-900: oklch(0.408 0.153 2.432);
  --color-pink-950: oklch(0.284 0.109 3.907);
  --color-rose-50: oklch(0.969 0.015 12.422);
  --color-rose-100: oklch(0.941 0.03 12.58);
  --color-rose-200: oklch(0.892 0.058 10.001);
  --color-rose-300: oklch(0.81 0.117 11.638);
  --color-rose-400: oklch(0.712 0.194 13.428);
  --color-rose-500: oklch(0.645 0.246 16.439);
  --color-rose-600: oklch(0.586 0.253 17.585);
  --color-rose-700: oklch(0.514 0.222 16.935);
  --color-rose-800: oklch(0.455 0.188 13.697);
  --color-rose-900: oklch(0.41 0.159 10.272);
  --color-rose-950: oklch(0.271 0.105 12.094);
  --color-slate-50: oklch(0.984 0.003 247.858);
  --color-slate-100: oklch(0.968 0.007 247.896);
  --color-slate-200: oklch(0.929 0.013 255.508);
  --color-slate-300: oklch(0.869 0.022 252.894);
  --color-slate-400: oklch(0.704 0.04 256.788);
  --color-slate-500: oklch(0.554 0.046 257.417);
  --color-slate-600: oklch(0.446 0.043 257.281);
  --color-slate-700: oklch(0.372 0.044 257.287);
  --color-slate-800: oklch(0.279 0.041 260.031);
  --color-slate-900: oklch(0.208 0.042 265.755);
  --color-slate-950: oklch(0.129 0.042 264.695);
  --color-gray-50: oklch(0.985 0.002 247.839);
  --color-gray-100: oklch(0.967 0.003 264.542);
  --color-gray-200: oklch(0.928 0.006 264.531);
  --color-gray-300: oklch(0.872 0.01 258.338);
  --color-gray-400: oklch(0.707 0.022 261.325);
  --color-gray-500: oklch(0.551 0.027 264.364);
  --color-gray-600: oklch(0.446 0.03 256.802);
  --color-gray-700: oklch(0.373 0.034 259.733);
  --color-gray-800: oklch(0.278 0.033 256.848);
  --color-gray-900: oklch(0.21 0.034 264.665);
  --color-gray-950: oklch(0.13 0.028 261.692);
  --color-zinc-50: oklch(0.985 0 0);
  --color-zinc-100: oklch(0.967 0.001 286.375);
  --color-zinc-200: oklch(0.92 0.004 286.32);
  --color-zinc-300: oklch(0.871 0.006 286.286);
  --color-zinc-400: oklch(0.705 0.015 286.067);
  --color-zinc-500: oklch(0.552 0.016 285.938);
  --color-zinc-600: oklch(0.442 0.017 285.786);
  --color-zinc-700: oklch(0.37 0.013 285.805);
  --color-zinc-800: oklch(0.274 0.006 286.033);
  --color-zinc-900: oklch(0.21 0.006 285.885);
  --color-zinc-950: oklch(0.141 0.005 285.823);
  --color-neutral-50: oklch(0.985 0 0);
  --color-neutral-100: oklch(0.97 0 0);
  --color-neutral-200: oklch(0.922 0 0);
  --color-neutral-300: oklch(0.87 0 0);
  --color-neutral-400: oklch(0.708 0 0);
  --color-neutral-500: oklch(0.556 0 0);
  --color-neutral-600: oklch(0.439 0 0);
  --color-neutral-700: oklch(0.371 0 0);
  --color-neutral-800: oklch(0.269 0 0);
  --color-neutral-900: oklch(0.205 0 0);
  --color-neutral-950: oklch(0.145 0 0);
  --color-stone-50: oklch(0.985 0.001 106.423);
  --color-stone-100: oklch(0.97 0.001 106.424);
  --color-stone-200: oklch(0.923 0.003 48.717);
  --color-stone-300: oklch(0.869 0.005 56.366);
  --color-stone-400: oklch(0.709 0.01 56.259);
  --color-stone-500: oklch(0.553 0.013 58.071);
  --color-stone-600: oklch(0.444 0.011 73.639);
  --color-stone-700: oklch(0.374 0.01 67.558);
  --color-stone-800: oklch(0.268 0.007 34.298);
  --color-stone-900: oklch(0.216 0.006 56.043);
  --color-stone-950: oklch(0.147 0.004 49.25);
  --spacing-none: 0;
  --spacing-px: 1px;
  --spacing-base: 0.25rem;
  --spacing-xs: calc(var(--spacing-base) / 2);
  --spacing-sm: var(--spacing-base);
  --spacing-md: calc(var(--spacing-base) * 2);
  --spacing-lg: calc(var(--spacing-base) * 4);
  --spacing-xl: calc(var(--spacing-base) * 6);
  --spacing-2xl: calc(var(--spacing-base) * 8);
  --spacing-3xl: calc(var(--spacing-base) * 12);
  --spacing-4xl: calc(var(--spacing-base) * 16);
  --spacing-full: 2000px;
  --font-size-3xs: 0.5rem;
  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 6rem;
  --font-size-9xl: 8rem;
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --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;
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  --font-family-sans:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-serif:
    ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-family-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
    monospace;
  --font-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
    monospace;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --radius-none: 0;
  --radius-xs: calc(var(--spacing-base) / 2);
  --radius-sm: var(--spacing-base);
  --radius-md: calc(var(--spacing-base) * 1.5);
  --radius-lg: calc(var(--spacing-base) * 2);
  --radius-xl: calc(var(--spacing-base) * 3);
  --radius-full: 9999px;
  --shadow-none: none;
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --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);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-top-2xs: 0 -1px rgb(0 0 0 / 0.05);
  --shadow-top-xs: 0 -1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-top-sm:
    0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-top-md:
    0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-top-lg:
    0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-top-xl:
    0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-top-2xl: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
  --motion-duration-instant: 0s;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 320ms;
  --motion-duration-relaxed: 480ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-emphasized: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-exit: cubic-bezier(0.8, 0, 0.6, 1);
  --text-shadow-none: none;
  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
  --text-shadow-sm:
    0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075),
    0px 2px 2px rgb(0 0 0 / 0.075);
  --text-shadow-md:
    0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1),
    0px 2px 4px rgb(0 0 0 / 0.1);
  --text-shadow-lg:
    0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1),
    0px 4px 8px rgb(0 0 0 / 0.1);
  --z-index-base: 0;
  --z-index-raised: 10;
  --z-index-navigation: 20;
  --z-index-sidebar: 20;
  --z-index-overlay: 50;
  --z-index-modal: 60;
  --z-index-tooltip: 70;
  --z-index-popover: 80;
  --z-index-notification: 90;
  --z-index-maximum: 100;
}

}
@layer base {
:root {
  --color-primary-50: var(--color-blue-50);
  --color-primary-100: var(--color-blue-100);
  --color-primary-200: var(--color-blue-200);
  --color-primary-300: var(--color-blue-300);
  --color-primary-400: var(--color-blue-400);
  --color-primary-500: var(--color-blue-500);
  --color-primary-600: var(--color-blue-600);
  --color-primary-700: var(--color-blue-700);
  --color-primary-800: var(--color-blue-800);
  --color-primary-900: var(--color-blue-900);
  --color-primary-950: var(--color-blue-950);
  --color-secondary-50: var(--color-gray-50);
  --color-secondary-100: var(--color-gray-100);
  --color-secondary-200: var(--color-gray-200);
  --color-secondary-300: var(--color-gray-300);
  --color-secondary-400: var(--color-gray-400);
  --color-secondary-500: var(--color-gray-500);
  --color-secondary-600: var(--color-gray-600);
  --color-secondary-700: var(--color-gray-700);
  --color-secondary-800: var(--color-gray-800);
  --color-secondary-900: var(--color-gray-900);
  --color-secondary-950: var(--color-gray-950);
  --color-base-50: var(--color-gray-50);
  --color-base-100: var(--color-gray-100);
  --color-base-200: var(--color-gray-200);
  --color-base-300: var(--color-gray-300);
  --color-base-400: var(--color-gray-400);
  --color-base-500: var(--color-gray-500);
  --color-base-600: var(--color-gray-600);
  --color-base-700: var(--color-gray-700);
  --color-base-800: var(--color-gray-800);
  --color-base-900: var(--color-gray-900);
  --color-base-950: var(--color-gray-950);
  --color-success-50: var(--color-green-50);
  --color-success-100: var(--color-green-100);
  --color-success-200: var(--color-green-200);
  --color-success-300: var(--color-green-300);
  --color-success-400: var(--color-green-400);
  --color-success-500: var(--color-green-500);
  --color-success-600: var(--color-green-600);
  --color-success-700: var(--color-green-700);
  --color-success-800: var(--color-green-800);
  --color-success-900: var(--color-green-900);
  --color-success-950: var(--color-green-950);
  --color-warning-50: var(--color-amber-50);
  --color-warning-100: var(--color-amber-100);
  --color-warning-200: var(--color-amber-200);
  --color-warning-300: var(--color-amber-300);
  --color-warning-400: var(--color-amber-400);
  --color-warning-500: var(--color-amber-500);
  --color-warning-600: var(--color-amber-600);
  --color-warning-700: var(--color-amber-700);
  --color-warning-800: var(--color-amber-800);
  --color-warning-900: var(--color-amber-900);
  --color-warning-950: var(--color-amber-950);
  --color-danger-50: var(--color-red-50);
  --color-danger-100: var(--color-red-100);
  --color-danger-200: var(--color-red-200);
  --color-danger-300: var(--color-red-300);
  --color-danger-400: var(--color-red-400);
  --color-danger-500: var(--color-red-500);
  --color-danger-600: var(--color-red-600);
  --color-danger-700: var(--color-red-700);
  --color-danger-800: var(--color-red-800);
  --color-danger-900: var(--color-red-900);
  --color-danger-950: var(--color-red-950);
  --color-info-50: var(--color-blue-50);
  --color-info-100: var(--color-blue-100);
  --color-info-200: var(--color-blue-200);
  --color-info-300: var(--color-blue-300);
  --color-info-400: var(--color-blue-400);
  --color-info-500: var(--color-blue-500);
  --color-info-600: var(--color-blue-600);
  --color-info-700: var(--color-blue-700);
  --color-info-800: var(--color-blue-800);
  --color-info-900: var(--color-blue-900);
  --color-info-950: var(--color-blue-950);
  --bg-background-light: var(--color-base-50);
  --bg-surface-light: var(--color-base-100);
  --bg-subtle-light: var(--color-base-200);
  --bg-elevated-light: var(--color-base-300);
  --bg-raised-light: var(--color-base-400);
  --bg-overlay-light: var(--color-base-500);
  --bg-background-dark: var(--color-base-950);
  --bg-surface-dark: var(--color-base-900);
  --bg-subtle-dark: var(--color-base-800);
  --bg-elevated-dark: var(--color-base-700);
  --bg-raised-dark: var(--color-base-600);
  --bg-overlay-dark: var(--color-base-500);
  --text-normal-light: var(--color-base-900);
  --text-muted-light: var(--color-base-600);
  --text-inverted-light: var(--color-base-100);
  --text-normal-dark: var(--color-base-100);
  --text-muted-dark: var(--color-base-400);
  --text-inverted-dark: var(--color-base-900);
  --border-border-light: var(--color-base-200);
  --border-divider-light: var(--color-base-300);
  --border-inverted-light: var(--color-base-100);
  --border-border-dark: var(--color-base-700);
  --border-divider-dark: var(--color-base-600);
  --border-inverted-dark: var(--color-base-900);
  --interactive-focus-light: var(--color-primary-700);
  --interactive-hover-light: var(--color-base-100);
  --interactive-active-light: var(--color-base-200);
  --interactive-focus-dark: var(--color-primary-300);
  --interactive-hover-dark: var(--color-base-800);
  --interactive-active-dark: var(--color-base-700);
  --font-body: var(--font-family-sans);
  --font-heading: var(--font-family-sans);
  --font-display: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
  --font-ui: var(--font-family-sans);
  --font-prose: var(--font-family-serif);
  --default-font-family: var(--font-body);
  --default-heading-font-family: var(--font-heading);
  --default-display-font-family: var(--font-display);
  --default-ui-font-family: var(--font-ui);
  --default-prose-font-family: var(--font-prose);
  --default-mono-font-family: var(--font-mono);
  --radius-control: var(--radius-md);
  --radius-control-sm: var(--radius-sm);
  --radius-control-xs: var(--radius-xs);
  --radius-button: var(--radius-md);
  --radius-surface: var(--radius-lg);
  --radius-overlay: var(--radius-lg);
  --radius-popover: var(--radius-md);
  --radius-pill: var(--radius-full);
  --radius-focus: var(--radius-sm);
  --shadow-surface: var(--shadow-sm);
  --shadow-surface-elevated: var(--shadow-md);
  --shadow-popover: var(--shadow-lg);
  --shadow-overlay: var(--shadow-xl);
  --shadow-button: var(--shadow-xs);
  --motion-transition-fast: var(--motion-duration-fast);
  --motion-transition-medium: var(--motion-duration-base);
  --motion-transition-slow: var(--motion-duration-slow);
  --motion-transition-overlay: var(--motion-duration-relaxed);
  --motion-transition-emphasis: var(--motion-duration-fast);
  --motion-easing-standard: var(--motion-easing-standard);
  --motion-easing-emphasis: var(--motion-easing-emphasized);
  --motion-easing-entrance: var(--motion-easing-entrance);
  --motion-easing-exit: var(--motion-easing-exit);
  --spacing-stack-2xs: calc(var(--spacing-base) / 2);
  --spacing-stack-xs: calc(var(--spacing-base) * 1);
  --spacing-stack-sm: calc(var(--spacing-base) * 2);
  --spacing-stack-md: calc(var(--spacing-base) * 3);
  --spacing-stack-lg: calc(var(--spacing-base) * 4);
  --spacing-stack-xl: calc(var(--spacing-base) * 6);
  --text-shadow-button-filled: var(--text-shadow-sm);
  --text-shadow-button-light: var(--text-shadow-xs);
  --text-shadow-button-default: var(--text-shadow-2xs);
}

}
@layer base {
/* Tailwind-specific reset additions for BeatUI components.
 * This file stays lean to avoid duplicating Tailwind's preflight.
 * Populate with BeatUI-only overrides as they are identified.
 */

}
@layer base {
/* BeatUI theme helpers */
.b-dark {
  color-scheme: dark;
  color: var(--text-normal-dark);
  background-color: var(--bg-background-dark);
}

.b-light {
  color-scheme: light;
  color: var(--text-normal-light);
  background-color: var(--bg-background-light);
}

.b-dark *:focus-visible {
  outline-color: var(--interactive-focus-dark);
}

.b-light *:focus-visible {
  outline-color: var(--interactive-focus-light);
}

.b-ltr {
  direction: ltr;
  text-align: start;
}

.b-rtl {
  direction: rtl;
  text-align: start;
}

.b-ltr *:focus-visible,
.b-rtl *:focus-visible {
  outline-offset: 2px;
}

.b-rtl input,
.b-rtl textarea,
.b-rtl select {
  text-align: start;
}

.b-rtl input[type='number'] {
  text-align: end;
}

.b-rtl table {
  text-align: start;
}

.b-rtl th,
.b-rtl td {
  text-align: start;
}

.b-rtl blockquote,
.b-ltr blockquote {
  border-inline-start: 4px solid var(--color-base-300);
  border-inline-end: none;
  padding-inline-start: 1rem;
  padding-inline-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

}
@layer base {
/* Consistent Focus Styles for All Focusable Components */

/* Base focus style for all focusable elements */
*:focus-visible {
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-focus, var(--radius-sm));
}

/* Dark mode focus styles */
.b-dark *:focus-visible {
  outline-color: var(--interactive-focus-dark);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline-width: 2px;
    outline-offset: 1px;
  }
}

/* Focus styles for specific component types */

/* Button-like elements */
button:focus-visible,
[role='button']:focus-visible,
.bc-button:focus-visible {
  outline-offset: -2px;
}

/* Input-like elements */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible,
.bc-input:focus-visible {
  outline: none;
}

/* Link elements */
a:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-focus, var(--radius-xs));
}

/* Custom component focus styles */
.bc-switch:focus-visible {
  outline: none; /* Remove outline from container */
}

.bc-switch:focus-visible .bc-switch__track {
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-pill, var(--radius-full));
}

.b-dark .bc-switch:focus-visible .bc-switch__track {
  outline-color: var(--interactive-focus-dark);
}

/* Focus styles for checkbox and radio are handled by the individual components */
.bc-checkbox-input__checkbox:focus-visible,
.bc-radio-input__radio:focus-visible {
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-focus, var(--radius-sm));
}

.b-dark .bc-checkbox-input__checkbox:focus-visible,
.b-dark .bc-radio-input__radio:focus-visible {
  outline-color: var(--interactive-focus-dark);
}

/* Modal and overlay focus management */
.bc-modal:focus-visible,
.bc-popover:focus-visible,
.bc-tooltip:focus-visible {
  outline: none; /* These should manage focus internally */
}

/* Focus trap containers should not show focus outline */
[data-focus-trap]:focus-visible {
  outline: none;
}

/* Ensure focus is visible on keyboard navigation */
.js-focus-visible *:focus:not(.focus-visible) {
  outline: none;
}

/* Smooth focus transition when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  *:focus-visible {
    transition:
      outline-color 0.15s ease-in-out,
      outline-offset 0.15s ease-in-out;
  }
}

}
@layer base {
/* Accessibility helpers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Spinners rely on Tailwind's `animate-spin` utility; a standalone fallback
   lives in the standalone bundle's utility layer. */

}
@layer components {
@layer components {
  .bc-action-card {
    /* Default CSS variables - can be overridden by inline styles or hover states */
    --action-card-bg: var(--bg-background-light);
    --action-card-border: var(--border-divider-light);
    --action-card-title-color: var(--text-normal-light);
    --action-card-description-color: var(--text-muted-light);

    /* Layout */
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);

    /* Spacing */
    padding: var(--spacing-md);

    /* Border */
    border: 2px solid var(--action-card-border);
    border-radius: var(--radius-lg);

    /* Background */
    background-color: var(--action-card-bg);

    /* Transitions */
    transition:
      border-color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  /* Icon container */
  .bc-action-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Content container */
  .bc-action-card__content {
    flex: 1;
    min-width: 0; /* Allow text truncation */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  /* Title */
  .bc-action-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--action-card-title-color);
    line-height: var(--line-height-tight);
  }

  /* Description */
  .bc-action-card__description {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    color: var(--action-card-description-color);
    line-height: var(--line-height-normal);
  }

  /* Clickable state */
  .bc-action-card--clickable {
    cursor: pointer;
    user-select: none;
  }

  .bc-action-card--clickable:hover {
    --action-card-bg: var(--bg-surface-light);
    box-shadow: var(--shadow-md);
  }

  .bc-action-card--clickable:active {
    transform: translateY(1px);
  }

  /* Active state */
  .bc-action-card--active {
    --action-card-border: var(--color-primary-500);
    box-shadow: var(--shadow-sm);
  }

  .bc-action-card--active:hover {
    --action-card-border: var(--color-primary-600);
  }

  .b-dark .bc-action-card--active {
    --action-card-border: var(--color-primary-400);
  }

  .b-dark .bc-action-card--active:hover {
    --action-card-border: var(--color-primary-300);
  }

  /* Disabled state */
  .bc-action-card--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Size variants */
  .bc-action-card--xs {
    padding: var(--spacing-xs);
    gap: var(--spacing-xs);
  }

  .bc-action-card--xs .bc-action-card__title {
    font-size: var(--font-size-sm);
  }

  .bc-action-card--xs .bc-action-card__description {
    font-size: var(--font-size-xs);
  }

  .bc-action-card--sm {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  .bc-action-card--sm .bc-action-card__title {
    font-size: var(--font-size-md);
  }

  .bc-action-card--sm .bc-action-card__description {
    font-size: var(--font-size-sm);
  }

  .bc-action-card--lg {
    padding: var(--spacing-xl);
    gap: var(--spacing-lg);
  }

  .bc-action-card--lg .bc-action-card__title {
    font-size: var(--font-size-xl);
  }

  .bc-action-card--lg .bc-action-card__description {
    font-size: var(--font-size-lg);
  }

  .bc-action-card--xl {
    padding: var(--spacing-2xl);
    gap: var(--spacing-xl);
  }

  .bc-action-card--xl .bc-action-card__title {
    font-size: var(--font-size-2xl);
  }

  .bc-action-card--xl .bc-action-card__description {
    font-size: var(--font-size-xl);
  }

  /* Focus styles for accessibility */
  .bc-action-card--clickable:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .bc-action-card {
      transition: none;
    }

    .bc-action-card--clickable:active {
      transform: none;
    }
  }
}

/* Animated Toggle Component - Composable Animation System */
.bc-animated-toggle {
  --animation-duration: 1s;
  --animation-easing: cubic-bezier(0.2, 0, 0, 1);
  --scale-factor: 0.95;
  --transform-origin: center;

  transition-property: opacity, transform;
  transition-duration: var(--animation-duration);
  transition-timing-function: var(--animation-easing);
  transform-origin: var(--transform-origin);
}

/* Status: closed - element is hidden */
.bc-animated-toggle--closed {
  display: none;
}

/* Status: start-opening - element becomes visible but hasn't started animating */
.bc-animated-toggle--start-opening {
  display: initial;
}

/* Animation: NONE - no animation, just show/hide */
.bc-animated-toggle--none {
  transition-property: none;
  transition-duration: 0s;
}

/* Animation: FADE */
.bc-animated-toggle--fade.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--start-opening {
  opacity: 0;
}

.bc-animated-toggle--fade.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--start-closing {
  opacity: 1;
}

/* Animation: SLIDE - individual directions */
.bc-animated-toggle--slide-right.bc-animated-toggle--closing,
.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening {
  transform: translateX(-100%);
}

.bc-animated-toggle--slide-right.bc-animated-toggle--opening,
.bc-animated-toggle--slide-right.bc-animated-toggle--opened,
.bc-animated-toggle--slide-right.bc-animated-toggle--start-closing {
  transform: translateX(0);
}

.bc-animated-toggle--slide-left.bc-animated-toggle--closing,
.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening {
  transform: translateX(100%);
}

.bc-animated-toggle--slide-left.bc-animated-toggle--opening,
.bc-animated-toggle--slide-left.bc-animated-toggle--opened,
.bc-animated-toggle--slide-left.bc-animated-toggle--start-closing {
  transform: translateX(0);
}

.bc-animated-toggle--slide-up.bc-animated-toggle--closing,
.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening {
  transform: translateY(100%);
}

.bc-animated-toggle--slide-up.bc-animated-toggle--opening,
.bc-animated-toggle--slide-up.bc-animated-toggle--opened,
.bc-animated-toggle--slide-up.bc-animated-toggle--start-closing {
  transform: translateY(0);
}

.bc-animated-toggle--slide-down.bc-animated-toggle--closing,
.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening {
  transform: translateY(-100%);
}

.bc-animated-toggle--slide-down.bc-animated-toggle--opening,
.bc-animated-toggle--slide-down.bc-animated-toggle--opened,
.bc-animated-toggle--slide-down.bc-animated-toggle--start-closing {
  transform: translateY(0);
}

/* Animation: SCALE */
.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  transform: scale(var(--scale-factor));
}

.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  transform: scale(1);
}

/* Composable animations: fade + slide combinations */
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateX(-100%);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateX(0);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateX(100%);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateX(0);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateY(100%);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateY(0);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateY(-100%);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateY(0);
}

/* Composable animations: fade + scale */
.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: scale(var(--scale-factor));
}

.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: scale(1);
}

/* Composable animations: slide + scale combinations */
.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  transform: translateX(-100%) scale(var(--scale-factor));
}

.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  transform: translateX(0) scale(1);
}

.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  transform: translateX(100%) scale(var(--scale-factor));
}

.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  transform: translateX(0) scale(1);
}

.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  transform: translateY(100%) scale(var(--scale-factor));
}

.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  transform: translateY(0) scale(1);
}

.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  transform: translateY(-100%) scale(var(--scale-factor));
}

.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  transform: translateY(0) scale(1);
}

/* Composable animations: fade + slide + scale (all three) */
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateX(-100%) scale(var(--scale-factor));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateX(100%) scale(var(--scale-factor));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateY(100%) scale(var(--scale-factor));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateY(-100%) scale(var(--scale-factor));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-animated-toggle {
    transition: none;
  }
}

/* Auth Container Component */
.bc-auth-container--styled {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: var(--spacing-2xl);
  --auth-container-bg: var(--bg-background-light);
  background-color: var(--auth-container-bg);
  border-radius: var(--radius-surface, var(--radius-lg));
  box-shadow: var(--shadow-surface, var(--shadow-md));
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Dark mode */
.b-dark .bc-auth-container--styled {
  background-color: var(--bg-surface-dark);
}

/* Mode-specific styling */
.bc-auth-container--signin {
  /* Specific styling for sign in mode if needed */
}

.bc-auth-container--signup {
  /* Specific styling for sign up mode if needed */
}

.bc-auth-container--reset-password {
  /* Specific styling for reset password mode if needed */
}

/* Responsive design */
@media (width < 40rem) {
  .bc-auth-container--styled {
    max-width: none;
    margin: 0;
    padding: var(--spacing-lg);
    border-radius: 0;
    box-shadow: var(--shadow-none, none);
    min-height: 100vh;
    justify-content: center;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-auth-container--styled {
    border: 2px solid var(--border-border-light);
  }

  .b-dark .bc-auth-container--styled {
    border-color: var(--border-border-dark);
  }
}

/* Auth Divider Component */
.bc-auth-divider {
  display: flex;
  align-items: center;
  margin: var(--spacing-md) 0;
}

.bc-auth-divider__line {
  flex: 1;
  height: 1px;
  background-color: var(--border-divider-light);
}

.b-dark .bc-auth-divider__line {
  background-color: var(--border-divider-dark);
}

.bc-auth-divider__text {
  font-size: var(--font-size-sm);
  color: var(--color-black);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--spacing-sm);
  background-color: var(--border-divider-light);
  border-radius: var(--radius-full);
}

.b-dark .bc-auth-divider__text {
  color: var(--color-white);
  background-color: var(--border-divider-dark);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-auth-divider__line {
    height: 2px;
  }
}

/* Auth Form Component */
.bc-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xl, var(--spacing-xl));
  width: 100%;
}

/* Form title */
.bc-auth-form__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--text-normal-light);
  margin: 0 0 var(--spacing-md) 0;
}

.b-dark .bc-auth-form__title {
  color: var(--text-normal-dark);
}

/* Form description */
.bc-auth-form__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted-light);
  text-align: center;
  margin: 0 0 var(--spacing-lg) 0;
  line-height: var(--line-height-relaxed);
}

.b-dark .bc-auth-form__description {
  color: var(--text-muted-dark);
}

/* Social login section */
.bc-auth-form__social {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
}

/* Form fields */
.bc-auth-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xl, var(--spacing-xl));
}

.bc-auth-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
}

/* Remember me checkbox */
.bc-auth-form__remember-me {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-sm));
}

.bc-auth-form__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-sm));
  font-size: var(--font-size-sm);
  color: var(--text-normal-light);
  cursor: pointer;
  user-select: none;
}

.b-dark .bc-auth-form__checkbox-label {
  color: var(--text-normal-dark);
}

/* Terms acceptance */
.bc-auth-form__terms {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xs, var(--spacing-xs));
}

/* Field error */
.bc-auth-form__field-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger-600);
  margin-top: var(--spacing-xs);
}

.b-dark .bc-auth-form__field-error {
  color: var(--color-danger-400);
}

/* Submit button */
.bc-auth-form__submit {
  width: 100%;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
}

/* Footer links */
.bc-auth-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm, var(--spacing-sm));
  align-items: center;
  text-align: center;
}

.bc-auth-form__link {
  background: none;
  border: none;
  color: var(--color-primary-600);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-auth-form__link:hover {
  color: var(--color-primary-700);
  background-color: var(--color-primary-50);
}

.bc-auth-form__link:focus-visible {
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: 2px;
}

.b-dark .bc-auth-form__link {
  color: var(--color-primary-400);
}

.b-dark .bc-auth-form__link:hover {
  color: var(--color-primary-300);
  background-color: var(--color-primary-950);
}

.b-dark .bc-auth-form__link:focus-visible {
  outline-color: var(--interactive-focus-dark);
}

/* Responsive adjustments */
@media (width < 40rem) {
  .bc-auth-form {
    gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
  }

  .bc-auth-form__title {
    font-size: var(--font-size-xl);
  }

  .bc-auth-form__fields {
    gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
  }
}

@media (prefers-contrast: high) {
  /* High contrast mode support */
  .bc-auth-form__link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-auth-form__link {
    transition: none;
  }
}

.bc-social-login-buttons.bc-stack {
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  padding-inline: calc(var(--spacing-base) * 8);
  width: 100%;
}

.bc-social-login-button {
  width: 100%;
}

.bc-social-login-button__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
}

.bc-social-login-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  padding: calc(var(--spacing-base) * 2);
}

.b-dark .bc-social-login-button__icon {
  background-color: var(--bg-elevated-dark);
}

.bc-social-login-button__icon-inner {
  color: var(--color-base-900);
}

.b-dark .bc-social-login-button__icon-inner {
  color: var(--text-normal-dark);
}

.bc-social-login-button__label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: calc(var(--spacing-base) * 4);
}

.bc-social-login-button--google .bc-social-login-button__icon {
  background-color: var(--color-white);
}

.bc-social-login-button--github .bc-social-login-button__icon {
  background-color: var(--color-black);
}

.bc-social-login-button--github .bc-social-login-button__icon-inner {
  color: var(--color-white);
}

.bc-social-login-button--apple .bc-social-login-button__icon {
  background-color: var(--color-black);
}

.bc-social-login-button--apple .bc-social-login-button__icon-inner {
  color: var(--color-white);
}

/* Badge Component */
.bc-badge {
  --badge-bg: transparent;
  --badge-bg-dark: transparent;
  --badge-bg-hover: var(--badge-bg);
  --badge-bg-hover-dark: var(--badge-bg-dark);
  --badge-text: inherit;
  --badge-text-dark: inherit;
  --badge-text-hover: var(--badge-text);
  --badge-text-hover-dark: var(--badge-text-dark);
  --badge-border: transparent;
  --badge-border-dark: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--badge-border);
  font-family: var(
    --default-ui-font-family,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  font-size: inherit;
  line-height: 1;
  border-radius: var(--radius-badge, var(--radius-control, var(--radius-md)));
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  background-color: var(--badge-bg);
  color: var(--badge-text);
  white-space: nowrap;
}

.bc-badge__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(
    --badge-gap,
    var(--spacing-stack-2xs, calc(var(--spacing-base) / 2))
  );
}

/* Size variants */
.bc-badge--size-xs {
  font-size: var(--font-size-xs);
  padding: calc(var(--spacing-base) * 0.5) calc(var(--spacing-base) * 1);
  --badge-gap: calc(var(--spacing-base) * 0.25);
}

.bc-badge--size-sm {
  font-size: var(--font-size-sm);
  padding: calc(var(--spacing-base) * 0.75) calc(var(--spacing-base) * 1.5);
  --badge-gap: calc(var(--spacing-base) * 0.5);
}

.bc-badge--size-md {
  font-size: var(--font-size-base);
  padding: var(--spacing-base) calc(var(--spacing-base) * 2);
  --badge-gap: calc(var(--spacing-base) * 0.75);
}

.bc-badge--size-lg {
  font-size: var(--font-size-lg);
  padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 2.5);
  --badge-gap: var(--spacing-base);
}

.bc-badge--size-xl {
  font-size: var(--font-size-xl);
  padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 3);
  --badge-gap: calc(var(--spacing-base) * 1.25);
}

/* Circle variant - makes badge circular with equal width/height */
.bc-badge--circle {
  padding-left: 0;
  padding-right: 0;
  aspect-ratio: 1;
  border-radius: 50%;
}

.bc-badge--circle.bc-badge--size-xs {
  min-width: calc(var(--font-size-xs) + var(--spacing-base) * 1 + 3px);
}

.bc-badge--circle.bc-badge--size-sm {
  min-width: calc(var(--font-size-sm) + var(--spacing-base) * 1.5 + 3px);
}

.bc-badge--circle.bc-badge--size-md {
  min-width: calc(var(--font-size-md) + var(--spacing-base) * 2 + 3px);
}

.bc-badge--circle.bc-badge--size-lg {
  min-width: calc(var(--font-size-lg) * 1.2 + var(--spacing-base) * 2.5 + 3px);
}

.bc-badge--circle.bc-badge--size-xl {
  min-width: calc(var(--font-size-xl) * 1.2 + var(--spacing-base) * 3 + 3px);
}

/* Full width variant */
.bc-badge--full-width {
  display: flex;
  width: 100%;
}

/* Dark mode styles */
.b-dark .bc-badge {
  background-color: var(--badge-bg-dark);
  color: var(--badge-text-dark);
  border-color: var(--badge-border-dark);
}

.b-dark .bc-badge:hover {
  background-color: var(--badge-bg-hover-dark);
  color: var(--badge-text-hover-dark);
}

/* Accessibility adjustments */
@media (prefers-contrast: high) {
  .bc-badge {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-badge {
    transition: none;
  }
}

/* Button Component */
.bc-button {
  --button-bg: transparent;
  --button-bg-dark: transparent;
  --button-bg-hover: var(--button-bg);
  --button-bg-hover-dark: var(--button-bg-dark);
  --button-text: inherit;
  --button-text-dark: inherit;
  --button-text-hover: var(--button-text);
  --button-text-hover-dark: var(--button-text-dark);
  --button-border: transparent;
  --button-border-dark: transparent;
  --button-hover-decoration: none;
  --button-text-shadow: var(--text-shadow-none);
  --button-text-shadow-dark: var(--text-shadow-none);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
  border: 1.5px solid var(--button-border);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  font-family: var(
    --default-ui-font-family,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  font-size: inherit;
  line-height: 1;
  border-radius: var(--radius-button, var(--radius-control, var(--radius-md)));
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  background-color: var(--button-bg);
  color: var(--button-text);
  text-shadow: var(--button-text-shadow, var(--text-shadow-none));
}

.bc-button--full-width {
  width: 100%;
}

.bc-button > span {
  min-height: 10px;
}

.bc-button:hover:not(:disabled) {
  transform: scale(1.03);
  background-color: var(--button-bg-hover);
  color: var(--button-text-hover);
  text-decoration: var(--button-hover-decoration);
}

.bc-button:active:not(:disabled) {
  z-index: 1;
  transform: translateY(var(--spacing-base));
}

.bc-button:disabled {
  cursor: not-allowed;
}

.bc-button:disabled:not(.bc-button--loading) {
  opacity: 0.5;
}

.bc-button--size-xs {
  font-size: var(--font-size-xs);
}

.bc-button--size-sm {
  font-size: var(--font-size-sm);
}

.bc-button--size-md {
  font-size: var(--font-size-base);
}

.bc-button--size-lg {
  font-size: var(--font-size-lg);
}

.bc-button--size-xl {
  font-size: var(--font-size-xl);
}

/* Dark mode styles */
.b-dark .bc-button {
  background-color: var(--button-bg-dark);
  color: var(--button-text-dark);
  border-color: var(--button-border-dark);
  text-shadow: var(
    --button-text-shadow-dark,
    var(--button-text-shadow, var(--text-shadow-none))
  );
}

.b-dark .bc-button:hover:not(:disabled) {
  background-color: var(--button-bg-hover-dark);
  color: var(--button-text-hover-dark);
}

.b-dark .bc-button:disabled {
  color: var(--text-muted-dark);
}

/* Accessibility adjustments */
@media (prefers-contrast: high) {
  .bc-button {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-button {
    transition: none;
  }
}

/* Card Component */
.bc-card {
  --card-bg: var(--bg-background-light);
  --card-text: var(--text-normal-light);
  --card-border: var(--border-border-light);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-surface, var(--radius-lg));
  border: 1px solid var(--card-border);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-surface, var(--shadow-md));
  background-color: var(--card-bg);
  color: var(--card-text);
  transition: transform
    var(--motion-transition-medium, var(--motion-duration-base, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Card variants */
.bc-card--elevated {
  box-shadow: var(--shadow-surface-elevated, var(--shadow-lg));
}

.bc-card--flat {
  box-shadow: var(--shadow-none, none);
  --card-border: var(--border-divider-light);
}

.bc-card--outlined {
  box-shadow: var(--shadow-none, none);
  --card-border: var(--border-border-light);
}

/* Card sizes */
.bc-card--padding-xs {
  padding: var(--spacing-xs);
}

.bc-card--padding-sm {
  padding: var(--spacing-sm);
}

.bc-card--padding-md {
  padding: var(--spacing-md);
}

.bc-card--padding-lg {
  padding: var(--spacing-lg);
}

.bc-card--padding-xl {
  padding: var(--spacing-xl);
}

/* Card roundedness */
.bc-card--rounded-none {
  border-radius: 0;
}

.bc-card--rounded-sm {
  border-radius: var(--radius-sm);
}

.bc-card--rounded-md {
  border-radius: var(--radius-md);
}

.bc-card--rounded-lg {
  border-radius: var(--radius-lg);
}

.bc-card--rounded-xl {
  border-radius: var(--radius-xl);
}

.bc-card--rounded-full {
  border-radius: var(--radius-full);
}

/* Dark mode styles */
.b-dark .bc-card {
  --card-bg: var(--bg-background-dark);
  --card-border: var(--border-border-dark);
  --card-text: var(--text-normal-dark);
}

.b-dark .bc-card--elevated {
  --card-bg: var(--bg-elevated-dark);
}

.b-dark .bc-card--flat {
  --card-border: var(--border-divider-dark);
  box-shadow: var(--shadow-none, none);
}

.b-dark .bc-card--outlined {
  --card-border: var(--border-border-dark);
  box-shadow: var(--shadow-none, none);
}

/* Center Component */
.bc-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: var(--spacing-stack-lg, var(--spacing-lg));
}

/* Center Horizontal Only */
.bc-center-h {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Center gap variants */
.bc-center--gap-none {
  gap: 0;
}

.bc-center--gap-xs {
  gap: var(--spacing-stack-xs, var(--spacing-xs));
}

.bc-center--gap-sm {
  gap: var(--spacing-stack-sm, var(--spacing-sm));
}

.bc-center--gap-md {
  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
}

.bc-center--gap-lg {
  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
}

.bc-center--gap-xl {
  gap: var(--spacing-stack-xl, var(--spacing-xl));
}

/* Center content wrapper */
.bc-center__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: inherit;
}

/* Checkbox Input Component */
.bc-checkbox-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
}

.bc-checkbox-input__checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-base) * 7);
  height: calc(var(--spacing-base) * 7);
  color: var(--color-base-400);
  cursor: pointer;
  transition: color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  flex-shrink: 0;
  line-height: 0;
}

.bc-checkbox-input__checkbox--checked {
  color: var(--color-primary-600);
}

.bc-checkbox-input__checkbox--unchecked {
  color: var(--color-base-400);
}

.bc-checkbox-input__checkbox--disabled {
  cursor: not-allowed;
  color: var(--text-muted-light);
  opacity: 0.6;
}

.bc-checkbox-input__checkbox:focus-visible,
.bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
  outline: 1px solid var(--interactive-focus-light);
  outline-offset: -1px;
  border-radius: var(--radius-lg);
}

.bc-checkbox-input__label {
  cursor: pointer;
  user-select: none;
}

.b-dark .bc-checkbox-input__checkbox {
  color: var(--color-base-500);
}

.b-dark .bc-checkbox-input__checkbox--checked {
  color: var(--color-primary-400);
}

.b-dark .bc-checkbox-input__checkbox--unchecked {
  color: var(--color-base-500);
}

.b-dark .bc-checkbox-input__checkbox--disabled {
  color: var(--text-muted-dark);
}

.b-dark .bc-checkbox-input__checkbox:focus-visible,
.b-dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
  outline: 2px solid var(--interactive-focus-dark);
  outline-offset: 2px;
}

.b-dark .bc-checkbox-input__label {
  color: var(--text-normal-dark);
}

.bc-collapse {
  overflow: hidden;
  transition: height
    var(--motion-transition-slow, var(--motion-duration-slow, 0.4s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  --collapse-height: auto;
}

.bc-collapse--closed,
.bc-collapse--start-opening,
.bc-collapse--closing {
  height: 0px;
}

.bc-collapse--opening,
.bc-collapse--opened,
.bc-collapse--start-closing {
  height: var(--collapse-height);
}

/* Color Input Component (SVG blob preview overlaying native input) */

.bc-color-input__control {
  position: relative;
  display: inline-block;
  border-radius: var(--radius-control, var(--radius-md));
  overflow: visible;
  cursor: pointer;
  border: 1px solid var(--color-neutral-300);
}

.bc-color-input__control--alpha {
  /* subtle checkerboard background to visualize transparency */
  background-image:
    linear-gradient(
      45deg,
      color-mix(in srgb, var(--color-black) 8%, transparent) 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      color-mix(in srgb, var(--color-black) 8%, transparent) 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      color-mix(in srgb, var(--color-black) 8%, transparent) 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      color-mix(in srgb, var(--color-black) 8%, transparent) 75%
    );
  background-size: 10px 10px;
  background-position:
    0 0,
    0 5px,
    5px -5px,
    -5px 0px;
}

.bc-color-input__control:focus-within {
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: 2px;
}

.bc-color-input__svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none; /* ensure clicks go to the native input */
  filter: drop-shadow(
    0 1px 1px color-mix(in srgb, var(--color-black) 10%, transparent)
  );
}

.bc-input-container--error .bc-color-input__control:focus-within {
  outline: 2px solid var(--color-danger-600);
}

.bc-color-input__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  opacity: 0; /* keep accessible and clickable */
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.bc-color-input__native:disabled {
  cursor: not-allowed;
}

.bc-color-input__rgb {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.bc-color-input__alpha {
  width: 5rem;
  margin-inline-start: calc(var(--spacing-base) * 2);
}

/* Dark mode */
.b-dark .bc-color-input__control:focus-within {
  outline: 2px solid var(--interactive-focus-dark);
}

.b-dark .bc-input-container--error .bc-color-input__control:focus-within {
  outline: 2px solid var(--color-danger-400);
}

/* Responsive styles */
@media (width >=var(--breakpoint-sm)) {
  .bc-color-input__control {
    width: 2.75rem;
    height: 2.25rem;
  }
}

.bc-dropdown__search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  padding: var(--spacing-base) calc(var(--spacing-base) * 2);
  margin: 0;
  background-color: var(--color-gray-50);
  border-radius: 0;
  border-bottom: 1px solid var(--color-gray-300);
}

/* Dropdown Component */
.bc-dropdown {
  position: relative;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  padding: 0;
}

.bc-dropdown__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
}

/* Display area for selected value */
.bc-dropdown__display {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Arrow indicator */
.bc-dropdown__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin-inline-start: var(--spacing-sm);
  margin-inline-end: calc(var(--spacing-base) * -1.25);
}

/* Listbox (dropdown) */
.bc-dropdown__listbox {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-popover, var(--radius-md));
  box-shadow: var(--shadow-popover, var(--shadow-lg));
  padding: 0;
  z-index: var(--z-index-navigation);
  min-width: 12rem;
  max-height: 20rem;
  overflow-y: auto;
  outline: none;
}

/* Individual option */
.bc-dropdown__option {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-control-sm, var(--radius-sm));
  cursor: pointer;
  transition: background-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  color: var(--color-gray-900);
  background-color: transparent;
}

.bc-dropdown__option:hover {
  background-color: var(--color-gray-100);
}

.bc-dropdown__option--focused {
  background-color: var(--color-primary-100);
  color: var(--color-primary-900);
}

.bc-dropdown__option--selected {
  background-color: var(--color-primary-600);
  color: var(--color-white);
}

.bc-dropdown__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Option content layout */
.bc-dropdown__option-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-sm));
  width: 100%;
}

.bc-dropdown__option-before {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bc-dropdown__option-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-dropdown__option-after {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Option groups */
.bc-dropdown__group {
  margin: var(--spacing-xs) 0;
}

.bc-dropdown__group-label {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Separator */
.bc-dropdown__separator {
  margin: var(--spacing-xs) 0;
  border: none;
  border-top: 1px solid var(--color-gray-200);
}

/* Dark mode styles */
.b-dark .bc-dropdown__listbox {
  background-color: var(--bg-surface-dark);
  border-color: var(--border-border-dark);
  color: var(--text-normal-dark);
}

.b-dark .bc-dropdown__option {
  color: var(--text-normal-dark);
}

.b-dark .bc-dropdown__option:hover {
  background-color: var(--interactive-hover-dark);
}

.b-dark .bc-dropdown__option--focused {
  background-color: var(--color-primary-900);
  color: var(--color-primary-100);
}

.b-dark .bc-dropdown__option--selected {
  background-color: var(--color-primary-500);
  color: var(--color-white);
}

.b-dark .bc-dropdown__group-label {
  color: var(--text-muted-dark);
}

.b-dark .bc-dropdown__separator {
  border-color: var(--border-divider-dark);
}

/* Responsive styles */
@media (width >= var(--breakpoint-sm)) {
  .bc-dropdown__option {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .bc-dropdown__listbox {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
  }
}

/* Animation for dropdown appearance */
.bc-dropdown__listbox {
  animation: dropdown-appear 0.15s ease-out;
}

@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-dropdown__option--focused {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  .bc-dropdown__option--selected {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-dropdown__listbox {
    animation: none;
  }
}

.bc-control--padding-none {
  padding: 0;
}

.bc-control--padding-xs {
  padding: var(--spacing-xs);
}

.bc-control--padding-sm {
  padding: var(--spacing-sm);
}

.bc-control--padding-md {
  padding: var(--spacing-md);
}

.bc-control--padding-lg {
  padding: var(--spacing-lg);
}

.bc-control--padding-xl {
  padding: var(--spacing-xl);
}

.bc-control--padding-xs:has(> .bc-icon:only-child) {
  padding: var(--spacing-xs);
}

.bc-control--padding-sm:has(> .bc-icon:only-child) {
  padding: var(--spacing-sm);
}

.bc-control--padding-md:has(> .bc-icon:only-child) {
  padding: var(--spacing-md);
}

.bc-control--padding-lg:has(> .bc-icon:only-child) {
  padding: var(--spacing-lg);
}

.bc-control--padding-xl:has(> .bc-icon:only-child) {
  padding: var(--spacing-xl);
}

.bc-control--rounded-none {
  border-radius: 0;
}

.bc-control--rounded-xs {
  border-radius: var(--radius-xs);
}

.bc-control--rounded-sm {
  border-radius: var(--radius-sm);
}

.bc-control--rounded-md {
  border-radius: var(--radius-md);
}

.bc-control--rounded-lg {
  border-radius: var(--radius-lg);
}

.bc-control--rounded-xl {
  border-radius: var(--radius-xl);
}

.bc-control--rounded-full {
  border-radius: var(--radius-full);
}

/* Shared control font sizing to align heights across components */
.bc-control--text-size-xs {
  font-size: var(--font-size-xs);
}

.bc-control--text-size-sm {
  font-size: var(--font-size-sm);
}

.bc-control--text-size-md {
  font-size: var(--font-size-base);
}

.bc-control--text-size-lg {
  font-size: var(--font-size-lg);
}

.bc-control--text-size-xl {
  font-size: var(--font-size-xl);
}

/* Control Input Wrapper Component */
.bc-control-input-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Label header container */
.bc-control-input-wrapper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
}

/* Label container */
.bc-control-input-wrapper__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
}

/* Label text styles */
.bc-control-input-wrapper__label-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* Label text states */
.bc-control-input-wrapper__label-text--default {
  color: var(--color-gray-600);
  font-weight: var(--font-weight-semibold);
}

.bc-control-input-wrapper__label-text--disabled {
  color: var(--color-gray-500);
  font-weight: var(--font-weight-normal);
}

.bc-control-input-wrapper__label-text--error {
  color: var(--color-danger-600);
  font-weight: var(--font-weight-normal);
}

/* Required symbol */
.bc-control-input-wrapper__required {
  font-size: var(--font-size-xs);
  color: var(--color-danger-600);
  vertical-align: top;
}

/* Content container */
.bc-control-input-wrapper__content {
  /* Content styling is handled by the child components */
}

/* Description text */
.bc-control-input-wrapper__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-normal);
}

/* Error message */
.bc-control-input-wrapper__error {
  font-size: var(--font-size-sm);
  color: var(--color-danger-500);
  line-height: var(--line-height-normal);
}

/* Dark mode styles */
.b-dark .bc-control-input-wrapper__label-text--default {
  color: var(--text-normal-dark);
}

.b-dark .bc-control-input-wrapper__label-text--disabled {
  color: var(--text-muted-dark);
}

.b-dark .bc-control-input-wrapper__label-text--error {
  color: var(--color-danger-300);
}

.b-dark .bc-control-input-wrapper__required {
  color: var(--color-danger-400);
}

.b-dark .bc-control-input-wrapper__description {
  color: var(--text-muted-dark);
}

.b-dark .bc-control-input-wrapper__error {
  color: var(--color-danger-400);
}

/* Drawer Component */
.bc-drawer {
  z-index: var(--z-index-modal);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-overlay, var(--shadow-xl));
  background-color: var(--color-base-100);
  overflow: hidden;
  transition: transform
    var(--motion-transition-overlay, var(--motion-duration-slow, 0.3s))
    var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
}

/* Animation states for drawer sliding - specific transforms are defined per side below */

/* Right side animations */
.bc-drawer--side-right.bc-drawer--status-closed,
.bc-drawer--side-right.bc-drawer--status-start-closing,
.bc-drawer--side-right.bc-drawer--status-closing {
  transform: translateX(100%);
}

.bc-drawer--side-right.bc-drawer--status-start-opening,
.bc-drawer--side-right.bc-drawer--status-opening,
.bc-drawer--side-right.bc-drawer--status-opened {
  transform: translateX(0);
}

/* Left side animations */
.bc-drawer--side-left.bc-drawer--status-closed,
.bc-drawer--side-left.bc-drawer--status-start-closing,
.bc-drawer--side-left.bc-drawer--status-closing {
  transform: translateX(-100%);
}

.bc-drawer--side-left.bc-drawer--status-start-opening,
.bc-drawer--side-left.bc-drawer--status-opening,
.bc-drawer--side-left.bc-drawer--status-opened {
  transform: translateX(0);
}

/* Direction-aware inline-end animations (right in LTR, left in RTL) */
.bc-drawer--side-inline-end.bc-drawer--status-closed,
.bc-drawer--side-inline-end.bc-drawer--status-start-closing,
.bc-drawer--side-inline-end.bc-drawer--status-closing {
  transform: translateX(100%);
}

.b-rtl .bc-drawer--side-inline-end.bc-drawer--status-closed,
.b-rtl .bc-drawer--side-inline-end.bc-drawer--status-start-closing,
.b-rtl .bc-drawer--side-inline-end.bc-drawer--status-closing {
  transform: translateX(-100%);
}

.bc-drawer--side-inline-end.bc-drawer--status-start-opening,
.bc-drawer--side-inline-end.bc-drawer--status-opening,
.bc-drawer--side-inline-end.bc-drawer--status-opened {
  transform: translateX(0);
}

/* Direction-aware inline-start animations (left in LTR, right in RTL) */
.bc-drawer--side-inline-start.bc-drawer--status-closed,
.bc-drawer--side-inline-start.bc-drawer--status-start-closing,
.bc-drawer--side-inline-start.bc-drawer--status-closing {
  transform: translateX(-100%);
}

.b-rtl .bc-drawer--side-inline-start.bc-drawer--status-closed,
.b-rtl .bc-drawer--side-inline-start.bc-drawer--status-start-closing,
.b-rtl .bc-drawer--side-inline-start.bc-drawer--status-closing {
  transform: translateX(100%);
}

.bc-drawer--side-inline-start.bc-drawer--status-start-opening,
.bc-drawer--side-inline-start.bc-drawer--status-opening,
.bc-drawer--side-inline-start.bc-drawer--status-opened {
  transform: translateX(0);
}

/* Top side animations */
.bc-drawer--side-top.bc-drawer--status-closed,
.bc-drawer--side-top.bc-drawer--status-start-closing,
.bc-drawer--side-top.bc-drawer--status-closing {
  transform: translateY(-100%);
}

.bc-drawer--side-top.bc-drawer--status-start-opening,
.bc-drawer--side-top.bc-drawer--status-opening,
.bc-drawer--side-top.bc-drawer--status-opened {
  transform: translateY(0);
}

/* Bottom side animations */
.bc-drawer--side-bottom.bc-drawer--status-closed,
.bc-drawer--side-bottom.bc-drawer--status-start-closing,
.bc-drawer--side-bottom.bc-drawer--status-closing {
  transform: translateY(100%);
}

.bc-drawer--side-bottom.bc-drawer--status-start-opening,
.bc-drawer--side-bottom.bc-drawer--status-opening,
.bc-drawer--side-bottom.bc-drawer--status-opened {
  transform: translateY(0);
}

/* Drawer anchored to body (default) */
.bc-drawer--container-body {
  position: fixed;
}

/* Drawer anchored to element container */
.bc-drawer--container-element {
  position: absolute;
}

/* Drawer positioning - Right side (default) */
.bc-drawer--side-right.bc-drawer--container-body {
  top: 0;
  right: 0;
  height: 100vh;
  max-width: 90vw;
}

.bc-drawer--side-right.bc-drawer--container-element {
  top: 0;
  right: 0;
  height: 100%;
  max-width: 90%;
}

/* Drawer positioning - Left side */
.bc-drawer--side-left.bc-drawer--container-body {
  top: 0;
  left: 0;
  height: 100vh;
  max-width: 90vw;
}

.bc-drawer--side-left.bc-drawer--container-element {
  top: 0;
  left: 0;
  height: 100%;
  max-width: 90%;
}

/* Direction-aware drawer positioning - Inline End */
.bc-drawer--side-inline-end.bc-drawer--container-body {
  top: 0;
  inset-inline-end: 0;
  height: 100vh;
  max-width: 90vw;
}

.bc-drawer--side-inline-end.bc-drawer--container-element {
  top: 0;
  inset-inline-end: 0;
  height: 100%;
  max-width: 90%;
}

/* Direction-aware drawer positioning - Inline Start */
.bc-drawer--side-inline-start.bc-drawer--container-body {
  top: 0;
  inset-inline-start: 0;
  height: 100vh;
  max-width: 90vw;
}

.bc-drawer--side-inline-start.bc-drawer--container-element {
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  max-width: 90%;
}

/* Drawer positioning - Top side */
.bc-drawer--side-top.bc-drawer--container-body {
  top: 0;
  left: 0;
  width: 100vw;
  max-height: 90vh;
}

.bc-drawer--side-top.bc-drawer--container-element {
  top: 0;
  left: 0;
  width: 100%;
  max-height: 90%;
}

/* Drawer positioning - Bottom side */
.bc-drawer--side-bottom.bc-drawer--container-body {
  bottom: 0;
  left: 0;
  width: 100vw;
  max-height: 90vh;
}

.bc-drawer--side-bottom.bc-drawer--container-element {
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 90%;
}

/* Drawer sizes for vertical drawers (left/right/inline) */
.bc-drawer--side-left.bc-drawer--size-sm,
.bc-drawer--side-right.bc-drawer--size-sm,
.bc-drawer--side-inline-start.bc-drawer--size-sm,
.bc-drawer--side-inline-end.bc-drawer--size-sm {
  width: min(320px, 90vw);
}

.bc-drawer--side-left.bc-drawer--size-md,
.bc-drawer--side-right.bc-drawer--size-md,
.bc-drawer--side-inline-start.bc-drawer--size-md,
.bc-drawer--side-inline-end.bc-drawer--size-md {
  width: min(480px, 90vw);
}

.bc-drawer--side-left.bc-drawer--size-lg,
.bc-drawer--side-right.bc-drawer--size-lg,
.bc-drawer--side-inline-start.bc-drawer--size-lg,
.bc-drawer--side-inline-end.bc-drawer--size-lg {
  width: min(640px, 90vw);
}

.bc-drawer--side-left.bc-drawer--size-xl,
.bc-drawer--side-right.bc-drawer--size-xl,
.bc-drawer--side-inline-start.bc-drawer--size-xl,
.bc-drawer--side-inline-end.bc-drawer--size-xl {
  width: min(800px, 90vw);
}

/* Drawer sizes for horizontal drawers (top/bottom) */
.bc-drawer--side-top.bc-drawer--size-sm,
.bc-drawer--side-bottom.bc-drawer--size-sm {
  height: min(240px, 90vh);
}

.bc-drawer--side-top.bc-drawer--size-md,
.bc-drawer--side-bottom.bc-drawer--size-md {
  height: min(360px, 90vh);
}

.bc-drawer--side-top.bc-drawer--size-lg,
.bc-drawer--side-bottom.bc-drawer--size-lg {
  height: min(480px, 90vh);
}

.bc-drawer--side-top.bc-drawer--size-xl,
.bc-drawer--side-bottom.bc-drawer--size-xl {
  height: min(600px, 90vh);
}

/* Drawer content structure */
.bc-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.bc-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-base-300);
  background-color: var(--color-base-50);
  flex-shrink: 0;
}

.bc-drawer__body {
  flex: 1;
  padding: var(--spacing-md);
  overflow-y: auto;
}

.bc-drawer__footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-base-300);
  background-color: var(--color-base-50);
  flex-shrink: 0;
}

/* Dark mode styles */
.b-dark .bc-drawer {
  background-color: var(--bg-surface-dark);
  color: var(--text-normal-dark);
  border: 1px solid var(--border-border-dark);
}

.b-dark .bc-drawer__header {
  border-bottom: 1px solid var(--border-divider-dark);
  background-color: var(--bg-elevated-dark);
}

.b-dark .bc-drawer__footer {
  border-top: 1px solid var(--border-divider-dark);
  background-color: var(--bg-elevated-dark);
}

/* Responsive adjustments */
@media (width <= 640px) {
  .bc-drawer--side-left.bc-drawer--container-body,
  .bc-drawer--side-right.bc-drawer--container-body,
  .bc-drawer--side-inline-start.bc-drawer--container-body,
  .bc-drawer--side-inline-end.bc-drawer--container-body {
    width: 100vw;
    max-width: none;
  }

  .bc-drawer--side-top.bc-drawer--container-body,
  .bc-drawer--side-bottom.bc-drawer--container-body {
    height: 100vh;
    max-height: none;
  }
}

/* Editable Text Component */
.bc-editable-text {
  border-bottom: 1px dashed var(--color-gray-300);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  align-items: flex-start;
  cursor: pointer;
}

/* Disabled state */
.bc-editable-text--disabled {
  border-bottom-color: transparent;
  cursor: default;
}

.bc-editable-text--disabled .bc-editable-text__display {
  cursor: default;
}

.bc-editable-text--disabled .bc-editable-text__edit-button {
  display: none;
}

/* Input state */
.bc-editable-text__input {
  outline: none;
  padding: 0 calc(var(--spacing-base) / 2);
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  flex-grow: 1;
  line-height: var(--line-height-normal);
  height: 2rem;
}

/* Use base focus system for inputs (consistent with TextInput) */
.bc-editable-text__input:focus-visible {
  outline: none; /* Input itself should not draw outline */
}

/* Draw the focus on the display container similar to other inputs via focus-within */
.bc-editable-text:focus-within {
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.b-dark .bc-editable-text:focus-within {
  outline-color: var(--interactive-focus-dark);
}

/* Display state */
.bc-editable-text__display {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0 calc(var(--spacing-base) / 2);
  white-space: nowrap;
  flex-grow: 1;
  overflow: hidden;
  line-height: var(--line-height-normal);
  height: 2rem;
}

/* Text content */
.bc-editable-text__text {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placeholder text */
.bc-editable-text__placeholder {
  color: var(--color-gray-500);
  font-style: italic;
}

/* Edit button */
.bc-editable-text__edit-button {
  border-radius: var(--radius-full);
  color: var(--color-yellow-700);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: calc(var(--spacing-base) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-editable-text__edit-button:focus-visible {
  outline: none;
}

.bc-editable-text__edit-button:hover {
  background-color: var(--color-gray-100);
}

.bc-editable-text__edit-button:active {
  background-color: var(--color-gray-200);
}

/* Dark mode styles */
.b-dark .bc-editable-text {
  border-bottom-color: var(--border-border-dark);
  color: var(--text-normal-dark);
}

.b-dark .bc-editable-text__placeholder {
  color: var(--text-muted-dark);
}

.b-dark .bc-editable-text__edit-button {
  color: var(--color-yellow-400);
}

.b-dark .bc-editable-text__edit-button:hover {
  background-color: var(--interactive-hover-dark);
  color: var(--color-yellow-300);
}

.b-dark .bc-editable-text__edit-button:active {
  background-color: var(--interactive-active-dark);
}

/* File Input Component */
.bc-file-input {
  width: 100%;
}

/* Drop Zone Styles */
.bc-file-input__drop-zone {
  width: 100%;
  min-height: 120px;
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-control, var(--radius-md));
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  cursor: pointer;
  position: relative;
}

.bc-file-input__drop-zone:hover {
  border-color: var(--color-primary-500);
  background-color: var(--color-primary-50);
}

.bc-file-input__drop-zone:focus-within {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Drop Zone Content */
.bc-file-input__drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing-base) * 6);
  height: 100%;
  min-height: 120px;
  text-align: center;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
}

.bc-file-input__drop-zone-content--empty {
  color: var(--color-gray-600);
}

.bc-file-input__drop-zone-content--drag-over {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
}

.bc-file-input__drop-zone-content--has-files {
  color: var(--color-gray-500);
  min-height: 80px;
  padding: calc(var(--spacing-base) * 4);
}

.bc-file-input__drop-zone-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}

/* File List Styles */
.bc-file-input__clear-all-button-container {
  display: flex;
  justify-content: center;
}

.bc-file-input__file-list {
  margin-top: calc(var(--spacing-base) * 3);
  border-top: 1px solid var(--color-gray-200);
  padding-top: calc(var(--spacing-base) * 3);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
}

.bc-file-input__file-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  padding: calc(var(--spacing-base) * 2);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  transition:
    border-color
      var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
    box-shadow var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  width: 18rem;
}

.bc-file-input__file-item:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-surface, var(--shadow-sm));
}

.bc-file-input__file-item:last-child {
  margin-bottom: 0;
}

.bc-file-input__file-icon {
  flex-shrink: 0;
  color: var(--color-primary-500);
}

/* Thumbnail Styles */
.bc-file-input__thumbnail-container {
  min-width: calc(var(--spacing-base) * 12);
  max-width: calc(var(--spacing-base) * 12);
  min-height: calc(var(--spacing-base) * 12);
  max-height: calc(var(--spacing-base) * 12);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-file-input__file-icon .bc-icon {
  min-width: calc(var(--spacing-base) * 12);
  max-width: calc(var(--spacing-base) * 12);
  min-height: calc(var(--spacing-base) * 12);
  max-height: calc(var(--spacing-base) * 12);
}

.bc-file-input__compact-value-item .bc-icon {
  min-width: calc(var(--spacing-base) * 6);
  max-width: calc(var(--spacing-base) * 6);
  min-height: calc(var(--spacing-base) * 6);
  max-height: calc(var(--spacing-base) * 6);
}

.bc-file-input__compact-value-item .bc-file-input__thumbnail-container {
  min-width: calc(var(--spacing-base) * 6);
  max-width: calc(var(--spacing-base) * 6);
  min-height: calc(var(--spacing-base) * 6);
  max-height: calc(var(--spacing-base) * 6);
}

.bc-file-input__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: none;
}
.bc-file-input__file-info {
  flex: 1;
  min-width: 0;
}

.bc-file-input__file-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: calc(var(--spacing-base) * 0.5);
}

.bc-file-input__file-meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-file-input__remove-button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-base) * 6);
  height: calc(var(--spacing-base) * 6);
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-file-input__remove-button:hover {
  background-color: var(--color-danger-50);
  color: var(--color-danger-500);
}

.bc-file-input__remove-button:focus {
  outline: 2px solid var(--color-danger-500);
  outline-offset: 2px;
}

.bc-file-input__remove-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bc-file-input__clear-all-button {
  display: block;
  margin: calc(var(--spacing-base) * 2) auto 0;
  padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-file-input__clear-all-button:hover {
  border-color: var(--color-danger-300);
  background-color: var(--color-danger-50);
  color: var(--color-danger-600);
}

.bc-file-input__clear-all-button:focus {
  outline: 2px solid var(--color-danger-500);
  outline-offset: 2px;
}

.bc-file-input__clear-all-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Error State */
.bc-base-input-container--error .bc-file-input__drop-zone {
  border-color: var(--color-danger-300);
}

.bc-base-input-container--error .bc-file-input__drop-zone:hover {
  border-color: var(--color-danger-400);
  background-color: var(--color-danger-50);
}

/* Disabled State */
.bc-base-input-container--disabled .bc-file-input__drop-zone {
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
  cursor: not-allowed;
  opacity: 0.6;
}

.bc-base-input-container--disabled .bc-file-input__drop-zone:hover {
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
}

.bc-base-input-container--disabled .bc-file-input__drop-zone-content {
  color: var(--color-gray-400);
}

.bc-base-input-container--disabled .bc-file-input__file-item {
  opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 640px) {
  .bc-file-input__file-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  }

  .bc-file-input__remove-button {
    align-self: flex-end;
    margin-top: calc(var(--spacing-base) * -1);
  }

  .bc-file-input__file-info {
    width: 100%;
  }
}

/* Compact mode */
.bc-file-input--compact {
  width: 100%;
}

.bc-file-input__compact-input {
  width: 100%;
  min-height: 26px;
  display: flex;
  align-items: center;
}

.bc-file-input__compact-placeholder {
  color: var(--color-gray-500);
}

.bc-file-input__compact-value {
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
}

.bc-file-input__compact-value-item {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
  padding: calc(var(--spacing-base) / 2) calc(var(--spacing-base) * 2);
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-file-input__compact-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-base) * 6);
  height: calc(var(--spacing-base) * 6);
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-file-input__compact-clear:hover {
  background-color: var(--color-danger-50);
  color: var(--color-danger-500);
}

.bc-file-input__compact-clear:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bc-file-input__compact-value-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact preview thumbnail */
.bc-file-input__compact-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-base) * 6);
  height: calc(var(--spacing-base) * 6);
  border-radius: var(--radius-xs);
  overflow: hidden;
  background-color: var(--color-gray-100);
  flex-shrink: 0;
}

.bc-file-input__compact-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: none;
  display: block;
}

.bc-flyout-container {
  z-index: var(--z-index-popover);
}

.bc-flyout {
  /* Base flyout styles */
  background-color: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-popover, var(--radius-md));
  box-shadow: var(--shadow-popover, var(--shadow-lg));
  padding: var(--spacing-sm);
}

/* Transform origins for placement-aware animations */
.bc-flyout.bc-toggle--flyout-top {
  transform-origin: bottom center;
}

.bc-flyout.bc-toggle--flyout-bottom {
  transform-origin: top center;
}

.bc-flyout.bc-toggle--flyout-left {
  transform-origin: right center;
}

.bc-flyout.bc-toggle--flyout-right {
  transform-origin: left center;
}

/* Pointer events management */
.bc-flyout.bc-toggle--flyout-top.bc-toggle--closed,
.bc-flyout.bc-toggle--flyout-top.bc-toggle--start-opening,
.bc-flyout.bc-toggle--flyout-top.bc-toggle--closing,
.bc-flyout.bc-toggle--flyout-top.bc-toggle--start-closing,
.bc-flyout.bc-toggle--flyout-bottom.bc-toggle--closed,
.bc-flyout.bc-toggle--flyout-bottom.bc-toggle--start-opening,
.bc-flyout.bc-toggle--flyout-bottom.bc-toggle--closing,
.bc-flyout.bc-toggle--flyout-bottom.bc-toggle--start-closing,
.bc-flyout.bc-toggle--flyout-left.bc-toggle--closed,
.bc-flyout.bc-toggle--flyout-left.bc-toggle--start-opening,
.bc-flyout.bc-toggle--flyout-left.bc-toggle--closing,
.bc-flyout.bc-toggle--flyout-left.bc-toggle--start-closing,
.bc-flyout.bc-toggle--flyout-right.bc-toggle--closed,
.bc-flyout.bc-toggle--flyout-right.bc-toggle--start-opening,
.bc-flyout.bc-toggle--flyout-right.bc-toggle--closing,
.bc-flyout.bc-toggle--flyout-right.bc-toggle--start-closing {
  pointer-events: none;
}

.bc-flyout.bc-toggle--flyout-top.bc-toggle--opening,
.bc-flyout.bc-toggle--flyout-top.bc-toggle--opened,
.bc-flyout.bc-toggle--flyout-bottom.bc-toggle--opening,
.bc-flyout.bc-toggle--flyout-bottom.bc-toggle--opened,
.bc-flyout.bc-toggle--flyout-left.bc-toggle--opening,
.bc-flyout.bc-toggle--flyout-left.bc-toggle--opened,
.bc-flyout.bc-toggle--flyout-right.bc-toggle--opening,
.bc-flyout.bc-toggle--flyout-right.bc-toggle--opened {
  pointer-events: auto;
}

.bc-group {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bc-group--direction-column {
  flex-direction: column;
}

.bc-group--direction-row {
  flex-direction: row;
}

.bc-group--align-start {
  align-items: flex-start;
}

.bc-group--align-center {
  align-items: center;
}

.bc-group--align-end {
  align-items: flex-end;
}

.bc-group--justify-between {
  justify-content: space-between;
}

.bc-group--justify-center {
  justify-content: center;
}

.bc-group--justify-end {
  justify-content: flex-end;
}

.bc-group--gap-0 {
  gap: 0;
}

.bc-group--gap-1 {
  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
}

.bc-group--gap-2 {
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
}

.bc-group--gap-4 {
  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
}

.bc-group--gap-md {
  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
}

.bc-group--grow {
  flex-grow: 1;
}

.bc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
  box-sizing: content-box;
  color: var(--icon-color, currentColor);
}

.b-dark .bc-icon {
  color: var(--icon-color-dark, var(--icon-color, currentColor));
}

.bc-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bc-icon--xs {
  width: 0.75rem;
  height: 0.75rem;
}

.bc-icon--sm {
  width: 1rem;
  height: 1rem;
}

.bc-icon--md {
  width: 1.2rem;
  height: 1.2rem;
}

.bc-icon--lg {
  width: 2rem;
  height: 2rem;
}

.bc-icon--xl {
  width: 3rem;
  height: 3rem;
}

/* Input Container Component */
.bc-base-input-container,
.bc-input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  overflow: hidden;
}

.bc-input-container {
  width: 100%;
  /* Horizontal padding only; vertical padding comes from size classes */
  padding-inline: calc(var(--spacing-base) * 4);
  /* Add a transparent border to match button height math */
  border: 1.5px solid transparent;
  border-radius: var(--radius-control, var(--radius-md));
  box-shadow: var(--shadow-surface, var(--shadow-sm));
  line-height: 1;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Default state */
.bc-base-input-container--default,
.bc-input-container--default {
  color: var(--color-gray-900);
}

.bc-input-container--default {
  background-color: var(--color-white);
  outline: 1px solid var(--border-divider-light);
  outline-offset: -1px;
}

.bc-base-input-container--default::placeholder
  .bc-input-container--default::placeholder {
  color: var(--color-gray-400);
}

/* Disabled state */
.bc-base-input-container--disabled,
.bc-input-container--disabled {
  color: var(--color-gray-500);
  cursor: not-allowed;
}

.bc-input-container--disabled {
  background-color: var(--color-gray-200);
  outline: 2px solid var(--border-divider-light);
  outline-offset: -2px;
}

.bc-input-container--disabled::placeholder {
  color: var(--color-gray-400);
}

/* Focus within state */
.bc-input-container:focus-within {
  z-index: var(--z-index-navigation);
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: -2px;
}

/* Error state */
.bc-input-container--error {
  outline: 2px solid var(--color-danger-600);
  outline-offset: -2px;
}

.bc-input-container--error:focus-within {
  outline: 2px solid var(--color-danger-600);
  outline-offset: -2px;
}

/* Before and after elements */
.bc-input-container__before,
.bc-input-container__after {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: var(--z-index-navigation);
}

/* Input wrapper */
.bc-input-container__input {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}

.bc-input-container__input--grow {
  flex-grow: 1;
}

/* Input element styles */
.bc-input-container input,
.bc-input-container textarea,
.bc-input-container select,
.bc-input-container .bc-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
}

.bc-input-container input::placeholder,
.bc-input-container textarea::placeholder,
.bc-input::placeholder {
  color: inherit;
  opacity: 0.6;
}

/* Password toggle button */
.bc-input-container__password-toggle {
  font-size: var(--font-size-sm);
  fill: var(--color-gray-400);
  border-radius: var(--radius-full);
  padding: var(--spacing-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-input-container__password-toggle:hover {
  background-color: var(--color-gray-100);
}

/* Nullable reset button */
.bc-input-container__reset {
  font-size: var(--font-size-sm);
  fill: var(--color-gray-400);
  border-radius: var(--radius-full);
  padding: var(--spacing-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-input-container__reset:hover {
  background-color: var(--color-gray-100);
}

/* Tags input wrapper */
.bc-input-container__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  align-items: center;
}

/* Tags input text field */
.bc-input-container .bc-input-container__tags-input {
  min-width: 8rem;
  flex-shrink: 0;
  display: inline-flex;
  width: auto;
  flex-grow: 1;
}

/* Dark mode styles */
.b-dark .bc-input-container--default {
  background-color: var(--bg-surface-dark);
  color: var(--text-normal-dark);
  outline: 2px solid var(--border-border-dark);
}

.b-dark .bc-input-container--default:focus-within {
  outline: 2px solid var(--interactive-focus-dark);
  background-color: var(--bg-elevated-dark);
}

.b-dark .bc-input-container--default::placeholder {
  color: var(--text-muted-dark);
}

.b-dark .bc-input-container--disabled {
  background-color: var(--bg-subtle-dark);
  color: var(--text-muted-dark);
  outline: 2px solid var(--border-divider-dark);
  opacity: 0.6;
}

.b-dark .bc-input-container--disabled::placeholder {
  color: var(--text-muted-dark);
}

.b-dark .bc-input-container--error {
  outline: 2px solid var(--color-danger-400);
  background-color: var(--color-danger-950);
}

.b-dark .bc-input-container--error:focus-within {
  outline: 2px solid var(--color-danger-400);
  background-color: var(--color-danger-900);
}

.b-dark .bc-input-container__password-toggle {
  fill: var(--text-muted-dark);
}

.b-dark .bc-input-container__password-toggle:hover {
  background-color: var(--interactive-hover-dark);
  fill: var(--text-normal-dark);
}

/* Dark mode for nullable reset */
.b-dark .bc-input-container__reset {
  fill: var(--text-muted-dark);
}

.b-dark .bc-input-container__reset:hover {
  background-color: var(--interactive-hover-dark);
  fill: var(--text-normal-dark);
}

/* Responsive styles */
@media (width >=var(--breakpoint-sm)) {
  .bc-input-container {
    /* Do not force font-size; sizing classes control this */
    line-height: 1;
  }
}

/* Accessibility adjustments */
@media (prefers-contrast: high) {
  .bc-input-container,
  .bc-input {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-input-container,
  .bc-input {
    transition: none;
  }
}

/* Input Wrapper Component */
.bc-input-wrapper {
  display: flex;
  flex-direction: column;
}

.bc-input-wrapper--full-width {
  width: 100%;
}

/* Horizontal layout variants */
.bc-input-wrapper--horizontal,
.bc-input-wrapper--horizontal-label-right,
.bc-input-wrapper--horizontal-fixed {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
}

/* Horizontal with label on right */
.bc-input-wrapper--horizontal-label-right {
  flex-direction: row-reverse;
}

/* Horizontal with fixed-width label */
.bc-input-wrapper--horizontal-fixed .bc-input-wrapper__header {
  width: var(--input-wrapper-label-width, 12rem);
  flex-shrink: 0;
}

/* Label header container */
.bc-input-wrapper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
}

/* Label section container */
.bc-input-wrapper__label-section {
  display: flex;
  flex-direction: column;
}

/* Label container */
.bc-input-wrapper__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-2xs, calc(var(--spacing-base) / 2));
}

/* Label text styles */
.bc-input-wrapper__label-text {
  text-wrap: nowrap;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* Label text states */
.bc-input-wrapper__label-text--default {
  color: var(--color-gray-600);
  font-weight: var(--font-weight-semibold);
}

.bc-input-wrapper__label-text--disabled {
  color: var(--color-gray-500);
  font-weight: var(--font-weight-normal);
}

.bc-input-wrapper__label-text--error {
  color: var(--color-danger-600);
  font-weight: var(--font-weight-normal);
}

/* Required symbol */
.bc-input-wrapper__required {
  font-size: var(--font-size-xs);
  color: var(--color-danger-600);
  vertical-align: top;
}

/* Horizontal layout adjustments (all variants) */
.bc-input-wrapper--horizontal .bc-input-wrapper__header,
.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
  flex-shrink: 0;
  min-width: 0;
  /* Allow text to wrap if needed */
}

.bc-input-wrapper--horizontal .bc-input-wrapper__content,
.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content,
.bc-input-wrapper--horizontal-fixed .bc-input-wrapper__content {
  flex: 1;
  min-width: 0; /* Prevent overflow issues */
}

/* Error messages in horizontal mode should align with content */
.bc-input-wrapper--horizontal .bc-input-wrapper__error,
.bc-input-wrapper--horizontal-fixed .bc-input-wrapper__error {
  margin-left: calc(var(--spacing-base) * 4); /* Align with content */
}

/* Error messages in horizontal-label-right mode should align with content on the right */
.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error {
  margin-right: calc(var(--spacing-base) * 4); /* Align with content */
}

/* Description text */
.bc-input-wrapper__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-normal);
}

/* Description under label in horizontal mode */
.bc-input-wrapper__description--under-label {
  font-size: var(--font-size-xs);
}

/* Error message */
.bc-input-wrapper__error {
  font-size: var(--font-size-sm);
  color: var(--color-danger-500);
  line-height: var(--line-height-normal);
}

/* Dark mode styles */
.b-dark .bc-input-wrapper__label-text--default {
  color: var(--text-normal-dark);
}

.b-dark .bc-input-wrapper__label-text--disabled {
  color: var(--text-muted-dark);
}

.b-dark .bc-input-wrapper__label-text--error {
  color: var(--color-danger-300);
}

.b-dark .bc-input-wrapper__required {
  color: var(--color-danger-400);
}

.b-dark .bc-input-wrapper__description {
  color: var(--text-muted-dark);
}

.b-dark .bc-input-wrapper__error {
  color: var(--color-danger-400);
}

.bc-json-schema-object {
  border-left: calc(var(--spacing-base) * 2) solid var(--color-base-200);
  padding-inline-start: calc(var(--spacing-base) * 2);
}

.bc-schema-grid {
  display: grid;
}

.bc-schema-grid--gap-4 {
  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
}

.bc-schema-grid--cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.bc-schema-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bc-schema-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bc-schema-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bc-schema-grid--cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bc-schema-grid--cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (width >= 40rem) {
  .bc-schema-grid--cols-sm-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-sm-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-sm-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-sm-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-sm-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (width >= 48rem) {
  .bc-schema-grid--cols-md-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-md-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-md-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-md-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-md-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-md-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (width >= 64rem) {
  .bc-schema-grid--cols-lg-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-lg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-lg-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-lg-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (width >= 80rem) {
  .bc-schema-grid--cols-xl-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-xl-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-xl-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-xl-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-xl-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-xl-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (width >= 96rem) {
  .bc-schema-grid--cols-2xl-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-2xl-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-2xl-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-2xl-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-2xl-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-2xl-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.bc-array-control__item-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-700);
}

.b-dark .bc-array-control__item-label {
  color: var(--color-neutral-200);
}

.bc-array-control__indicator {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.bc-array-control__indicator--error {
  color: var(--color-danger-600);
}

.bc-array-control__indicator--success {
  color: var(--color-success-600);
}

.b-dark .bc-array-control__indicator--error {
  color: var(--color-danger-400);
}

.b-dark .bc-array-control__indicator--success {
  color: var(--color-success-400);
}

.bc-array-control__summary {
  font-size: var(--font-size-sm);
}

.bc-array-control__summary--success {
  color: var(--color-success-600);
}

.bc-array-control__summary--error {
  color: var(--color-danger-600);
  font-weight: var(--font-weight-medium);
}

.b-dark .bc-array-control__summary--success {
  color: var(--color-success-300);
}

.b-dark .bc-array-control__summary--error {
  color: var(--color-danger-300);
}

.bc-object-helpers__row {
  display: grid;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  grid-template-columns: 2fr 3fr min-content;
}

.bc-object-helpers__error {
  font-size: var(--font-size-sm);
  color: var(--color-danger-600);
}

.bc-object-helpers__description {
  font-size: var(--font-size-xs);
  color: var(--text-muted-light);
}

.bc-object-helpers__remove {
  padding-top: calc(var(--spacing-base) * 3);
  flex-shrink: 1;
}

.b-dark .bc-object-helpers__error {
  color: var(--color-danger-400);
}

.b-dark .bc-object-helpers__description {
  color: var(--text-muted-dark);
}

.bc-json-schema-form__error {
  color: var(--color-danger-600);
  font-size: var(--font-size-sm);
}

.b-dark .bc-json-schema-form__error {
  color: var(--color-danger-400);
}

.bc-label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  font-family: var(
    --default-ui-font-family,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
}

.bc-label--emphasis {
  font-weight: var(--font-weight-bold);
}

.bc-label--default {
  font-weight: var(--font-weight-medium);
}

.bc-label--muted {
  font-weight: var(--font-weight-medium);
  opacity: 0.5;
}

.bc-label--danger {
  font-weight: var(--font-weight-medium);
  color: var(--color-danger-500);
}

/* Dark mode styles */
.b-dark .bc-label {
  color: var(--text-normal-dark);
}

.b-dark .bc-label--muted {
  color: var(--text-muted-dark);
}

.b-dark .bc-label--danger {
  color: var(--color-danger-400);
}

/* Link Component */
.bc-link {
  --link-color: inherit;
  --link-color-dark: inherit;
  --link-hover-color: var(--link-color);
  --link-hover-color-dark: var(--link-color-dark);

  transition: color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  cursor: pointer;
  color: var(--link-color);
}

.bc-link:hover {
  color: var(--link-hover-color);
}

.b-dark .bc-link {
  color: var(--link-color-dark);
}

.b-dark .bc-link:hover {
  color: var(--link-hover-color-dark);
}

.bc-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Default variant - standard underline behavior */
.bc-link--default {
  text-decoration: underline;
}

/* Plain variant - no underline */
.bc-link--plain {
  text-decoration: none;
}

/* Hover variant - underline only on hover */
.bc-link--hover {
  text-decoration: none;
}

.bc-link--hover:hover {
  text-decoration: underline;
}

/* Disabled state */
.bc-link--disabled {
  cursor: not-allowed;
  text-decoration: none !important;
}

.bc-link--disabled:hover {
  text-decoration: none !important;
}

.bc-link--disabled:focus-visible {
  outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .bc-link--plain {
    text-decoration: none;
    border-bottom: 2px solid currentColor;
  }

  .bc-link--hover {
    text-decoration: none;
  }

  .bc-link--hover:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-link {
    transition: none;
  }
}

/* Menu Component */
.bc-menu {
  background-color: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-popover, var(--radius-md));
  box-shadow: var(--shadow-popover, var(--shadow-lg));
  padding: var(--spacing-xs);
  z-index: var(--z-index-popover);
  min-width: 12rem;
  max-height: 20rem;
  overflow-y: auto;
  outline: none;
}

/* Dark mode styles */
.b-dark .bc-menu {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

/* Submenu specific styles */
.bc-submenu {
  margin-left: var(--spacing-xs);
}

/* Menu Item Component */
.bc-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-md, var(--spacing-md));
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-control-sm, var(--radius-sm));
  cursor: pointer;
  transition: background-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.15s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  color: var(--text-normal-light);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  position: relative;
  outline: none;
  user-select: none;
}

/* Menu item hover state */
.bc-menu-item:hover:not(.bc-menu-item--disabled) {
  background-color: var(--color-neutral-100);
  color: var(--text-normal-light);
}

/* Menu item focused state */
.bc-menu-item--focused {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

/* Menu item disabled state */
.bc-menu-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted-light);
}

.bc-menu-item--disabled:hover {
  background-color: transparent;
}

/* Menu item with submenu */
.bc-menu-item--has-submenu::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  margin-left: auto;
  opacity: 0.6;
}

/* Dark mode menu item styles */
.b-dark .bc-menu-item {
  color: var(--text-normal-dark);
}

.b-dark .bc-menu-item:hover:not(.bc-menu-item--disabled) {
  background-color: var(--color-neutral-700);
  color: var(--text-normal-dark);
}

.b-dark .bc-menu-item--focused {
  background-color: var(--color-primary-800);
  color: var(--color-primary-200);
}

.b-dark .bc-menu-item--disabled {
  color: var(--text-muted-dark);
}

/* Menu Item Content Areas */
.bc-menu-item__start {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bc-menu-item__content {
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.bc-menu-item__end {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* Menu Separator Component */
.bc-menu-separator {
  margin: var(--spacing-xs) 0;
  border-top: 1px solid var(--color-neutral-200);
  position: relative;
}

.bc-menu-separator__label {
  position: absolute;
  top: -0.5em;
  left: var(--spacing-sm);
  background-color: var(--color-neutral-50);
  padding: 0 var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-muted-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Dark mode separator styles */
.b-dark .bc-menu-separator {
  border-color: var(--color-neutral-700);
}

.b-dark .bc-menu-separator__label {
  background-color: var(--color-neutral-800);
  color: var(--text-muted-dark);
}

/* Focus styles for accessibility */
.bc-menu-item:focus-visible {
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.b-dark .bc-menu-item:focus-visible {
  outline-color: var(--interactive-focus-dark);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-menu {
    border-width: 2px;
  }

  .bc-menu-item--focused {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  .bc-menu-separator {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-menu-item {
    transition: none;
  }
}

/* Menu size variants */
.bc-menu--size-sm {
  min-width: 8rem;
  padding: var(--spacing-2xs);
}

.bc-menu--size-sm .bc-menu-item {
  padding: var(--spacing-2xs) var(--spacing-xs);
  font-size: var(--font-size-xs);
}

.bc-menu--size-lg {
  min-width: 16rem;
  padding: var(--spacing-sm);
}

.bc-menu--size-lg .bc-menu-item {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
}

/* Menu item icon sizing */
.bc-menu-item__start .bc-icon,
.bc-menu-item__end .bc-icon {
  width: 1em;
  height: 1em;
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive design for mobile devices */
@media (max-width: 640px) {
  .bc-menu {
    min-width: 100%;
    max-width: 100vw;
    border-radius: var(--radius-popover, var(--radius-lg))
      var(--radius-popover, var(--radius-lg)) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 50vh;
    box-shadow: var(--shadow-overlay, var(--shadow-xl));
  }

  .bc-menu-item {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    min-height: 44px; /* Touch target size */
  }

  .bc-submenu {
    margin-left: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    max-height: 100vh;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .bc-menu-item {
    min-height: 44px; /* Minimum touch target */
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .bc-menu-item:hover {
    background-color: transparent; /* Disable hover on touch devices */
  }

  .bc-menu-item:active {
    background-color: var(--color-neutral-200);
  }

  .b-dark .bc-menu-item:active {
    background-color: var(--color-neutral-600);
  }
}

/* Container queries for adaptive sizing */
@container (max-width: 300px) {
  .bc-menu {
    min-width: 100%;
  }

  .bc-menu-item__end {
    display: none; /* Hide end content in narrow containers */
  }
}

/* Print styles */
@media print {
  .bc-menu {
    display: none;
  }
}

/* Modal Component */
.bc-modal {
  z-index: var(--z-index-modal);
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-overlay, var(--radius-lg));
  box-shadow: var(--shadow-overlay, var(--shadow-xl));
  background-color: var(--color-base-100);
  border: 3px solid var(--color-base-300);
  overflow: hidden;
  transition: all
    var(--motion-transition-overlay, var(--motion-duration-slow, 0.3s))
    var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
}

/* Modal anchored to body (default) */
.bc-modal--container-body {
  position: fixed;
  max-height: 90vh;
  max-width: 90vw;
}

/* Modal anchored to element container */
.bc-modal--container-element {
  position: absolute;
  max-height: 90%;
  max-width: 90%;
}

/* Modal positioning - Center (default) */
.bc-modal--position-center.bc-modal--container-body {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bc-modal--position-center.bc-modal--container-element {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Modal positioning - Top */
.bc-modal--position-top.bc-modal--container-body {
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
}

.bc-modal--position-top.bc-modal--container-element {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}

/* Modal positioning - Bottom */
.bc-modal--position-bottom.bc-modal--container-body {
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}

.bc-modal--position-bottom.bc-modal--container-element {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

/* Modal positioning - Left */
.bc-modal--position-left.bc-modal--container-body {
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
}

.bc-modal--position-left.bc-modal--container-element {
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}

/* Modal positioning - Right */
.bc-modal--position-right.bc-modal--container-body {
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}

.bc-modal--position-right.bc-modal--container-element {
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

/* Modal positioning - Top Left */
.bc-modal--position-top-start.bc-modal--container-body {
  top: 2rem;
  left: 2rem;
}

.bc-modal--position-top-start.bc-modal--container-element {
  top: 5%;
  left: 5%;
}

/* Modal positioning - Top Right */
.bc-modal--position-top-end.bc-modal--container-body {
  top: 2rem;
  right: 2rem;
}

.bc-modal--position-top-end.bc-modal--container-element {
  top: 5%;
  right: 5%;
}

/* Modal positioning - Bottom Left */
.bc-modal--position-bottom-start.bc-modal--container-body {
  bottom: 2rem;
  left: 2rem;
}

.bc-modal--position-bottom-start.bc-modal--container-element {
  bottom: 5%;
  left: 5%;
}

/* Modal positioning - Bottom Right */
.bc-modal--position-bottom-end.bc-modal--container-body {
  bottom: 2rem;
  right: 2rem;
}

.bc-modal--position-bottom-end.bc-modal--container-element {
  bottom: 5%;
  right: 5%;
}

/* Direction-aware modal positioning - Inline Start */
.bc-modal--position-inline-start.bc-modal--container-body {
  top: 50%;
  inset-inline-start: 2rem;
  transform: translateY(-50%);
}

.bc-modal--position-inline-start.bc-modal--container-element {
  top: 50%;
  inset-inline-start: 5%;
  transform: translateY(-50%);
}

/* Direction-aware modal positioning - Inline End */
.bc-modal--position-inline-end.bc-modal--container-body {
  top: 50%;
  inset-inline-end: 2rem;
  transform: translateY(-50%);
}

.bc-modal--position-inline-end.bc-modal--container-element {
  top: 50%;
  inset-inline-end: 5%;
  transform: translateY(-50%);
}

/* Direction-aware modal positioning - Top Inline Start */
.bc-modal--position-top-inline-start.bc-modal--container-body {
  top: 2rem;
  inset-inline-start: 2rem;
}

.bc-modal--position-top-inline-start.bc-modal--container-element {
  top: 5%;
  inset-inline-start: 5%;
}

/* Direction-aware modal positioning - Top Inline End */
.bc-modal--position-top-inline-end.bc-modal--container-body {
  top: 2rem;
  inset-inline-end: 2rem;
}

.bc-modal--position-top-inline-end.bc-modal--container-element {
  top: 5%;
  inset-inline-end: 5%;
}

/* Direction-aware modal positioning - Bottom Inline Start */
.bc-modal--position-bottom-inline-start.bc-modal--container-body {
  bottom: 2rem;
  inset-inline-start: 2rem;
}

.bc-modal--position-bottom-inline-start.bc-modal--container-element {
  bottom: 5%;
  inset-inline-start: 5%;
}

/* Direction-aware modal positioning - Bottom Inline End */
.bc-modal--position-bottom-inline-end.bc-modal--container-body {
  bottom: 2rem;
  inset-inline-end: 2rem;
}

.bc-modal--position-bottom-inline-end.bc-modal--container-element {
  bottom: 5%;
  inset-inline-end: 5%;
}

/* Modal sizes */
.bc-modal--size-sm {
  width: min(400px, 90vw);
}

.bc-modal--size-md {
  width: min(600px, 90vw);
}

.bc-modal--size-lg {
  width: min(800px, 90vw);
}

.bc-modal--size-xl {
  width: min(1000px, 90vw);
}

/* Modal content container */
.bc-modal__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: inherit;
}

/* Modal header */
.bc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid var(--color-base-300);
  flex-shrink: 0;
  background-color: var(--color-base-100);
}

/* Modal body */
.bc-modal__body {
  padding: var(--spacing-2xl);
  flex: 1;
  overflow-y: auto;
  color: var(--color-gray-700);
  line-height: var(--line-height-normal);
  background-color: var(--color-white);
}

/* Modal footer */
.bc-modal__footer {
  display: flex;
  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  border-top: 1px solid var(--color-base-300);
  flex-shrink: 0;
  background-color: var(--color-base-100);
  align-items: center;
}

/* Animation states - Center position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-center,
.bc-overlay[data-status='closing'] .bc-modal--position-center {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-center,
.bc-overlay[data-status='opening'] .bc-modal--position-center {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Animation states - Top position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-top,
.bc-overlay[data-status='closing'] .bc-modal--position-top {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-top,
.bc-overlay[data-status='opening'] .bc-modal--position-top {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Animation states - Bottom position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom,
.bc-overlay[data-status='closing'] .bc-modal--position-bottom {
  opacity: 0;
  transform: translateX(-50%) translateY(20px) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-bottom,
.bc-overlay[data-status='opening'] .bc-modal--position-bottom {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Animation states - Left position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-left,
.bc-overlay[data-status='closing'] .bc-modal--position-left {
  opacity: 0;
  transform: translateY(-50%) translateX(-20px) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-left,
.bc-overlay[data-status='opening'] .bc-modal--position-left {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Animation states - Right position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-right,
.bc-overlay[data-status='closing'] .bc-modal--position-right {
  opacity: 0;
  transform: translateY(-50%) translateX(20px) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-right,
.bc-overlay[data-status='opening'] .bc-modal--position-right {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Animation states - Corner positions */
.bc-overlay[data-status='start-opening'] .bc-modal--position-top-start,
.bc-overlay[data-status='closing'] .bc-modal--position-top-start,
.bc-overlay[data-status='start-opening'] .bc-modal--position-top-end,
.bc-overlay[data-status='closing'] .bc-modal--position-top-end,
.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-start,
.bc-overlay[data-status='closing'] .bc-modal--position-bottom-start,
.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-end,
.bc-overlay[data-status='closing'] .bc-modal--position-bottom-end {
  opacity: 0;
  transform: scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-top-start,
.bc-overlay[data-status='opening'] .bc-modal--position-top-start,
.bc-overlay[data-status='opened'] .bc-modal--position-top-end,
.bc-overlay[data-status='opening'] .bc-modal--position-top-end,
.bc-overlay[data-status='opened'] .bc-modal--position-bottom-start,
.bc-overlay[data-status='opening'] .bc-modal--position-bottom-start,
.bc-overlay[data-status='opened'] .bc-modal--position-bottom-end,
.bc-overlay[data-status='opening'] .bc-modal--position-bottom-end {
  opacity: 1;
  transform: scale(1);
}

/* Animation states - Direction-aware Inline Start position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-inline-start,
.bc-overlay[data-status='closing'] .bc-modal--position-inline-start {
  opacity: 0;
  transform: translateY(-50%) translateX(-20px) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-inline-start,
.bc-overlay[data-status='opening'] .bc-modal--position-inline-start {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Animation states - Direction-aware Inline End position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-inline-end,
.bc-overlay[data-status='closing'] .bc-modal--position-inline-end {
  opacity: 0;
  transform: translateY(-50%) translateX(20px) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-inline-end,
.bc-overlay[data-status='opening'] .bc-modal--position-inline-end {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Animation states - Direction-aware corner positions */
.bc-overlay[data-status='start-opening'] .bc-modal--position-top-inline-start,
.bc-overlay[data-status='closing'] .bc-modal--position-top-inline-start,
.bc-overlay[data-status='start-opening'] .bc-modal--position-top-inline-end,
.bc-overlay[data-status='closing'] .bc-modal--position-top-inline-end,
.bc-overlay[data-status='start-opening']
  .bc-modal--position-bottom-inline-start,
.bc-overlay[data-status='closing'] .bc-modal--position-bottom-inline-start,
.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-inline-end,
.bc-overlay[data-status='closing'] .bc-modal--position-bottom-inline-end {
  opacity: 0;
  transform: scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-top-inline-start,
.bc-overlay[data-status='opening'] .bc-modal--position-top-inline-start,
.bc-overlay[data-status='opened'] .bc-modal--position-top-inline-end,
.bc-overlay[data-status='opening'] .bc-modal--position-top-inline-end,
.bc-overlay[data-status='opened'] .bc-modal--position-bottom-inline-start,
.bc-overlay[data-status='opening'] .bc-modal--position-bottom-inline-start,
.bc-overlay[data-status='opened'] .bc-modal--position-bottom-inline-end,
.bc-overlay[data-status='opening'] .bc-modal--position-bottom-inline-end {
  opacity: 1;
  transform: scale(1);
}

/* Responsive adjustments */
@container (max-width: 640px) {
  .bc-modal--container-body {
    margin: var(--spacing-md);
    max-width: calc(100vw - calc(var(--spacing-md) * 2));
    max-height: calc(100vh - calc(var(--spacing-md) * 2));
  }

  .bc-modal--container-element {
    margin: var(--spacing-md);
    max-width: calc(100% - calc(var(--spacing-md) * 2));
    max-height: calc(100% - calc(var(--spacing-md) * 2));
  }

  .bc-modal__body {
    padding: var(--spacing-md);
  }

  .bc-modal__footer {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  }
}

/* Dark mode styles */
.b-dark .bc-modal {
  background-color: var(--bg-surface-dark);
  border: 1px solid var(--border-border-dark);
  color: var(--text-normal-dark);
}

.b-dark .bc-modal__header {
  border-bottom: 1px solid var(--border-divider-dark);
  background-color: var(--bg-elevated-dark);
}

.b-dark .bc-modal__body {
  color: var(--text-normal-dark);
  background-color: var(--bg-surface-dark);
}

.b-dark .bc-modal__footer {
  border-top: 1px solid var(--border-divider-dark);
  background-color: var(--bg-elevated-dark);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-modal {
    border-width: 2px;
  }

  .bc-modal__header {
    border-bottom-width: 2px;
  }

  .bc-modal__footer {
    border-top-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-modal {
    transition: none;
  }

  /* Center position */
  .bc-overlay[data-status='start-opening'] .bc-modal--position-center,
  .bc-overlay[data-status='closing'] .bc-modal--position-center,
  .bc-overlay[data-status='opened'] .bc-modal--position-center,
  .bc-overlay[data-status='opening'] .bc-modal--position-center {
    transform: translate(-50%, -50%);
  }

  /* Top and bottom positions */
  .bc-overlay[data-status='start-opening'] .bc-modal--position-top,
  .bc-overlay[data-status='closing'] .bc-modal--position-top,
  .bc-overlay[data-status='opened'] .bc-modal--position-top,
  .bc-overlay[data-status='opening'] .bc-modal--position-top,
  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom,
  .bc-overlay[data-status='closing'] .bc-modal--position-bottom,
  .bc-overlay[data-status='opened'] .bc-modal--position-bottom,
  .bc-overlay[data-status='opening'] .bc-modal--position-bottom {
    transform: translateX(-50%);
  }

  /* Left and right positions */
  .bc-overlay[data-status='start-opening'] .bc-modal--position-left,
  .bc-overlay[data-status='closing'] .bc-modal--position-left,
  .bc-overlay[data-status='opened'] .bc-modal--position-left,
  .bc-overlay[data-status='opening'] .bc-modal--position-left,
  .bc-overlay[data-status='start-opening'] .bc-modal--position-right,
  .bc-overlay[data-status='closing'] .bc-modal--position-right,
  .bc-overlay[data-status='opened'] .bc-modal--position-right,
  .bc-overlay[data-status='opening'] .bc-modal--position-right {
    transform: translateY(-50%);
  }

  /* Corner positions */
  .bc-overlay[data-status='start-opening'] .bc-modal--position-top-start,
  .bc-overlay[data-status='closing'] .bc-modal--position-top-start,
  .bc-overlay[data-status='opened'] .bc-modal--position-top-start,
  .bc-overlay[data-status='opening'] .bc-modal--position-top-start,
  .bc-overlay[data-status='start-opening'] .bc-modal--position-top-end,
  .bc-overlay[data-status='closing'] .bc-modal--position-top-end,
  .bc-overlay[data-status='opened'] .bc-modal--position-top-end,
  .bc-overlay[data-status='opening'] .bc-modal--position-top-end,
  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-start,
  .bc-overlay[data-status='closing'] .bc-modal--position-bottom-start,
  .bc-overlay[data-status='opened'] .bc-modal--position-bottom-start,
  .bc-overlay[data-status='opening'] .bc-modal--position-bottom-start,
  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-end,
  .bc-overlay[data-status='closing'] .bc-modal--position-bottom-end,
  .bc-overlay[data-status='opened'] .bc-modal--position-bottom-end,
  .bc-overlay[data-status='opening'] .bc-modal--position-bottom-end {
    transform: none;
  }
}

.bc-modal__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}

.b-dark .bc-modal__title {
  color: var(--color-gray-200);
}

.bc-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
}

.bc-native-select {
  /* Match input height; container handles padding */
  height: 26px;
  width: 100%;
  /* Reset native styling so BeatUI theme applies (Safari, Chrome, Firefox) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: none;
  border: none;
  color: inherit;
  font: inherit;
}

/* Remove default focus ring; container provides focus styles */
.bc-native-select:focus,
.bc-native-select:focus-visible {
  outline: none;
}

.bc-nine-slice-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.bc-nine-slice-pane-container {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.bc-nine-slice-pane {
  position: absolute;
  overflow: visible;
}
.bc-nine-slice-top-start {
  z-index: 60;
}

.bc-nine-slice-header {
  z-index: 20;
}

.bc-nine-slice-top-end {
  z-index: 70;
}

.bc-nine-slice-sidebar-start {
  z-index: 30;
}

.bc-nine-slice-body {
  z-index: 10;
}

.bc-nine-slice-sidebar-end {
  z-index: 40;
}

.bc-nine-slice-bottom-start {
  z-index: 80;
}

.bc-nine-slice-footer {
  z-index: 50;
}

.bc-nine-slice-bottom-end {
  z-index: 90;
}

/* Number Input Component */
.bc-number-input {
  text-align: end;
}

/* Remove default number input spinners */
.bc-number-input::-webkit-outer-spin-button,
.bc-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bc-number-input[type='number'] {
  -moz-appearance: textfield;
}

/* Number Input Steppers */
.bc-number-input-steppers {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.bc-number-input-steppers-button {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: var(--radius-xs);
  outline: 1px solid var(--color-gray-300);
  outline-offset: -1px;
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-number-input-steppers-button .bc-icon {
  width: 0.6rem;
  height: 0.6rem;
}

.bc-number-input-steppers-button:hover {
  background-color: var(--color-neutral-100);
}

.bc-number-input-steppers .bc-button:hover:not(:disabled) {
  transform: none;
}

.bc-number-input-steppers .bc-button:active:not(:disabled) {
  transform: none;
}

/* export type OverlayEffect = 'transparent' | 'opaque'
export type OverlayMode = 'capturing' | 'non-capturing' */

.bc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-overlay);
  transition: background-color
    var(--motion-transition-overlay, var(--motion-duration-relaxed, 0.3s))
    var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
}

.bc-overlay[data-status='start-opening'],
.bc-overlay[data-status='closing'] {
  backdrop-filter: blur(0);
  background-color: transparent;
}

.bc-overlay > * {
  z-index: var(--z-index-overlay);
}

.bc-overlay--effect-none {
  background-color: transparent;
}

.bc-overlay--effect-transparent {
  background-color: color-mix(in srgb, var(--color-black) 5%, transparent);
}

.bc-overlay--effect-opaque[data-status='opened'],
.bc-overlay--effect-opaque[data-status='opening'] {
  background-color: color-mix(in srgb, var(--color-black) 50%, transparent);
  backdrop-filter: blur(2px);
}

/* Dark mode styles */
.b-dark .bc-overlay--effect-transparent {
  background-color: color-mix(in srgb, var(--color-white) 2%, transparent);
}

.b-dark .bc-overlay--effect-opaque[data-status='opened'],
.b-dark .bc-overlay--effect-opaque[data-status='opening'] {
  background-color: color-mix(in srgb, var(--color-black) 80%, transparent);
  backdrop-filter: blur(4px);
}

/* Lightbox component */

.bc-lightbox {
  position: absolute;
  inset: 0;
  display: block;
}

.bc-lightbox__close {
  position: absolute;
  top: var(--spacing-2, 16px);
  right: var(--spacing-2, 16px);
  z-index: calc(var(--z-index-overlay, 1000) + 1);
  border-radius: 100%;
  padding: var(--spacing-base, 4px);
  background-color: color-mix(in srgb, var(--color-gray-100) 80%, transparent);
  color: var(--color-gray-900);
}

.bc-lightbox__viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The padding here is set inline by the component to sync with measurement */
  box-sizing: border-box;
}

.bc-lightbox__content {
  /* Capped to viewport; no transform scaling */
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow-overlay, var(--shadow-xl));
  border-radius: var(--radius-lg);
}

.bc-panel {
  --panel-bg: var(--bg-surface-light);
  --panel-bg-dark: var(--bg-surface-dark);
  --panel-text: var(--text-normal-light);
  --panel-text-dark: var(--text-normal-dark);
  background-color: var(--panel-bg);
  color: var(--panel-text);
  height: 100%;
  overflow: hidden;
}

.b-dark .bc-panel {
  background-color: var(--panel-bg-dark);
  color: var(--panel-text-dark);
}

.bc-panel--side-none {
  border: none;
}

.bc-panel--side-all {
  border: 1px solid var(--border-border-light);
}

.bc-panel--side-top {
  border-top: 1px solid var(--border-border-light);
}

.bc-panel--side-bottom {
  border-bottom: 1px solid var(--border-border-light);
}

.bc-panel--side-left {
  border-left: 1px solid var(--border-border-light);
}

.bc-panel--side-right {
  border-right: 1px solid var(--border-border-light);
}

/* Direction-aware panel borders */
.bc-panel--side-inline-start {
  border-inline-start: 1px solid var(--border-border-light);
}

.bc-panel--side-inline-end {
  border-inline-end: 1px solid var(--border-border-light);
}

.bc-panel--shadow-sm {
  box-shadow: var(--shadow-surface, var(--shadow-sm));
}

.bc-panel--shadow-md {
  box-shadow: var(--shadow-surface-elevated, var(--shadow-md));
}

.bc-panel--shadow-lg {
  box-shadow: var(--shadow-overlay, var(--shadow-lg));
}

/* Dark mode styles */
.b-dark .bc-panel--side-all {
  border: 1px solid var(--border-border-dark);
}

.b-dark .bc-panel--side-top {
  border-top: 1px solid var(--border-border-dark);
}

.b-dark .bc-panel--side-bottom {
  border-bottom: 1px solid var(--border-border-dark);
}

.b-dark .bc-panel--side-left {
  border-left: 1px solid var(--border-border-dark);
}

.b-dark .bc-panel--side-right {
  border-right: 1px solid var(--border-border-dark);
}

/* Password Strength Indicator Component */
.bc-password-strength {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm, var(--spacing-sm));
  width: 100%;
}

/* Strength bar */
.bc-password-strength__bar {
  width: 100%;
  height: 4px;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.b-dark .bc-password-strength__bar {
  background-color: var(--color-gray-700);
}

.bc-password-strength__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition:
    background-color
      var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
    width var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  background-color: var(--color-danger-500);
}

/* Strength levels */
.bc-password-strength--weak .bc-password-strength__fill {
  background-color: var(--color-danger-500);
}

.bc-password-strength--fair .bc-password-strength__fill {
  background-color: var(--color-warning-500);
}

.bc-password-strength--good .bc-password-strength__fill {
  background-color: var(--color-info-500);
}

.bc-password-strength--strong .bc-password-strength__fill {
  background-color: var(--color-success-500);
}

/* Strength label */
.bc-password-strength__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: right;
}

.bc-password-strength--weak .bc-password-strength__label {
  color: var(--color-danger-600);
}

.bc-password-strength--fair .bc-password-strength__label {
  color: var(--color-warning-600);
}

.bc-password-strength--good .bc-password-strength__label {
  color: var(--color-info-600);
}

.bc-password-strength--strong .bc-password-strength__label {
  color: var(--color-success-600);
}

.b-dark .bc-password-strength--weak .bc-password-strength__label {
  color: var(--color-danger-400);
}

.b-dark .bc-password-strength--fair .bc-password-strength__label {
  color: var(--color-warning-400);
}

.b-dark .bc-password-strength--good .bc-password-strength__label {
  color: var(--color-info-400);
}

.b-dark .bc-password-strength--strong .bc-password-strength__label {
  color: var(--color-success-400);
}

/* Requirements checklist */
.bc-password-strength__requirements {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xs, var(--spacing-xs));
}

.bc-password-strength__requirement {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-xs, var(--spacing-xs));
  font-size: var(--font-size-xs);
  color: var(--text-muted-light);
  transition: color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.b-dark .bc-password-strength__requirement {
  color: var(--text-muted-dark);
}

.bc-password-strength__requirement--met {
  color: var(--color-success-600);
}

.b-dark .bc-password-strength__requirement--met {
  color: var(--color-success-400);
}

.bc-password-strength__requirement-icon {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  width: 12px;
  text-align: center;
}

.bc-password-strength__requirement-text {
  flex: 1;
}

/* Simplified bar variant */
.bc-password-strength-bar {
  width: 100%;
  height: 4px;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.b-dark .bc-password-strength-bar {
  background-color: var(--color-gray-700);
}

.bc-password-strength-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: all
    var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  background-color: var(--color-danger-500);
}

.bc-password-strength-bar--weak .bc-password-strength-bar__fill {
  background-color: var(--color-danger-500);
}

.bc-password-strength-bar--fair .bc-password-strength-bar__fill {
  background-color: var(--color-warning-500);
}

.bc-password-strength-bar--good .bc-password-strength-bar__fill {
  background-color: var(--color-info-500);
}

.bc-password-strength-bar--strong .bc-password-strength-bar__fill {
  background-color: var(--color-success-500);
}

/* Text variant */
.bc-password-strength-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.bc-password-strength-text--weak {
  color: var(--color-danger-600);
}

.bc-password-strength-text--fair {
  color: var(--color-warning-600);
}

.bc-password-strength-text--good {
  color: var(--color-info-600);
}

.bc-password-strength-text--strong {
  color: var(--color-success-600);
}

.b-dark .bc-password-strength-text--weak {
  color: var(--color-danger-400);
}

.b-dark .bc-password-strength-text--fair {
  color: var(--color-warning-400);
}

.b-dark .bc-password-strength-text--good {
  color: var(--color-info-400);
}

.b-dark .bc-password-strength-text--strong {
  color: var(--color-success-400);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-password-strength__bar,
  .bc-password-strength-bar {
    border: 1px solid var(--border-border-light);
  }

  .b-dark .bc-password-strength__bar,
  .b-dark .bc-password-strength-bar {
    border-color: var(--border-border-dark);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-password-strength__fill,
  .bc-password-strength-bar__fill {
    transition: none;
  }

  .bc-password-strength__requirement {
    transition: none;
  }
}

/* Scrollable Panel Component */
.bc-scrollable-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Header - always sticks to top */
.bc-scrollable-panel__header {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Body - scrollable content area */
.bc-scrollable-panel__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

/* Footer - always sticks to bottom */
.bc-scrollable-panel__footer {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Ensure proper stacking context */
.bc-scrollable-panel__header,
.bc-scrollable-panel__footer {
  isolation: isolate;
}

/* Smooth scrolling for better UX */
.bc-scrollable-panel__body {
  scroll-behavior: smooth;
}

.bc-scrollable-panel--scrolled-down .bc-scrollable-panel--header-shadow,
.bc-scrollable-panel--scrolled-up .bc-scrollable-panel--footer-shadow {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  height: 0px;
  z-index: 2;
  pointer-events: none;
}

.bc-scrollable-panel--header-shadow > div,
.bc-scrollable-panel--footer-shadow > div {
  width: 100%;
  height: 20px;
  position: absolute;
  transition: box-shadow
    var(--motion-transition-slow, var(--motion-duration-slow, 0.5s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  box-shadow: var(--shadow-scrollable-panel-idle, 0 0 0 transparent);
  background-color: transparent;
}

.bc-scrollable-panel--header-shadow > div {
  bottom: 0;
}

.bc-scrollable-panel--scrolled-down .bc-scrollable-panel--header-shadow > div {
  box-shadow: var(--shadow-surface-elevated, var(--shadow-md));
}

.bc-scrollable-panel--footer-shadow > div {
  top: 0;
}
.bc-scrollable-panel--scrolled-up .bc-scrollable-panel--footer-shadow > div {
  box-shadow: var(--shadow-top-md);
}

/* Custom scrollbar styling (webkit browsers) */
.bc-scrollable-panel__body::-webkit-scrollbar {
  width: 0.5rem;
}

.bc-scrollable-panel__body::-webkit-scrollbar-track {
  background: var(--color-base-200);
  border-radius: var(--radius-sm);
}

.bc-scrollable-panel__body::-webkit-scrollbar-thumb {
  background: var(--color-base-400);
  border-radius: var(--radius-sm);
  transition: background-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-base-500);
}

/* Firefox scrollbar styling */
.bc-scrollable-panel__body {
  scrollbar-width: thin;
  scrollbar-color: var(--color-base-400) var(--color-base-200);
}

/* Dark mode styles */
.b-dark .bc-scrollable-panel__body::-webkit-scrollbar-track {
  background: var(--bg-subtle-dark);
}

.b-dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb {
  background: var(--bg-raised-dark);
  border-radius: var(--radius-sm);
}

.b-dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
  background: var(--bg-overlay-dark);
}

.b-dark .bc-scrollable-panel__body {
  scrollbar-color: var(--bg-raised-dark) var(--bg-subtle-dark);
}

/* Segmented Control Component */
.bc-segmented-control {
  background-color: var(--color-base-200);
  border-radius: var(--radius-pill, var(--radius-full));
  box-shadow: var(--shadow-surface, var(--shadow-sm));
  position: relative;
  border: 1px solid var(--color-base-300);
  padding: var(--spacing-sm);
  display: inline-block;
}

.bc-segmented-control__container {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-segmented-control--size-xs .bc-segmented-control__container {
  gap: var(--spacing-stack-xs, var(--spacing-xs));
}

.bc-segmented-control--size-sm .bc-segmented-control__container {
  gap: var(--spacing-stack-sm, var(--spacing-sm));
}

.bc-segmented-control--size-md .bc-segmented-control__container {
  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
}

.bc-segmented-control--size-lg .bc-segmented-control__container {
  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
}

.bc-segmented-control--size-xl .bc-segmented-control__container {
  gap: var(--spacing-stack-xl, var(--spacing-xl));
}

/* Sliding indicator */
.bc-segmented-control__indicator {
  position: absolute;
  height: 100%;
  background-color: var(--color-base-50);
  transition: transform
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  transform: translateX(0);
  border-radius: var(--radius-pill, var(--radius-full));
  box-shadow: var(--shadow-surface, var(--shadow-sm));
  z-index: 1;
}

/* Segment buttons */
.bc-segmented-control__segment {
  position: relative;
  /* padding: var(--spacing-sm) var(--spacing-md); */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
  color: var(--color-base-700);
  transition: color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  z-index: 2;
  border-radius: var(--radius-pill, var(--radius-full));
  font-family: var(
    --default-ui-font-family,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
}

.bc-segmented-control--size-xs .bc-segmented-control__segment {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.bc-segmented-control--size-sm .bc-segmented-control__segment {
  padding: var(--spacing-sm) var(--spacing-md);
}

.bc-segmented-control--size-md .bc-segmented-control__segment {
  padding: var(--spacing-md) var(--spacing-lg);
}

.bc-segmented-control--size-lg .bc-segmented-control__segment {
  padding: var(--spacing-lg) var(--spacing-2xl);
}

.bc-segmented-control--size-xl .bc-segmented-control__segment {
  padding: var(--spacing-xl) var(--spacing-3xl);
}

.bc-segmented-control__segment:hover {
  background-color: var(--color-white);
  color: var(--color-base-900);
}

.bc-segmented-control__segment--active {
  color: var(--color-primary-800);
}

.bc-segmented-control__segment--inactive {
  color: var(--color-base-600);
}

/* Disabled state */
.bc-segmented-control--disabled {
  background-color: var(--color-base-300);
  border: 1px solid var(--color-base-300);
  cursor: not-allowed;
}

.bc-segmented-control--disabled .bc-segmented-control__segment {
  color: var(--text-muted-light);
  cursor: not-allowed;
}

.bc-segmented-control--disabled .bc-segmented-control__segment:hover {
  background-color: var(--color-base-300);
}

.bc-segmented-control--disabled .bc-segmented-control__segment--active,
.bc-segmented-control--disabled .bc-segmented-control__segment--active:hover {
  background-color: var(--color-base-200);
  color: var(--text-muted-light);
}

/* Dark mode styles */
.b-dark .bc-segmented-control {
  background-color: var(--bg-subtle-dark);
  border: 1px solid var(--border-border-dark);
}

.b-dark .bc-segmented-control__indicator {
  background-color: var(--bg-elevated-dark);
  box-shadow: var(
    --shadow-segmented-control-indicator-dark,
    0 1px 3px var(--shadow-color-dark),
    0 0 0 1px var(--shadow-highlight-dark)
  );
}

.b-dark .bc-segmented-control__segment {
  color: var(--text-muted-dark);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  border-radius: var(--radius-full);
}

.b-dark .bc-segmented-control__segment:hover {
  color: var(--text-normal-dark);
  background-color: var(--interactive-hover-dark);
}

.b-dark .bc-segmented-control__segment--active,
.b-dark .bc-segmented-control__segment--active:hover {
  color: var(--text-normal-dark);
  background: transparent;
}

.b-dark .bc-segmented-control__segment--inactive {
  color: var(--text-muted-dark);
}

.b-dark .bc-segmented-control__segment--inactive:hover {
  color: var(--text-normal-dark);
}

/* Disabled state (dark) */
.b-dark .bc-segmented-control--disabled {
  background-color: var(--bg-background-dark);
  border: 1px solid var(--border-divider-dark);
  opacity: 0.5;
}

.b-dark .bc-segmented-control--disabled .bc-segmented-control__indicator {
  background-color: var(--bg-subtle-dark);
  box-shadow: var(--shadow-none, none);
}

.b-dark .bc-segmented-control--disabled .bc-segmented-control__segment {
  color: var(--text-muted-dark);
  cursor: not-allowed;
}

.b-dark .bc-segmented-control--disabled .bc-segmented-control__segment:hover {
  color: var(--text-muted-dark);
  background-color: transparent;
}

.bc-sidebar {
  background-color: var(--bg-background-light);
  padding: var(--spacing-lg);
  width: 100%;
}

.bc-sidebar-group__header,
.bc-sidebar-link {
  color: var(--text-normal-light);
}

/* Dark background mode - inverted colors */
.bc-sidebar--dark-bg {
  background-color: var(--bg-background-dark);
  color: var(--text-normal-dark);
}

/* Dark theme overrides for light background mode */
.b-dark .bc-sidebar {
  background-color: var(--bg-background-dark);
  color: var(--text-normal-dark);
}

/* Dark theme overrides for dark background mode - inverted */
.b-dark .bc-sidebar--dark-bg {
  background-color: var(--bg-background-light);
  color: var(--text-normal-light);
}

.bc-sidebar-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 2);
}

.bc-sidebar-group__header {
  font-weight: 500;
  color: var(--color-base-500);
  padding-inline-start: 0;
}

.bc-sidebar-link__content {
  flex: 1;
}

button.bc-sidebar-link:hover,
a.bc-sidebar-link:hover {
  background-color: var(--interactive-hover-light);
  cursor: pointer;
}

span.bc-sidebar-link {
  font-weight: var(--font-weight-medium);
  width: 100%;
}

.bc-sidebar-link--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-base) * 4);
  height: calc(var(--spacing-base) * 4);
  color: var(--text-muted-light);
}

.bc-sidebar-link--action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-base) * 6);
  height: calc(var(--spacing-base) * 6);
  border: 1px solid var(--border-border-light);
  border-radius: var(--radius-control, var(--radius-md));
  cursor: pointer;
  padding: var(--spacing-sm);
  color: var(--text-normal-light);
}

.bc-sidebar-link--action:hover {
  background-color: var(--interactive-hover-light);
  border-color: var(--border-divider-light);
}

.bc-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: stretch;
  width: 100%;
}

.bc-sidebar-group--rail {
  padding-inline-start: calc(var(--spacing-base) * 2);
  margin-left: 1px;
  border-left: 1px solid var(--border-border-light);
}

.bc-sidebar-group-collapsible-indicator {
  transition: transform
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-sidebar-group-collapsible--open .bc-sidebar-group-collapsible-indicator {
  transform: rotate(0deg);
}

.bc-sidebar-group-collapsible--closed .bc-sidebar-group-collapsible-indicator {
  transform: rotate(90deg);
}

/* RTL support for collapsible indicator */
.b-rtl
  .bc-sidebar-group-collapsible--closed
  .bc-sidebar-group-collapsible-indicator {
  transform: rotate(-90deg);
}

/* Dark mode styles */
.b-dark button.bc-sidebar-link:hover,
.b-dark a.bc-sidebar-link:hover {
  background-color: var(--interactive-hover-dark);
}

.b-dark span.bc-sidebar-link {
  color: var(--color-primary-200);
}

.b-dark .bc-sidebar-link {
  color: var(--text-normal-dark);
}

.b-dark .bc-sidebar-link--icon {
  color: var(--text-muted-dark);
}

.b-dark .bc-sidebar-link--action {
  color: var(--text-normal-dark);
  border: 1px solid var(--border-border-dark);
}

.b-dark .bc-sidebar-link--action:hover {
  background-color: var(--interactive-hover-dark);
  border-color: var(--border-divider-dark);
}

.b-dark .bc-sidebar-group--rail {
  border-inline-start: 1px solid var(--border-border-dark);
}

/* Dark background mode styles - inverted colors in light theme */
.bc-sidebar--dark-bg button.bc-sidebar-link:hover,
.bc-sidebar--dark-bg a.bc-sidebar-link:hover {
  background-color: var(--interactive-hover-dark);
}

.bc-sidebar--dark-bg span.bc-sidebar-link {
  color: var(--color-primary-200);
}

.bc-sidebar--dark-bg .bc-sidebar-link {
  color: var(--text-normal-dark);
}

.bc-sidebar--dark-bg .bc-sidebar-link--icon {
  color: var(--text-muted-dark);
}

.bc-sidebar--dark-bg .bc-sidebar-link--action {
  color: var(--text-normal-dark);
  border: 1px solid var(--border-border-dark);
}

.bc-sidebar--dark-bg .bc-sidebar-link--action:hover {
  background-color: var(--interactive-hover-dark);
  border-color: var(--border-divider-dark);
}

.bc-sidebar--dark-bg .bc-sidebar-group--rail {
  border-inline-start: 1px solid var(--border-border-dark);
}

/* Dark background mode in dark theme - inverted back to light colors */
.b-dark .bc-sidebar--dark-bg button.bc-sidebar-link:hover,
.b-dark .bc-sidebar--dark-bg a.bc-sidebar-link:hover {
  background-color: var(--interactive-hover-light);
}

.b-dark .bc-sidebar--dark-bg span.bc-sidebar-link {
  color: var(--color-primary-700);
}

.b-dark .bc-sidebar--dark-bg .bc-sidebar-link {
  color: var(--text-normal-light);
}

.b-dark .bc-sidebar--dark-bg .bc-sidebar-link--icon {
  color: var(--text-muted-light);
}

.b-dark .bc-sidebar--dark-bg .bc-sidebar-link--action {
  color: var(--text-normal-light);
  border: 1px solid var(--border-border-light);
}

.b-dark .bc-sidebar--dark-bg .bc-sidebar-link--action:hover {
  background-color: var(--interactive-hover-light);
  border-color: var(--border-divider-light);
}

.b-dark .bc-sidebar--dark-bg .bc-sidebar-group--rail {
  border-inline-start: 1px solid var(--border-border-light);
}

.bc-sidebar-separator {
  border: none;
  border-top: 1px solid var(--border-border-light);
  margin: calc(var(--spacing-base) * 2) 0;
}

/* Sink Component */
.bc-sink {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-surface, var(--radius-lg));
  border: 1px solid var(--color-base-300);
  padding: var(--spacing-md);
  box-shadow: var(
    --shadow-sink,
    inset 0 0 0.25rem color-mix(in srgb, var(--color-black) 20%, transparent)
  );
  background-color: var(--color-base-50);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Sink variants */
.bc-sink--deep {
  box-shadow: var(
    --shadow-sink-deep,
    inset 0 0 0.5rem color-mix(in srgb, var(--color-black) 30%, transparent)
  );
}

.bc-sink--shallow {
  box-shadow: var(
    --shadow-sink-shallow,
    inset 0 0 0.125rem color-mix(in srgb, var(--color-black) 10%, transparent)
  );
}

.bc-sink--flat {
  box-shadow: var(--shadow-sink-flat, none);
  border: 1px solid var(--color-base-200);
}

/* Sink sizes */
.bc-sink--padding-xs {
  padding: var(--spacing-xs);
}

.bc-sink--padding-sm {
  padding: var(--spacing-sm);
}

.bc-sink--padding-md {
  padding: var(--spacing-md);
}

.bc-sink--padding-lg {
  padding: var(--spacing-lg);
}

.bc-sink--padding-xl {
  padding: var(--spacing-xl);
}

/* Sink roundedness */
.bc-sink--rounded-none {
  border-radius: 0;
}

.bc-sink--rounded-sm {
  border-radius: var(--radius-sm);
}

.bc-sink--rounded-md {
  border-radius: var(--radius-md);
}

.bc-sink--rounded-lg {
  border-radius: var(--radius-lg);
}

.bc-sink--rounded-xl {
  border-radius: var(--radius-xl);
}

.bc-sink--rounded-full {
  border-radius: var(--radius-full);
}

/* Dark mode styles */
.b-dark .bc-sink {
  background-color: var(--bg-background-dark);
  border: 1px solid var(--border-border-dark);
  box-shadow: var(--shadow-sink-dark, inset 0 2px 4px var(--shadow-color-dark));
  color: var(--text-normal-dark);
}

.b-dark .bc-sink--deep {
  box-shadow: var(
    --shadow-sink-dark-deep,
    inset 0 4px 8px var(--shadow-color-dark)
  );
}

.b-dark .bc-sink--shallow {
  box-shadow: var(
    --shadow-sink-dark-shallow,
    inset 0 1px 2px var(--shadow-color-dark)
  );
}

.b-dark .bc-sink--flat {
  box-shadow: var(--shadow-sink-dark-flat, none);
  border: 1px solid var(--border-divider-dark);
  background-color: var(--bg-subtle-dark);
}

.bc-stack {
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}

.bc-stack--gap-1 {
  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
}

.bc-stack--gap-2 {
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
}

.bc-stack--gap-4 {
  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
}

.bc-stack--align-center {
  align-items: center;
}

.bc-stack--grow {
  flex-grow: 1;
  width: 100%;
}

/* Tag Component */
.bc-tag {
  --tag-bg: var(--bg-subtle-light);
  --tag-bg-dark: var(--bg-elevated-dark);
  --tag-text: var(--text-normal-light);
  --tag-text-dark: var(--text-normal-dark);
  --tag-bg-hover: var(--tag-bg);
  --tag-bg-hover-dark: var(--tag-bg-dark);
  --tag-text-hover: var(--tag-text);
  --tag-text-hover-dark: var(--tag-text-dark);
  --tag-border: transparent;
  --tag-border-dark: transparent;

  display: inline-flex;
  flex-direction: row;
  align-items: center;
  border-radius: var(--radius-pill, var(--radius-full));
  line-height: 1.2;
  border: 1px solid var(--tag-border);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  font-size: var(--font-size-base);
  padding: 0 calc(var(--spacing-base) * 2);
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  background-color: var(--tag-bg);
  color: var(--tag-text);
  font-family: var(
    --default-ui-font-family,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
}

.bc-tag:hover {
  background-color: var(--tag-bg-hover);
  color: var(--tag-text-hover);
}

.bc-tag--xs {
  font-size: var(--font-size-xs);
  padding: 0 calc(var(--spacing-base) * 1);
}

.bc-tag--sm {
  font-size: var(--font-size-sm);
  padding: 0 calc(var(--spacing-base) * 1.5);
}

.bc-tag--lg {
  font-size: var(--font-size-lg);
  padding: 0 calc(var(--spacing-base) * 2.5);
}

.bc-tag--xl {
  font-size: var(--font-size-xl);
  padding: 0 calc(var(--spacing-base) * 3);
}

.bc-tag:has(.bc-tag__close) {
  padding-inline-end: calc(var(--spacing-base) * 0.5);
}

/* Close button */
.bc-tag__close {
  background: transparent;
  color: var(--color-gray-200);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-base) * 4);
  height: calc(var(--spacing-base) * 4);
  border-radius: var(--radius-full);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  border: 1px solid transparent;
}

.bc-tag__close:hover {
  color: var(--color-white);
  border-color: var(--color-gray-300);
}

/* Disabled state via class */
.bc-tag.bc-tag--disabled {
  opacity: 0.55;
  filter: grayscale(0.4) saturate(0.8);
  cursor: default;
}

.bc-tag.bc-tag--disabled .bc-tag__close {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

/* Neutralize hover on disabled close button */
.bc-tag.bc-tag--disabled .bc-tag__close:hover {
  color: inherit;
  border-color: transparent;
}

/* Dark mode styles */
.b-dark .bc-tag {
  background-color: var(--tag-bg-dark);
  color: var(--tag-text-dark);
  border-color: var(--tag-border-dark);
}

.b-dark .bc-tag:hover {
  background-color: var(--tag-bg-hover-dark);
  color: var(--tag-text-hover-dark);
}

.b-dark .bc-tag__close {
  color: var(--text-muted-dark);
}

.b-dark .bc-tag__close:hover:not(:disabled) {
  color: var(--text-normal-dark);
  border-color: var(--border-border-dark);
}

.bc-input-container__tags-selector {
  flex-grow: 1;
  background-color: transparent;
  min-width: 100px;
  min-height: 1rem;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
}

/* Switch Component */
.bc-switch {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
  cursor: pointer;
  --switch-track-on-bg: var(--color-primary-500);
  --switch-track-on-label: var(--color-gray-100);
  --switch-track-on-bg-dark: var(--color-primary-600);
  --switch-track-on-label-dark: var(--text-normal-dark);
  --switch-track-on-border-dark: var(--color-primary-500);
}

/* Switch label */
.bc-switch__label {
  color: var(--color-gray-500);
  user-select: none;
}

.bc-switch__label--nowrap {
  white-space: nowrap;
}

.bc-switch--size-xs .bc-switch__label {
  font-size: var(--font-size-xs);
}

.bc-switch--size-sm .bc-switch__label {
  font-size: var(--font-size-sm);
}

.bc-switch--size-md .bc-switch__label {
  font-size: var(--font-size-base);
}

.bc-switch--size-lg .bc-switch__label {
  font-size: var(--font-size-lg);
}

.bc-switch--size-xl .bc-switch__label {
  font-size: var(--font-size-xl);
}

/* Switch track container */
.bc-switch__track {
  position: relative;
  display: grid;
  grid-template-areas: 'stack';
  border-radius: var(--radius-full);
  box-shadow: var(
    --shadow-switch-track,
    inset 0 0 calc(var(--spacing-base))
      color-mix(in srgb, var(--color-black) 20%, transparent)
  );
  transition: background-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  cursor: pointer;
  padding: calc(var(--spacing-base)) var(--spacing-base);
}

/* Switch track - off state */
.bc-switch__track--off {
  background-color: var(--color-gray-300);
}

/* Switch track - on state */
.bc-switch__track--on {
  background-color: var(--switch-track-on-bg, var(--color-primary-500));
}

/* Switch labels inside track */
.bc-switch__track-label {
  grid-area: stack;
  display: flex;
  align-items: center;
  z-index: 1;
  transition: opacity
    var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  pointer-events: none;
}

/* Off label positioning and styling */
.bc-switch__track-label--off {
  justify-content: flex-end;
  padding-inline-end: var(--spacing-base);
  padding-inline-start: calc(var(--spacing-base) * 5);
  color: var(--color-gray-600);
  line-height: 1;
}

/* On label positioning and styling */
.bc-switch__track-label--on {
  justify-content: flex-start;
  padding-inline-end: calc(var(--spacing-base) * 5);
  padding-inline-start: var(--spacing-base);
  color: var(--switch-track-on-label, var(--color-gray-100));
  line-height: 1;
}

.bc-switch--size-xs .bc-switch__track-label {
  font-size: var(--font-size-2xs);
}

.bc-switch--size-sm .bc-switch__track-label {
  font-size: var(--font-size-xs);
}

.bc-switch--size-md .bc-switch__track-label {
  font-size: var(--font-size-sm);
}

.bc-switch--size-lg .bc-switch__track-label {
  font-size: var(--font-size-md);
}

.bc-switch--size-xl .bc-switch__track-label {
  font-size: var(--font-size-lg);
}

/* Label visibility states */
.bc-switch__track-label--visible {
  opacity: 1;
}

.bc-switch__track-label--hidden {
  opacity: 0;
}

/* Switch thumb/handle */
.bc-switch__thumb {
  grid-area: stack;
  width: calc(var(--spacing-base) * 4); /* 16px equivalent */
  height: calc(var(--spacing-base) * 4);
  /* margin-top: calc(var(--spacing-base) / 2); */
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  box-shadow: var(
    --shadow-switch-thumb,
    0 1px 3px 0 color-mix(in srgb, var(--color-black) 10%, transparent),
    0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent)
  );
  z-index: 1;
  transition: transform
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  pointer-events: none;
}

/* Size variants for track and thumb */
.bc-switch--xs .bc-switch__thumb {
  width: calc(var(--spacing-base) * 3); /* 12px equivalent */
  height: calc(var(--spacing-base) * 3);
  /* margin-top: calc(var(--spacing-base) / 1); */
}
.bc-switch--xs .bc-switch__track-label--off {
  padding-inline-end: var(--spacing-base);
  padding-inline-start: calc(var(--spacing-base) * 4);
}
.bc-switch--xs .bc-switch__track-label--on {
  padding-inline-end: calc(var(--spacing-base) * 4);
  padding-inline-start: var(--spacing-base);
}
.bc-switch--xs .bc-switch__track {
  min-width: calc(var(--spacing-base) * 7.5);
}

.bc-switch--sm .bc-switch__thumb {
  width: calc(var(--spacing-base) * 3.5); /* 14px equivalent */
  height: calc(var(--spacing-base) * 3.5);
  /* margin-top: calc(var(--spacing-base) / 1); */
}
.bc-switch--sm .bc-switch__track-label--off {
  padding-inline-end: var(--spacing-base);
  padding-inline-start: calc(var(--spacing-base) * 5);
}
.bc-switch--sm .bc-switch__track-label--on {
  padding-inline-end: calc(var(--spacing-base) * 5);
  padding-inline-start: var(--spacing-base);
}
.bc-switch--sm .bc-switch__track {
  min-width: calc(var(--spacing-base) * 9);
}

.bc-switch--md .bc-switch__thumb {
  width: calc(var(--spacing-base) * 4); /* 20px equivalent */
  height: calc(var(--spacing-base) * 4);
  /* margin-top: calc(var(--spacing-base) / 1); */
}
.bc-switch--md .bc-switch__track-label--off {
  padding-inline-end: var(--spacing-base);
  padding-inline-start: calc(var(--spacing-base) * 6);
}
.bc-switch--md .bc-switch__track-label--on {
  padding-inline-end: calc(var(--spacing-base) * 6);
  padding-inline-start: var(--spacing-base);
}
.bc-switch--md .bc-switch__track {
  min-width: calc(var(--spacing-base) * 10.5);
}

.bc-switch--lg .bc-switch__thumb {
  width: calc(var(--spacing-base) * 5); /* 20px equivalent */
  height: calc(var(--spacing-base) * 5);
  /* margin-top: calc(var(--spacing-base) / 1); */
}
.bc-switch--lg .bc-switch__track-label--off {
  padding-inline-end: var(--spacing-base);
  padding-inline-start: calc(var(--spacing-base) * 7);
}
.bc-switch--lg .bc-switch__track-label--on {
  padding-inline-end: calc(var(--spacing-base) * 7);
  padding-inline-start: var(--spacing-base);
}
.bc-switch--lg .bc-switch__track {
  min-width: calc(var(--spacing-base) * 12);
}

.bc-switch--xl .bc-switch__thumb {
  width: calc(var(--spacing-base) * 6); /* 24px equivalent */
  height: calc(var(--spacing-base) * 6);
  /* margin-top: calc(var(--spacing-base) / 1); */
}
.bc-switch--xl .bc-switch__track-label--off {
  padding-inline-end: var(--spacing-base);
  padding-inline-start: calc(var(--spacing-base) * 7);
}
.bc-switch--xl .bc-switch__track-label--on {
  padding-inline-end: calc(var(--spacing-base) * 7);
  padding-inline-start: var(--spacing-base);
}
.bc-switch--xl .bc-switch__track {
  min-width: calc(var(--spacing-base) * 13.5);
}

/* Focus styles are handled by the base focus system */

/* Disabled state */
.bc-switch--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.bc-switch--disabled .bc-switch__track {
  cursor: not-allowed;
}

/* Dark mode styles */
.b-dark .bc-switch__label {
  color: var(--text-normal-dark);
}

.b-dark .bc-switch__track--off {
  background-color: var(--bg-subtle-dark);
  border: 1px solid var(--border-border-dark);
}

.b-dark .bc-switch__track--on {
  background-color: var(--switch-track-on-bg-dark, var(--color-primary-600));
  border: 1px solid var(--switch-track-on-border-dark, var(--color-primary-500));
}

.b-dark .bc-switch__track-label--off {
  color: var(--text-muted-dark);
}

.b-dark .bc-switch__track-label--on {
  color: var(--switch-track-on-label-dark, var(--text-normal-dark));
}

.b-dark .bc-switch__thumb {
  background-color: var(--text-normal-dark);
  box-shadow: var(--shadow-switch-thumb-dark, var(--shadow-md));
}

/* Table Container */
.bc-table-container {
  --table-bg: #fff;
  --table-text: var(--text-normal-light);
  --table-border: var(--border-border-light);
  --table-header-bg: var(--bg-surface-light);
  --table-header-text: var(--text-normal-light);
  --table-stripe-bg: var(--bg-background-light);
  --table-hover-bg: var(--interactive-hover-light);
  --table-border-radius: var(--radius-surface, var(--radius-lg));

  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--table-border-radius);
}

/* Container for sticky header - needs to be scrollable */
.bc-table-container--sticky {
  max-height: 100%;
  overflow: auto;
}

/* Full width container */
.bc-table-container--full-width {
  display: block;
  width: 100%;
}

/* Table Component */
.bc-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--table-bg);
  color: var(--table-text);
  font-family: var(
    --default-ui-font-family,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  border: none;
}

/* Table header */
.bc-table > thead,
.bc-table > tfoot {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: var(--font-weight-semibold);
}

/* Sticky header */
.bc-table--sticky-header > thead {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky, 10);
  box-shadow: var(--shadow-sm);
}

/* Sticky footer */
.bc-table--sticky-header > tfoot {
  position: sticky;
  bottom: 0;
  z-index: var(--z-index-sticky, 10);
  box-shadow: var(--shadow-sm);
}

/* Table cells */
.bc-table > thead > tr > th,
.bc-table > thead > tr > td,
.bc-table > tbody > tr > th,
.bc-table > tbody > tr > td,
.bc-table > tfoot > tr > th,
.bc-table > tfoot > tr > td {
  text-align: left;
  vertical-align: middle;
  padding: var(--spacing-md);
  border: none;
}

.bc-table > thead > tr > th,
.bc-table > tbody > tr > th,
.bc-table > tfoot > tr > th {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* With table border */
.bc-table-container--with-table-border {
  border: 1px solid var(--table-border);
}

/* With row borders */
.bc-table--with-row-borders > thead > tr > th,
.bc-table--with-row-borders > thead > tr > td,
.bc-table--with-row-borders > tbody > tr > th,
.bc-table--with-row-borders > tbody > tr > td,
.bc-table--with-row-borders > tfoot > tr > th,
.bc-table--with-row-borders > tfoot > tr > td {
  border-bottom: 1px solid var(--table-border);
}

/* With column borders */
.bc-table--with-column-borders > thead > tr > th,
.bc-table--with-column-borders > thead > tr > td,
.bc-table--with-column-borders > tbody > tr > th,
.bc-table--with-column-borders > tbody > tr > td,
.bc-table--with-column-borders > tfoot > tr > th,
.bc-table--with-column-borders > tfoot > tr > td {
  border-right: 1px solid var(--table-border);
}

.bc-table--with-column-borders > thead > tr > th:last-child,
.bc-table--with-column-borders > thead > tr > td:last-child,
.bc-table--with-column-borders > tbody > tr > th:last-child,
.bc-table--with-column-borders > tbody > tr > td:last-child,
.bc-table--with-column-borders > tfoot > tr > th:last-child,
.bc-table--with-column-borders > tfoot > tr > td:last-child {
  border-right: none;
}

/* With striped rows */
.bc-table--with-striped-rows > tbody > tr:nth-child(even) {
  background-color: var(--table-stripe-bg);
}

/* Hoverable striped rows - darker stripe on hover */
.bc-table--hoverable.bc-table--with-striped-rows
  > tbody
  > tr:nth-child(even):hover {
  background-color: var(--table-hover-bg);
  filter: brightness(0.95);
}

/* Size variants */
.bc-table--size-xs > thead > tr > th,
.bc-table--size-xs > thead > tr > td,
.bc-table--size-xs > tbody > tr > th,
.bc-table--size-xs > tbody > tr > td,
.bc-table--size-xs > tfoot > tr > th,
.bc-table--size-xs > tfoot > tr > td {
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.bc-table--size-sm > thead > tr > th,
.bc-table--size-sm > thead > tr > td,
.bc-table--size-sm > tbody > tr > th,
.bc-table--size-sm > tbody > tr > td,
.bc-table--size-sm > tfoot > tr > th,
.bc-table--size-sm > tfoot > tr > td {
  padding: calc(var(--spacing-base) * 1.5);
  font-size: var(--font-size-sm);
}

.bc-table--size-lg > thead > tr > th,
.bc-table--size-lg > thead > tr > td,
.bc-table--size-lg > tbody > tr > th,
.bc-table--size-lg > tbody > tr > td,
.bc-table--size-lg > tfoot > tr > th,
.bc-table--size-lg > tfoot > tr > td {
  padding: var(--spacing-lg);
}

.bc-table--size-xl > thead > tr > th,
.bc-table--size-xl > thead > tr > td,
.bc-table--size-xl > tbody > tr > th,
.bc-table--size-xl > tbody > tr > td,
.bc-table--size-xl > tfoot > tr > th,
.bc-table--size-xl > tfoot > tr > td {
  padding: calc(var(--spacing-base) * 5);
  font-size: var(--font-size-lg);
}

/* Hoverable rows */
.bc-table--hoverable > tbody > tr {
  transition: background-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  cursor: pointer;
}

.bc-table--hoverable > tbody > tr:hover {
  background-color: var(--table-hover-bg);
}

/* Footer */
.bc-table__footer {
  background-color: var(--table-header-bg);
  font-weight: var(--font-weight-semibold);
  border-top: 2px solid var(--table-border);
}

/* Dark mode styles */
.b-dark .bc-table-container {
  --table-bg: var(--bg-background-dark);
  --table-text: var(--text-normal-dark);
  --table-border: var(--border-border-dark);
  --table-header-bg: var(--bg-surface-dark);
  --table-header-text: var(--text-normal-dark);
  --table-stripe-bg: var(--bg-surface-dark);
  --table-hover-bg: var(--interactive-hover-dark);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .bc-table--hoverable > tbody > tr {
    transition: none;
  }
}

/* Responsive behavior - allow horizontal scroll on small screens */
@media (width < 48rem) {
  .bc-table-container {
    overflow-x: auto;
  }

  .bc-table {
    white-space: nowrap;
  }
}

/* Tabs Component */
.bc-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bc-tabs--horizontal {
  flex-direction: column;
}

.bc-tabs--vertical {
  flex-direction: row;
}

.bc-tabs--disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Tab List */
.bc-tabs__list {
  display: flex;
  position: relative;
  background-color: var(--color-base-100);
  border-bottom: 2px solid var(--color-base-200);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: max-content;
  flex-shrink: 0;
}

.bc-tabs__list::-webkit-scrollbar {
  display: none;
}

.bc-tabs--vertical .bc-tabs__list {
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid var(--color-base-200);
  min-width: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Individual Tab */
.bc-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(
    --default-ui-font-family,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  font-weight: var(--font-weight-medium);
  color: var(--color-base-600);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  white-space: nowrap;
  position: relative;
  border-radius: var(--radius-control-sm, var(--radius-sm))
    var(--radius-control-sm, var(--radius-sm)) 0 0;
}

.bc-tabs--vertical .bc-tab {
  justify-content: flex-start;
  border-radius: var(--radius-control-sm, var(--radius-sm)) 0 0
    var(--radius-control-sm, var(--radius-sm));
}

/* Tab Sizes */
.bc-tab--xs {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
  min-height: var(--spacing-xl);
}

.bc-tab--sm {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  min-height: var(--spacing-2xl);
}

.bc-tab--md {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-base);
  min-height: var(--spacing-3xl);
}

.bc-tab--lg {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: var(--font-size-lg);
  min-height: var(--spacing-4xl);
}

.bc-tab--xl {
  padding: var(--spacing-xl) var(--spacing-3xl);
  font-size: var(--font-size-xl);
  min-height: var(--spacing-5xl);
}

/* Tab States */
.bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
  color: var(--color-base-800);
  background-color: var(--color-base-50);
}

.bc-tab:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
  z-index: 1;
}

.bc-tab--active {
  color: var(--color-primary-600);
  background-color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

.bc-tab--active::after {
  content: '';
  position: absolute;
  background-color: var(--color-primary-500);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-tabs--horizontal .bc-tab--active::after {
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
}

.bc-tabs--vertical .bc-tab--active::after {
  right: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
}

.bc-tab--disabled {
  color: var(--color-base-400);
  cursor: not-allowed;
  opacity: 0.5;
}

.bc-tab--disabled:hover {
  color: var(--color-base-400);
  background-color: transparent;
}

/* Tab Panels Container */
.bc-tabs__panels {
  flex-grow: 1;
  overflow: hidden;
}

.bc-tabs--vertical .bc-tabs__panels {
  min-height: 0;
}

/* Individual Tab Panel */
.bc-tabs__panel {
  padding: var(--spacing-lg);
  background-color: var(--color-white);
  border-radius: 0 0 var(--radius-popover, var(--radius-md))
    var(--radius-popover, var(--radius-md));
  height: 100%;
}

.bc-tabs--vertical .bc-tabs__panel {
  border-radius: 0 var(--radius-popover, var(--radius-md))
    var(--radius-popover, var(--radius-md)) 0;
  height: 100%;
  overflow-y: auto;
}

.bc-tabs__panel:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
}

/* Responsive Design */
@container (max-width: 640px) {
  .bc-tabs__list {
    overflow-x: auto;
  }

  .bc-tab {
    min-width: 120px;
    flex-shrink: 0;
  }

  .bc-tabs__panel {
    padding: var(--spacing-md);
  }
}

/* Dark mode support */
.b-dark .bc-tabs__list {
  background-color: var(--color-base-800);
  border-color: var(--color-base-700);
}

.b-dark .bc-tab {
  color: var(--color-base-300);
}

.b-dark .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
  color: var(--color-base-100);
  background-color: var(--color-base-700);
}

.b-dark .bc-tab--active {
  color: var(--color-primary-400);
  background-color: var(--color-base-900);
}

.b-dark .bc-tab--disabled {
  color: var(--color-base-600);
}

.b-dark .bc-tabs__panel {
  background-color: var(--color-base-900);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-tabs__list {
    border-width: 3px;
  }

  .bc-tab--active::after {
    height: 3px;
  }

  .bc-tabs--vertical .bc-tab--active::after {
    width: 3px;
  }

  .bc-tab:focus-visible {
    outline-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-tab,
  .bc-tab--active::after {
    transition: none;
  }
}

/* Variants */
/* Text variant: minimal, link-like tabs */
.bc-tabs--variant-text .bc-tabs__list {
  background-color: transparent;
  border-bottom: none;
}
.bc-tabs--variant-text .bc-tab {
  background: transparent;
  color: var(--color-primary-600);
  border-radius: 0;
}
.bc-tabs--variant-text .bc-tab:hover:not(.bc-tab--disabled) {
  background: transparent;
  text-decoration: underline;
}
.bc-tabs--variant-text .bc-tab--active {
  background: transparent;
  color: var(--color-primary-700);
  font-weight: var(--font-weight-semibold);
}
.bc-tabs--variant-text .bc-tab--active::after {
  display: none;
}

/* Filled variant: inverted - inactive tabs filled with color, active is white */
.bc-tabs--variant-filled .bc-tabs__list {
  background-color: transparent;
  border-bottom: none;
}
.bc-tabs--variant-filled .bc-tab {
  background-color: var(--tabs-filled-inactive-bg);
  color: var(--tabs-filled-inactive-text);
  border-radius: 0;
}
.bc-tabs--variant-filled
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active),
.bc-tabs--variant-filled
  .bc-tab:focus-visible:not(.bc-tab--disabled):not(.bc-tab--active) {
  background-color: var(
    --tabs-filled-inactive-bg-hover,
    var(--tabs-filled-inactive-bg)
  );
  color: var(--tabs-filled-inactive-text, var(--color-white));
}
.bc-tabs--variant-filled .bc-tab--active {
  background-color: var(--tabs-filled-active-bg, var(--color-white));
  color: var(--tabs-filled-active-text, var(--color-base-800));
}
.bc-tabs--variant-filled .bc-tab--active::after {
  display: none;
}
/* Corner rounding rules */
.bc-tabs--variant-filled.bc-tabs--horizontal .bc-tab:first-child {
  border-top-start-radius: var(--radius-control-sm, var(--radius-sm));
}
.bc-tabs--variant-filled.bc-tabs--horizontal .bc-tab:last-child {
  border-top-end-radius: var(--radius-control-sm, var(--radius-sm));
}
.bc-tabs--variant-filled.bc-tabs--vertical .bc-tab:first-child {
  border-top-start-radius: var(--radius-control-sm, var(--radius-sm));
}
.bc-tabs--variant-filled.bc-tabs--vertical .bc-tab:last-child {
  border-bottom-start-radius: var(--radius-control-sm, var(--radius-sm));
}

/* Outline variant: tabs look like segmented buttons */
.bc-tabs--variant-outline .bc-tabs__list {
  border-bottom: none;
  gap: var(--spacing-2xs);
}
.bc-tabs--variant-outline .bc-tab {
  background-color: var(--color-base-50);
  border: 1px solid var(--color-base-300);
  border-bottom: 1px solid var(--color-base-300);
  border-radius: var(--radius-control-sm, var(--radius-sm))
    var(--radius-control-sm, var(--radius-sm)) 0 0;
}
.bc-tabs--variant-outline .bc-tab--active {
  background-color: var(--color-white);
  border-color: var(--color-primary-400);
  border-bottom-color: var(--color-white);
}
.bc-tabs--variant-outline .bc-tab--active::after {
  display: none;
}

/* Dark mode adjustments for variants */
.b-dark .bc-tabs--variant-text .bc-tabs__list {
  background-color: transparent;
  border-bottom: none;
}
.b-dark .bc-tabs--variant-text .bc-tab {
  color: var(--color-primary-300);
}
.b-dark .bc-tabs--variant-text .bc-tab--active {
  color: var(--color-primary-200);
}

.b-dark .bc-tabs--variant-filled .bc-tab {
  background-color: var(--tabs-filled-inactive-bg-dark);
  color: var(--tabs-filled-inactive-text-dark);
}
.b-dark .bc-tabs--variant-filled .bc-tab--active {
  background-color: var(--tabs-filled-active-bg-dark, var(--color-white));
  color: var(--tabs-filled-active-text-dark);
}
.b-dark
  .bc-tabs--variant-filled
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active),
.b-dark
  .bc-tabs--variant-filled
  .bc-tab:focus-visible:not(.bc-tab--disabled):not(.bc-tab--active) {
  background-color: var(
    --tabs-filled-inactive-bg-dark-hover,
    var(--tabs-filled-inactive-bg-dark)
  );
}

.b-dark .bc-tabs--variant-outline .bc-tab {
  background-color: var(--color-base-800);
  border-color: var(--color-base-600);
}
.b-dark .bc-tabs--variant-outline .bc-tab--active {
  background-color: var(--color-base-900);
  border-color: var(--color-primary-600);
  border-bottom-color: var(--color-base-900);
}

.bc-tooltip {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-50);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-size-sm);
  line-height: var(--text-line-height-sm);
  font-weight: var(--text-weight-medium);
  max-width: 200px;
  word-wrap: break-word;
  z-index: var(--z-index-tooltip);
  box-shadow: var(--shadow-popover, var(--shadow-md));

  /* Ensure tooltip text doesn't interfere with pointer events */
  pointer-events: none;
}

.bc-tooltip__arrow {
  width: 16px;
  height: 16px;
  position: absolute;
  transform-origin: center;
  /* Remove background and shadow since SVG will handle the styling */
}

.bc-tooltip__arrow svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(var(--shadow-popover, var(--shadow-md)));
}

.bc-tooltip__arrow svg path {
  fill: var(--color-neutral-900);
}

.bc-tooltip__arrow-down {
  left: 0;
  top: 100%;
}

.bc-tooltip__arrow-up {
  left: 0;
  bottom: 100%;
}

.bc-tooltip__arrow-left {
  right: calc(100% - 0.5px);
  top: 0;
}

.bc-tooltip__arrow-right {
  left: calc(100% - 0.5px);
  top: 0;
}

/* Direction-aware arrow positioning */
.bc-tooltip__arrow-inline-start {
  inset-inline-end: calc(100% - 0.5px);
  top: 0;
}

.bc-tooltip__arrow-inline-end {
  inset-inline-start: calc(100% - 0.5px);
  top: 0;
}

/* Show state */
[data-status='opened'] .bc-tooltip,
[data-status='entering'] .bc-tooltip {
  opacity: 1;
  transform: scale(1);
}

/* Hide state */
[data-status='closed'] .bc-tooltip,
[data-status='exiting'] .bc-tooltip {
  opacity: 0;
  transform: scale(0.95);
}

/* Dark theme adjustments */
.b-dark .bc-tooltip {
  background-color: var(--bg-elevated-dark);
  color: var(--text-normal-dark);
  border: 1px solid var(--border-border-dark);
  box-shadow: var(
    --shadow-tooltip-dark,
    0 10px 15px -3px var(--shadow-color-dark),
    0 4px 6px -2px var(--shadow-color-dark)
  );
}

.b-dark .bc-tooltip__arrow svg path {
  fill: var(--bg-elevated-dark);
  stroke: var(--border-border-dark);
  stroke-width: 1;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .bc-tooltip {
    border: 1px solid var(--color-neutral-600);
  }

  .b-dark .bc-tooltip {
    border: 1px solid var(--color-neutral-400);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-tooltip {
    transition: none;
  }
}

/* Toolbar Component System */
.bc-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-sm));
  padding: var(--spacing-sm);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-control, var(--radius-md));
  background-color: var(--color-neutral-50);
  width: 100%;
}

.b-dark .bc-toolbar {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

.bc-toolbar__group {
  display: flex;
  align-items: center;
  gap: 0;
}

.bc-toolbar__divider {
  width: 1px;
  height: 1.5rem;
  background-color: var(--color-neutral-300);
  margin: 0 var(--spacing-xs);
}

.b-dark .bc-toolbar__divider {
  background-color: var(--color-neutral-600);
}

.bc-toolbar__spacer {
  flex: 1 1 auto;
}

.bc-toolbar__button {
  display: flex;
  align-items: center;
}

.bc-toolbar__button .bc-button {
  gap: var(--spacing-2xs);
}

.bc-toolbar__button--icon-only .bc-button {
  /* Keep button height consistent; only adjust horizontal padding */
  padding-inline: var(--spacing-2xs);
}

.bc-toolbar .bc-input-container {
  /* Reduce horizontal padding in toolbar but keep vertical from size */
  padding-inline: calc(var(--spacing-base) * 3);
  outline-width: 1px;
  outline-offset: -1px;
  width: auto;
  box-shadow: var(--shadow-none, none);
}

/* Container queries for responsive behavior */
@container (max-width: 480px) {
  .bc-toolbar {
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
  }

  .bc-toolbar__divider {
    height: 1rem;
    margin: 0 var(--spacing-2xs);
  }

  /* Hide only text labels at narrow widths; keep icons visible */
  .bc-toolbar__button
    .bc-button
    > span:not(.sr-only):not(.bc-icon):not(.bc-content-box) {
    display: none;
  }
}

/* Toolbar group button blending */
.bc-toolbar__group > :not(:last-child) {
  border-top-end-radius: 0;
  border-bottom-end-radius: 0;
  margin-left: -1px;
}

.bc-toolbar__group > :not(:first-child) {
  border-top-start-radius: 0;
  border-bottom-start-radius: 0;
  margin-left: -1px;
}

/* Rating Input Component */
.bc-rating-input {
  display: inline-flex;
  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 1));
}

.bc-rating-input__icon-container {
  position: relative;
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-rating-input__icon-empty,
.bc-rating-input__icon-full,
.bc-rating-input__icon-clipper {
  position: absolute;
  display: block;
  overflow: hidden;
}

.bc-rating-input__icon-container:hover {
  transform: scale(1.2);
}

/* Disabled state: no hover scale and different cursor */
.bc-rating-input[aria-disabled='true'] .bc-rating-input__icon-container,
.bc-input-container--disabled .bc-rating-input__icon-container {
  cursor: not-allowed;
}

.bc-rating-input[aria-disabled='true'] .bc-rating-input__icon-container:hover,
.bc-input-container--disabled .bc-rating-input__icon-container:hover {
  transform: none;
}

/* Notice Component */
.bc-notice {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
  align-items: start;
  border-radius: var(--radius-control, var(--radius-md));
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.bc-notice__icon {
  line-height: 0;
}

.bc-notice__title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

.bc-notice__content {
  color: var(--text-normal-light);
}

/* Tones */
.bc-notice--tone-subtle {
  border: 1px solid var(--border-border-light);
  background-color: var(--bg-surface-light);
}

.bc-notice--tone-prominent {
  border: 1px solid var(--border-border-light);
}

/* Variants base color variables per tone */
.bc-notice--info.bc-notice--tone-prominent {
  background-color: var(--color-info-50);
  border-color: var(--color-info-200);
  color: var(--color-info-900);
}

.bc-notice--success.bc-notice--tone-prominent {
  background-color: var(--color-success-50);
  border-color: var(--color-success-200);
  color: var(--color-success-900);
}

.bc-notice--warning.bc-notice--tone-prominent {
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-200);
  color: var(--color-warning-900);
}

.bc-notice--danger.bc-notice--tone-prominent {
  background-color: var(--color-danger-50);
  border-color: var(--color-danger-200);
  color: var(--color-danger-900);
}

.bc-notice--info.bc-notice--tone-subtle {
  background-color: var(--bg-surface-light);
  color: var(--color-info-800);
}

.bc-notice--success.bc-notice--tone-subtle {
  background-color: var(--bg-surface-light);
  color: var(--color-success-800);
}

.bc-notice--warning.bc-notice--tone-subtle {
  background-color: var(--bg-surface-light);
  color: var(--color-warning-800);
}

.bc-notice--danger.bc-notice--tone-subtle {
  background-color: var(--bg-surface-light);
  color: var(--color-danger-800);
}

.bc-notice__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.bc-notice__close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}

@layer components {
  .bc-notification {
    --notification-accent-color: var(--color-primary-500);
    --notification-radius: var(--radius-lg);
    --notification-bg: #fff;
    --notification-border-color: var(--border-divider-light);
    --notification-text-color: var(--text-normal-light);
    --notification-muted-color: var(--text-muted-light);
    --notification-accent-width: 6px;

    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-md);
    border-radius: var(--notification-radius);
    background-color: var(--notification-bg);
    color: var(--notification-text-color);
    border: 1px solid transparent;
    box-shadow: var(--shadow-lg);
  }

  .bc-notification--bordered {
    border-color: var(--notification-border-color);
  }

  .bc-notification__accent {
    margin: 0 var(--spacing-md) 0 0;
    min-width: var(--notification-accent-width);
    min-height: 100%;
    border-radius: var(--radius-pill, var(--radius-full));
    background-color: var(--notification-accent-color);
    align-self: stretch;
  }

  .bc-notification__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .bc-notification__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0;
  }

  .bc-notification__content {
    color: var(--notification-muted-color);
    line-height: var(--line-height-normal);
  }

  .bc-notification__meta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .bc-notification-viewport {
    position: fixed;
    display: flex;
    gap: var(--spacing-md);
    width: min(420px, calc(100vw - var(--spacing-2xl)));
    z-index: var(--z-index-notification, 90);
    pointer-events: none;
  }

  .bc-notification-viewport > * {
    pointer-events: auto;
  }

  .bc-notification-viewport--top-end {
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    flex-direction: column;
    align-items: flex-end;
  }

  .bc-notification-viewport--top-start {
    top: var(--spacing-xl);
    left: var(--spacing-xl);
    flex-direction: column;
    align-items: flex-start;
  }

  .bc-notification-viewport--bottom-end {
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .bc-notification-viewport--bottom-start {
    bottom: var(--spacing-xl);
    left: var(--spacing-xl);
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .b-dark .bc-notification {
    --notification-bg: var(--bg-surface-dark);
    --notification-border-color: var(--border-border-dark);
    --notification-text-color: var(--text-normal-dark);
    --notification-muted-color: var(--text-muted-dark);
    box-shadow: var(--shadow-lg);
  }

  @media (max-width: 640px) {
    .bc-notification-viewport {
      left: var(--spacing-md);
      right: var(--spacing-md);
      width: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .bc-notification {
      transition: none;
    }
  }
}

/* Minimal optional controls for VideoPlayer wrapper */

.bc-video-player {
  position: relative;
  display: block;
}

.bc-video-player__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-2, 8px);
  padding: var(--spacing-2, 8px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.bc-video-player__button {
  appearance: none;
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  border: none;
  border-radius: var(--radius-sm, 4px);
  padding: 2px 6px;
  cursor: pointer;
}

.bc-video-player__timeline,
.bc-video-player__volume {
  flex: 1 1 auto;
}


/* Ribbon component - diagonal label at specified corner */

.bc-ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none; /* decorative by default */
  z-index: var(--z-index-tooltip, 50);
  height: 0;
}

/* The diagonal band - base styles */
.bc-ribbon {
  position: absolute;
  display: flex;
  justify-content: center;
  background: var(--ribbon-bg);
  color: var(--ribbon-text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-ribbon, var(--shadow-md));
  text-shadow: var(--text-shadow-ribbon, var(--text-shadow-2xs));
  font-weight: var(--text-weight-semibold);
  font-size: var(--text-size-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
  width: var(--ribbon-width, 0);
  height: max-content;
}

/* top-end corner (default) */
.bc-ribbon {
  top: 0;
  left: 100%;
  transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))
    translate(var(--ribbon-inset, 0px), var(--ribbon-offset, 0px));
}

/* top-start corner */
.bc-ribbon[style*='--ribbon-corner: top-start'] {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) rotate(calc(var(--ribbon-angle, 45deg) * -1))
    translate(calc(var(--ribbon-inset, 0px) * -1), var(--ribbon-offset, 0px));
}

/* bottom-end corner */
.bc-ribbon[style*='--ribbon-corner: bottom-end'] {
  top: 100%;
  left: 100%;
  transform: translate(-50%, -50%) rotate(calc(var(--ribbon-angle, 45deg) * -1))
    translate(var(--ribbon-inset, 0px), calc(var(--ribbon-offset, 0px) * -1));
}

/* bottom-start corner */
.bc-ribbon[style*='--ribbon-corner: bottom-start'] {
  top: 100%;
  left: 0;
  transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))
    translate(
      calc(var(--ribbon-inset, 0px) * -1),
      calc(var(--ribbon-offset, 0px) * -1)
    );
}

/* Dark mode overrides */
.b-dark .bc-ribbon {
  background: var(--ribbon-bg-dark);
  color: var(--ribbon-text-dark);
}

/* High contrast */
@media (prefers-contrast: more) {
  .bc-ribbon {
    outline: 1px solid var(--border-border, var(--color-neutral-500));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-ribbon {
    transition: none;
  }
}


}

:root {
  --color-primary-50: var(--color-teal-50);
  --color-primary-100: var(--color-teal-100);
  --color-primary-200: var(--color-teal-200);
  --color-primary-300: var(--color-teal-300);
  --color-primary-400: var(--color-teal-400);
  --color-primary-500: var(--color-teal-500);
  --color-primary-600: var(--color-teal-600);
  --color-primary-700: var(--color-teal-700);
  --color-primary-800: var(--color-teal-800);
  --color-primary-900: var(--color-teal-900);
  --color-primary-950: var(--color-teal-950);
  --color-secondary-50: var(--color-amber-50);
  --color-secondary-100: var(--color-amber-100);
  --color-secondary-200: var(--color-amber-200);
  --color-secondary-300: var(--color-amber-300);
  --color-secondary-400: var(--color-amber-400);
  --color-secondary-500: var(--color-amber-500);
  --color-secondary-600: var(--color-amber-600);
  --color-secondary-700: var(--color-amber-700);
  --color-secondary-800: var(--color-amber-800);
  --color-secondary-900: var(--color-amber-900);
  --color-secondary-950: var(--color-amber-950);
  --color-base-50: var(--color-gray-50);
  --color-base-100: var(--color-gray-100);
  --color-base-200: var(--color-gray-200);
  --color-base-300: var(--color-gray-300);
  --color-base-400: var(--color-gray-400);
  --color-base-500: var(--color-gray-500);
  --color-base-600: var(--color-gray-600);
  --color-base-700: var(--color-gray-700);
  --color-base-800: var(--color-gray-800);
  --color-base-900: var(--color-gray-900);
  --color-base-950: var(--color-gray-950);
  --color-success-50: var(--color-green-50);
  --color-success-100: var(--color-green-100);
  --color-success-200: var(--color-green-200);
  --color-success-300: var(--color-green-300);
  --color-success-400: var(--color-green-400);
  --color-success-500: var(--color-green-500);
  --color-success-600: var(--color-green-600);
  --color-success-700: var(--color-green-700);
  --color-success-800: var(--color-green-800);
  --color-success-900: var(--color-green-900);
  --color-success-950: var(--color-green-950);
  --color-warning-50: var(--color-orange-50);
  --color-warning-100: var(--color-orange-100);
  --color-warning-200: var(--color-orange-200);
  --color-warning-300: var(--color-orange-300);
  --color-warning-400: var(--color-orange-400);
  --color-warning-500: var(--color-orange-500);
  --color-warning-600: var(--color-orange-600);
  --color-warning-700: var(--color-orange-700);
  --color-warning-800: var(--color-orange-800);
  --color-warning-900: var(--color-orange-900);
  --color-warning-950: var(--color-orange-950);
  --color-danger-50: var(--color-red-50);
  --color-danger-100: var(--color-red-100);
  --color-danger-200: var(--color-red-200);
  --color-danger-300: var(--color-red-300);
  --color-danger-400: var(--color-red-400);
  --color-danger-500: var(--color-red-500);
  --color-danger-600: var(--color-red-600);
  --color-danger-700: var(--color-red-700);
  --color-danger-800: var(--color-red-800);
  --color-danger-900: var(--color-red-900);
  --color-danger-950: var(--color-red-950);
  --color-info-50: var(--color-blue-50);
  --color-info-100: var(--color-blue-100);
  --color-info-200: var(--color-blue-200);
  --color-info-300: var(--color-blue-300);
  --color-info-400: var(--color-blue-400);
  --color-info-500: var(--color-blue-500);
  --color-info-600: var(--color-blue-600);
  --color-info-700: var(--color-blue-700);
  --color-info-800: var(--color-blue-800);
  --color-info-900: var(--color-blue-900);
  --color-info-950: var(--color-blue-950);
  --bg-background-light: var(--color-base-50);
  --bg-surface-light: var(--color-base-100);
  --bg-subtle-light: var(--color-base-200);
  --bg-elevated-light: var(--color-base-300);
  --bg-raised-light: var(--color-base-400);
  --bg-overlay-light: var(--color-base-500);
  --bg-background-dark: var(--color-base-950);
  --bg-surface-dark: var(--color-base-900);
  --bg-subtle-dark: var(--color-base-800);
  --bg-elevated-dark: var(--color-base-700);
  --bg-raised-dark: var(--color-base-600);
  --bg-overlay-dark: var(--color-base-500);
  --text-normal-light: var(--color-base-900);
  --text-muted-light: var(--color-base-600);
  --text-inverted-light: var(--color-base-100);
  --text-normal-dark: var(--color-base-100);
  --text-muted-dark: var(--color-base-400);
  --text-inverted-dark: var(--color-base-900);
  --border-border-light: var(--color-base-200);
  --border-divider-light: var(--color-base-300);
  --border-inverted-light: var(--color-base-100);
  --border-border-dark: var(--color-base-700);
  --border-divider-dark: var(--color-base-600);
  --border-inverted-dark: var(--color-base-900);
  --interactive-focus-light: var(--color-primary-700);
  --interactive-hover-light: var(--color-base-100);
  --interactive-active-light: var(--color-base-200);
  --interactive-focus-dark: var(--color-primary-300);
  --interactive-hover-dark: var(--color-base-800);
  --interactive-active-dark: var(--color-base-700);
  --font-body: var(--font-family-sans);
  --font-heading: var(--font-family-sans);
  --font-display: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
  --font-ui: var(--font-family-sans);
  --font-prose: var(--font-family-serif);
  --default-font-family: var(--font-body);
  --default-heading-font-family: var(--font-heading);
  --default-display-font-family: var(--font-display);
  --default-ui-font-family: var(--font-ui);
  --default-prose-font-family: var(--font-prose);
  --default-mono-font-family: var(--font-mono);
  --radius-control: var(--radius-md);
  --radius-control-sm: var(--radius-sm);
  --radius-control-xs: var(--radius-xs);
  --radius-button: var(--radius-md);
  --radius-surface: var(--radius-lg);
  --radius-overlay: var(--radius-lg);
  --radius-popover: var(--radius-md);
  --radius-pill: var(--radius-full);
  --radius-focus: var(--radius-sm);
  --shadow-surface: var(--shadow-sm);
  --shadow-surface-elevated: var(--shadow-md);
  --shadow-popover: var(--shadow-lg);
  --shadow-overlay: var(--shadow-xl);
  --shadow-button: var(--shadow-xs);
  --motion-transition-fast: var(--motion-duration-fast);
  --motion-transition-medium: var(--motion-duration-base);
  --motion-transition-slow: var(--motion-duration-slow);
  --motion-transition-overlay: var(--motion-duration-relaxed);
  --motion-transition-emphasis: var(--motion-duration-fast);
  --motion-easing-standard: var(--motion-easing-standard);
  --motion-easing-emphasis: var(--motion-easing-emphasized);
  --motion-easing-entrance: var(--motion-easing-entrance);
  --motion-easing-exit: var(--motion-easing-exit);
  --spacing-stack-2xs: calc(var(--spacing-base) / 2);
  --spacing-stack-xs: calc(var(--spacing-base) * 1);
  --spacing-stack-sm: calc(var(--spacing-base) * 2);
  --spacing-stack-md: calc(var(--spacing-base) * 3);
  --spacing-stack-lg: calc(var(--spacing-base) * 4);
  --spacing-stack-xl: calc(var(--spacing-base) * 6);
  --text-shadow-button-filled: var(--text-shadow-sm);
  --text-shadow-button-light: var(--text-shadow-xs);
  --text-shadow-button-default: var(--text-shadow-2xs);
}

:root {
  --font-family-sans: Poppins, sans-serif;
  --font-sans: Poppins, sans-serif;
}

@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url(assets/assets/pxiGyp8kv8JHgFVrJJLedw-CYgqeeDB.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url(assets/assets/pxiDyp8kv8JHgFVrJJLmg1hlEA-s84D4Xfz.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url(assets/assets/pxiDyp8kv8JHgFVrJJLmr19lEA-Kfvoe7BB.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url(assets/assets/pxiDyp8kv8JHgFVrJJLmy15lEA-BV883OaJ.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(assets/assets/pxiEyp8kv8JHgFVrFJA-C1IsaolU.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url(assets/assets/pxiByp8kv8JHgFVrLGT9V1s-BblA7dQf.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url(assets/assets/pxiByp8kv8JHgFVrLEj6V1s-Gz22PxOe.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url(assets/assets/pxiByp8kv8JHgFVrLCz7V1s-CNzhNbUJ.ttf) format('truetype');
}