/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *













 */
/*! tailwindcss v4.0.1 | MIT License | https://tailwindcss.com */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=fallback');
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
    --color-red-50: #ffe8e8;
    --color-red-100: #ffd1d1;
    --color-red-200: #ffb2b2;
    --color-red-300: #ff9494;
    --color-red-400: #ff7474;
    --color-red-500: #ff5656;
    --color-red-600: #fa4949;
    --color-red-700: #e63939;
    --color-red-800: #c52727;
    --color-red-900: #941818;
    --color-red-950: #600f0f;
    --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: #fff2c9;
    --color-yellow-100: #ffe7a0;
    --color-yellow-200: #ffe081;
    --color-yellow-300: #ffd968;
    --color-yellow-400: #f7cd4c;
    --color-yellow-500: #f0bb33;
    --color-yellow-600: #dfad2b;
    --color-yellow-700: #bc9021;
    --color-yellow-800: #816316;
    --color-yellow-900: #4f3d0e;
    --color-yellow-950: #342809;
    --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: #d2ffe2;
    --color-green-100: #b1fdcd;
    --color-green-200: #8bf0b0;
    --color-green-300: #67e294;
    --color-green-400: #4bd37d;
    --color-green-500: #3ec972;
    --color-green-600: #34bd68;
    --color-green-700: #239f52;
    --color-green-800: #15773a;
    --color-green-900: #0f5429;
    --color-green-950: #0a3f1e;
    --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: #e3f3ff;
    --color-sky-100: #d1ecff;
    --color-sky-200: #b6e1ff;
    --color-sky-300: #a0d7ff;
    --color-sky-400: #7bc8ff;
    --color-sky-500: #67bfff;
    --color-sky-600: #56b1f3;
    --color-sky-700: #3193da;
    --color-sky-800: #1c71ae;
    --color-sky-900: #124d79;
    --color-sky-950: #0b324f;
    --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);
    /* Brand primary (blue). Source of truth for the primary accent.
       Note: the legacy `violet` family below is now an alias of primary
       because Tailwind's "violet" tokens were remapped to brand blue early
       in the project. Use `bg-primary-500`/`text-primary-500`/etc. in all
       new code; violet utilities still work but are scheduled for removal. */
    --color-primary-50:  #f0f5ff;
    --color-primary-100: #dce9ff;
    --color-primary-200: #bcd7ff;
    --color-primary-300: #90bbff;
    --color-primary-400: #68a1fd;
    --color-primary-500: #377EF9;
    --color-primary-600: #2f6ae0;
    --color-primary-700: #2656ba;
    --color-primary-800: #1e4593;
    --color-primary-900: #173571;
    --color-primary-950: #10234c;
    --color-violet-50:  var(--color-primary-50);
    --color-violet-100: var(--color-primary-100);
    --color-violet-200: var(--color-primary-200);
    --color-violet-300: var(--color-primary-300);
    --color-violet-400: var(--color-primary-400);
    --color-violet-500: var(--color-primary-500);
    --color-violet-600: var(--color-primary-600);
    --color-violet-700: var(--color-primary-700);
    --color-violet-800: var(--color-primary-800);
    --color-violet-900: var(--color-primary-900);
    --color-violet-950: var(--color-primary-950);
    --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: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #bfc4cd;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;
    --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);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
    --container-3xs: 16rem;
    --container-2xs: 18rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: 1.5;
    --text-sm: 0.875rem;
    --text-sm--line-height: 1.5715;
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.5;
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.5;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: 1.33;
    --text-3xl: 1.88rem;
    --text-3xl--line-height: 1.33;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: 1.25;
    --text-5xl: 3rem;
    --text-5xl--line-height: 1.25;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1.2;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;
    --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;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --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 1px 0 rgb(0 0 0 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.02);
    --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);
    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --perspective-dramatic: 100px;
    --perspective-near: 300px;
    --perspective-normal: 500px;
    --perspective-midrange: 800px;
    --perspective-distant: 1200px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(
      --font-sans--font-variation-settings
    );
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(
      --font-mono--font-feature-settings
    );
    --default-mono-font-variation-settings: var(
      --font-mono--font-variation-settings
    );
    --font-inter: "Inter", "sans-serif";
    --text-base--letter-spacing: -0.01em;
    --text-lg--letter-spacing: -0.01em;
    --text-xl--letter-spacing: -0.01em;
    --text-2xl--letter-spacing: -0.01em;
    --text-3xl--letter-spacing: -0.01em;
    --text-4xl--letter-spacing: -0.02em;
    --text-5xl--letter-spacing: -0.02em;
    --text-6xl--letter-spacing: -0.02em;
    --breakpoint-xs: 480px;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var( --default-font-variation-settings, normal );
    -webkit-tap-highlight-color: transparent;
  }
  body {
    line-height: inherit;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
    font-feature-settings: var( --default-mono-font-feature-settings, normal );
    font-variation-settings: var( --default-mono-font-variation-settings, normal );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
    color: color-mix(in oklab, currentColor 50%, transparent);
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-0\.5 {
    top: calc(var(--spacing) * 0.5);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-16 {
    top: calc(var(--spacing) * 16);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .top-full {
    top: 100%;
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-1 {
    right: calc(var(--spacing) * 1);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-auto {
    right: auto;
  }
  .right-full {
    right: 100%;
  }
  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-full {
    bottom: 100%;
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-0\.5 {
    left: calc(var(--spacing) * 0.5);
  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-auto {
    left: auto;
  }
  .left-full {
    left: 100%;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .col-span-6 {
    grid-column: span 6 / span 6;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .container {
    width: 100%;
    @media (width >= 480px) {
      max-width: 480px;
    }
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .-m-1 {
    margin: calc(var(--spacing) * -1);
  }
  .-m-1\.5 {
    margin: calc(var(--spacing) * -1.5);
  }
  .-m-3 {
    margin: calc(var(--spacing) * -3);
  }
  .-m-4 {
    margin: calc(var(--spacing) * -4);
  }
  .m-1 {
    margin: calc(var(--spacing) * 1);
  }
  .m-1\.5 {
    margin: calc(var(--spacing) * 1.5);
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .m-4 {
    margin: calc(var(--spacing) * 4);
  }
  .m-auto {
    margin: auto;
  }
  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }
  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }
  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .-my-2 {
    margin-block: calc(var(--spacing) * -2);
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-4\! {
    margin-block: calc(var(--spacing) * 4) !important;
  }
  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
  .-mt-0\.5 {
    margin-top: calc(var(--spacing) * -0.5);
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .-mt-3 {
    margin-top: calc(var(--spacing) * -3);
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .-mt-8 {
    margin-top: calc(var(--spacing) * -8);
  }
  .-mt-12 {
    margin-top: calc(var(--spacing) * -12);
  }
  .-mt-16 {
    margin-top: calc(var(--spacing) * -16);
  }
  .-mt-px {
    margin-top: -1px;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-\[3px\] {
    margin-top: 3px;
  }
  .mt-auto {
    margin-top: auto;
  }
  .-mr-2 {
    margin-right: calc(var(--spacing) * -2);
  }
  .-mr-48 {
    margin-right: calc(var(--spacing) * -48);
  }
  .-mr-px {
    margin-right: -1px;
  }
  .mr-0\.5 {
    margin-right: calc(var(--spacing) * 0.5);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-5 {
    margin-right: calc(var(--spacing) * 5);
  }
  .mr-6 {
    margin-right: calc(var(--spacing) * 6);
  }
  .-mb-3 {
    margin-bottom: calc(var(--spacing) * -3);
  }
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-80 {
    margin-bottom: calc(var(--spacing) * 80);
  }
  .-ml-0\.5 {
    margin-left: calc(var(--spacing) * -0.5);
  }
  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }
  .-ml-px {
    margin-left: -1px;
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-2\.5 {
    margin-left: calc(var(--spacing) * 2.5);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-auto {
    margin-left: auto;
  }
  .ml-px {
    margin-left: 1px;
  }
  .box-content {
    box-sizing: content-box;
  }
  .block {
    display: block;
  }
  .block\! {
    display: block !important;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .aspect-7\/4 {
    aspect-ratio: 7/4;
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-22 {
    height: calc(var(--spacing) * 22);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-26 {
    height: calc(var(--spacing) * 26);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-30 {
    height: calc(var(--spacing) * 30);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-\[100dvh\] {
    height: 100dvh;
  }
  .h-\[calc\(100dvh-64px\)\] {
    height: calc(100dvh - 64px);
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .max-h-\[400px\] {
    max-height: 400px;
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-\[100dvh\] {
    min-height: 100dvh;
  }
  .w-0\.5 {
    width: calc(var(--spacing) * 0.5);
  }
  .w-1 {
    width: calc(var(--spacing) * 1);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-1\/2 {
    width: calc(1/2 * 100%);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-\[15\.5rem\] {
    width: 15.5rem;
  }
  .w-\[96px\] {
    width: 96px;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-\[96rem\] {
    max-width: 96rem;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-36 {
    min-width: calc(var(--spacing) * 36);
  }
  .min-w-44 {
    min-width: calc(var(--spacing) * 44);
  }
  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }
  .min-w-60 {
    min-width: calc(var(--spacing) * 60);
  }
  .min-w-72 {
    min-width: calc(var(--spacing) * 72);
  }
  .min-w-80 {
    min-width: calc(var(--spacing) * 80);
  }
  .min-w-100 {
    min-width: calc(var(--spacing) * 100);
  }
  .min-w-fit {
    min-width: fit-content;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .table-auto {
    table-layout: auto;
  }
  .origin-top-right {
    transform-origin: top right;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-64 {
    --tw-translate-x: calc(var(--spacing) * -64);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-1\/2 {
    --tw-translate-x: calc(1/2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-1\/3 {
    --tw-translate-x: calc(1/3 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-3 {
    --tw-translate-y: calc(var(--spacing) * 3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .rotate-0 {
    rotate: 0deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
  }
  .animate-ping {
    animation: var(--animate-ping);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-move {
    cursor: move;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-disc {
    list-style-type: disc;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-flow-col {
    grid-auto-flow: column;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-px {
    gap: 1px;
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-10 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .-space-x-3 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .-space-x-4 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .-space-x-7 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -7) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -7) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .-space-x-px {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
      margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }
  .space-x-1 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-3 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-4 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-5 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 5) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-6 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .divide-x {
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-gray-100 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-100);
    }
  }
  .divide-gray-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .self-center {
    align-self: center;
  }
  .self-end {
    align-self: flex-end;
  }
  .self-start {
    align-self: flex-start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-x-scroll {
    overflow-x: scroll;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overflow-y-scroll {
    overflow-y: scroll;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-xs {
    border-radius: var(--radius-xs);
  }
  .rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .rounded-tl-none {
    border-top-left-radius: 0;
  }
  .rounded-r {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
  }
  .rounded-r-2xl {
    border-top-right-radius: var(--radius-2xl);
    border-bottom-right-radius: var(--radius-2xl);
  }
  .rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-b-xl {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-gray-400 {
    border-color: var(--color-gray-400);
  }
  .border-gray-700\/60 {
    border-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
  }
  .border-green-300 {
    border-color: var(--color-green-300);
  }
  .border-red-300 {
    border-color: var(--color-red-300);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-violet-400 {
    border-color: var(--color-violet-400);
  }
  .border-violet-500 {
    border-color: var(--color-violet-500);
  }
  .border-violet-500\/60 {
    border-color: color-mix(in oklab, var(--color-violet-500) 60%, transparent);
  }
  .border-white {
    border-color: var(--color-white);
  }
  .bg-\[\#24292E\] {
    background-color: #24292E;
  }
  .bg-\[\#EA4335\] {
    background-color: #EA4335;
  }
  .bg-black\/25 {
    background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
  }
  .bg-blue-500\/20 {
    background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }
  .bg-gray-400\/20 {
    background-color: color-mix(in oklab, var(--color-gray-400) 20%, transparent);
  }
  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }
  .bg-gray-700 {
    background-color: var(--color-gray-700);
  }
  .bg-gray-700\/50 {
    background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
  }
  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }
  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }
  .bg-gray-900\/30 {
    background-color: color-mix(in oklab, var(--color-gray-900) 30%, transparent);
  }
  .bg-gray-900\/60 {
    background-color: color-mix(in oklab, var(--color-gray-900) 60%, transparent);
  }
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .bg-green-400 {
    background-color: var(--color-green-400);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-green-500\/20 {
    background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-red-400 {
    background-color: var(--color-red-400);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-red-500\/20 {
    background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
  }
  .bg-sky-100 {
    background-color: var(--color-sky-100);
  }
  .bg-sky-500 {
    background-color: var(--color-sky-500);
  }
  .bg-sky-500\/20 {
    background-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
  }
  .bg-violet-100 {
    background-color: var(--color-violet-100);
  }
  .bg-violet-400 {
    background-color: var(--color-violet-400);
  }
  .bg-violet-500 {
    background-color: var(--color-violet-500);
  }
  .bg-violet-500\/20 {
    background-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/30 {
    background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
  }
  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }
  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }
  .bg-yellow-500\/20 {
    background-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
  }
  .bg-linear-\[225deg\,var\(--color-gray-800\)\,var\(--color-gray-900\)\] {
    --tw-gradient-position: 225deg,var(--color-gray-800),var(--color-gray-900),;
    background-image: linear-gradient(var(--tw-gradient-stops,225deg,var(--color-gray-800),var(--color-gray-900)));
  }
  .bg-linear-to-b {
    --tw-gradient-position: to bottom in oklab,;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-r {
    --tw-gradient-position: to right in oklab,;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-t {
    --tw-gradient-position: to top in oklab,;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-tr {
    --tw-gradient-position: to top right in oklab,;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-gray-100 {
    --tw-gradient-from: var(--color-gray-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-200 {
    --tw-gradient-from: var(--color-gray-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-800 {
    --tw-gradient-from: var(--color-gray-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-900 {
    --tw-gradient-from: var(--color-gray-900);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-violet-500\/\[0\.12\] {
    --tw-gradient-from: color-mix(in oklab, var(--color-violet-500) 12%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-white {
    --tw-gradient-from: var(--color-white);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-white\/30 {
    --tw-gradient-from: color-mix(in oklab, var(--color-white) 30%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-gray-100 {
    --tw-gradient-to: var(--color-gray-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-gray-200 {
    --tw-gradient-to: var(--color-gray-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-gray-800 {
    --tw-gradient-to: var(--color-gray-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-violet-500\/\[0\.04\] {
    --tw-gradient-to: color-mix(in oklab, var(--color-violet-500) 4%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-white {
    --tw-gradient-to: var(--color-white);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .fill-current {
    fill: currentColor;
  }
  .fill-gray-100 {
    fill: var(--color-gray-100);
  }
  .fill-gray-400 {
    fill: var(--color-gray-400);
  }
  .fill-red-500 {
    fill: var(--color-red-500);
  }
  .fill-violet-400 {
    fill: var(--color-violet-400);
  }
  .fill-violet-500 {
    fill: var(--color-violet-500);
  }
  .fill-white {
    fill: var(--color-white);
  }
  .fill-yellow-500 {
    fill: var(--color-yellow-500);
  }
  .stroke-current {
    stroke: currentColor;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-center {
    object-position: center;
  }
  .p-0\.5 {
    padding: calc(var(--spacing) * 0.5);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .px-0\.5 {
    padding-inline: calc(var(--spacing) * 0.5);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-7 {
    padding-left: calc(var(--spacing) * 7);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-top {
    vertical-align: top;
  }
  .font-inter {
    font-family: var(--font-inter);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    letter-spacing: var(--tw-tracking, var(--text-2xl--letter-spacing));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    letter-spacing: var(--tw-tracking, var(--text-3xl--letter-spacing));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    letter-spacing: var(--tw-tracking, var(--text-lg--letter-spacing));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    letter-spacing: var(--tw-tracking, var(--text-xl--letter-spacing));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-gray-50 {
    color: var(--color-gray-50);
  }
  .text-gray-100 {
    color: var(--color-gray-100);
  }
  .text-gray-200 {
    color: var(--color-gray-200);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-500\/80 {
    color: color-mix(in oklab, var(--color-gray-500) 80%, transparent);
  }
  .text-gray-500\/90 {
    color: color-mix(in oklab, var(--color-gray-500) 90%, transparent);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-green-50 {
    color: var(--color-green-50);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-500\/20 {
    color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-sky-500 {
    color: var(--color-sky-500);
  }
  .text-sky-600 {
    color: var(--color-sky-600);
  }
  .text-sky-700 {
    color: var(--color-sky-700);
  }
  .text-violet-50 {
    color: var(--color-violet-50);
  }
  .text-violet-200 {
    color: var(--color-violet-200);
  }
  .text-violet-300 {
    color: var(--color-violet-300);
  }
  .text-violet-400 {
    color: var(--color-violet-400);
  }
  .text-violet-500 {
    color: var(--color-violet-500);
  }
  .text-violet-600 {
    color: var(--color-violet-600);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-yellow-50 {
    color: var(--color-yellow-50);
  }
  .text-yellow-500 {
    color: var(--color-yellow-500);
  }
  .text-yellow-600 {
    color: var(--color-yellow-600);
  }
  .text-yellow-700 {
    color: var(--color-yellow-700);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .underline {
    text-decoration-line: underline;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .placeholder-gray-400 {
    &::placeholder {
      color: var(--color-gray-400);
    }
  }
  .placeholder-gray-500 {
    &::placeholder {
      color: var(--color-gray-500);
    }
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-10 {
    opacity: 10%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)), 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.02));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-black\/\[0\.08\] {
    --tw-shadow-color: color-mix(in oklab, var(--color-black) 8%, transparent);
  }
  .shadow-violet-500\/20 {
    --tw-shadow-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .blur-sm {
    --tw-blur: blur(var(--blur-sm));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-md {
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .\*\*\:transition-none\! {
    :is(& *) {
      transition-property: none !important;
    }
  }
  .group-hover\:fill-gray-600 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        fill: var(--color-gray-600);
      }
    }
  }
  .group-hover\:text-gray-500 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-gray-500);
      }
    }
  }
  .group-hover\:text-gray-800 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-gray-800);
      }
    }
  }
  .group-hover\:text-violet-600 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-violet-600);
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .peer-checked\:border-violet-400 {
    &:is(:where(.peer):checked ~ *) {
      border-color: var(--color-violet-400);
    }
  }
  .peer-checked\:line-through {
    &:is(:where(.peer):checked ~ *) {
      text-decoration-line: line-through;
    }
  }
  .before\:absolute {
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .before\:inset-0 {
    &::before {
      content: var(--tw-content);
      inset: calc(var(--spacing) * 0);
    }
  }
  .before\:-z-10 {
    &::before {
      content: var(--tw-content);
      z-index: calc(10 * -1);
    }
  }
  .before\:bg-gray-50\/90 {
    &::before {
      content: var(--tw-content);
      background-color: color-mix(in oklab, var(--color-gray-50) 90%, transparent);
    }
  }
  .before\:bg-white {
    &::before {
      content: var(--tw-content);
      background-color: var(--color-white);
    }
  }
  .before\:bg-white\/90 {
    &::before {
      content: var(--tw-content);
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .before\:backdrop-blur-md {
    &::before {
      content: var(--tw-content);
      --tw-backdrop-blur: blur(var(--blur-md));
      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    }
  }
  .after\:absolute {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .after\:inset-x-0 {
    &::after {
      content: var(--tw-content);
      inset-inline: calc(var(--spacing) * 0);
    }
  }
  .after\:top-full {
    &::after {
      content: var(--tw-content);
      top: 100%;
    }
  }
  .after\:-z-10 {
    &::after {
      content: var(--tw-content);
      z-index: calc(10 * -1);
    }
  }
  .after\:block {
    &::after {
      content: var(--tw-content);
      display: block;
    }
  }
  .after\:h-px {
    &::after {
      content: var(--tw-content);
      height: 1px;
    }
  }
  .after\:flex-1 {
    &::after {
      content: var(--tw-content);
      flex: 1;
    }
  }
  .after\:bg-gray-200 {
    &::after {
      content: var(--tw-content);
      background-color: var(--color-gray-200);
    }
  }
  .after\:px-2 {
    &::after {
      content: var(--tw-content);
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .after\:text-sm {
    &::after {
      content: var(--tw-content);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .after\:text-gray-400 {
    &::after {
      content: var(--tw-content);
      color: var(--color-gray-400);
    }
  }
  .after\:content-\[\'\/\'\] {
    &::after {
      content: var(--tw-content);
      --tw-content: '/';
      content: var(--tw-content);
    }
  }
  .after\:content-\[\'·\'\] {
    &::after {
      content: var(--tw-content);
      --tw-content: '·';
      content: var(--tw-content);
    }
  }
  .first\:ml-0 {
    &:first-child {
      margin-left: calc(var(--spacing) * 0);
    }
  }
  .first\:rounded-l-lg {
    &:first-child {
      border-top-left-radius: var(--radius-lg);
      border-bottom-left-radius: var(--radius-lg);
    }
  }
  .first\:pl-4 {
    &:first-child {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .first\:pl-5 {
    &:first-child {
      padding-left: calc(var(--spacing) * 5);
    }
  }
  .last\:mr-0 {
    &:last-child {
      margin-right: calc(var(--spacing) * 0);
    }
  }
  .last\:mb-0 {
    &:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .last\:rounded-r-lg {
    &:last-child {
      border-top-right-radius: var(--radius-lg);
      border-bottom-right-radius: var(--radius-lg);
    }
  }
  .last\:border-0 {
    &:last-child {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .last\:pr-4 {
    &:last-child {
      padding-right: calc(var(--spacing) * 4);
    }
  }
  .last\:pr-5 {
    &:last-child {
      padding-right: calc(var(--spacing) * 5);
    }
  }
  .last\:after\:hidden {
    &:last-child {
      &::after {
        content: var(--tw-content);
        display: none;
      }
    }
  }
  .last\:after\:content-\[\'\'\] {
    &:last-child {
      &::after {
        content: var(--tw-content);
        --tw-content: '';
        content: var(--tw-content);
      }
    }
  }
  .last-of-type\:pb-0 {
    &:last-of-type {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .hover\:border-gray-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-300);
      }
    }
  }
  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .hover\:bg-gray-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .hover\:bg-gray-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
      }
    }
  }
  .hover\:bg-green-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-600);
      }
    }
  }
  .hover\:bg-red-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-600);
      }
    }
  }
  .hover\:bg-violet-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-violet-100);
      }
    }
  }
  .hover\:bg-white {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .hover\:text-gray-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-200);
      }
    }
  }
  .hover\:text-gray-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-400);
      }
    }
  }
  .hover\:text-gray-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-500);
      }
    }
  }
  .hover\:text-gray-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-600);
      }
    }
  }
  .hover\:text-gray-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }
  .hover\:text-gray-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-800);
      }
    }
  }
  .hover\:text-gray-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .hover\:text-green-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-green-600);
      }
    }
  }
  .hover\:text-red-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-600);
      }
    }
  }
  .hover\:text-violet-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-violet-300);
      }
    }
  }
  .hover\:text-violet-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-violet-500);
      }
    }
  }
  .hover\:text-violet-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-violet-600);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:no-underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: none;
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:opacity-70 {
    &:hover {
      @media (hover: hover) {
        opacity: 70%;
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .focus\:border-gray-300 {
    &:focus {
      border-color: var(--color-gray-300);
    }
  }
  .focus\:bg-white {
    &:focus {
      background-color: var(--color-white);
    }
  }
  .focus\:ring-transparent {
    &:focus {
      --tw-ring-color: transparent;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:border-gray-200 {
    &:disabled {
      border-color: var(--color-gray-200);
    }
  }
  .disabled\:bg-gray-100 {
    &:disabled {
      background-color: var(--color-gray-100);
    }
  }
  .disabled\:bg-white {
    &:disabled {
      background-color: var(--color-white);
    }
  }
  .disabled\:text-gray-300 {
    &:disabled {
      color: var(--color-gray-300);
    }
  }
  .disabled\:text-gray-400 {
    &:disabled {
      color: var(--color-gray-400);
    }
  }
  .max-xs\:sr-only {
    @media (width < 480px) {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  }
  .max-lg\:shadow-xs {
    @media (width < 64rem) {
      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .max-lg\:before\:bg-white\/90 {
    @media (width < 64rem) {
      &::before {
        content: var(--tw-content);
        background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
      }
    }
  }
  .max-sm\:max-h-\[128px\] {
    @media (width < 40rem) {
      max-height: 128px;
    }
  }
  .max-sm\:\*\:w-1\/2 {
    @media (width < 40rem) {
      :is(& > *) {
        width: calc(1/2 * 100%);
      }
    }
  }
  .xs\:hidden {
    @media (width >= 480px) {
      display: none;
    }
  }
  .sm\:left-6 {
    @media (width >= 40rem) {
      left: calc(var(--spacing) * 6);
    }
  }
  .sm\:left-auto {
    @media (width >= 40rem) {
      left: auto;
    }
  }
  .sm\:order-1 {
    @media (width >= 40rem) {
      order: 1;
    }
  }
  .sm\:order-none {
    @media (width >= 40rem) {
      order: 0;
    }
  }
  .sm\:col-span-2 {
    @media (width >= 40rem) {
      grid-column: span 2 / span 2;
    }
  }
  .sm\:col-span-3 {
    @media (width >= 40rem) {
      grid-column: span 3 / span 3;
    }
  }
  .sm\:col-span-4 {
    @media (width >= 40rem) {
      grid-column: span 4 / span 4;
    }
  }
  .sm\:col-span-6 {
    @media (width >= 40rem) {
      grid-column: span 6 / span 6;
    }
  }
  .sm\:col-span-12 {
    @media (width >= 40rem) {
      grid-column: span 12 / span 12;
    }
  }
  .sm\:-mx-6 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * -6);
    }
  }
  .sm\:mt-0 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .sm\:mr-0 {
    @media (width >= 40rem) {
      margin-right: calc(var(--spacing) * 0);
    }
  }
  .sm\:mr-3 {
    @media (width >= 40rem) {
      margin-right: calc(var(--spacing) * 3);
    }
  }
  .sm\:mr-4 {
    @media (width >= 40rem) {
      margin-right: calc(var(--spacing) * 4);
    }
  }
  .sm\:mb-0 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .sm\:mb-2 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 2);
    }
  }
  .sm\:mb-3 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 3);
    }
  }
  .sm\:ml-2 {
    @media (width >= 40rem) {
      margin-left: calc(var(--spacing) * 2);
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:h-28 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 28);
    }
  }
  .sm\:w-1\/3 {
    @media (width >= 40rem) {
      width: calc(1/3 * 100%);
    }
  }
  .sm\:w-56 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 56);
    }
  }
  .sm\:w-\[390px\] {
    @media (width >= 40rem) {
      width: 390px;
    }
  }
  .sm\:grow {
    @media (width >= 40rem) {
      flex-grow: 1;
    }
  }
  .sm\:grow-0 {
    @media (width >= 40rem) {
      flex-grow: 0;
    }
  }
  .sm\:auto-cols-max {
    @media (width >= 40rem) {
      grid-auto-columns: max-content;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:items-end {
    @media (width >= 40rem) {
      align-items: flex-end;
    }
  }
  .sm\:items-start {
    @media (width >= 40rem) {
      align-items: flex-start;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:justify-end {
    @media (width >= 40rem) {
      justify-content: flex-end;
    }
  }
  .sm\:justify-start {
    @media (width >= 40rem) {
      justify-content: flex-start;
    }
  }
  .sm\:space-y-0 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .sm\:space-y-5 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .sm\:space-x-2 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .sm\:space-x-4 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .sm\:space-x-6 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .sm\:p-1\.5 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 1.5);
    }
  }
  .sm\:px-2 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:py-0\.5 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 0.5);
    }
  }
  .sm\:text-center {
    @media (width >= 40rem) {
      text-align: center;
    }
  }
  .sm\:text-left {
    @media (width >= 40rem) {
      text-align: left;
    }
  }
  .sm\:text-sm {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .sm\:first\:pl-6 {
    @media (width >= 40rem) {
      &:first-child {
        padding-left: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:last\:pr-6 {
    @media (width >= 40rem) {
      &:last-child {
        padding-right: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:sr-only {
    @media (width >= 48rem) {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  }
  .md\:static {
    @media (width >= 48rem) {
      position: static;
    }
  }
  .md\:sticky {
    @media (width >= 48rem) {
      position: sticky;
    }
  }
  .md\:top-16 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 16);
    }
  }
  .md\:top-auto {
    @media (width >= 48rem) {
      top: auto;
    }
  }
  .md\:right-0 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 0);
    }
  }
  .md\:bottom-auto {
    @media (width >= 48rem) {
      bottom: auto;
    }
  }
  .md\:left-auto {
    @media (width >= 48rem) {
      left: auto;
    }
  }
  .md\:order-1 {
    @media (width >= 48rem) {
      order: 1;
    }
  }
  .md\:col-span-6 {
    @media (width >= 48rem) {
      grid-column: span 6 / span 6;
    }
  }
  .md\:-mr-px {
    @media (width >= 48rem) {
      margin-right: -1px;
    }
  }
  .md\:mr-0 {
    @media (width >= 48rem) {
      margin-right: calc(var(--spacing) * 0);
    }
  }
  .md\:mb-0 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .md\:mb-0\.5 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 0.5);
    }
  }
  .md\:mb-2 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 2);
    }
  }
  .md\:ml-8 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * 8);
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:inline {
    @media (width >= 48rem) {
      display: inline;
    }
  }
  .md\:table-cell {
    @media (width >= 48rem) {
      display: table-cell;
    }
  }
  .md\:table-row {
    @media (width >= 48rem) {
      display: table-row;
    }
  }
  .md\:h-\[calc\(100dvh-64px\)\] {
    @media (width >= 48rem) {
      height: calc(100dvh - 64px);
    }
  }
  .md\:w-1\/2 {
    @media (width >= 48rem) {
      width: calc(1/2 * 100%);
    }
  }
  .md\:w-32 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 32);
    }
  }
  .md\:w-60 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 60);
    }
  }
  .md\:w-\[18rem\] {
    @media (width >= 48rem) {
      width: 18rem;
    }
  }
  .md\:w-auto {
    @media (width >= 48rem) {
      width: auto;
    }
  }
  .md\:w-full {
    @media (width >= 48rem) {
      width: 100%;
    }
  }
  .md\:translate-x-0 {
    @media (width >= 48rem) {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:flex-col {
    @media (width >= 48rem) {
      flex-direction: column;
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:justify-end {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .md\:justify-start {
    @media (width >= 48rem) {
      justify-content: flex-start;
    }
  }
  .md\:space-y-0 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .md\:space-y-3 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .md\:space-y-10 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .md\:space-x-0 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 0) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .md\:space-x-2 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .md\:space-x-4 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .md\:flex-1 {
    @media (width >= 48rem) {
      flex: 1 1 0%;
    }
  }
  .md\:space-x-3 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .md\:overflow-auto {
    @media (width >= 48rem) {
      overflow: auto;
    }
  }
  .md\:overflow-x-hidden {
    @media (width >= 48rem) {
      overflow-x: hidden;
    }
  }
  .md\:overflow-y-auto {
    @media (width >= 48rem) {
      overflow-y: auto;
    }
  }
  .md\:border-r {
    @media (width >= 48rem) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .md\:border-b-0 {
    @media (width >= 48rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .md\:px-5 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .md\:py-0 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .md\:py-2 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .md\:py-8 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .md\:pl-0 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .md\:text-left {
    @media (width >= 48rem) {
      text-align: left;
    }
  }
  .md\:text-3xl {
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
      letter-spacing: var(--tw-tracking, var(--text-3xl--letter-spacing));
    }
  }
  .lg\:relative {
    @media (width >= 64rem) {
      position: relative;
    }
  }
  .lg\:static {
    @media (width >= 64rem) {
      position: static;
    }
  }
  .lg\:sticky {
    @media (width >= 64rem) {
      position: sticky;
    }
  }
  .lg\:top-16 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 16);
    }
  }
  .lg\:top-auto {
    @media (width >= 64rem) {
      top: auto;
    }
  }
  .lg\:left-auto {
    @media (width >= 64rem) {
      left: auto;
    }
  }
  .lg\:z-auto {
    @media (width >= 64rem) {
      z-index: auto;
    }
  }
  .lg\:-mx-8 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * -8);
    }
  }
  .lg\:mx-auto {
    @media (width >= 64rem) {
      margin-inline: auto;
    }
  }
  .lg\:mb-0 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:inline-flex {
    @media (width >= 64rem) {
      display: inline-flex;
    }
  }
  .lg\:h-36 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 36);
    }
  }
  .lg\:h-\[calc\(100dvh-64px\)\] {
    @media (width >= 64rem) {
      height: calc(100dvh - 64px);
    }
  }
  .lg\:w-20 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 20);
    }
  }
  .lg\:w-72 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 72);
    }
  }
  .lg\:w-\[320px\] {
    @media (width >= 64rem) {
      width: 320px;
    }
  }
  .lg\:w-\[390px\] {
    @media (width >= 64rem) {
      width: 390px;
    }
  }
  .lg\:max-w-\[640px\] {
    @media (width >= 64rem) {
      max-width: 640px;
    }
  }
  .lg\:max-w-none {
    @media (width >= 64rem) {
      max-width: none;
    }
  }
  .lg\:shrink-0 {
    @media (width >= 64rem) {
      flex-shrink: 0;
    }
  }
  .lg\:grow {
    @media (width >= 64rem) {
      flex-grow: 1;
    }
  }
  .lg\:translate-x-0 {
    @media (width >= 64rem) {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .lg\:flex-col {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:space-y-2 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .lg\:space-x-0 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 0) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .lg\:space-x-8 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .lg\:overflow-x-hidden {
    @media (width >= 64rem) {
      overflow-x: hidden;
    }
  }
  .lg\:overflow-y-auto {
    @media (width >= 64rem) {
      overflow-y: auto;
    }
  }
  .lg\:border-t-0 {
    @media (width >= 64rem) {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  .lg\:border-b {
    @media (width >= 64rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .lg\:border-l {
    @media (width >= 64rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:pr-8 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 8);
    }
  }
  .lg\:text-left {
    @media (width >= 64rem) {
      text-align: left;
    }
  }
  .lg\:opacity-0 {
    @media (width >= 64rem) {
      opacity: 0%;
    }
  }
  .lg\:before\:bg-gray-100\/90 {
    @media (width >= 64rem) {
      &::before {
        content: var(--tw-content);
        background-color: color-mix(in oklab, var(--color-gray-100) 90%, transparent);
      }
    }
  }
  .lg\:first\:pl-8 {
    @media (width >= 64rem) {
      &:first-child {
        padding-left: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:last\:pr-8 {
    @media (width >= 64rem) {
      &:last-child {
        padding-right: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:hover\:bg-gray-200 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .xl\:order-none {
    @media (width >= 80rem) {
      order: 0;
    }
  }
  .xl\:col-span-3 {
    @media (width >= 80rem) {
      grid-column: span 3 / span 3;
    }
  }
  .xl\:col-span-4 {
    @media (width >= 80rem) {
      grid-column: span 4 / span 4;
    }
  }
  .xl\:col-span-6 {
    @media (width >= 80rem) {
      grid-column: span 6 / span 6;
    }
  }
  .xl\:col-span-8 {
    @media (width >= 80rem) {
      grid-column: span 8 / span 8;
    }
  }
  .xl\:mx-0 {
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .xl\:mx-4 {
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing) * 4);
    }
  }
  .xl\:mr-4 {
    @media (width >= 80rem) {
      margin-right: calc(var(--spacing) * 4);
    }
  }
  .xl\:mb-0 {
    @media (width >= 80rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .xl\:block {
    @media (width >= 80rem) {
      display: block;
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:max-h-\[128px\] {
    @media (width >= 80rem) {
      max-height: 128px;
    }
  }
  .xl\:w-20 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 20);
    }
  }
  .xl\:w-56 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 56);
    }
  }
  .xl\:w-72 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 72);
    }
  }
  .xl\:w-80 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .xl\:w-\[20rem\] {
    @media (width >= 80rem) {
      width: 20rem;
    }
  }
  .xl\:w-\[352px\] {
    @media (width >= 80rem) {
      width: 352px;
    }
  }
  .xl\:w-auto {
    @media (width >= 80rem) {
      width: auto;
    }
  }
  .xl\:min-w-56 {
    @media (width >= 80rem) {
      min-width: calc(var(--spacing) * 56);
    }
  }
  .xl\:-translate-x-16 {
    @media (width >= 80rem) {
      --tw-translate-x: calc(var(--spacing) * -16);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .xl\:grid-cols-1 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:flex-row {
    @media (width >= 80rem) {
      flex-direction: row;
    }
  }
  .xl\:flex-wrap {
    @media (width >= 80rem) {
      flex-wrap: wrap;
    }
  }
  .xl\:items-center {
    @media (width >= 80rem) {
      align-items: center;
    }
  }
  .xl\:justify-between {
    @media (width >= 80rem) {
      justify-content: space-between;
    }
  }
  .xl\:space-y-0 {
    @media (width >= 80rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .xl\:space-x-6 {
    @media (width >= 80rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .xl\:space-x-16 {
    @media (width >= 80rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 16) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .xl\:pr-16 {
    @media (width >= 80rem) {
      padding-right: calc(var(--spacing) * 16);
    }
  }
  .xl\:pl-32 {
    @media (width >= 80rem) {
      padding-left: calc(var(--spacing) * 32);
    }
  }
  .xl\:text-left {
    @media (width >= 80rem) {
      text-align: left;
    }
  }
  .xl\:leading-7 {
    @media (width >= 80rem) {
      --tw-leading: calc(var(--spacing) * 7);
      line-height: calc(var(--spacing) * 7);
    }
  }
  .xl\:leading-8 {
    @media (width >= 80rem) {
      --tw-leading: calc(var(--spacing) * 8);
      line-height: calc(var(--spacing) * 8);
    }
  }
  .\32 xl\:col-span-4 {
    @media (width >= 96rem) {
      grid-column: span 4 / span 4;
    }
  }
  .\32 xl\:mx-8 {
    @media (width >= 96rem) {
      margin-inline: calc(var(--spacing) * 8);
    }
  }
  .\32 xl\:ml-\[80px\] {
    @media (width >= 96rem) {
      margin-left: 80px;
    }
  }
  .\32 xl\:block {
    @media (width >= 96rem) {
      display: block;
    }
  }
  .\32 xl\:hidden {
    @media (width >= 96rem) {
      display: none;
    }
  }
  .\32 xl\:\!w-64 {
    @media (width >= 96rem) {
      width: calc(var(--spacing) * 64) !important;
    }
  }
  .\32 xl\:w-64\! {
    @media (width >= 96rem) {
      width: calc(var(--spacing) * 64) !important;
    }
  }
  .\32 xl\:w-\[calc\(352px\+80px\)\] {
    @media (width >= 96rem) {
      width: calc(352px + 80px);
    }
  }
  .\32 xl\:max-w-none {
    @media (width >= 96rem) {
      max-width: none;
    }
  }
  .\32 xl\:px-12 {
    @media (width >= 96rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .\32 xl\:opacity-100 {
    @media (width >= 96rem) {
      opacity: 100%;
    }
  }
  .dark\:block {
    &:is(.dark *) {
      display: block;
    }
  }
  .dark\:hidden {
    &:is(.dark *) {
      display: none;
    }
  }
  .dark\:divide-gray-700\/60 {
    &:is(.dark *) {
      :where(& > :not(:last-child)) {
        border-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
      }
    }
  }
  .dark\:border-gray-500 {
    &:is(.dark *) {
      border-color: var(--color-gray-500);
    }
  }
  .dark\:border-gray-600 {
    &:is(.dark *) {
      border-color: var(--color-gray-600);
    }
  }
  .dark\:border-gray-700 {
    &:is(.dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .dark\:border-gray-700\/60 {
    &:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
    }
  }
  .dark\:border-gray-800 {
    &:is(.dark *) {
      border-color: var(--color-gray-800);
    }
  }
  .dark\:border-gray-900 {
    &:is(.dark *) {
      border-color: var(--color-gray-900);
    }
  }
  .dark\:border-transparent {
    &:is(.dark *) {
      border-color: transparent;
    }
  }
  .dark\:border-violet-500 {
    &:is(.dark *) {
      border-color: var(--color-violet-500);
    }
  }
  .dark\:bg-\[\#151D2C\] {
    &:is(.dark *) {
      background-color: #151D2C;
    }
  }
  .dark\:bg-gray-100 {
    &:is(.dark *) {
      background-color: var(--color-gray-100);
    }
  }
  .dark\:bg-gray-200 {
    &:is(.dark *) {
      background-color: var(--color-gray-200);
    }
  }
  .dark\:bg-gray-500 {
    &:is(.dark *) {
      background-color: var(--color-gray-500);
    }
  }
  .dark\:bg-gray-700 {
    &:is(.dark *) {
      background-color: var(--color-gray-700);
    }
  }
  .dark\:bg-gray-700\/20 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-700) 20%, transparent);
    }
  }
  .dark\:bg-gray-700\/30 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
    }
  }
  .dark\:bg-gray-700\/50 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
    }
  }
  .dark\:bg-gray-700\/60 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
    }
  }
  .dark\:bg-gray-800 {
    &:is(.dark *) {
      background-color: var(--color-gray-800);
    }
  }
  .dark\:bg-gray-800\/30 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-800) 30%, transparent);
    }
  }
  .dark\:bg-gray-800\/50 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
    }
  }
  .dark\:bg-gray-800\/60 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-800) 60%, transparent);
    }
  }
  .dark\:bg-gray-900 {
    &:is(.dark *) {
      background-color: var(--color-gray-900);
    }
  }
  .dark\:bg-gray-900\/20 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-900) 20%, transparent);
    }
  }
  .dark\:bg-gray-950\/\[0\.15\] {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-950) 15%, transparent);
    }
  }
  .dark\:bg-green-400\/20 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-green-400) 20%, transparent);
    }
  }
  .dark\:bg-sky-500\/20 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
    }
  }
  .dark\:bg-violet-500\/20 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
    }
  }
  .dark\:from-\[\#151D2C\] {
    &:is(.dark *) {
      --tw-gradient-from: #151D2C;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:from-gray-700 {
    &:is(.dark *) {
      --tw-gradient-from: var(--color-gray-700);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:from-gray-700\/30 {
    &:is(.dark *) {
      --tw-gradient-from: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:from-gray-800 {
    &:is(.dark *) {
      --tw-gradient-from: var(--color-gray-800);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:from-gray-800\/30 {
    &:is(.dark *) {
      --tw-gradient-from: color-mix(in oklab, var(--color-gray-800) 30%, transparent);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:from-violet-500\/\[0\.24\] {
    &:is(.dark *) {
      --tw-gradient-from: color-mix(in oklab, var(--color-violet-500) 24%, transparent);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:to-gray-700 {
    &:is(.dark *) {
      --tw-gradient-to: var(--color-gray-700);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:to-gray-800 {
    &:is(.dark *) {
      --tw-gradient-to: var(--color-gray-800);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:to-gray-900 {
    &:is(.dark *) {
      --tw-gradient-to: var(--color-gray-900);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:fill-gray-500 {
    &:is(.dark *) {
      fill: var(--color-gray-500);
    }
  }
  .dark\:fill-gray-800 {
    &:is(.dark *) {
      fill: var(--color-gray-800);
    }
  }
  .dark\:fill-violet-500\/30 {
    &:is(.dark *) {
      fill: color-mix(in oklab, var(--color-violet-500) 30%, transparent);
    }
  }
  .dark\:text-gray-100 {
    &:is(.dark *) {
      color: var(--color-gray-100);
    }
  }
  .dark\:text-gray-300 {
    &:is(.dark *) {
      color: var(--color-gray-300);
    }
  }
  .dark\:text-gray-400 {
    &:is(.dark *) {
      color: var(--color-gray-400);
    }
  }
  .dark\:text-gray-400\/80 {
    &:is(.dark *) {
      color: color-mix(in oklab, var(--color-gray-400) 80%, transparent);
    }
  }
  .dark\:text-gray-500 {
    &:is(.dark *) {
      color: var(--color-gray-500);
    }
  }
  .dark\:text-gray-600 {
    &:is(.dark *) {
      color: var(--color-gray-600);
    }
  }
  .dark\:text-gray-700 {
    &:is(.dark *) {
      color: var(--color-gray-700);
    }
  }
  .dark\:text-gray-800 {
    &:is(.dark *) {
      color: var(--color-gray-800);
    }
  }
  .dark\:text-violet-200 {
    &:is(.dark *) {
      color: var(--color-violet-200);
    }
  }
  .dark\:text-violet-400 {
    &:is(.dark *) {
      color: var(--color-violet-400);
    }
  }
  .dark\:text-violet-500 {
    &:is(.dark *) {
      color: var(--color-violet-500);
    }
  }
  .dark\:placeholder-gray-500 {
    &:is(.dark *) {
      &::placeholder {
        color: var(--color-gray-500);
      }
    }
  }
  .dark\:group-hover\:text-gray-200 {
    &:is(.dark *) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .dark\:group-hover\:text-gray-400 {
    &:is(.dark *) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .dark\:group-hover\:text-violet-400 {
    &:is(.dark *) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-violet-400);
        }
      }
    }
  }
  .dark\:group-hover\:text-white {
    &:is(.dark *) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .dark\:peer-checked\:border-violet-500 {
    &:is(.dark *) {
      &:is(:where(.peer):checked ~ *) {
        border-color: var(--color-violet-500);
      }
    }
  }
  .dark\:before\:bg-\[\#151D2C\]\/90 {
    &:is(.dark *) {
      &::before {
        content: var(--tw-content);
        background-color: color-mix(in oklab, #151D2C 90%, transparent);
      }
    }
  }
  .dark\:before\:bg-gray-800 {
    &:is(.dark *) {
      &::before {
        content: var(--tw-content);
        background-color: var(--color-gray-800);
      }
    }
  }
  .dark\:before\:bg-gray-800\/90 {
    &:is(.dark *) {
      &::before {
        content: var(--tw-content);
        background-color: color-mix(in oklab, var(--color-gray-800) 90%, transparent);
      }
    }
  }
  .dark\:before\:bg-gray-900 {
    &:is(.dark *) {
      &::before {
        content: var(--tw-content);
        background-color: var(--color-gray-900);
      }
    }
  }
  .dark\:after\:bg-gray-700\/60 {
    &:is(.dark *) {
      &::after {
        content: var(--tw-content);
        background-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
      }
    }
  }
  .dark\:after\:text-gray-600 {
    &:is(.dark *) {
      &::after {
        content: var(--tw-content);
        color: var(--color-gray-600);
      }
    }
  }
  .dark\:hover\:border-gray-600 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-gray-600);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-600 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-700\/20 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in oklab, var(--color-gray-700) 20%, transparent);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-700\/50 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-800 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-900 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .dark\:hover\:bg-white {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .dark\:hover\:text-gray-100 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .dark\:hover\:text-gray-200 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .dark\:hover\:text-gray-300 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .dark\:hover\:text-gray-400 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .dark\:hover\:text-gray-500 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .dark\:hover\:text-violet-400 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-violet-400);
        }
      }
    }
  }
  .dark\:hover\:text-violet-500 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-violet-500);
        }
      }
    }
  }
  .dark\:hover\:text-white {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .dark\:focus\:bg-gray-800 {
    &:is(.dark *) {
      &:focus {
        background-color: var(--color-gray-800);
      }
    }
  }
  .dark\:disabled\:border-gray-700 {
    &:is(.dark *) {
      &:disabled {
        border-color: var(--color-gray-700);
      }
    }
  }
  .dark\:disabled\:bg-gray-800 {
    &:is(.dark *) {
      &:disabled {
        background-color: var(--color-gray-800);
      }
    }
  }
  .dark\:disabled\:text-gray-600 {
    &:is(.dark *) {
      &:disabled {
        color: var(--color-gray-600);
      }
    }
  }
  .dark\:disabled\:placeholder\:text-gray-600 {
    &:is(.dark *) {
      &:disabled {
        &::placeholder {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .dark\:max-lg\:before\:bg-gray-800\/90 {
    &:is(.dark *) {
      @media (width < 64rem) {
        &::before {
          content: var(--tw-content);
          background-color: color-mix(in oklab, var(--color-gray-800) 90%, transparent);
        }
      }
    }
  }
  .dark\:lg\:before\:bg-gray-900\/90 {
    &:is(.dark *) {
      @media (width >= 64rem) {
        &::before {
          content: var(--tw-content);
          background-color: color-mix(in oklab, var(--color-gray-900) 90%, transparent);
        }
      }
    }
  }
  .dark\:lg\:hover\:bg-gray-800 {
    &:is(.dark *) {
      @media (width >= 64rem) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-gray-800);
          }
        }
      }
    }
  }
  .sidebar-expanded\:rotate-180 {
    &:is(.sidebar-expanded *) {
      rotate: 180deg;
    }
  }
  .lg\:sidebar-expanded\:col-span-6 {
    @media (width >= 64rem) {
      &:is(.sidebar-expanded *) {
        grid-column: span 6 / span 6;
      }
    }
  }
  .lg\:sidebar-expanded\:block {
    @media (width >= 64rem) {
      &:is(.sidebar-expanded *) {
        display: block;
      }
    }
  }
  .lg\:sidebar-expanded\:hidden {
    @media (width >= 64rem) {
      &:is(.sidebar-expanded *) {
        display: none;
      }
    }
  }
  .lg\:sidebar-expanded\:\!w-64 {
    @media (width >= 64rem) {
      &:is(.sidebar-expanded *) {
        width: calc(var(--spacing) * 64) !important;
      }
    }
  }
  .lg\:sidebar-expanded\:w-20 {
    @media (width >= 64rem) {
      &:is(.sidebar-expanded *) {
        width: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:sidebar-expanded\:opacity-100 {
    @media (width >= 64rem) {
      &:is(.sidebar-expanded *) {
        opacity: 100%;
      }
    }
  }
  .xl\:sidebar-expanded\:col-span-3 {
    @media (width >= 80rem) {
      &:is(.sidebar-expanded *) {
        grid-column: span 3 / span 3;
      }
    }
  }
  .xl\:sidebar-expanded\:col-span-4 {
    @media (width >= 80rem) {
      &:is(.sidebar-expanded *) {
        grid-column: span 4 / span 4;
      }
    }
  }
  .xl\:sidebar-expanded\:block {
    @media (width >= 80rem) {
      &:is(.sidebar-expanded *) {
        display: block;
      }
    }
  }
  .xl\:sidebar-expanded\:w-40 {
    @media (width >= 80rem) {
      &:is(.sidebar-expanded *) {
        width: calc(var(--spacing) * 40);
      }
    }
  }
  .xl\:sidebar-expanded\:w-56 {
    @media (width >= 80rem) {
      &:is(.sidebar-expanded *) {
        width: calc(var(--spacing) * 56);
      }
    }
  }
  .\32 xl\:sidebar-expanded\:w-56 {
    @media (width >= 96rem) {
      &:is(.sidebar-expanded *) {
        width: calc(var(--spacing) * 56);
      }
    }
  }
}
* {
  --calendarPadding: 24px;
  --daySize: 36px;
  --daysWidth: calc(var(--daySize)*7);
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@layer components {
  .h1 {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    letter-spacing: var(--tw-tracking, var(--text-4xl--letter-spacing));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }
  .h2 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    letter-spacing: var(--tw-tracking, var(--text-3xl--letter-spacing));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }
  .h3 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    letter-spacing: var(--tw-tracking, var(--text-3xl--letter-spacing));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .h4 {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    letter-spacing: var(--tw-tracking, var(--text-2xl--letter-spacing));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  @media (width >= 48rem) {
    .h1 {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
      letter-spacing: var(--tw-tracking, var(--text-5xl--letter-spacing));
    }
    .h2 {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
      letter-spacing: var(--tw-tracking, var(--text-4xl--letter-spacing));
    }
  }
  .btn, .btn-lg, .btn-sm, .btn-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .btn {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .btn-lg {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .btn-sm {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
  }
  .btn-xs {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
  }
  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
  .form-input, .form-textarea, .form-multiselect, .form-select, .form-checkbox, .form-radio {
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-white);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-900) 30%, transparent);
    }
    &:is(.dark *) {
      &:disabled {
        border-color: var(--color-gray-700);
      }
    }
    &:is(.dark *) {
      &:disabled {
        background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
      }
    }
    &:is(.dark *) {
      &:disabled {
        &:hover {
          @media (hover: hover) {
            border-color: var(--color-gray-700);
          }
        }
      }
    }
  }
  .form-checkbox {
    border-radius: var(--radius-sm);
  }
  .form-input, .form-textarea, .form-multiselect, .form-select {
    border-radius: var(--radius-lg);
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-gray-800);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-300);
      }
    }
    &:focus {
      border-color: var(--color-gray-300);
    }
    &:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
    }
    &:is(.dark *) {
      color: var(--color-gray-100);
    }
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-gray-600);
        }
      }
    }
    &:is(.dark *) {
      &:focus {
        border-color: var(--color-gray-600);
      }
    }
  }
  .form-input, .form-textarea {
    &::placeholder {
      color: var(--color-gray-400);
    }
    &:is(.dark *) {
      &::placeholder {
        color: var(--color-gray-500);
      }
    }
  }
  .form-select {
    padding-right: calc(var(--spacing) * 10);
  }
  .form-checkbox, .form-radio {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    color: var(--color-violet-500);
    &:checked {
      border-color: transparent;
    }
    &:checked {
      background-color: var(--color-violet-500);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-violet-500) 50%, transparent);
    }
    &:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
    }
    &:is(.dark *) {
      &:checked {
        border-color: transparent;
      }
    }
  }
  .form-switch {
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    width: 44px;
  }
  .form-switch label {
    display: block;
    height: calc(var(--spacing) * 6);
    cursor: pointer;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
  }
  .form-switch label > span:first-child {
    position: absolute;
    display: block;
    border-radius: calc(infinity * 1px);
    width: 20px;
    height: 20px;
    top: 2px;
    left: 2px;
    right: 50%;
    transition: all 0.15s ease-out;
  }
  .form-switch input[type="checkbox"] + label {
    background-color: var(--color-gray-400);
    &:is(.dark *) {
      background-color: var(--color-gray-700);
    }
  }
  .form-switch input[type="checkbox"]:checked + label {
    background-color: var(--color-violet-500);
  }
  .form-switch input[type="checkbox"]:checked + label > span:first-child {
    left: 22px;
  }
  .form-switch input[type="checkbox"]:disabled + label {
    cursor: not-allowed;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-100);
    &:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
    }
    &:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-700) 20%, transparent);
    }
  }
  .form-switch input[type="checkbox"]:disabled + label > span:first-child {
    background-color: var(--color-gray-400);
    &:is(.dark *) {
      background-color: var(--color-gray-600);
    }
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}
[x-cloak=""] {
  display: none;
}
@media screen and (max-width: 64rem) {
  [x-cloak="lg"] {
    display: none;
  }
}
@layer base {
  [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: oklch(0.546 0.245 262.881);
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      border-color: oklch(0.546 0.245 262.881);
    }
  }
  input::placeholder,textarea::placeholder {
    color: #6b7280;
    opacity: 1;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-date-and-time-value {
    min-height: 1.5em;
  }
  ::-webkit-date-and-time-value {
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
  }
  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    print-color-adjust: exact;
  }
  [multiple],[size]:where(select:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    print-color-adjust: unset;
  }
  [type='checkbox'],[type='radio'] {
    appearance: none;
    padding: 0;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: oklch(0.546 0.245 262.881);
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
  }
  [type='checkbox'] {
    border-radius: 0px;
  }
  [type='radio'] {
    border-radius: 100%;
  }
  [type='checkbox']:focus,[type='radio']:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: oklch(0.546 0.245 262.881);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  [type='checkbox']:checked,[type='radio']:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  [type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  [type='radio']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  [type='checkbox']:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  [type='file'] {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
  }
  [type='file']:focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
  initial-value: rotateX(0);
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
  initial-value: rotateY(0);
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
  initial-value: rotateZ(0);
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
  initial-value: skewX(0);
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
  initial-value: skewY(0);
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}

/* ──────────────────────────────────────────────────────────────────────
   Primary palette — Phase 1 alias of the legacy `violet` family.
   Every `bg-violet-*` / `text-violet-*` / etc. utility that exists has
   a matching `bg-primary-*` / `text-primary-*` here, resolving to the
   same colors. Use `primary` in all new code. Don't add new `violet`
   classes — when the existing `violet` utilities are migrated away,
   this whole block stays and the violet family is removed.
   ────────────────────────────────────────────────────────────────────── */
@layer utilities {
  .border-primary-400 { border-color: var(--color-primary-400); }
  .border-primary-500 { border-color: var(--color-primary-500); }
  .border-primary-500\/60 { border-color: color-mix(in oklab, var(--color-primary-500) 60%, transparent); }

  .bg-primary-50  { background-color: var(--color-primary-50); }
  .bg-primary-100 { background-color: var(--color-primary-100); }
  .bg-primary-400 { background-color: var(--color-primary-400); }
  .bg-primary-500 { background-color: var(--color-primary-500); }
  .bg-primary-500\/20 { background-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent); }

  .from-primary-500\/\[0\.12\] { --tw-gradient-from: color-mix(in oklab, var(--color-primary-500) 12%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
  .to-primary-500\/\[0\.04\] { --tw-gradient-to: color-mix(in oklab, var(--color-primary-500) 4%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }

  .fill-primary-400 { fill: var(--color-primary-400); }
  .fill-primary-500 { fill: var(--color-primary-500); }

  .text-primary-50  { color: var(--color-primary-50); }
  .text-primary-200 { color: var(--color-primary-200); }
  .text-primary-300 { color: var(--color-primary-300); }
  .text-primary-400 { color: var(--color-primary-400); }
  .text-primary-500 { color: var(--color-primary-500); }
  .text-primary-600 { color: var(--color-primary-600); }

  .shadow-primary-500\/20 { --tw-shadow-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent); }

  .group-hover\:text-primary-600 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-primary-600); } } }
  .peer-checked\:border-primary-400 { &:is(:where(.peer):checked ~ *) { border-color: var(--color-primary-400); } }

  .hover\:bg-primary-100 { &:hover { @media (hover: hover) { background-color: var(--color-primary-100); } } }
  .hover\:text-primary-300 { &:hover { @media (hover: hover) { color: var(--color-primary-300); } } }
  .hover\:text-primary-500 { &:hover { @media (hover: hover) { color: var(--color-primary-500); } } }
  .hover\:text-primary-600 { &:hover { @media (hover: hover) { color: var(--color-primary-600); } } }

  .dark\:border-primary-500 { &:is(.dark *) { border-color: var(--color-primary-500); } }
  .dark\:bg-primary-500\/20 { &:is(.dark *) { background-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent); } }
  .dark\:from-primary-500\/\[0\.24\] { &:is(.dark *) { --tw-gradient-from: color-mix(in oklab, var(--color-primary-500) 24%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } }
  .dark\:fill-primary-500\/30 { &:is(.dark *) { fill: color-mix(in oklab, var(--color-primary-500) 30%, transparent); } }
  .dark\:text-primary-200 { &:is(.dark *) { color: var(--color-primary-200); } }
  .dark\:text-primary-400 { &:is(.dark *) { color: var(--color-primary-400); } }
  .dark\:text-primary-500 { &:is(.dark *) { color: var(--color-primary-500); } }
  .dark\:group-hover\:text-primary-400 { &:is(.dark *) { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-primary-400); } } } }
  .dark\:peer-checked\:border-primary-500 { &:is(.dark *) { &:is(:where(.peer):checked ~ *) { border-color: var(--color-primary-500); } } }
  .dark\:hover\:text-primary-400 { &:is(.dark *) { &:hover { @media (hover: hover) { color: var(--color-primary-400); } } } }
  .dark\:hover\:text-primary-500 { &:is(.dark *) { &:hover { @media (hover: hover) { color: var(--color-primary-500); } } } }
}
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
          animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
          box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57,57,57,0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57,57,57,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57,57,57,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0,0,0,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
          box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
      -ms-flex-preferred-size: 14.2857143%;
          flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
          box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57,57,57,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57,57,57,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
          box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
          box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57,57,57,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
/* CUSTOM CSS STYLES FOR VENUE */
.gap-1\.5 { gap: 0.375rem; }
.venue-form-field {
  border-radius: 0;
}

@media (min-width: 1024px) {
  .alert-text {
    min-width: 35em;
  }
}

@media (max-width: 1023px) {
  .alert-text {
    max-width: 35em;
  }
}

.venue-btns {
  height:3em;
}
.venue-small-inline-fields {
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--color-white);
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  &:is(.dark *) {
    background-color: color-mix(in oklab, var(--color-gray-900) 30%, transparent);
  }
  &:is(.dark *) {
    &:disabled {
      border-color: var(--color-gray-700);
    }
  }
  &:is(.dark *) {
    &:disabled {
      background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
    }
  }
  &:is(.dark *) {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-gray-700);
        }
      }
    }
  }

  border-radius: var(--radius-lg);
  border-color: var(--color-gray-200);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
  color: var(--color-gray-800);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-gray-300);
    }
  }
  &:focus {
    border-color: var(--color-gray-300);
  }
  &:is(.dark *) {
    border-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
  }
  &:is(.dark *) {
    color: var(--color-gray-100);
  }
  &:is(.dark *) {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gray-600);
      }
    }
  }
  &:is(.dark *) {
    &:focus {
      border-color: var(--color-gray-600);
    }
  }
}

.hidden-field {
  display: none;
}
.btn-purple {
  background-color: #377EF9;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .conversation-reply {
    min-width: 55em !important;
  }
}

@media (max-width: 1023px) {
  .conversation-reply {
    min-width: auto;
  }
}
.sms-box {
  max-width: 70em;
  min-width: 15em;
}
.sms-content-not-lead {
  background-color: var(--color-primary-100);
  border-color: transparent;
  color: var(--color-gray-800);
}

.text-color-custom {
  color: #5c5353;
}
.border-left-custom {
  border-left: 1px solid #e7e7e7;
}
.clickable-item {
  cursor: pointer;
}
.violet-hover:hover {
  color: #377EF9 !important;
}

.attention-card-active {
  cursor: pointer;
  transition: box-shadow 0.2s ease-out;
}
.attention-card-active:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.attention-card-active:hover .attention-count {
  color: #377EF9;
}
.attention-card-active:hover .attention-chevron {
  transform: translateX(4px);
  color: #377EF9;
}
.attention-count {
  transition: color 0.15s ease-out;
}
.attention-chevron {
  transition: transform 0.2s ease-out, color 0.15s ease-out;
}

.btn-primary, .btn-primary:hover {
  background-color: #377EF9;
  color: white;
  cursor: pointer;
}

.btn-disabled {
  background-color: #8db3f3;
  cursor: none;
  color:white;
}
.no-hover {
  pointer-events: none;
}
.max-h-\[600px\] {
  max-height: 600px;
}
.ml-p1 {
  margin-left: 0.1em;
}
.btn-disabled, .btn-disabled:hover {
  opacity: 0.5 !important;
}
.lead-stage-followup-message {
  text-wrap: auto;
  margin-top: 1em;
}
.email-content p {
  margin-top: 1em;
}
.test-mode-input {
  width: 100%;
}

.test-mode-btn {
  width: 100%;
}

.no-cursor {
  cursor: none !important;
}

.max-h-\[250px\] {
  max-height: 250px;
}
  
.highlighted {
  border: 2px solid #ff5656;
  transition: background-color 0.5s ease;
}
.full-radius, .left-only-radius-relative {
  border-radius: 0.375rem;
}

.left-only-radius {
  border-top-left-radius: 0.375rem; 
  border-bottom-left-radius: 0.375rem;
}

.left-only-radius, .full-radius {
  background-color: #2563eb;
}
.funnal-bar-hight {
  min-height:3.2em;
}

.bookings-bar-hight {
  min-height:0.55em;
}

@media (min-width: 768px) {
  .w-24 {
    width: calc(var(--spacing) * 28);
  }
  .lead-stage-edit-modal {
    min-width: 40em;
  }
}

.w-14 {
  width: calc(var(--spacing) * 13.5);
}

@media (max-width: 767px) {
  .email-box, .sms-box {
    p {
      word-wrap: break-word;
    }
  }
  .email-reply-editor-conversations {
    min-width: 15;
  }
  .conversation-sidebar {
    width: 100vw;
  }
}

@media(min-width:  992px) {
  .email-reply-editor-conversations {
    min-width: 55em;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .email-reply-editor-conversations {
    min-width: 40em;
  }
}

/* Default (unchecked) */
.filter-hot-peer + .filter-hot-visible {
  background: white;
  color: #374151; /* gray-700 */
}

/* Checked: light blue background */
.filter-hot-peer:checked + .filter-hot-visible {
  background: #DBEAFE; /* blue-100 */
  border-color: #3B82F6; /* blue-500 */
  color: #3B82F6; /* blue text */
}

/* Small checkbox visual */
.filter-hot-peer + .filter-hot-visible .checkmark {
  background: white;
  border: 1px solid #D1D5DB; /* gray border */
  color: transparent; /* hide tick */
}

/* Checked small checkbox: blue box with white tick */
.filter-hot-peer:checked + .filter-hot-visible .checkmark {
  border-color: #3B82F6;
  background: #3B82F6; /* blue background */
  color: white; /* white tick */
}

/* Tick visibility */
.filter-hot-visible .checkmark svg { display: none; }
.filter-hot-peer:checked + .filter-hot-visible .checkmark svg { display: block; }

.email-box pre, .sms-box pre {
  text-wrap: auto;
}
.message-content {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* pre-line above turns every newline into a line break, which is right for
   plain text but wrong for table markup: the builder signatures are tables,
   and the newlines between their rows and cells rendered as blank lines, so
   a signature that is tight in the email and in the preview came out
   double-spaced in the conversation. Tables are HTML, so lay them out as HTML. */
.message-content table {
  white-space: normal;
}
.disabled\:bg-gray-300 {
  &:disabled {
    background-color: var(--color-gray-300);
  }
}
#imageModal {
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.4);
}

#modalImage {
  display: block;
}
.bg-yellow-notes {
  background-color: #fff9e1;
}
/* Whole composer card in internal-notes mode: notepad yellow with a warm
   edge, so nothing on screen suggests this reaches the lead. */
.composer-notes {
  background-color: #fff9e1;
  border-color: #f0dfa0;
}
.dark .composer-notes {
  background-color: #2b2716;
  border-color: #5a4d1f;
}
.dark .composer-notes .bg-yellow-notes,
.dark .composer-notes textarea { background-color: #2b2716; }
.badge-green {
  background-color: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: var(--color-green-700);
}
.badge-red {
  background-color: #FEF2F2;
  border: 1px solid #FECACA;
  color: var(--color-red-700);
}
.badge-amber {
  background-color: #FFFBEB;
  border: 1px solid #FDE68A;
  color: var(--color-amber-700);
}
.badge-gray {
  background-color: #F9FAFB;
  border: 1px solid #E5E7EB;
  color: var(--color-gray-700);
}

.badge-blue {
  background-color: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: var(--color-blue-700);
}
.file-input {
  border: 1px solid var(--color-gray-300);
  padding: 7px;
  border-radius: 9px !important;
}
.small-text-badge {
  font-size: 10px;
}

.filter-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.filter-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Lead show – Open Conversation button */
.lead-open-convo {
  margin-left: 3.25rem;
  margin-top: 0.75rem;
}
@media (min-width: 640px) {
  .lead-open-convo {
    position: absolute;
    top: calc(1.5rem + 1.75rem);
    transform: translateY(-50%);
    right: 1.5rem;
    margin: 0;
  }
}

/* Lead show – meta row + booked strip. Indent aligns with the name column
   on desktop; mobile keeps the full card width (the 3.25rem would eat a
   quarter of a phone-sized card). The strip gets roomier vertical padding
   on desktop only (mosaic.css has no sm:py-3); mobile keeps py-2. */
@media (min-width: 640px) {
  .lead-meta-block {
    margin-left: 3.25rem;
  }
  .booked-strip {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* Composer responsive utilities. mosaic.css doesn't bake `sm:hidden`,
   so we provide a `cmp-sm-hide` class to hide an element at sm+ widths.
   The `cmp-from-pill` / `cmp-from-name` rules give the From picker the
   compact mobile treatment (truncated name, no min-width) while keeping
   the roomier desktop look (200px min-width, no name cap). */
/* From pill name span: truncates at a width cap so the pill sizes to the
   chosen name (resizing on selection is intentional) but doesn't run away
   if the name is unusually long. Mobile cap is tighter than desktop. */
.cmp-from-name { max-width: 110px; }
@media (min-width: 640px) {
  .cmp-sm-hide { display: none !important; }
  .cmp-from-name { max-width: 200px; }
}

/* Admin list-header search fields (users/orgs). mosaic.css doesn't bake
   responsive widths like `sm:w-96`, so the previous inline `width: 24rem`
   overflowed the card on phones. Fluid below sm (flex lets it share the
   row with the archived-filter select), fixed 24rem from sm up. */
.admin-search-w {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}
@media (min-width: 640px) {
  .admin-search-w {
    width: 24rem;
    flex: none;
  }
}

/* Left sidebar collapse. Alpine toggles .sidebar-collapsed instead of x-show:
   on desktop the sidebar is in-flow, so a display swap made the main content
   snap 16rem the frame the slide ended. Mobile (overlay) slides out with
   translate; desktop animates margin-left so the content reflows with the
   panel. Visibility flips after the slide so the closed sidebar isn't
   tabbable, and immediately on open so the slide-in is visible. */
#sidebar {
  transition: translate 300ms ease-in-out, margin-left 300ms ease-in-out, visibility 0s;
}
#sidebar.sidebar-collapsed {
  visibility: hidden;
  transition: translate 300ms ease-in-out, margin-left 300ms ease-in-out, visibility 0s 300ms;
}
@media (max-width: 1023px) {
  #sidebar.sidebar-collapsed { translate: -100% 0; }
}
@media (min-width: 1024px) {
  #sidebar.sidebar-collapsed { margin-left: -16rem; } /* matches w-64 */
}

/* Pre-Alpine guard for the left sidebar. The layout head adds this class from
   localStorage before first paint when the sidebar should start closed; the
   sidebar itself uses x-cloak="lg" so desktop paints it open immediately
   instead of waiting for Alpine. sidebarState().init() removes the class,
   after which the .sidebar-collapsed class binding owns visibility. */
html.js-left-sidebar-closed #sidebar {
  display: none;
}

/* Chip groups: the signature builder's mode/template chips and the generic
   .choice-chip used for short option sets (AI reply wait time). The
   selected-state utilities (ring-2, bg-violet-50) are not in the baked mosaic
   build, so the states live here instead of as dead Tailwind classes. */
.signature-mode-chip.is-active,
.signature-template-chip.is-active,
.choice-chip.is-active {
  border-color: var(--color-violet-500);
  color: var(--color-violet-500);
  background-color: color-mix(in oklab, var(--color-violet-500) 8%, transparent);
}
.signature-template-chip {
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

/* Color picker swatches, shared by every picker in the app. Circular buttons; the last one wraps a native
   <input type="color"> so "custom" reads as one more swatch rather than a
   second control. Styled here rather than with utilities because the native
   colour-swatch pseudo-elements have no Tailwind equivalent. */
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
  cursor: pointer;
  padding: 0;
  display: inline-block;
  position: relative;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.is-active {
  box-shadow: 0 0 0 2px var(--color-white, #fff), 0 0 0 4px var(--color-violet-500);
}
.dark .color-swatch.is-active {
  box-shadow: 0 0 0 2px rgb(31 41 55), 0 0 0 4px var(--color-violet-500);
}
/* "Choose your own": an outlined circle with a + until a color is picked,
   after which it wears that color like the presets. The native input sits on
   top at zero opacity so the whole circle is the hit target. */
.color-swatch--custom {
  overflow: hidden;
  background-color: transparent;
  border: 1px dashed var(--color-gray-300, #d1d5db);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400, #9ca3af);
}
.dark .color-swatch--custom {
  border-color: var(--color-gray-600, #4b5563);
}
.color-swatch--custom svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.color-swatch--custom.is-custom-set {
  border-style: solid;
  border-color: transparent;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
}
/* Must come after the rule above: both are two-class selectors, so equal
   specificity means source order decides, and .is-custom-set would otherwise
   replace the selected ring with its own flat outline. */
.color-swatch--custom.is-active {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--color-white, #fff), 0 0 0 4px var(--color-violet-500);
}
.dark .color-swatch--custom.is-active {
  box-shadow: 0 0 0 2px rgb(31 41 55), 0 0 0 4px var(--color-violet-500);
}
.color-swatch--custom.is-custom-set svg { display: none; }
.color-swatch--custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}

/* Signature previews render the real signature markup, links and all. Those
   links are live HTML: clicking one in the composer would navigate away from
   a half-written reply, and in the builder it would leave unsaved settings.
   The preview is for looking at, so the links are inert — appearance is
   unchanged, only the click is dropped. */
.signature-preview a {
  pointer-events: none;
  cursor: default;
}

/* Per-field show/hide in the signature builder. The checkbox drives which of
   the two icons shows, so the control is one glyph rather than a checkbox and
   a label. Checked means hidden — the input submits into signature_fields[hidden][]. */
.signature-eye {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-gray-400, #9ca3af);
}
.signature-eye:hover { color: var(--color-gray-600, #4b5563); }
.dark .signature-eye:hover { color: var(--color-gray-300, #d1d5db); }
.signature-eye input { position: absolute; opacity: 0; pointer-events: none; }
.signature-eye svg { width: 16px; height: 16px; }
.signature-eye .signature-eye__off { display: none; }
.signature-eye input:checked ~ .signature-eye__on { display: none; }
.signature-eye input:checked ~ .signature-eye__off { display: inline; }
/* A hidden field keeps its placeholder so turning it back on restores the
   prefill, but reads as inactive. */
.signature-field-hidden .form-input {
  opacity: 0.45;
}

/* Hover-revealed copy buttons (shared/_copy_button reveal: true). mosaic.css
   has no focus-visible:opacity-100, so keyboard focus is handled here. */
.copy-reveal:focus-within { opacity: 1; }

/* Badge pills inline in form labels: text-xs (16px line) + py-0.5 (4px) +
   1px borders = 22px, which outgrows the label's 20px line and pushes that
   grid cell's input down. 14px line-height brings the pill to exactly 20px
   so badge labels match badge-less ones. */
.label-badge {
  line-height: 0.875rem;
}
/* ---- Staff click-to-call (shared/_call_dock) ---- */

/* Shared note textarea (workspace + wrap-up) */
.user-call-note {
  width: 100%;
  resize: none;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-color: #f9fafb;
  color: #1f2937;
}
.dark .user-call-note {
  background-color: #111827;
  border-color: rgb(55 65 81 / 0.6);
  color: #f3f4f6;
}

/* Neutral secondary button used inside the dock */
.user-call-secondary {
  border: 1px solid #e5e7eb;
  color: #374151;
  background-color: #fff;
  cursor: pointer;
}
.dark .user-call-secondary {
  background-color: #1f2937;
  border-color: rgb(55 65 81 / 0.6);
  color: #d1d5db;
}

/* Pre-call review popover, anchored to the launch button */
.user-call-pop {
  position: fixed;
  width: 352px;
  z-index: 71;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.dark .user-call-pop {
  background-color: #1f2937;
  border-color: rgb(55 65 81 / 0.6);
}
.user-call-warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 0.625rem;
  padding: 9px 11px;
  font-size: 0.78rem;
  color: #92400e;
  line-height: 1.45;
  margin-top: 0.7rem;
}
.user-call-brief {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 0.625rem;
  padding: 0.7rem 0.85rem;
  margin-top: 0.7rem;
}
.dark .user-call-brief {
  background: #111827;
  border-color: rgb(55 65 81 / 0.6);
}
/* Brief / talking-point lists: mosaic's reset strips list markers, which
   left the items floating on bare indentation — draw our own bullets. */
.user-call-brief-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.user-call-brief-list li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: 0.3rem;
}
.user-call-brief-list li:last-child { margin-bottom: 0; }
.user-call-brief-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 9999px;
  background-color: #9ca3af;
}
/* Persistent top call strip: dark, full width, above the app shell. The
   shell shifts down while a call is live (body.user-call-active). */
.user-call-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  background-color: #111827;
  color: #f9fafb;
}
body.user-call-active #app-shell {
  height: calc(100dvh - 46px);
  margin-top: 46px;
}
.user-call-live-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background-color: #22c55e;
  flex-shrink: 0;
  animation: user-call-pulse 1.2s ease-in-out infinite;
}
@keyframes user-call-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.user-call-strip-name {
  color: #f9fafb;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  margin-right: 0.5rem;
}
.user-call-strip-name:hover { color: #93c5fd; }
.user-call-strip-sub {
  color: #9ca3af;
  font-size: 0.75rem;
}
.user-call-strip-state {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a7f3d0;
  border: 1px solid rgb(167 243 208 / 0.35);
  border-radius: 9999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}
.user-call-strip-timer {
  font-size: 0.875rem;
  font-weight: 600;
  color: #f9fafb;
}
.user-call-strip-btn {
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.06);
  color: #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.user-call-strip-btn:hover { background: rgb(255 255 255 / 0.13); color: #fff; }
.user-call-strip-btn.act {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}
.user-call-strip-end {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.user-call-strip-end:hover { background: #b91c1c; color: #fff; }

/* Live waveform (mute dims it) */
.user-call-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.user-call-wave i {
  width: 3px;
  border-radius: 2px;
  background: #34d399;
  animation: user-call-wave 0.9s ease-in-out infinite;
}
.user-call-wave i:nth-child(1) { height: 5px; animation-delay: 0s; }
.user-call-wave i:nth-child(2) { height: 8px; animation-delay: 0.13s; }
.user-call-wave i:nth-child(3) { height: 11px; animation-delay: 0.26s; }
.user-call-wave i:nth-child(4) { height: 8px; animation-delay: 0.39s; }
.user-call-wave i:nth-child(5) { height: 5px; animation-delay: 0.52s; }
.user-call-wave.off i { animation-play-state: paused; background: #6b7280; }
@keyframes user-call-wave {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1.25); }
}

/* Docked call workspace. Opens top-right, under the call strip — same
   region the review popover opens in, so the flow doesn't jump corners. */
.user-call-panel {
  position: fixed;
  right: 18px;
  top: 56px;
  width: 360px;
  max-width: calc(100vw - 24px);
  z-index: 75;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.12), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.dark .user-call-panel {
  background-color: #1f2937;
  border-color: rgb(55 65 81 / 0.6);
}
.user-call-noted {
  display: flex;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #374151;
  padding: 0.3rem 0;
  border-bottom: 1px dashed #eef2f7;
  margin-bottom: 0.3rem;
}
.dark .user-call-noted { color: #d1d5db; border-color: rgb(55 65 81 / 0.5); }
.user-call-noted .tm {
  color: #9ca3af;
  flex-shrink: 0;
  font-size: 0.72rem;
  padding-top: 1px;
}
.user-call-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.user-call-keypad button {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
  padding: 0.45rem 0;
  cursor: pointer;
}
.user-call-keypad button:hover { background: #f9fafb; }
.dark .user-call-keypad button {
  background: #111827;
  border-color: rgb(55 65 81 / 0.6);
  color: #f3f4f6;
}

/* Wrap-up outcome pills */
.user-call-outcomes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.user-call-outcomes button {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 0.625rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  padding: 0.55rem 0.7rem;
  text-align: left;
  cursor: pointer;
}
.user-call-outcomes button:hover { border-color: #d1d5db; }
.user-call-outcomes button.on {
  border-color: #377EF9;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}
.dark .user-call-outcomes button {
  background: #111827;
  border-color: rgb(55 65 81 / 0.6);
  color: #d1d5db;
}
.dark .user-call-outcomes button.on {
  background: rgb(55 78 130 / 0.35);
  border-color: #377EF9;
  color: #93c5fd;
}

/* venue.css loads after mosaic.css, so the display rules above would beat
   mosaic's .hidden at equal specificity. The dock toggles visibility purely
   via .hidden — make it always win inside the dock. */
#user-call-dock .hidden {
  display: none !important;
}

/* Audio settings (mic/speaker pickers) in the call dock */
.user-call-gear {
  color: #9ca3af;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0.25rem;
  border-radius: 0.375rem;
}
.user-call-gear:hover { color: #4b5563; background: #f3f4f6; }
.dark .user-call-gear:hover { color: #d1d5db; background: rgb(55 65 81 / 0.5); }
.user-call-select {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
  background-color: #fff;
  color: #1f2937;
}
.dark .user-call-select {
  background-color: #111827;
  border-color: rgb(55 65 81 / 0.6);
  color: #f3f4f6;
}
.user-call-audio {
  border: 1px solid #eef2f7;
  background: #f8fafc;
  border-radius: 0.625rem;
  padding: 0.7rem 0.85rem;
}
.dark .user-call-audio {
  background: #111827;
  border-color: rgb(55 65 81 / 0.6);
}

/* Utilities absent from the frozen mosaic.css build that live views rely on
   (per the b12920c8 convention of defining dead classes here). gap-2.5 is
   used by the call/transfer timeline pills; the border ones by the admin
   usage cost cards. */
.gap-2\.5 { gap: 0.625rem; }
.cursor-not-allowed { cursor: not-allowed; }
.border-l-4 { border-left-width: 4px; }
.border-amber-400 { border-color: #fbbf24; }

/* AI Log detail modal (admin/ai_logs/show): these Tailwind utilities are not
   in the baked mosaic.css, so the collapse clip, prompt wrapping, and modal
   width silently no-oped. Standard Tailwind definitions, global on purpose —
   other views carry the same dead classes (break-all, max-w-4xl). */
.max-h-20 { max-height: 5rem; }
.max-h-80 { max-height: 20rem; }
.max-w-4xl { max-width: 56rem; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Recipients line under every email bubble ("Gagan Batta to me, Gauri")
   and the expanded from/to/cc header it toggles. Values from the
   design_handoff_cc_recipients spec; dark overrides keep it legible on the
   gray-800 bubble. Not Tailwind utilities on purpose: the frozen mosaic.css
   has none of these sizes or colors. */
.email-recipients { margin-top: 4px; margin-bottom: 12px; }
.email-recipients__line {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: 12.5px; line-height: 1.2; color: #5b6472; text-align: left;
}
.email-recipients__line { transition: color .15s ease; }
.email-recipients__line:hover { color: #3a4456; }
.email-recipients__sender { font-weight: 600; color: #3a4456; }
.email-recipients__line svg {
  width: 13px; height: 13px; color: #9aa3b2; flex-shrink: 0;
  transition: transform .2s ease;
}
.email-recipients__line.is-open svg { transform: rotate(180deg); }
.email-recipients__box {
  margin-top: 8px; display: grid; grid-template-columns: auto 1fr;
  column-gap: 12px; row-gap: 4px; padding: 10px 12px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.4; color: #3a4456;
  background: #fff; border: 1px solid #e2e5ea;
  /* Fill the bubble's width without contributing to it: the bubble is
     shrink-to-fit, and a box wider than a short message would otherwise
     snap the whole bubble wider when it opens. Long addresses wrap. */
  width: 0; min-width: 100%; box-sizing: border-box;
}
.email-recipients__box--outbound { background: rgba(255,255,255,.55); border-color: #c9d8f5; }
.email-recipients__label, .email-recipients__addr { color: #9aa3b2; }
.email-recipients__value { min-width: 0; overflow-wrap: anywhere; }
.dark .email-recipients__line { color: #a3adbd; }
.dark .email-recipients__line:hover, .dark .email-recipients__sender { color: #e5e7eb; }
.dark .email-recipients__box { background: rgba(17,24,39,.35); border-color: #374151; color: #e5e7eb; }
.dark .email-recipients__box--outbound { background: rgba(17,24,39,.25); border-color: #4b5563; }

/* Attachment file chips (conversations/_message_attachments): Gmail-style
   icon tile + filename + size for non-media attachments. Same reasoning as
   the recipients styles above: mosaic has none of these sizes or tints. */
.att-chip {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #d6dae1; border-radius: 8px;
  padding: 6px 12px 6px 6px; max-width: 260px;
  transition: background .12s ease;
  /* never stretch to a taller sibling (image thumbnails share the flex row) */
  align-self: flex-start;
}
.att-chip:hover { background: #f3f6fc; }
.att-chip__tile {
  width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.att-chip__tile svg { width: 16px; height: 16px; }
.att-chip__meta { min-width: 0; }
.att-chip__name {
  display: block; font-size: 12.5px; font-weight: 600; color: #1f2430;
  line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.att-chip__size { display: block; font-size: 11px; line-height: 1.3; color: #6b7280; }
/* image-as-chip (mixed rows): the photo fills the tile; button reset keeps
   the chip identical to the link chips */
.att-chip--img { cursor: pointer; text-align: left; font: inherit; }
.att-chip--img .att-chip__tile { overflow: hidden; background: #eef0f3; }
.att-chip--img .att-chip__tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.att-chip--pdf .att-chip__tile { color: #dc2626; background: #fee9e9; }
.att-chip--doc .att-chip__tile { color: #2563eb; background: #e7eefd; }
.att-chip--sheet .att-chip__tile { color: #16a34a; background: #e4f5ea; }
.att-chip--file .att-chip__tile { color: #6b7280; background: #eef0f3; }
.dark .att-chip { background: #232733; border-color: #3a4050; }
.dark .att-chip:hover { background: #2a3040; }
.dark .att-chip__name { color: #e7eaf0; }
.dark .att-chip__size { color: #9aa1ad; }
.dark .att-chip--pdf .att-chip__tile { color: #f87171; background: #3a2224; }
.dark .att-chip--doc .att-chip__tile { color: #60a5fa; background: #1e2a44; }
.dark .att-chip--sheet .att-chip__tile { color: #4ade80; background: #1c3326; }
.dark .att-chip--file .att-chip__tile { color: #9ca3af; background: #2a2e37; }

/* Composer recipients line ("To Gagan Batta, Gauri Batta"). Its menu reuses
   the From picker's Tailwind classes so the two read as one control. */
.composer-recipients {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 0; background: transparent; padding: 0 4px; cursor: pointer;
  font-size: 12px; font-weight: 500; line-height: 1.5rem; color: #3a4456;
}
.composer-recipients__label { color: #646e7e; font-weight: 400; }
.composer-recipients svg { width: 14px; height: 14px; color: #9aa3b2; flex-shrink: 0; }
.dark .composer-recipients { color: #e5e7eb; }
.dark .composer-recipients__label { color: #9ca3af; }

/* Schedule send. The pending bubble (conversations/_scheduled_message) sits
   in the outbound position but reads as "not sent yet": white with a dashed
   brand border, amber once it is on hold. Its action row replaces the
   training options. The modals themselves use the app's standard modal
   markup (conversations/_schedule_send_modals). */
.scheduled-bubble { background: #fff; border: 1px dashed #90bbff; color: var(--color-gray-800); }
.scheduled-bubble--held { border-color: #f59e0b; }
.dark .scheduled-bubble { background: #1f2937; border-color: #4f7ec7; color: #f3f4f6; }
.dark .scheduled-bubble--held { border-color: #d97706; }
.scheduled-bubble__stamp {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 12px; font-weight: 500; color: #377EF9;
}
.scheduled-bubble__stamp svg { width: 14px; height: 14px; flex-shrink: 0; }
.scheduled-bubble__stamp--held { color: #b45309; }
.dark .scheduled-bubble__stamp { color: #68a1fd; }
.dark .scheduled-bubble__stamp--held { color: #fbbf24; }

.scheduled-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding-right: 2px; font-size: 13px;
}
.scheduled-actions form { display: inline; }
.scheduled-actions button {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 500;
  color: #377EF9; cursor: pointer;
}
.scheduled-actions button:hover { text-decoration: underline; }
.scheduled-actions button.is-muted { color: #646e7e; font-weight: 400; }
.scheduled-actions button[disabled] { color: #9aa3b2; cursor: not-allowed; text-decoration: none; }
.scheduled-actions .sep { color: #b8bfcb; }
.dark .scheduled-actions button { color: #68a1fd; }
.dark .scheduled-actions button.is-muted { color: #9ca3af; }
.dark .scheduled-actions button[disabled] { color: #6b7280; }

/* flatpickr inline inside the "Pick date & time" modal: the widget draws its
   own border, so drop it and let the modal card frame it. */
.sched-picker .flatpickr-calendar.inline { box-shadow: none; border: 1px solid #e5e7eb; border-radius: 10px; margin: 0 auto; }
.dark .sched-picker .flatpickr-calendar.inline { border-color: #374151; }
/* The bound input is only the value carrier; the calendar below it is the
   control and the "Sends ..." column reads the value back in words. */
.sched-picker > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sched-picker { position: relative; }

/* ══ Extracted from embedded <style> blocks in the views (JC's rule) ══ */

/* ── from app/views/admin/organizations/_website_scrape_section.html.erb ── */
@keyframes scrape-spin { to { transform: rotate(360deg); } }
  .scrape-spinner { animation: scrape-spin 1s linear infinite !important; }

/* ── from app/views/marketing_campaigns/new_step2.html.erb ── */
@keyframes shimmer {
                  0% { background-position: -200% 0; }
                  100% { background-position: 200% 0; }
                }
                .skeleton-shimmer {
                  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0) 100%);
                  background-size: 200% 100%;
                  animation: shimmer 2.5s ease-in-out infinite;
                }

/* ── from app/views/onboarding/show.html.erb ── */
@keyframes onboarding-spin { to { transform: rotate(360deg); } }
  .onboarding-spinner { animation: onboarding-spin 1s linear infinite !important; }

/* ── from app/views/settings/chat_widget.html.erb ── */
.widget-preview input::placeholder,
                          .widget-preview textarea::placeholder,
                          .widget-preview select {
                            color: #9CA3AF !important;
                            opacity: 1;
                          }

/* ── from app/views/settings/client_messages/_form.html.erb ── */
/* The body editor needs more room than the partial's default
           120px (it's the venue's main writing surface). Scoped via a
           modifier class so other quill-app-style editors aren't
           affected. */
        .quill-app-style--tall .ql-editor { min-height: 250px; }

/* ── Settings → Events → Proposals: sentence-form controls ──
   The lead intake rule and the default money terms both read as a
   sentence with the controls inline, so they share one line height and
   tracking. Values are one-offs mosaic can't express as utilities. */
.setting-sentence { line-height: 2.6; letter-spacing: -0.1px; }
.setting-sentence > select { display: inline-block; width: auto; vertical-align: middle; margin: 0 3px; }
/* Styles for admin/AI modals */
.ai-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.ai-modal-overlay.active {
  display: flex;
}
.ai-modal-content {
  background: white;
  max-width: 1000px;
  width: 95vw;
  margin: auto;
  padding: 2rem;
  border-radius: 1rem;
  position: relative;
}
@media (max-width: 600px) {
  .ai-modal-content {
    padding: 1rem;
    width: 99vw;
  }
} 

/* Modal overlay for embedding entries */
.embedding-entry-modal-overlay, .ai-config-item-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.embedding-entry-modal-content, .ai-config-item-modal-content {
  position: relative;
  min-width: 60em;
  max-width: 70em;
  max-height: 90vh;
  width: 100%;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

@media (max-width: 900px) {
  .embedding-entry-modal-content {
    min-width: 90vw;
    max-width: 98vw;
  }
} 
/* ==========================================================================
   Calendar view (/calendar) — week + month + detail drawer
   ========================================================================== */

.vc-page {
  /* Brand blue — same value the project remaps Tailwind's "violet-500" to,
     and the same hex used in .btn-primary and Organization::DEFAULT_BRAND_COLOR. */
  --vc-primary: #377EF9;
  --vc-primary-soft: #eef4fe;
  --vc-primary-ink: #1d4ed8;
  --vc-line: #e5e7eb;                /* gray-200 */
  --vc-line-strong: #d1d5db;         /* gray-300 */
  --vc-text: #111827;
  --vc-text-dim: #4b5563;
  --vc-text-muted: #9ca3af;
  --vc-surface: #ffffff;
  --vc-surface-alt: #f9fafb;
  --vc-green: #22c55e;
  --vc-amber: #f59e0b;
  --vc-red: #ef4444;
}

/* ----- Page head ----- */
.vc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.vc-head h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--vc-text);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.vc-head p {
  margin: 0;
  font-size: 13px;
  color: var(--vc-text-dim);
}
.vc-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ----- Toolbar ----- */
.vc-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 10px 14px;
  background: var(--vc-surface);
  border: 1px solid var(--vc-line);
  border-radius: 10px;
  margin-bottom: 16px;
}
.vc-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vc-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--vc-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
  text-decoration: none;
  flex-shrink: 0;
}
.vc-icon-btn:hover {
  background: var(--vc-surface-alt);
  border-color: var(--vc-line);
  color: var(--vc-text);
}
.vc-today {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--vc-line);
  background: var(--vc-surface);
  color: var(--vc-text-dim);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.vc-today:hover { background: var(--vc-surface-alt); color: var(--vc-text); }
.vc-today.is-current { background: var(--vc-primary-soft); color: var(--vc-primary-ink); border-color: transparent; }
.vc-range {
  font-size: 14px;
  font-weight: 600;
  color: var(--vc-text);
  letter-spacing: -0.005em;
}
.vc-tz {
  font-size: 11.5px;
  color: var(--vc-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.vc-spacer { flex: 1 1 auto; }

/* View switch (Week / Month) — applies to <a> links so it works with link_to */
.vc-view-switch {
  display: inline-flex;
  background: var(--vc-surface-alt);
  border: 1px solid var(--vc-line);
  border-radius: 8px;
  padding: 2px;
  height: 30px;
  align-items: center;
}
.vc-view-switch a {
  padding: 0 12px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--vc-text-dim);
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  line-height: 1;
}
.vc-view-switch a:hover { color: var(--vc-text); }
.vc-view-switch a.active {
  background: var(--vc-surface);
  color: var(--vc-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Hide the view toggle on mobile — month view is unusable at narrow
   widths (50px columns can't fit event details). The Calendar template
   also redirects month-view URLs to week on mobile so deep links don't
   land on a broken layout. */
@media (max-width: 767px) {
  .vc-view-switch { display: none; }
}

/* Drawer toggle rows for BlockedDate flags. Title + description on the
   left, switch + transient "Saved" pill on the right. Replaces the
   compact-checkbox-with-paragraph variant which felt cramped and used a
   classic form submit that closed the drawer on success. */
.vc-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--vc-line);
}
.vc-toggle-text {
  flex: 1 1 auto;
  min-width: 0;
}
.vc-toggle-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--vc-text);
  line-height: 1.3;
}
.vc-toggle-desc {
  font-size: 12px;
  color: var(--vc-text-dim);
  line-height: 1.4;
  margin-top: 2px;
}
.vc-toggle-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.vc-toggle-flash {
  font-size: 11px;
  font-weight: 500;
  color: #047857; /* emerald-700 */
  background: #d1fae5; /* emerald-100 */
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}
.vc-toggle-flash-error {
  color: #b91c1c; /* red-700 */
  background: #fee2e2; /* red-100 */
}

/* Type filter chips */
.vc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--vc-line);
  background: var(--vc-surface);
  color: var(--vc-text-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.vc-chip .vc-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--vc-text-muted);
}
.vc-chip.tour .vc-dot     { background: var(--vc-primary); }
.vc-chip.booked .vc-dot   { background: var(--vc-green); }
.vc-chip.block .vc-dot    { background: var(--vc-text-muted); }
.vc-chip.off              { opacity: 0.45; }
.vc-chip:not(.off):hover  { border-color: var(--vc-line-strong); color: var(--vc-text); }

/* Host filter pill */
.vc-host-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
  border: 1px solid var(--vc-line);
  background: var(--vc-surface);
  color: var(--vc-text);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.vc-host-pill:hover { background: var(--vc-surface-alt); border-color: var(--vc-line-strong); }
.vc-host-pill .vc-stack { display: inline-flex; }
.vc-host-pill .vc-stack .vc-av { width: 22px; height: 22px; font-size: 9px; border: 1.5px solid var(--vc-surface); margin-left: -6px; }
.vc-host-pill .vc-stack .vc-av:first-child { margin-left: 0; }
.vc-host-pill > .vc-av { width: 22px; height: 22px; font-size: 9px; }
.vc-host-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 240px;
  padding: 6px;
  background: var(--vc-surface);
  border: 1px solid var(--vc-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18);
}
.vc-host-menu .vc-eyebrow {
  padding: 8px 10px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vc-text-muted);
  font-weight: 600;
}
.vc-host-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--vc-text);
  font-size: 13px;
}
.vc-host-option:hover { background: var(--vc-surface-alt); }
.vc-host-option.active { background: var(--vc-primary-soft); color: var(--vc-primary-ink); }
.vc-host-option .vc-av { width: 26px; height: 26px; font-size: 10px; }
.vc-host-option .vc-stack { display: inline-flex; }
.vc-host-option .vc-stack .vc-av { border: 1.5px solid var(--vc-surface); margin-left: -6px; }
.vc-host-option .vc-stack .vc-av:first-child { margin-left: 0; }
.vc-host-option .vc-meta { flex: 1; min-width: 0; }
.vc-host-option .vc-meta-name { font-weight: 500; }
.vc-host-option .vc-meta-role { font-size: 11px; color: var(--vc-text-muted); }

/* ----- Avatars ------
   Solid color circles with initials — same shape as the rest of the app
   (lead headers, coordinator dropdown). Color is set inline via
   helpers#coordinator_color so the same name always gets the same color
   across the whole app. */
.vc-av {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #6b7280; /* fallback if no inline color */
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.vc-av.is-empty { background: #e5e7eb; color: #9ca3af; }

/* ----- Week view: row-per-day ----- */
.vc-week {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vc-day-row {
  display: grid;
  grid-template-columns: 78px 1fr 130px;
  gap: 0;
  background: var(--vc-surface);
  border: 1px solid var(--vc-line);
  border-radius: 10px;
  overflow: hidden;
  min-height: 88px;
}
.vc-day-row.is-today { box-shadow: 0 0 0 1px var(--vc-primary); }
.vc-day-row.is-off   { background: var(--vc-surface-alt); }

.vc-day-col {
  padding: 14px 12px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--vc-line);
  align-items: flex-start;
}
.vc-day-row.is-off .vc-day-col { background: transparent; }
.vc-day-dow {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vc-text-muted);
  font-weight: 600;
}
.vc-day-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--vc-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.vc-day-row.is-today .vc-day-num { color: var(--vc-primary); }

.vc-day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  min-width: 0;
}

.vc-empty-day {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 12.5px;
  color: var(--vc-text-muted);
  font-style: italic;
  padding: 6px 4px;
}

.vc-day-meta {
  padding: 14px 16px;
  border-left: 1px solid var(--vc-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: right;
}
/* The hours/off display is a clickable link to availability. Quiet by
   default — color shift on hover is enough affordance. No floating
   pencil icon (it added uneven whitespace and threw off alignment). */
.vc-day-meta-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: color 0.12s;
}
.vc-day-meta-link:hover .vc-day-hours,
.vc-day-meta-link:hover .vc-day-off { color: var(--vc-primary); }

.vc-day-hours,
.vc-day-off {
  font-size: 12px;
  color: var(--vc-text-dim);
  transition: color 0.12s;
  line-height: 1.4;
}
.vc-day-off { color: var(--vc-text-muted); font-weight: 500; }

/* Intervals stack vertically — one per line — so multi-interval days
   read top-to-bottom regardless of column width. */
.vc-day-hours { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.vc-day-hours-interval { white-space: nowrap; }

.vc-day-count {
  font-size: 11px;
  color: var(--vc-text-muted);
  line-height: 1.4;
}
.vc-day-count strong { color: var(--vc-text-dim); font-weight: 600; }

/* ----- Event row (inside day-events) ----- */
/* The colored left bar is the row's actual border-left (not a pseudo-
   element), so the rounded corners curve naturally with the rest of the
   border. ::before would have its corner offset 1px from the parent's
   corner because it's positioned inside the border. */
.vc-evt {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--vc-line);
  border-left: 4px solid var(--vc-primary);
  background: var(--vc-surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.12s, border-color 0.12s;
  width: 100%;
}
/* All tour states keep the brand-blue bar — a tour is a tour. Cancelled
   uses strike-through on the title to mark the state, not a different bar. */
.vc-evt.booked { border-left-color: var(--vc-green); }
.vc-evt.block  { border-left-color: var(--vc-text-muted); }
.vc-evt:hover, .vc-evt.is-selected {
  background: var(--vc-surface-alt);
  /* Update only the non-left borders so the colored left bar doesn't
     get overwritten by the hover state. */
  border-top-color: var(--vc-line-strong);
  border-right-color: var(--vc-line-strong);
  border-bottom-color: var(--vc-line-strong);
}

.vc-evt-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--vc-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.vc-evt-time .vc-ampm {
  font-size: 10.5px;
  color: var(--vc-text-muted);
  margin-left: 2px;
  font-weight: 500;
}
.vc-evt-body { min-width: 0; }
.vc-evt-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
/* Virtual-tour glyph in week-view tiles — brand-colored, sits inline
   before the lead name. Stays vertically aligned via the flex layout
   the title now uses. flex-shrink: 0 keeps the icon visible when the
   name truncates with text-overflow ellipsis. */
.vc-evt-virtual {
  flex-shrink: 0;
  color: var(--vc-primary, #377EF9);
}
.vc-evt.cancelled .vc-evt-virtual,
.vc-evt.no_show .vc-evt-virtual { opacity: 0.5; }
.vc-evt-sub {
  font-size: 11.5px;
  color: var(--vc-text-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  flex-wrap: wrap;
}
.vc-evt-sub .vc-sep { color: var(--vc-text-muted); }
.vc-evt-sub .vc-pkg-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--vc-surface-alt);
  border: 1px solid var(--vc-line);
  font-size: 10.5px;
  color: var(--vc-text-dim);
  font-weight: 500;
}
.vc-evt-sub .vc-host-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vc-evt-sub .vc-host-tag .vc-av {
  width: 14px;
  height: 14px;
  font-size: 7px;
}

.vc-evt-tail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vc-evt-status {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--vc-primary-soft);
  color: var(--vc-primary-ink);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Status pill colors mirror the lead show appointments tab badges
   (bg-X-500/20 text-X-700 in Tailwind terms) so the same status reads
   the same way wherever it appears. */
.vc-evt-status.booked    { background: rgba(34, 197, 94, 0.20);  color: #15803d; }
.vc-evt-status.completed { background: rgba(34, 197, 94, 0.20);  color: #15803d; }
.vc-evt-status.block     { background: #f3f4f6; color: var(--vc-text-dim); }
.vc-evt-status.cancelled { background: rgba(239, 68, 68, 0.20);  color: #b91c1c; }
.vc-evt-status.no_show   { background: rgba(239, 68, 68, 0.20);  color: #b91c1c; }

/* Type-specific event treatments */
.vc-evt.booked    { background: rgba(34, 197, 94, 0.04); }
.vc-evt.booked .vc-evt-time,
.vc-evt.booked .vc-evt-title { color: #14532d; }
.vc-evt.block {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(107, 114, 128, 0.06) 0,
    rgba(107, 114, 128, 0.06) 6px,
    transparent 6px,
    transparent 12px
  );
}
/* Tentative hold — soft yellow tint + amber left bar so it reads as
   "in progress, not yet committed" against the gray of a hard block
   and the blue/green of confirmed events. */
.vc-evt.hold {
  background: rgba(251, 191, 36, 0.06);
  border-left-color: #f59e0b;
}
.vc-evt.hold .vc-evt-title { color: #78350f; }
.vc-evt-status.hold { background: rgba(251, 191, 36, 0.20); color: #92400e; }
.vc-m-evt.hold { background: rgba(251, 191, 36, 0.18); color: #78350f; }
.vc-evt.cancelled .vc-evt-title,
.vc-evt.cancelled .vc-evt-time,
.vc-evt.no_show .vc-evt-title,
.vc-evt.no_show .vc-evt-time {
  text-decoration: line-through;
  color: var(--vc-text-muted);
}

/* ----- Month view ----- */
.vc-month-grid {
  background: var(--vc-surface);
  border: 1px solid var(--vc-line);
  border-radius: 10px;
  overflow: hidden;
}
.vc-month-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--vc-surface-alt);
  border-bottom: 1px solid var(--vc-line);
}
.vc-month-dow {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vc-text-muted);
  font-weight: 600;
  border-right: 1px solid var(--vc-line);
}
.vc-month-dow:last-child { border-right: none; }

.vc-month-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--vc-line);
  min-height: 100px;
}
.vc-month-week:last-child { border-bottom: none; }

.vc-month-cell {
  padding: 8px 8px 6px;
  border-right: 1px solid var(--vc-line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  background: var(--vc-surface);
}
.vc-month-cell:last-child { border-right: none; }
.vc-month-cell.is-oom { background: var(--vc-surface-alt); }
.vc-month-cell.is-off { background: var(--vc-surface-alt); }
/* No background tint for today — the violet circle on the day number
   below is the indicator. Today's cell inherits white (open) or the
   off-gray (closed) like every other cell. */

.vc-m-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
  min-height: 22px;
}
.vc-m-num {
  font-size: 12px;
  color: var(--vc-text-dim);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.vc-month-cell.is-today .vc-m-num {
  color: #fff;
  background: var(--vc-primary);
  width: 22px;
  height: 22px;
  border-radius: 99px;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
}
.vc-month-cell.is-oom .vc-m-num { color: var(--vc-text-muted); opacity: 0.6; }

/* Compact availability indicator next to day number — "9a–5p" or "Off".
   Multiple intervals stack vertically (top-to-bottom) so users see every
   distinct slot without truncation. */
.vc-m-availability {
  font-size: 10.5px;
  color: var(--vc-text-muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  text-align: right;
  min-width: 0;
  line-height: 1.25;
}
.vc-m-availability-line { white-space: nowrap; }
.vc-m-off-label {
  font-weight: 500;
  font-style: italic;
}

/* Lift the head row's alignment so the day number stays top-aligned
   even when the availability column has multiple stacked lines. */
.vc-m-head { align-items: flex-start; }

.vc-m-evt {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 4px;
  border: none;
  background: var(--vc-primary-soft);
  color: var(--vc-primary-ink);
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: filter 0.12s;
}
.vc-m-evt:hover { filter: brightness(0.96); }
.vc-m-evt.booked { background: rgba(34, 197, 94, 0.12); color: #14532d; }
.vc-m-evt.block { background: #f3f4f6; color: var(--vc-text-dim); }
.vc-m-evt.cancelled { background: rgba(239, 68, 68, 0.08); color: #b91c1c; text-decoration: line-through; }
.vc-m-evt-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Virtual-tour glyph in front of the label. Brand-colored so it carries
   product identity and reads as an intentional badge rather than a system
   icon. flex-shrink: 0 keeps it visible even when the lead name truncates. */
.vc-m-virtual {
  flex-shrink: 0;
  color: var(--vc-primary, #377EF9);
}
.vc-m-evt.cancelled .vc-m-virtual { opacity: 0.5; }
/* Host avatar bubble inside a month-view event tile. Tiny circle so it
   reads as an accent, not a primary visual. Stays solid even when the
   tile background is tinted (booked / cancelled). */
.vc-m-host-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: 0;
}

.vc-m-more {
  border: none;
  background: transparent;
  color: var(--vc-text-dim);
  font-size: 10.5px;
  font-weight: 600;
  text-align: left;
  padding: 1px 6px;
  cursor: pointer;
}
.vc-m-more:hover { color: var(--vc-text); }

/* ----- Drawer ----- */
.vc-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.30);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}
.vc-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.vc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  background: var(--vc-surface);
  border-left: 1px solid var(--vc-line);
  box-shadow: -16px 0 40px -16px rgba(15, 23, 42, 0.18);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.22s ease-out;
  display: flex;
  flex-direction: column;
}
.vc-drawer.open { transform: translateX(0); }

.vc-drawer-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--vc-line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.vc-drawer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vc-text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.vc-drawer-eyebrow .vc-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--vc-primary);
}
.vc-drawer h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--vc-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.vc-drawer-when {
  font-size: 12.5px;
  color: var(--vc-text-dim);
}

.vc-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.vc-drawer-section h3 {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vc-text-muted);
  font-weight: 600;
}

.vc-lead-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--vc-line);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s, border-color 0.12s;
}
a.vc-lead-card:hover {
  background: var(--vc-surface-alt);
  border-color: var(--vc-line-strong);
}
a.vc-lead-card .vc-lead-arrow {
  margin-left: auto;
  color: var(--vc-text-muted);
  flex-shrink: 0;
  transition: color 0.12s, transform 0.12s;
}
a.vc-lead-card:hover .vc-lead-arrow {
  color: var(--vc-primary);
  transform: translateX(2px);
}
.vc-lead-card .vc-av { width: 36px; height: 36px; font-size: 12px; }
.vc-lead-name { font-size: 14px; font-weight: 600; color: var(--vc-text); }
.vc-lead-meta { font-size: 12px; color: var(--vc-text-dim); margin-top: 1px; }

.vc-kv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vc-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.vc-kv .vc-k {
  color: var(--vc-text-muted);
  font-size: 11.5px;
}
.vc-kv .vc-v {
  color: var(--vc-text);
  font-weight: 500;
  text-align: right;
}

.vc-timeline { display: flex; flex-direction: column; gap: 12px; }
.vc-tl-row { display: flex; gap: 10px; font-size: 13px; color: var(--vc-text); }
.vc-tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--vc-primary);
  margin-top: 6px;
  flex-shrink: 0;
}
.vc-tl-dot.g { background: var(--vc-green); }
.vc-tl-dot.a { background: var(--vc-amber); }
.vc-tl-dot.b { background: var(--vc-text-muted); }
.vc-tl-meta { font-size: 11px; color: var(--vc-text-muted); margin-top: 1px; }

.vc-drawer-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--vc-line);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vc-drawer-foot .vc-spacer { flex: 1 1 auto; }

/* ----- Responsive ----- */
@media (max-width: 720px) {
  .vc-day-row {
    grid-template-columns: 60px 1fr;
  }
  .vc-day-meta { display: none; }
  .vc-evt { grid-template-columns: 60px 1fr; }
  .vc-evt-tail { display: none; }
  .vc-month-week { min-height: 84px; }
  .vc-m-evt { font-size: 10px; padding: 1px 4px; }
}

/* ── Option A tile vocabulary additions (design_handoff_calendar_tiles) ──
   Fill answers "is this date committed?"; workflow state is a badge;
   conflicts are a day-cell glyph + drawer callout, never a tile color. */

/* Pencil holds: a hold is dashed, not amber-filled — commitment style,
   not a warning color. */
.vc-m-evt.hold { background: #ffffff; border: 1px dashed var(--vc-line-strong); color: var(--vc-text-dim); }
.vc-evt.hold { border-left-style: dashed; border-left-color: var(--vc-line-strong); }
.vc-evt-status.hold { background: #ffffff; border: 1px dashed var(--vc-line-strong); color: var(--vc-text-dim); }

/* Pipeline (opt-in, commerce): a proposal that's out commits nothing —
   dotted, quiet. */
.vc-m-evt.pipeline { background: #ffffff; border: 1px dotted var(--vc-line-strong); color: var(--vc-text-muted); font-weight: 550; }
.vc-evt.pipeline { border-left-style: dotted; border-left-color: var(--vc-line-strong); }
.vc-evt.pipeline .vc-evt-title { color: var(--vc-text-dim); }
.vc-evt-status.pipeline { background: #ffffff; border: 1px dotted var(--vc-line-strong); color: var(--vc-text-muted); }
.vc-chip.pipeline .vc-dot { background: var(--vc-line-strong); }

/* Deposit-unpaid badge: workflow state rides the tile, the fill stays
   green — the date is just as booked either way. */
.vc-m-badge,
.vc-evt-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 4px;
  background: #fbbf24;
  color: #4a2c02;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
}

/* Day-cell conflict glyph — the corner budget's one warning slot. */
.vc-m-conflict {
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Lenses: dim, never hide. Matches keep full opacity and gain a ring;
   matching day cells get a tinted ground. Opacity only — no reflow. */
.lens-unpaid .vc-m-evt:not(.is-unpaid),
.lens-unpaid .vc-evt:not(.is-unpaid) { opacity: 0.26; }
.lens-unpaid .vc-m-evt.is-unpaid,
.lens-unpaid .vc-evt.is-unpaid { box-shadow: 0 0 0 2px #fbbf24; }
.lens-unpaid .vc-month-cell.has-unpaid { background: #fffdf4; }
.lens-conflicts .vc-m-evt:not(.is-conflict),
.lens-conflicts .vc-evt:not(.is-conflict) { opacity: 0.26; }
.lens-conflicts .vc-m-evt.is-conflict,
.lens-conflicts .vc-evt.is-conflict { box-shadow: 0 0 0 2px #fca5a5; }
.lens-conflicts .vc-month-cell.has-conflict { background: #fffbfa; }

/* Lens chips: the amber "needs attention" group, separated from sources. */
.vc-lens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fffbeb;
  border: 1px solid #f3d79a;
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vc-lens .vc-lens-count {
  font-size: 11px;
  font-weight: 700;
  background: #fbe6b4;
  color: #7c4a08;
  border-radius: 999px;
  padding: 1px 6px;
}
.vc-lens.on { background: #92400e; border-color: #92400e; color: #ffffff; }
.vc-lens.on .vc-lens-count { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

/* Drawer: conflict callout + money block. */
.vc-conflict-callout {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #8f1d1d;
  margin-bottom: 14px;
  line-height: 1.5;
}
.vc-money { border: 1px solid var(--vc-line); border-radius: 10px; overflow: hidden; }
.vc-money-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--vc-text-dim);
  border-top: 1px solid var(--vc-line);
}
.vc-money-row:first-child { border-top: 0; }
.vc-money-row span:last-child { font-weight: 700; color: var(--vc-text); font-variant-numeric: tabular-nums; }
.vc-money-row.due { background: #fffbeb; color: #84400a; }
.vc-money-row.due span:last-child { color: #84400a; }

/* Reconnect: one line, not a banner. */
.vc-reconnect {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 9px 13px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 550;
  color: #7c4a08;
}
.vc-reconnect-dot { width: 6px; height: 6px; border-radius: 99px; background: #d97706; flex-shrink: 0; }
.vc-reconnect-link { margin-left: auto; font-weight: 700; color: #92400e; text-decoration: underline; }

/* ── Two-row toolbar card: rows 1+2 and the month grid share one border. ── */
.vc-calcard {
  background: var(--vc-surface);
  border: 1px solid var(--vc-line);
  border-radius: 12px;
  margin-bottom: 16px;
}
.vc-calcard .vc-toolbar {
  border: 0;
  border-bottom: 1px solid var(--vc-line);
  border-radius: 12px 12px 0 0;
  margin-bottom: 0;
}
.vc-filterbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 9px 14px;
  border-radius: 0 0 12px 12px;
}
.vc-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vc-text-muted);
}
.vc-calcard.with-grid .vc-filterbar {
  border-bottom: 1px solid var(--vc-line);
  border-radius: 0;
}
.vc-calcard.with-grid .vc-month-grid {
  border: 0;
  border-radius: 0 0 12px 12px;
}
/* =====================================================================
   MARKETING · PERFORMANCE
   ---------------------------------------------------------------------
   Styles for the Performance attribution dashboard's connect / configure
   empty state (Phase A) and the populated dashboard (Phase B, TBD).
   Every selector is namespaced under `.perf-*` so this file can't leak
   into other pages.

   The page wrapper uses the same Tailwind utilities Dashboard / Leads /
   Calendar use (px-4 sm:px-6 lg:px-8 py-8 max-w-[96rem] mx-auto) — so
   the page starts at the same top offset as every other section. This
   stylesheet only owns layout + tokens that mosaic.css doesn't bake
   (arbitrary grid templates, custom palette tints, the slide-over).

   Tokens (--color-violet-500 et al.) come from mosaic.css's :root so
   the accent here tracks the project's primary blue automatically.
   ===================================================================== */

/* ── Page header (h1 + sub) ─────────────────────────────────────────── */
.perf-header { margin-bottom: 28px; }
.perf-h1 {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.9px;
  font-weight: 750;
  color: #1b2433;
  margin: 0 0 12px;
}
.dark .perf-h1 { color: #f3f4f6; }
.perf-h1 .perf-italic {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
}
.perf-sub {
  font-size: 15px;
  line-height: 1.55;
  color: #646e7e;
  max-width: 640px;
  margin: 0;
}
.dark .perf-sub { color: #9aa3b2; }

/* ── Two-column grid (path cards + teaser) ─────────────────────────── */
.perf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1024px) {
  .perf-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.perf-stack { display: flex; flex-direction: column; gap: 16px; }
.perf-stack-sm { display: flex; flex-direction: column; gap: 8px; }
.perf-stack-sm-spaced { margin-bottom: 12px; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.perf-card {
  background: white;
  border: 1px solid #e9ecf1;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(22, 32, 52, 0.04);
}
.dark .perf-card {
  background: #1f2937;
  border-color: rgba(148, 163, 184, 0.16);
}
.perf-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.perf-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1b2433;
  margin: 0;
}
.dark .perf-card-title { color: #f3f4f6; }
.perf-card-body {
  font-size: 12.5px;
  color: #646e7e;
  line-height: 1.55;
  margin: 0 0 14px;
}
.dark .perf-card-body { color: #9aa3b2; }

.perf-step-chip {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(55, 126, 249, 0.14);
  color: var(--color-violet-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.dark .perf-step-chip { color: var(--color-violet-300); }

/* ── Source rows (Meta, Google, configured directories) ────────────── */
.perf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e9ecf1;
  background: #fafbfc;
}
.dark .perf-row {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(148, 163, 184, 0.18);
}
.perf-row.is-connected {
  background: #f4fbf6;
  border-color: #cfe8d8;
}
.dark .perf-row.is-connected {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.30);
}
.perf-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.perf-row-text { min-width: 0; }
.perf-row-name {
  font-size: 14px;
  font-weight: 600;
  color: #1b2433;
}
.dark .perf-row-name { color: #f3f4f6; }
.perf-row-sub {
  font-size: 12px;
  color: #646e7e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .perf-row-sub { color: #9aa3b2; }

/* ── Source badges (filled = ad, outlined monogram = directory) ────── */
.perf-ad-badge {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.perf-ad-badge.google {
  background: white;
  border: 1px solid #e9ecf1;
  color: #4285F4;
  font-size: 16px;
}
.dark .perf-ad-badge.google { background: #f3f4f6; }
.perf-ad-badge-sm { width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
/* Row-sized provider mark in the Paid ads table — Meta and Google
   campaigns share one band, so the mark says whose campaign each row is. */
.perf-ad-badge-row { width: 16px; height: 16px; font-size: 9px; border-radius: 4px; }
.perf-ad-badge-row .perf-brand-svg { width: 50%; height: 50%; }

/* Brand glyphs (Meta infinity, Google G) rendered as inline SVG inside a
   badge. Percentage sizing scales one partial across all three badge
   sizes (36 / 28 / 20px). */
.perf-brand-svg {
  width: 58%;
  height: 58%;
  display: block;
}

.perf-mono {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 15px;
  border-width: 1.5px;
  border-style: solid;
  flex-shrink: 0;
}
.perf-mono-sm {
  width: 22px; height: 22px;
  border-radius: 6px;
  font-size: 11px;
}
.perf-mono-source { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }

/* ── Chip row (catalog tiles for step 2) ───────────────────────────── */
.perf-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.perf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e9ecf1;
  background: white;
  font-size: 12.5px;
  font-weight: 500;
  color: #3a4456;
  transition: border-color 0.14s ease;
}
.perf-chip:hover { border-color: #cbd2dc; }
.perf-chip.is-custom {
  background: transparent;
  border-style: dashed;
  border-color: #c8cdd5;
  color: #646e7e;
}
.dark .perf-chip {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(148, 163, 184, 0.20);
  color: #e5e7eb;
}

/* ── Buttons + pills ───────────────────────────────────────────────── */
.perf-pill-connected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #1f7a46;
}
.dark .perf-pill-connected { color: #86efac; }

.perf-btn-primary {
  background: #1b2433;
  color: white;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.14s ease;
}
.perf-btn-primary:hover { background: #0f1422; color: white; }
.perf-btn-primary-sm { padding: 8px 18px; font-size: 13px; }

.perf-btn-ghost {
  background: white;
  border: 1px solid #e9ecf1;
  color: #3a4456;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
}
.perf-btn-ghost:hover { background: #f4f5f7; }
.dark .perf-btn-ghost {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(148, 163, 184, 0.20);
  color: #e5e7eb;
}

.perf-btn-disabled {
  background: #eef0f3;
  color: #9aa3b2;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: not-allowed;
  border: none;
}

.perf-edit {
  font-size: 12px;
  font-weight: 500;
  color: #646e7e;
  opacity: 0;
  transition: opacity 0.14s ease;
  background: transparent;
  border: none;
  cursor: pointer;
}
.perf-row:hover .perf-edit { opacity: 1; }

/* ── Step 3 avg booking display ────────────────────────────────────── */
.perf-avg-row { display: flex; flex-direction: column; gap: 6px; }
.perf-avg-label {
  font-size: 12px;
  color: #646e7e;
}
.dark .perf-avg-label { color: #9aa3b2; }
.perf-avg-inline {
  display: flex;
  align-items: center;
  gap: 14px;
}
.perf-num-avg {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #1b2433;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dark .perf-num-avg { color: #f3f4f6; }

/* ── CTA row ──────────────────────────────────────────────────────── */
.perf-cta-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.perf-cta-note {
  font-size: 12.5px;
  color: #646e7e;
}
.dark .perf-cta-note { color: #9aa3b2; }

/* ── Teaser card (right column) ────────────────────────────────────── */
.perf-teaser {
  background: white;
  border-radius: 14px;
  border: 1px solid #e9ecf1;
  box-shadow: 0 1px 2px rgba(22, 32, 52, 0.04);
  padding: 22px;
  position: sticky;
  top: 32px;
}
.dark .perf-teaser {
  background: #1f2937;
  border-color: rgba(148, 163, 184, 0.16);
}
.perf-teaser-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.perf-teaser-label {
  font-size: 12px;
  color: #646e7e;
}
.dark .perf-teaser-label { color: #9aa3b2; }
.perf-teaser-num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #1b2433;
  font-variant-numeric: tabular-nums;
}
.dark .perf-teaser-num { color: #f3f4f6; }
.perf-teaser-num.accent { color: var(--color-violet-500); }
.dark .perf-teaser-num.accent { color: var(--color-violet-400); }

.perf-teaser-tint {
  background: linear-gradient(180deg, rgba(55, 126, 249, 0.08) 0%, rgba(55, 126, 249, 0) 100%);
  border-radius: 10px;
  height: 84px;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.perf-teaser-trend {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.perf-teaser-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perf-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #e9ecf1;
  border-radius: 10px;
}
.dark .perf-source-row { border-color: rgba(148, 163, 184, 0.18); }
.perf-source-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.perf-source-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #1b2433;
}
.dark .perf-source-name { color: #f3f4f6; }

.perf-tracked-cap {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  color: var(--color-violet-700);
}
.dark .perf-tracked-cap { color: var(--color-violet-400); }
.perf-fixed-cap {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  color: #646e7e;
}
.dark .perf-fixed-cap { color: #9aa3b2; }

.perf-roas-num {
  font-size: 13px;
  font-weight: 700;
  color: #1b2433;
  font-variant-numeric: tabular-nums;
}
.dark .perf-roas-num { color: #f3f4f6; }

/* ─────────────────────────────────────────────────────────────────────
   POPULATED DASHBOARD (Phase B)
   ──────────────────────────────────────────────────────────────────── */

/* Two-column row used by Trend + Funnel and (later) the source cards. */
.perf-row-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .perf-row-2col { grid-template-columns: minmax(0, 1fr); }
}

.perf-section { padding: 20px 22px; margin-bottom: 16px; }
.perf-row-2col .perf-section { margin-bottom: 0; }
.perf-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.perf-section-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #1b2433;
  margin: 0;
}
.dark .perf-section-title { color: #f3f4f6; }
.perf-section-sub {
  font-size: 12px;
  color: #646e7e;
  margin-top: 2px;
}
.dark .perf-section-sub { color: #9aa3b2; }

.perf-empty {
  font-size: 13px;
  color: #646e7e;
  padding: 24px 0;
  text-align: center;
}
.dark .perf-empty { color: #9aa3b2; }

/* Per-section "Sample" pill — surfaces when the controller swapped a
   real-but-empty report for demo numbers, so the venue knows what they're
   seeing is illustrative. Same palette as the EST badge. */
.perf-sample-pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: #9a7a35;
  background: #faf3e2;
  border: 1px solid #efe2c2;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  position: relative;
  top: -1px;
}

/* ── Trend chart ──────────────────────────────────────────────────── */
/* Chart.js needs an explicit-height parent for responsive sizing. */
.perf-trend-wrap {
  position: relative;
  width: 100%;
  height: 240px;
}
.perf-trend-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.perf-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #646e7e;
}
.perf-legend-item strong {
  color: #1b2433;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}
.dark .perf-legend-item { color: #9aa3b2; }
.dark .perf-legend-item strong { color: #f3f4f6; }
.perf-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
.perf-legend-swatch-revenue { background: var(--color-violet-500); }
.perf-legend-swatch-spend {
  background: repeating-linear-gradient(90deg,
              #9aa3b2 0 4px, transparent 4px 8px);
  height: 2px;
  margin-bottom: 1px;
}

.perf-trend-foot {
  margin-top: 10px;
  font-size: 11px;
  color: #9aa3b2;
  text-align: right;
}
.dark .perf-trend-foot { color: #9aa3b2; }

/* Funnel structure + bar height come from venue.css's Insights helpers
   (.left-only-radius / .full-radius / .funnal-bar-hight). The only thing
   we override is the fill color — we paint with brand blue via inline
   style on the fill div so we don't fight venue.css's #2563eb default. */

/* ──────────────────────────────────────────────────────────────────────
   SOURCE CARDS + LEAD SOURCES TABLE (B4)
   ────────────────────────────────────────────────────────────────────── */

/* Section heading above a source-card grid. NOT a card itself — the
   grid below holds the individual cards. */
.perf-group-header {
  margin: 16px 0 10px;
}
.perf-group-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #1b2433;
  margin: 0;
}
.dark .perf-group-title { color: #f3f4f6; }
.perf-group-sub {
  font-size: 12px;
  color: #646e7e;
  margin-top: 2px;
}
.dark .perf-group-sub { color: #9aa3b2; }

.perf-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.perf-source {
  background: white;
  border: 1px solid #e9ecf1;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.14s ease;
  position: relative;
}
.dark .perf-source {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(148, 163, 184, 0.18);
}
.perf-source:hover { border-color: #cbd2dc; }
.perf-source.is-disconnected { opacity: 0.7; }

.perf-source-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.perf-source-text { flex: 1; min-width: 0; }
.perf-source-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1b2433;
  line-height: 1.2;
}
.dark .perf-source-name { color: #f3f4f6; }
.perf-source-chip {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--color-violet-500);
  margin-top: 2px;
}
.perf-source-chip.is-fixed { color: #646e7e; }
.dark .perf-source-chip { color: var(--color-violet-400); }
.dark .perf-source-chip.is-fixed { color: #9aa3b2; }

.perf-source-status {
  font-size: 11px;
  font-weight: 500;
  color: #9aa3b2;
}
.perf-source-tracking {
  font-size: 11px;
  font-weight: 500;
  color: #9a7a35;
  background: #faf3e2;
  border: 1px solid #efe2c2;
  padding: 1px 7px;
  border-radius: 4px;
}

.perf-source-summary {
  font-size: 12.5px;
  color: #3a4456;
  line-height: 1.55;
}
.dark .perf-source-summary { color: #cbd2dc; }
.perf-source-summary strong {
  color: #1b2433;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dark .perf-source-summary strong { color: #f3f4f6; }
.perf-source-arrow { color: #c8cdd5; margin: 0 6px; }
.perf-source-dot   { color: #c8cdd5; margin: 0 6px; }
.perf-source-muted { color: #9aa3b2; }

.perf-source-edit {
  background: transparent;
  border: none;
  color: #646e7e;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease;
  padding: 4px;
  border-radius: 6px;
}
.perf-source.group:hover .perf-source-edit,
.perf-tr.group:hover .perf-source-edit { opacity: 1; }
.perf-source-edit:hover { background: #f4f5f7; color: #1b2433; }
.dark .perf-source-edit:hover { background: rgba(148, 163, 184, 0.12); color: #f3f4f6; }

.perf-source-add,
button.perf-source-add {
  border: 1.5px dashed #c8cdd5;
  background: transparent;
  color: #646e7e;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  min-height: 92px;
  flex-direction: row;
  gap: 8px;
}
.perf-source-add:hover {
  border-color: var(--color-violet-500);
  color: var(--color-violet-500);
}
.dark .perf-source-add {
  border-color: rgba(148, 163, 184, 0.30);
  color: #9aa3b2;
}

/* ── ROAS pill ───────────────────────────────────────────────────── */
.perf-roas-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.perf-roas-pill-sm { font-size: 11.5px; padding: 2px 8px; }
.perf-roas-pill.is-good { color: #1f7a46; background: #e7f6ec; }
.perf-roas-pill.is-low     { color: #b23a3a; background: #fbe9e9; }
.perf-roas-pill.is-neutral { color: #646e7e; background: #f4f5f7; }
.dark .perf-roas-pill.is-good    { color: #86efac; background: rgba(34, 197, 94, 0.12); }
.dark .perf-roas-pill.is-low     { color: #fca5a5; background: rgba(239, 68, 68, 0.12); }
.dark .perf-roas-pill.is-neutral { color: #9aa3b2; background: rgba(148, 163, 184, 0.12); }

/* ── Lead sources table ──────────────────────────────────────────── */
/* Section is no-horizontal-padding so the table can run edge-to-edge
   inside the card; the header pads itself separately. Bottom padding
   is 0 so the last row sits flush with the card's bottom edge. */
.perf-table-section { padding: 20px 0 0; }
.perf-table-section > .perf-section-header { padding: 0 22px; }

/* Active / Show-all toggle. Same look as a small pill-segmented control,
   sits on the right edge of the section header. */
.perf-table-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #f4f5f7;
  border: 1px solid #e9ecf1;
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.dark .perf-table-toggle {
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(148, 163, 184, 0.18);
}
.perf-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: #646e7e;
  text-decoration: none;
  transition: background 0.14s, color 0.14s;
}
.perf-toggle-btn:hover { color: #1b2433; }
.dark .perf-toggle-btn { color: #9aa3b2; }
.dark .perf-toggle-btn:hover { color: #f3f4f6; }
.perf-toggle-btn.is-active {
  background: white;
  color: #1b2433;
  box-shadow: 0 1px 2px rgba(22, 32, 52, 0.06);
  font-weight: 600;
}
.dark .perf-toggle-btn.is-active {
  background: #1f2937;
  color: #f3f4f6;
}
.perf-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 0 5px;
  height: 14px;
  font-size: 10px;
  font-weight: 700;
  background: #e3e6ec;
  color: #646e7e;
  border-radius: 999px;
}
.dark .perf-toggle-count {
  background: rgba(148, 163, 184, 0.24);
  color: #cbd2dc;
}

.perf-utm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #1f7a46;
  background: #e7f6ec;
  border: 1px solid #cfe8d8;
  padding: 1px 7px;
  border-radius: 4px;
  cursor: help;
  position: relative;
  top: -1px;
}

.perf-table {
  display: flex;
  flex-direction: column;
}

.perf-tr {
  display: grid;
  /* Source | Spend | Revenue | ROAS | Leads·CPL | Tours | Bookings·CPB.
     One lead column: the platform-reported count (Ads Manager's number)
     with CPL. Our linked count only surfaces via the admin-only gap pill. */
  grid-template-columns: minmax(0, 1fr) 90px 110px 70px 110px 64px 110px;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-bottom: 1px solid #f0f2f5;
  font-size: 13px;
  color: #3a4456;
}
.dark .perf-tr {
  color: #cbd2dc;
  border-bottom-color: rgba(148, 163, 184, 0.12);
}
.perf-tr:last-child { border-bottom: none; }

.perf-tr-head {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #9aa3b2;
  border-bottom: 1px solid #e9ecf1;
}
.dark .perf-tr-head { color: #9aa3b2; border-bottom-color: rgba(148, 163, 184, 0.20); }

.perf-tr-band {
  background: #f7f9fc;
  border-bottom: none;
  padding: 8px 22px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #646e7e;
}
.dark .perf-tr-band {
  background: rgba(148, 163, 184, 0.08);
  color: #9aa3b2;
}

.perf-tr-row { cursor: default; transition: background 0.12s ease; }
.perf-tr-row:hover { background: #fafbfc; }
.dark .perf-tr-row:hover { background: rgba(148, 163, 184, 0.06); }
.perf-tr-campaign[data-action], .perf-tr-adset[data-action] { cursor: pointer; }

.perf-tr-adset { background: #fafbfc; }
.perf-tr-ad    { background: #f4f5f7; }
.perf-tr-directory { position: relative; }
.dark .perf-tr-adset { background: rgba(148, 163, 184, 0.04); }
.dark .perf-tr-ad    { background: rgba(148, 163, 184, 0.08); }

.perf-indent-1 { padding-left: 22px; }
.perf-indent-2 { padding-left: 44px; }

.perf-td { min-width: 0; }
.perf-td-source { display: flex; align-items: center; gap: 8px; min-width: 0; }
.perf-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #1b2433;
  white-space: nowrap;
}
.dark .perf-td-num { color: #f3f4f6; }
.perf-td-tight { font-weight: 500; color: #646e7e; }
.dark .perf-td-tight { color: #9aa3b2; }
.perf-td-roas { text-align: right; }
.perf-td-muted { color: #9aa3b2; font-style: italic; }
.perf-td-sub {
  font-size: 11px;
  font-weight: 500;
  color: #9aa3b2;
  margin-left: 4px;
}
/* Flat monthly rate shown beside a directory's name; the ellipsizing name
   span absorbs the shrink, the rate never wraps or clips. */
.perf-dir-rate {
  flex: none;
  font-size: 11px;
  font-weight: 500;
  color: #9aa3b2;
  white-space: nowrap;
}

.perf-tr-name {
  font-weight: 600;
  color: #1b2433;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .perf-tr-name { color: #f3f4f6; }
.perf-tr-name-sub { font-weight: 500; color: #3a4456; }
.dark .perf-tr-name-sub { color: #cbd2dc; }
/* Muted sub-row labels ("Uncategorized") keep the muted color but not the
   italic — the ellipsis cell clips the slanted overhang of the last
   glyph, cutting the "d" visibly short. */
.perf-tr-name-sub.perf-td-muted { font-style: normal; }

/* ── Chevron + status dot + EXT tag ──────────────────────────────── */
.perf-chev {
  width: 14px; height: 14px;
  flex-shrink: 0;
  position: relative;
}
.perf-chev::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-right: 1.6px solid #646e7e;
  border-bottom: 1.6px solid #646e7e;
  transform: translate(-50%, -65%) rotate(-45deg);
  transition: transform 0.14s ease;
}
.perf-chev.is-open::before {
  transform: translate(-50%, -35%) rotate(45deg);
}

.perf-status-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
/* Active is the only "running" state worth highlighting in color. Paused,
   archived, and any other not-active state share the same gray dot — the
   venue doesn't need three flavors of "not running" demanding attention.
   Error gets red because it's actually actionable. */
.perf-status-dot.is-active { background: #1f8a4d; }
.perf-status-dot.is-error  { background: #c93232; }
.perf-status-dot.is-other  { background: #c8cdd5; }

.perf-mono-row {
  width: 22px; height: 22px;
  border-radius: 6px;
  font-size: 11px;
  border-width: 1.5px;
}

.perf-source-edit-row { padding: 2px; }

/* Add-source footer row */
.perf-tr-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 1.5px dashed #c8cdd5;
  background: transparent;
  border-radius: 8px;
  color: #646e7e;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 10px;
  transition: border-color 0.14s, color 0.14s;
}
.perf-tr-add:hover {
  border-color: var(--color-violet-500);
  color: var(--color-violet-500);
}
.dark .perf-tr-add {
  border-color: rgba(148, 163, 184, 0.30);
  color: #9aa3b2;
}


/* Header: h1 on its own row; tracking pills + sync stamp + range picker
   on the second row. Sync stamp sits inline (no auto-margin); range
   picker right-aligns via the flexbox spacer between them. */
.perf-dash-header { margin-bottom: 24px; }
.perf-dash-h1-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.perf-dash-h1 {
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -0.6px;
  color: #1b2433;
  margin: 0;
}
.dark .perf-dash-h1 { color: #f3f4f6; }

/* Beta pill beside the h1: brand blue at a light tint, sized to read as a
   quiet status marker rather than part of the title. */
.perf-beta-row { margin-bottom: 6px; }
.perf-beta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(55, 126, 249, 0.10);
  border: 1px solid rgba(55, 126, 249, 0.30);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2861c4;
  cursor: default;
}
.dark .perf-beta-pill {
  background: rgba(55, 126, 249, 0.16);
  border-color: rgba(96, 150, 245, 0.40);
  color: #9cc0fb;
}

.perf-tracking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.perf-tracking-spacer { flex: 1; min-width: 0; }
.perf-tracking-label {
  font-size: 12.5px;
  color: #646e7e;
  font-weight: 500;
}
.dark .perf-tracking-label { color: #9aa3b2; }

.perf-tracking-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: white;
  border: 1px solid #e9ecf1;
  font-size: 12.5px;
  font-weight: 500;
  color: #3a4456;
}
.dark .perf-tracking-pill {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(148, 163, 184, 0.20);
  color: #e5e7eb;
}
/* Disabled pill dims its CONTENT (text color + badge opacity), never the
   wrapper — wrapper opacity would ghost the hover tooltip nested inside,
   since children cannot exceed a parent's opacity. */
.perf-tracking-pill-disabled { cursor: default; color: #9aa3b2; }
.dark .perf-tracking-pill-disabled { color: #77808f; }
.perf-tracking-pill-disabled .perf-ad-badge { opacity: 0.5; }

/* Tracking pill in a broken / disconnected state. Keeps the platform
   visible (so it doesn't look removed) but dims the background and adds
   a small red dot to flag the issue. Banner above carries the messaging. */
.perf-tracking-pill-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.dark .perf-tracking-pill-error {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}
.perf-tracking-error-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #c93232;
  margin-left: 2px;
  box-shadow: 0 0 0 2px rgba(201, 50, 50, 0.18);
}

/* Tracking pill as a live Connect action (provider configured but not yet
   connected). Rests dimmed like the disabled pill so it doesn't read as an
   already-connected platform; hover restores full color + a blue border so
   it still reads as clickable. Dim the CONTENT, not the wrapper (see the
   disabled-pill note above). */
a.perf-tracking-pill-connect {
  cursor: pointer;
  text-decoration: none;
  color: #9aa3b2;
}
.dark a.perf-tracking-pill-connect { color: #77808f; }
a.perf-tracking-pill-connect .perf-ad-badge { opacity: 0.5; }
a.perf-tracking-pill-connect:hover {
  border-color: #b9d2fd;
  color: #3a4456;
}
.dark a.perf-tracking-pill-connect:hover {
  border-color: rgba(96, 165, 250, 0.45);
  color: #e5e7eb;
}
a.perf-tracking-pill-connect:hover .perf-ad-badge { opacity: 1; }

.perf-tracking-stack {
  display: inline-flex;
  align-items: center;
}
.perf-tracking-stack .perf-mono { margin-right: -8px; }
.perf-tracking-stack .perf-mono:last-child { margin-right: 0; }
/* Stacked monograms get an opaque background + a small white ring so the
   overlap reads as layered cards instead of see-through soup. The ring
   matches the pill background (white in light, near-black in dark). */
.perf-tracking-stack .perf-mono {
  background: white;
  box-shadow: 0 0 0 1.5px white;
}
.dark .perf-tracking-stack .perf-mono {
  background: #0f172a;
  box-shadow: 0 0 0 1.5px #0f172a;
}

.perf-tracking-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #646e7e;
}
.dark .perf-tracking-stamp { color: #9aa3b2; }
.perf-tracking-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #1f8a4d;
}

/* ── Pill-sized badges (Meta ∞, Google G, directory monogram) ─────── */
.perf-ad-badge-pill {
  width: 20px; height: 20px;
  font-size: 11px;
  border-radius: 5px;
}
/* At 20px the shared 58% glyph share leaves the wide Meta infinity nearly
   touching the badge edges; smaller badges need proportionally more
   padding around the mark. */
.perf-ad-badge-pill .perf-brand-svg {
  width: 45%;
  height: 45%;
}
/* Tracking-pill Meta chip: soft brand tint instead of the solid #0866FF
   fill — a saturated square inside the quiet pill row shouted louder
   than everything around it (the app's badge language is tinted chips;
   the Google chip in the same row is already white + border). The glyph
   inherits currentColor, and on the calmer ground it can sit larger. */
.perf-ad-badge.meta-soft {
  background: rgba(8, 102, 255, 0.12);
  color: #0866FF;
}
.dark .perf-ad-badge.meta-soft {
  background: rgba(8, 102, 255, 0.24);
  color: #7ab1ff;
}
.perf-ad-badge-pill.meta-soft .perf-brand-svg {
  width: 55%;
  height: 55%;
}
/* Neutral chip for the directories summary pill — same soft-chip
   language as meta-soft, in gray. */
.perf-ad-badge.dir-neutral {
  background: rgba(100, 110, 126, 0.12);
  color: #646e7e;
}
.dark .perf-ad-badge.dir-neutral {
  background: rgba(148, 163, 184, 0.18);
  color: #9aa3b2;
}
.perf-ad-badge-pill.dir-neutral .perf-brand-svg {
  width: 55%;
  height: 55%;
}
.perf-mono-pill {
  width: 20px; height: 20px;
  font-size: 10px;
  border-radius: 5px;
  border-width: 1px;
}

/* Range picker uses the project's standard `btn` + Alpine dropdown pattern
   (mirroring Insights). No bespoke styles — see _range_picker.html.erb. */

/* Ambient help icon button to the right of the "Performance" H1. Circular,
   no label, no border — reads as "extra info" rather than a primary
   control. Same modal trigger is also wired into the +N attribution-gap
   pills, so this is mainly for proactive discovery (setting up Meta
   tracking) while the pills handle "what does this number mean?". */
.perf-help-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #8a93a3;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.perf-help-icon-btn:hover {
  background: rgba(148, 163, 184, 0.14);
  color: #3a4456;
}
.dark .perf-help-icon-btn { color: #9aa3b2; }
.dark .perf-help-icon-btn:hover {
  background: rgba(148, 163, 184, 0.18);
  color: #e5e7eb;
}


/* Skeleton placeholder shown inside the perf-data Turbo Frame while the
   PerformanceReport request is in flight. Three shimmering bars sized to
   roughly match the hero + KPI strip so layout doesn't reflow when the
   real content arrives. */
.perf-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 0;
}
.perf-loading-bar {
  height: 18px;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.10) 0%,
    rgba(148, 163, 184, 0.22) 50%,
    rgba(148, 163, 184, 0.10) 100%
  );
  background-size: 200% 100%;
  animation: perf-loading-shimmer 1.4s ease-in-out infinite;
}
.perf-loading-bar-short { width: 60%; }
.dark .perf-loading-bar {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.06) 0%,
    rgba(148, 163, 184, 0.16) 50%,
    rgba(148, 163, 184, 0.06) 100%
  );
  background-size: 200% 100%;
}
@keyframes perf-loading-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Range-change feedback. Turbo puts `busy` on the perf-data frame the
   moment a range link / custom-range submit starts fetching, and removes
   it when the new partial lands. Dimming the stale content immediately is
   what tells the user the click registered — without this, a cold 6-month
   report (several seconds server-side) looks like a dead click. Custom
   elements default to inline; block makes the opacity box predictable. */
turbo-frame#perf-data {
  display: block;
  transition: opacity 0.15s ease;
}
turbo-frame#perf-data[busy] {
  opacity: 0.45;
  pointer-events: none;
  cursor: progress;
}

/* ─────────────────────────────────────────────────────────────────────
   HERO (three framings — sentence, roas, revenue)
   ──────────────────────────────────────────────────────────────────── */

.perf-hero {
  background: white;
  border: 1px solid #e9ecf1;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(22, 32, 52, 0.04);
  margin-bottom: 16px;
  overflow: hidden;
}
.dark .perf-hero {
  background: #1f2937;
  border-color: rgba(148, 163, 184, 0.16);
}

/* Hero eyebrow — "Is it working?" / "Revenue booked" etc. Accent-colored
   so it reads as a hook, not as body copy. The sentence framing's
   eyebrow gets the strongest treatment because it's THE label that
   frames the whole card. */
.perf-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-violet-500);
  margin-bottom: 12px;
}
.perf-hero-sentence .perf-hero-eyebrow { font-size: 13px; letter-spacing: 0.6px; }

/* ── Sentence framing ─────────────────────────────────────────────── */
.perf-hero-sentence {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  padding: 0;
  align-items: stretch;
}
@media (max-width: 900px) {
  .perf-hero-sentence { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.perf-hero-left {
  padding: 28px 28px 26px;
  background: linear-gradient(135deg, rgba(55, 126, 249, 0.08) 0%, rgba(55, 126, 249, 0.01) 70%);
  border-right: 1px solid #e9ecf1;
}
.dark .perf-hero-left { border-right-color: rgba(148, 163, 184, 0.16); }
@media (max-width: 900px) {
  .perf-hero-left { border-right: none; border-bottom: 1px solid #e9ecf1; }
}

.perf-hero-sentence-copy {
  font-size: 21px;
  line-height: 1.4;
  color: #1b2433;
  letter-spacing: -0.3px;
  margin: 0 0 18px;
}
.dark .perf-hero-sentence-copy { color: #f3f4f6; }
.perf-hero-sentence-copy strong {
  font-weight: 700;
  color: #1b2433;
  font-variant-numeric: tabular-nums;
}
.dark .perf-hero-sentence-copy strong { color: #ffffff; }

.perf-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #646e7e;
}
.dark .perf-hero-meta { color: #9aa3b2; }
.perf-hero-dot { color: #c8cdd5; }

.perf-hero-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 28px;
}

.perf-ministat {}
.perf-ministat-label {
  font-size: 12px;
  font-weight: 500;
  color: #646e7e;
  margin-bottom: 4px;
}
.dark .perf-ministat-label { color: #9aa3b2; }
.perf-ministat-value {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #1b2433;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dark .perf-ministat-value { color: #f3f4f6; }
.perf-ministat-value.is-negative { color: #b23a3a; }
.perf-ministat-accent { color: var(--color-violet-500); }
.dark .perf-ministat-accent { color: var(--color-violet-400); }

.perf-hero-allin {
  font-size: 11.5px;
  color: #646e7e;
  padding-top: 8px;
  border-top: 1px solid #f0f2f5;
}
.dark .perf-hero-allin {
  color: #9aa3b2;
  border-top-color: rgba(148, 163, 184, 0.16);
}
.perf-hero-allin strong {
  color: #1b2433;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dark .perf-hero-allin strong { color: #f3f4f6; }

/* ── ROAS framing ─────────────────────────────────────────────────── */
.perf-hero-roas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  padding: 28px 32px;
}
@media (max-width: 700px) {
  .perf-hero-roas { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
.perf-hero-roas-num {
  font-size: 92px;
  font-weight: 800;
  letter-spacing: -4px;
  line-height: 0.9;
  color: var(--color-violet-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dark .perf-hero-roas-num { color: var(--color-violet-400); }
.perf-hero-roas-times {
  font-size: 56px;
  font-weight: 600;
  margin-left: 2px;
  color: var(--color-violet-500);
}
.perf-hero-roas-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.perf-hero-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f5;
}
.perf-hero-row:last-child { border-bottom: none; }
.dark .perf-hero-row { border-bottom-color: rgba(148, 163, 184, 0.16); }
.perf-hero-row-label {
  font-size: 13px;
  color: #646e7e;
}
.dark .perf-hero-row-label { color: #9aa3b2; }
.perf-hero-row-value {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.4px;
  color: #1b2433;
  font-variant-numeric: tabular-nums;
}
.dark .perf-hero-row-value { color: #f3f4f6; }
.perf-hero-row-value.is-negative { color: #b23a3a; }

/* ── Revenue framing ──────────────────────────────────────────────── */
.perf-hero-revenue {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 32px;
}
.perf-hero-revenue-head {}
.perf-hero-revenue-num {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -2.4px;
  line-height: 1;
  color: #1b2433;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.dark .perf-hero-revenue-num { color: #f3f4f6; }

.perf-hero-progress {
  background: rgba(55, 126, 249, 0.04);
  border-radius: 10px;
  padding: 14px 16px;
}
.dark .perf-hero-progress { background: rgba(55, 126, 249, 0.06); }
.perf-hero-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #646e7e;
  margin-bottom: 8px;
}
.dark .perf-hero-progress-label { color: #9aa3b2; }
.perf-hero-progress-label span:last-child {
  color: #1b2433;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dark .perf-hero-progress-label span:last-child { color: #f3f4f6; }
.perf-hero-progress-track {
  height: 8px;
  background: white;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #e9ecf1;
}
.dark .perf-hero-progress-track {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(148, 163, 184, 0.16);
}
.perf-hero-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-violet-500) 0%, var(--color-violet-700) 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.perf-hero-ministats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 700px) {
  .perf-hero-ministats { grid-template-columns: minmax(0, 1fr); }
}

/* ── KPI strip ────────────────────────────────────────────────────── */
.perf-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) {
  .perf-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .perf-kpi-strip { grid-template-columns: minmax(0, 1fr); }
}
.perf-kpi {
  background: white;
  border: 1px solid #e9ecf1;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(22, 32, 52, 0.04);
}
.dark .perf-kpi {
  background: #1f2937;
  border-color: rgba(148, 163, 184, 0.16);
}
.perf-kpi-label {
  font-size: 13px;
  color: #1b2433;
  font-weight: 600;
  margin-bottom: 6px;
}
.dark .perf-kpi-label { color: #f3f4f6; }
.perf-kpi-value {
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.5px;
  color: #1b2433;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dark .perf-kpi-value { color: #f3f4f6; }
.perf-kpi-value.is-negative { color: #b23a3a; }
.perf-kpi-foot {
  font-size: 11.5px;
  color: #646e7e;
  margin-top: 6px;
}
.dark .perf-kpi-foot { color: #9aa3b2; }

/* Headline ROAS tile — same chrome as the others; only the numeric value
   gets the brand-blue treatment so the eye lands there. */
.perf-kpi-value-roas { color: var(--color-violet-500); }
.dark .perf-kpi-value-roas { color: var(--color-violet-400); }
/* Headline multiplier carries the same break-even color logic as the
   per-channel pills; neutral (no data) keeps the violet accent. */
.perf-kpi-value-roas.is-good { color: #1f7a46; }
.dark .perf-kpi-value-roas.is-good { color: #86efac; }
.perf-kpi-value-roas.is-low { color: #b23a3a; }
.dark .perf-kpi-value-roas.is-low { color: #fca5a5; }

/* Inline EST. badge — sits flush with the numeric value (see
   .perf-kpi-value-with-tag). Native title attribute drives the hover
   tooltip; styling is just for the badge itself. */
.perf-kpi-value-with-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
/* Ambient info affordance on the Revenue booked value — same visual
   language as the header help icon, sized to sit beside the KPI number.
   One icon at all times; the tooltip copy carries the actual/estimated
   story, so no ACTUAL/EST. text badge competes with the figure. */
/* Directory wordmark logos (The Knot, WeddingWire, Zola) shown in place
   of the letter-monogram + name where we hold an official asset. Height
   fixed, width follows the mark's own aspect; black wordmarks get
   inverted on dark backgrounds via the -invert flag class. */
.perf-dir-logo {
  height: 16px;
  width: auto;
  max-width: 110px;
  display: block;
}
.perf-dir-logo-card { height: 18px; }
.dark .perf-dir-logo-invert { filter: invert(1); }
/* Square-ish brand icons (Coco's key mark) sit beside the name instead of
   replacing it; the mark carries its own background so no tinting. */
.perf-dir-icon {
  height: 20px;
  width: 20px;
  border-radius: 5px;
  display: block;
  flex-shrink: 0;
}
.perf-dir-icon-card {
  height: 36px;
  width: 36px;
  border-radius: 10px;
}
/* Circular brand marks (HCTG's H-in-circle) crop to a full circle so any
   square corner background never shows. */
.perf-dir-icon-round { border-radius: 999px; }

.perf-kpi-label-with-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.perf-rev-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  color: #8a93a3;
  cursor: help;
}
.perf-rev-info-icon:hover,
.perf-rev-info-icon:focus-visible {
  color: #5b6472;
  background: rgba(148, 163, 184, 0.14);
}
.dark .perf-rev-info-icon { color: #7d8797; }
.dark .perf-rev-info-icon:hover,
.dark .perf-rev-info-icon:focus-visible {
  color: #b6bfcc;
  background: rgba(148, 163, 184, 0.18);
}

/* Reset for tooltips that live inside a styled-number wrapper. Without
   this, the tooltip text inherits the parent .perf-kpi-value's
   font-weight: 750, letter-spacing: -0.5px, and tabular-nums — making
   the tooltip read as if it's part of the number rather than its own
   body copy. Matches the visual weight of the existing app tooltips
   (see marketing_campaigns/new_step1.html.erb's pattern). */
.perf-tooltip {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}
.perf-tooltip strong { font-weight: 600; }



/* ── Notice banners (demo, connection lost) ──────────────────────── */
.perf-notice {
  margin-bottom: 24px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(55, 126, 249, 0.08);
  border: 1px solid rgba(55, 126, 249, 0.30);
  color: var(--color-violet-800);
  font-size: 13.5px;
}
.dark .perf-notice {
  color: var(--color-violet-300);
  border-color: rgba(55, 126, 249, 0.40);
}
.perf-notice strong { font-weight: 600; }

/* Warning banner — Meta connection lost and similar contextual states.
   Matches the leads-page "marketing_campaign_filter" banner's layout
   (rounded-xl, px-5 py-3, flex items-center justify-between, inline SVG
   on the left, action link on the right) in the warning palette. Used
   instead of Tailwind utilities because mosaic.css doesn't bake the
   full yellow scale (bg-yellow-50, border-yellow-200, etc.). Hex values
   below mirror Tailwind's yellow-100/300/700/800/900 so the class can
   be swapped for utilities later if mosaic.css is extended. */
.perf-warn-banner {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #854d0e;
}
.dark .perf-warn-banner {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.36);
  color: #fcd34d;
}
.perf-warn-banner strong { font-weight: 600; }
.perf-warn-banner svg { color: #b45309; }
.dark .perf-warn-banner svg { color: #fbbf24; }
.perf-warn-banner a {
  color: #92400e;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.14s ease;
}
.perf-warn-banner a:hover { color: #78350f; text-decoration: underline; }
.dark .perf-warn-banner a { color: #fcd34d; }
.dark .perf-warn-banner a:hover { color: #fde68a; }


/* ── Add / Edit source modal ───────────────────────────────────────── */
/* Open state is signalled by `.perf-source-panel-open` on the controller's
   element (the page's outer wrapper). The Stimulus controller toggles it;
   visuals cascade from there. Centered-modal chrome matching the app's
   standard (darkened backdrop, rounded card — see _avg_booking_modal):
   the scrim receives close clicks while the wrap stays click-through. */
.perf-panel-wrap {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  pointer-events: none;
}
.perf-scrim {
  position: fixed; inset: 0;
  background: rgba(17, 24, 39, 0.30);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.perf-panel {
  position: relative;
  width: 100%;
  max-width: 444px;
  max-height: calc(100vh - 64px);
  background: white;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(15, 20, 32, 0.25);
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(.2,.7,.3,1), opacity 0.2s ease;
  pointer-events: none;
  overflow-y: auto;
}
.dark .perf-panel { background: #1f2937; }
.perf-source-panel-open .perf-scrim { opacity: 1; pointer-events: auto; }
.perf-source-panel-open .perf-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
/* =====================================================================
   APP · CARDS
   ---------------------------------------------------------------------
   Standardized chrome + typography tokens for dashboard-style cards.
   Used by Dashboard, Insights, and any future page that lays out KPI
   tiles or list/table cards.

   Layout (col-span, padding, dark, grid placement) stays in Tailwind
   on the markup. This file owns chrome and text scale only, so the
   tokens stay consistent across pages.

   Adapted from marketing_performance.css's .perf-* tokens. Inter is
   loaded as a variable font via mosaic.css, so weights 400..900 are
   all available without fallback.
   ===================================================================== */

/* Card chrome — drop-in replacement for the legacy
   `bg-white dark:bg-gray-800 shadow-xs rounded-xl` combo.
   `cursor: default` overrides the browser's text I-beam over headings
   and numbers so the card reads as a display, not selectable text.
   Interactive children (badges with `cursor-help`, links, buttons)
   keep their own cursors. */
.app-card {
  background: #ffffff;
  border: 1px solid #e9ecf1;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(22, 32, 52, 0.04);
  cursor: default;
}
.dark .app-card {
  background: #1f2937;
  border-color: rgba(148, 163, 184, 0.16);
}

/* Title sits at the top of the card. Dark text in light mode so it
   reads as a title, not a muted label. Matches Marketing Performance's
   .perf-section-title color. */
.app-card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #1b2433;
  margin: 0;
  line-height: 1.3;
}
.dark .app-card-title { color: #f3f4f6; }

/* Hero number on KPI tiles. Proportional digits (no tabular-nums) so
   Inter's "1" keeps its modern stem-and-flag form — tabular figures
   swap "1" to a footed variant which reads as a different glyph.
   Reserve tabular-nums for actual tabular contexts (table columns). */
.app-card-kpi {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #1b2433;
  line-height: 1.05;
}
.dark .app-card-kpi { color: #f3f4f6; }

/* Small caption that can sit under a KPI value. Currently unused on
   Dashboard (info-icon tooltip pattern is preferred there); reserved
   for cards that need a visible secondary line. */
.app-card-foot {
  font-size: 11.5px;
  color: #646e7e;
  margin-top: 6px;
}
.dark .app-card-foot { color: #9aa3b2; }

/* Explanatory caption under the KPI value (e.g. "23 of 47 leads with
   activity"). Smaller and lighter than the value so it reads as a
   supporting explainer, not a competing element. */
.app-card-caption {
  font-size: 14px;
  font-weight: 500;
  color: #646e7e;
  line-height: 1.45;
}
.dark .app-card-caption { color: #9aa3b2; }

/* Outsized number for a "highlight" card that needs to carry a band on
   its own (Insights Bookings count box, future hero KPIs). Bigger and
   tighter than `.app-card-kpi` (which is sized for the 6-up KPI grid).
   No tabular-nums on a solo number — Inter swaps the "1" to a footed
   glyph under tnum and it reads as a different font. */
.app-card-hero {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 0.9;
  color: #1b2433;
}
.dark .app-card-hero { color: #f3f4f6; }

/* Insights "Bookings Overview" banner grid — 5/2/2/3 visual split.
   Tailwind's `col-span-5/2/3` aren't in the baked mosaic.css, so the
   layout is owned here. Stacks to one column under md. The `[data-cols="3"]`
   variant drops the EST. CONTRACT VALUE column for orgs without an
   avg_booking_value set, redistributing the freed space across the
   remaining three columns. */
.app-bookings-banner {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .app-bookings-banner {
    grid-template-columns: 5fr 2fr 2fr 3fr;
  }
  .app-bookings-banner[data-cols="3"] {
    grid-template-columns: 5fr 2fr 2fr;
  }
}
/* Whichever column ends up last (col 4 in the 4-up layout, col 3 in the
   3-up variant) needs 20px right padding so its content aligns with the
   right edge of the top KPI cards above the band. */
.app-bookings-banner > div:last-child {
  padding-right: 20px;
}

/* Follow-Up Cadence card (admin AI tab). Page-scoped, all selectors .fuc-*.
   Tokens and geometry from design_handoff_followup_cadence/README.md (Option D). */

.fuc { --fuc-ink:#101828; --fuc-body:#475467; --fuc-muted:#98A2B3; --fuc-line:#E4E7EC; --fuc-line2:#F0F2F5;
       --fuc-soft:#F7F8FA; --fuc-blue:#377EF9; --fuc-blue-surface:#F2F7FE; --fuc-blue-border:#C9DCFD;
       --fuc-blue-outline:#A9C4F5; --fuc-blue-ink:#5B7CB8; --fuc-rail:#DFE3EA; --fuc-axis:#B6BDC9;
       --fuc-danger:#B4485A; --fuc-ok:#7BC49A;
       color: var(--fuc-body); }
.fuc * { box-sizing: border-box; }
.fuc-num { font-variant-numeric: tabular-nums; }

/* header */
.fuc-head { display:flex; align-items:center; gap:12px; }
.fuc-title { font-size:19px; font-weight:600; letter-spacing:-.2px; color:var(--fuc-ink); margin:0; }
.fuc-status { font-size:12.5px; color:var(--fuc-muted); }
.fuc-tag { font-size:11px; font-weight:500; color:var(--fuc-blue-ink); background:var(--fuc-blue-surface); border:1px solid var(--fuc-blue-border); border-radius:5px; padding:1px 7px; }
.fuc-chev { display:inline-block; width:11px; height:11px; border-right:1.6px solid var(--fuc-muted); border-bottom:1.6px solid var(--fuc-muted); transform:rotate(45deg); transition:transform .15s; }
.fuc-chev.open { transform:rotate(225deg); }
.fuc-chev.small { width:7px; height:7px; border-width:1.4px; transform:rotate(-45deg); margin:0 4px 0 2px; }
.fuc-chev.small.open { transform:rotate(45deg); }
.fuc-desc { font-size:13.5px; line-height:1.55; color:var(--fuc-body); max-width:920px; margin:10px 0 20px; text-wrap:pretty; }

/* dial */
.fuc-dial { display:flex; align-items:center; gap:22px; }
.fuc-dial-label { font-size:13px; font-weight:500; color:var(--fuc-body); white-space:nowrap; }
.fuc-track { flex:1; position:relative; height:44px; margin:0 46px; }
.fuc-track.dim { opacity:.5; }
.fuc-track-bar { position:absolute; left:0; right:0; top:9px; height:4px; border-radius:99px; background:var(--fuc-line); }
.fuc-track-fill { position:absolute; left:0; top:9px; height:4px; border-radius:99px; background:var(--fuc-blue); transition:width .12s ease-out; }
.fuc-stop { position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:0; padding:0; cursor:pointer; }
.fuc-stop-dot { width:15px; height:15px; border-radius:99px; background:#fff; border:2px solid var(--fuc-line); box-shadow:0 1px 2px rgba(16,24,40,.06); margin-top:4px; }
.fuc-stop:hover .fuc-stop-dot { border-color:#CDD3DD; }
.fuc-stop.on .fuc-stop-dot { width:19px; height:19px; border:5px solid var(--fuc-blue); margin-top:2px; }
.fuc-stop-label { font-size:12px; color:var(--fuc-muted); white-space:nowrap; }
.fuc-stop.on .fuc-stop-label { color:var(--fuc-ink); font-weight:600; }
.fuc-stop-label .def { color:var(--fuc-muted); font-weight:400; }
.fuc-stop:focus-visible .fuc-stop-dot { box-shadow:0 0 0 4px rgba(55,126,249,.18); }
.fuc-custom-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:9px; border:1px solid var(--fuc-line); background:#fff; font-size:13px; font-weight:500; color:var(--fuc-body); cursor:pointer; white-space:nowrap; }
.fuc-custom-btn:hover { border-color:var(--fuc-blue-border); }
.fuc-custom-btn.on { border-color:var(--fuc-blue); background:var(--fuc-blue-surface); box-shadow:inset 0 0 0 1px var(--fuc-blue); color:var(--fuc-ink); font-weight:600; }
.fuc-rd { width:14px; height:14px; border-radius:99px; border:1.5px solid var(--fuc-line); background:#fff; flex:none; }
.on > .fuc-rd { border:4px solid var(--fuc-blue); }

/* summary */
.fuc-summary { display:flex; align-items:center; gap:24px; margin-top:16px; padding:14px 18px; border:1px solid var(--fuc-line); border-radius:10px; background:var(--fuc-soft); }
.fuc-summary-text { flex:1; font-size:13.5px; line-height:1.55; color:var(--fuc-body); }
.fuc-summary-text b { color:var(--fuc-ink); font-weight:600; }
.fuc-stats { display:flex; gap:10px; }
.fuc-stat { background:#fff; border:1px solid var(--fuc-line); border-radius:9px; padding:8px 14px; display:flex; flex-direction:column; align-items:center; min-width:74px; }
.fuc-stat-n { font-size:17px; font-weight:600; color:var(--fuc-ink); font-variant-numeric:tabular-nums; }
.fuc-stat-l { font-size:10.5px; color:var(--fuc-muted); white-space:nowrap; }

/* every touch panel */
.fuc-panel { margin-top:14px; border:1px solid var(--fuc-line); border-radius:12px; background:var(--fuc-soft); padding:16px 20px 8px; }
.fuc-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.fuc-panel-title { font-size:14px; font-weight:600; color:var(--fuc-ink); }
.fuc-legend { display:flex; align-items:center; gap:14px; font-size:11.5px; color:var(--fuc-muted); }
.fuc-legend span { display:inline-flex; align-items:center; gap:5px; }
.fuc-legend i { width:8px; height:8px; border-radius:99px; display:inline-block; }
.fuc-legend i.t { background:var(--fuc-blue); }
.fuc-legend i.e { background:#fff; border:1.5px solid var(--fuc-blue-outline); }
.fuc-edit-hint { font-size:11.5px; font-weight:500; color:var(--fuc-blue); }
.fuc-seq { padding:14px 0; border-top:1px solid var(--fuc-line); }
.fuc-seq-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.fuc-seq-name { font-size:13px; font-weight:600; color:var(--fuc-ink); }
.fuc-seq-meta { font-size:12px; color:var(--fuc-muted); font-variant-numeric:tabular-nums; }
.fuc-add { margin-left:auto; border:1px solid var(--fuc-line); background:#fff; border-radius:6px; padding:3px 9px; font-size:11.5px; font-weight:500; color:var(--fuc-blue); cursor:pointer; }
.fuc-add:hover { border-color:var(--fuc-blue-border); background:var(--fuc-blue-surface); }
.fuc-tl { position:relative; height:64px; transition:height .12s ease-out; }
.fuc-tl-base { position:absolute; left:0; right:0; top:13px; height:1px; background:var(--fuc-rail); }
.fuc-node { position:absolute; top:0; margin-left:-13px; width:26px; display:flex; flex-direction:column; align-items:center; background:none; border:0; padding:0; }
.fuc-marker { width:26px; height:26px; border-radius:99px; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; }
.fuc-marker.t { background:var(--fuc-blue); color:#fff; }
.fuc-marker.e { background:#fff; border:1.5px solid var(--fuc-blue-outline); color:var(--fuc-blue-ink); }
.fuc-node-day { font-size:10.5px; color:var(--fuc-muted); margin-top:4px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fuc-tl.editable .fuc-node { cursor:pointer; }
.fuc-tl.editable .fuc-node-day { cursor:pointer; }
.fuc-tl.editable .fuc-node:hover .fuc-marker, .fuc-node:focus-visible .fuc-marker { box-shadow:0 0 0 4px rgba(55,126,249,.18); }
.fuc-node.open .fuc-marker { box-shadow:0 0 0 4px rgba(55,126,249,.28); }
.fuc-axis { position:absolute; left:0; right:0; bottom:0; height:12px; border-top:1px solid var(--fuc-line2); }
.fuc-axis span { position:absolute; top:1px; transform:translateX(-50%); font-family:var(--font-mono, ui-monospace, monospace); font-size:9.5px; font-weight:500; color:var(--fuc-axis); }
@media (max-width: 720px) { .fuc-node-day { display:none; } }

/* popover */
.fuc-pop { position:absolute; top:46px; width:190px; background:#fff; border:1px solid var(--fuc-line); border-radius:9px; box-shadow:0 12px 28px rgba(16,24,40,.16); padding:9px; z-index:30; display:flex; flex-direction:column; gap:7px; }
.fuc-pop.center { left:50%; transform:translateX(-50%); }
.fuc-pop.right { right:-2px; }
.fuc-pop.left { left:-2px; }
.fuc-seg { display:flex; border:1px solid var(--fuc-line); border-radius:7px; overflow:hidden; }
.fuc-seg button { flex:1; border:0; background:#fff; padding:6px 0; font-size:11.5px; font-weight:600; color:var(--fuc-body); cursor:pointer; }
.fuc-seg button.on { background:var(--fuc-ink); color:#fff; }
.fuc-stepper { display:flex; align-items:center; gap:4px; }
.fuc-stepper button { width:26px; height:26px; border:1px solid var(--fuc-line); border-radius:6px; background:#fff; cursor:pointer; font-size:14px; color:var(--fuc-body); }
.fuc-stepper .val { flex:1; min-width:54px; text-align:center; font-size:12px; font-weight:600; color:var(--fuc-ink); font-variant-numeric:tabular-nums; }
.fuc-unit { display:flex; gap:4px; }
.fuc-unit button { flex:1; border:1px solid var(--fuc-line); background:#fff; border-radius:6px; padding:4px 0; font-size:11px; color:var(--fuc-body); cursor:pointer; }
.fuc-unit button.on { border-color:var(--fuc-blue); color:var(--fuc-blue); background:var(--fuc-blue-surface); }
.fuc-remove { border:0; background:none; font-size:11.5px; color:var(--fuc-danger); cursor:pointer; text-align:left; padding:2px 0 0; }
.fuc-pop-note { font-size:11px; line-height:1.35; color:var(--fuc-danger); }

/* how it adapts */
.fuc-adapt { margin:4px 0 6px; padding-top:12px; border-top:1px solid var(--fuc-line); }
.fuc-adapt-toggle { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--fuc-body); }
.fuc-adapt-toggle:hover { color:var(--fuc-ink); }
.fuc-adapt-list { margin:10px 0 4px; padding:0 0 0 14px; display:flex; flex-direction:column; gap:6px; font-size:12.5px; line-height:1.5; color:var(--fuc-body); max-width:920px; }
.fuc-adapt-list b { color:var(--fuc-ink); font-weight:600; }

/* guardrails */
.fuc-guards { display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; margin-top:20px; padding-top:18px; border-top:1px solid var(--fuc-line); }
.fuc-guards .form-input { max-width:420px; }
.fuc-field label { display:block; font-size:13px; font-weight:500; color:var(--fuc-body); margin-bottom:6px; }

.fuc-inline { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fuc-body); }
.fuc-help { font-size:11.5px; color:var(--fuc-muted); margin-top:6px; }

/* consequence footer (full-bleed inside the card, which pads 24px) */
.fuc-foot { margin:20px -24px -24px; padding:16px 30px 18px; border-radius:0 0 12px 12px; }
.fuc-foot.clean { background:var(--fuc-soft); border-top:1px solid var(--fuc-line); font-size:12.5px; color:var(--fuc-muted); display:flex; align-items:center; gap:8px; }
.fuc-foot.clean i { width:6px; height:6px; border-radius:99px; background:var(--fuc-ok); display:inline-block; }
.fuc-foot.clean b { color:var(--fuc-body); font-weight:600; }
.fuc-link { background:none; border:0; padding:0; font-size:12.5px; font-weight:600; color:var(--fuc-blue); cursor:pointer; }
.fuc-link:hover { text-decoration:underline; }
.fuc-link:disabled { opacity:.55; cursor:default; }
.fuc-foot.dirty { background:linear-gradient(#F7FAFF, #F2F7FE); border-top:1px solid var(--fuc-blue-border); display:flex; align-items:flex-end; gap:24px; }
.fuc-foot-main { flex:1; }
.fuc-change { font-size:14px; font-weight:600; color:var(--fuc-ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fuc-change .arrow { color:var(--fuc-muted); }
.fuc-change small { font-size:12.5px; font-weight:400; color:var(--fuc-body); }
.fuc-q { font-size:13px; color:var(--fuc-body); margin-top:8px; }
.fuc-q b { color:var(--fuc-ink); font-weight:600; }
.fuc-opts { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.fuc-opt { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--fuc-line); border-radius:8px; padding:8px 13px; font-size:12.5px; color:var(--fuc-body); cursor:pointer; }
.fuc-opt.on { border-color:var(--fuc-blue); box-shadow:inset 0 0 0 1px var(--fuc-blue); color:var(--fuc-ink); font-weight:500; }
.fuc-actions { display:flex; gap:8px; }

.fuc-err { font-size:12.5px; color:var(--fuc-danger); margin-top:8px; }
/* Commerce staff views: proposal editor + payments tab.
   proposals: Scoped styles for the proposal editor — the Events Export's proposal
    card translated to the app palette (violet accent), as plain CSS so
    nothing depends on the Tailwind build. Rendered once by _card.
   payments: Scoped styles for the Payments tab (design_handoff_payments), on OUR
    tokens — accent = the app primary, not the handoff's near-blue. Same
    discipline as _proposal_styles: plain CSS, no utility guessing.
   Moved out of embedded <style> blocks (JC): new CSS belongs in a
   dedicated stylesheet, required by application.css, not in the HTML. */

/* ── proposals ────────────────────────────────────────────── */
.prop-title { border: 0; padding: 0; font-size: 17px; font-weight: 750; letter-spacing: -0.3px; color: #1f2937; width: 100%; background: transparent; font-family: inherit; }
  .prop-title:focus { outline: none; box-shadow: 0 2px 0 var(--color-primary-500, #377EF9); }
  .dark .prop-title { color: #f3f4f6; }

  .prop-mini { font-size: 12px; color: #9ca3af; }
  .prop-sec { font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; }

  .prop-row { display: flex; gap: 4px; padding: 16px 18px 16px 8px; border-bottom: 1px solid #f3f4f6; background: transparent; }
  .prop-row:last-child { border-bottom: 0; }
  .prop-row:hover { background: #fafafa; }
  .prop-row.dragging { opacity: 0.45; }
  .dark .prop-row { border-color: rgba(55, 65, 81, 0.6); }
  .dark .prop-row:hover { background: rgba(55, 65, 81, 0.2); }

  .prop-grip { width: 26px; flex-shrink: 0; color: #d1d5db; font-size: 15px; line-height: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: 3px; cursor: grab; user-select: none; }
  .prop-row:hover .prop-grip { color: #9ca3af; }

  .prop-name { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: #1f2937; }
  .dark .prop-name { color: #f3f4f6; }
  .prop-desc { font-size: 12.5px; line-height: 1.5; color: #6b7280; margin: 4px 0 0; max-width: 62ch; }
  .prop-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .prop-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 650; border-radius: 6px; padding: 3px 8px; background: #f3f4f6; color: #6b7280; border: 1px solid transparent; }
  .dark .prop-chip { background: #374151; color: #d1d5db; }
  .prop-chip.acc { background: color-mix(in srgb, var(--color-primary-500, #377EF9) 10%, transparent); color: var(--color-primary-600, #2f6ae0); }
  .dark .prop-chip.acc { color: var(--color-primary-400, #68a1fd); }
  .prop-chip.warn { background: #fefce8; color: #a16207; border-color: #fde68a; }

  /* Date-conflict heads-up above the proposal card. Warning lives in the
     icon so the card surface stays quiet; #a16207 is the same yellow-700
     the send-preview banner and .prop-chip.warn use. */
  .prop-notice-ico { color: #a16207; }
  .dark .prop-notice-ico { color: #fbbf24; }
  .prop-notice-txt { line-height: 1.5; color: #6b7280; }
  .dark .prop-notice-txt { color: #9ca3af; }
  .prop-notice-lbl { font-weight: 700; color: #374151; }
  .dark .prop-notice-lbl { color: #e5e7eb; }

  /* Agreement reading view (staff modal, frozen versions) + the editor's
     min height, moved out of the <style> block that was inline in
     _agreement_modal_form. Borrows the client portal's document
     STRUCTURE — measured line length, real heading steps, list indents,
     paragraph rhythm — but not its cream palette or serif display face,
     which belong to the couple's page. Mirrors .cp .tbody. */
  .agr-read { max-width: 68ch; font-size: 13.5px; line-height: 1.7; color: #4b5563; overflow-wrap: break-word; }
  .dark .agr-read { color: #d1d5db; }
  .agr-read > :first-child { margin-top: 0; }
  .agr-read > :last-child { margin-bottom: 0; }
  .agr-read p { margin: 0 0 11px; }
  .agr-read h1, .agr-read h2, .agr-read h3, .agr-read h4 { font-size: 13px; font-weight: 700; letter-spacing: -0.1px; color: #1f2937; margin: 20px 0 6px; }
  .dark .agr-read h1, .dark .agr-read h2, .dark .agr-read h3, .dark .agr-read h4 { color: #f3f4f6; }
  .agr-read ul, .agr-read ol { margin: 0 0 11px; padding-left: 20px; }
  .agr-read li { margin: 3px 0; }
  .agr-read strong, .agr-read b { font-weight: 650; color: #374151; }
  .dark .agr-read strong, .dark .agr-read b { color: #f3f4f6; }
  .agr-read a { color: inherit; text-decoration: underline; }
  .agr-read blockquote { margin: 0 0 11px; padding-left: 12px; border-left: 2px solid #e5e7eb; color: #6b7280; }
  .dark .agr-read blockquote { border-color: #4b5563; color: #9ca3af; }
  .agr-read hr { border: 0; border-top: 1px solid #e5e7eb; margin: 18px 0; }
  .dark .agr-read hr { border-color: rgba(75, 85, 99, 0.8); }

  .agreement-modal-editor .quill-editor .ql-editor { min-height: 16rem; }

  .prop-total { text-align: right; flex-shrink: 0; min-width: 96px; }
  .prop-amt { font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; color: #1f2937; }
  .dark .prop-amt { color: #f3f4f6; }
  .prop-calc { font-size: 11.5px; color: #9ca3af; margin-top: 3px; font-variant-numeric: tabular-nums; }

  .prop-cellinp { width: 100%; height: 30px; border: 1px solid transparent; border-radius: 7px; padding: 0 8px; font-size: 13px; color: #1f2937; background: transparent; font-family: inherit; }
  .prop-cellinp:hover { border-color: #e5e7eb; background: #fff; }
  .prop-cellinp:focus { outline: none; border-color: var(--color-primary-500, #377EF9); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #377EF9) 12%, transparent); }
  .prop-cellinp.num { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
  .prop-cellinp.num.padr { padding-right: 20px; }
  .dark .prop-cellinp { color: #f3f4f6; }
  .dark .prop-cellinp:hover, .dark .prop-cellinp:focus { background: #1f2937; border-color: #4b5563; }

  .prop-feerow { display: grid; grid-template-columns: minmax(0, 1fr) 84px 110px 34px; gap: 10px; align-items: center; padding: 4px 0; }
  .prop-feeamt { text-align: right; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #1f2937; }
  .dark .prop-feeamt { color: #f3f4f6; }

  .prop-footer { background: #fcfcfd; border-top: 1px solid #e5e7eb; }
  .dark .prop-footer { background: rgba(17, 24, 39, 0.25); border-color: rgba(55, 65, 81, 0.6); }

  .prop-mrow { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-top: 1px solid #f3f4f6; }
  .prop-mrow:first-child { border-top: 0; }
  .dark .prop-mrow { border-color: rgba(55, 65, 81, 0.6); }
  .prop-mrow .ml { flex: 1; min-width: 0; }
  .prop-mrow .mt { font-size: 13px; font-weight: 550; color: #4b5563; }
  .dark .prop-mrow .mt { color: #d1d5db; }
  .prop-mrow .md { font-size: 12px; color: #9ca3af; margin-top: 2px; }
  .prop-mrow .mv { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: #4b5563; }
  .dark .prop-mrow .mv { color: #d1d5db; }
  .prop-mrow.tot { border-top: 1px solid #e5e7eb; margin-top: 2px; padding-top: 14px; }
  .prop-mrow.tot .mt { font-size: 15px; font-weight: 750; color: #1f2937; }
  .prop-mrow.tot .mv { font-size: 22px; font-weight: 750; letter-spacing: -0.5px; color: #1f2937; }
  .dark .prop-mrow.tot .mt, .dark .prop-mrow.tot .mv { color: #f3f4f6; }

  .prop-avlist { border: 1px solid #e5e7eb; border-radius: 11px; overflow: hidden; }
  .dark .prop-avlist { border-color: rgba(55, 65, 81, 0.6); }
  .prop-avrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 13px; align-items: center; padding: 10px 13px; border-bottom: 1px solid #f3f4f6; }
  .prop-avrow:last-child { border-bottom: 0; }
  .prop-avrow:hover { background: #fafafa; }
  .prop-avrow.on { background: color-mix(in srgb, var(--color-primary-500, #377EF9) 6%, transparent); }
  .dark .prop-avrow { border-color: rgba(55, 65, 81, 0.6); }
  .dark .prop-avrow:hover { background: rgba(55, 65, 81, 0.2); }
  .prop-avname { font-size: 14px; font-weight: 700; letter-spacing: -0.15px; color: #1f2937; }
  .dark .prop-avname { color: #f3f4f6; }
  .prop-avdesc { font-size: 12.5px; line-height: 1.5; color: #6b7280; margin: 2px 0 0; }
  /* Picker rows only (the client add-on card lets its description wrap):
     every row the same height, however long the description runs. The grid
     column is minmax(0, 1fr), so the ellipsis has something to bite on. */
  .prop-avdesc.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prop-avamt { text-align: right; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #1f2937; }
  .dark .prop-avamt { color: #f3f4f6; }
  .prop-avbasis { font-size: 11.5px; font-weight: 400; color: #9ca3af; margin-top: 2px; }
  /* Already on the proposal: settled, not a target. Muted rather than
     hidden — a library that drops rows reads as broken, and search has to
     keep finding what people know is there. */
  .prop-avrow.taken { background: #fcfcfd; }
  .dark .prop-avrow.taken { background: rgba(55, 65, 81, 0.15); }
  .prop-avrow.taken .prop-avname, .prop-avrow.taken .prop-avamt { color: #9ca3af; }
  .dark .prop-avrow.taken .prop-avname, .dark .prop-avrow.taken .prop-avamt { color: #6b7280; }
  .prop-avrow.taken:hover { background: #fcfcfd; }
  .dark .prop-avrow.taken:hover { background: rgba(55, 65, 81, 0.15); }

  /* Phone layout for the Add Offering picker only (the client add-on card
     keeps its own shape). Three columns at 343px let the basis label
     ("18% of the offerings above") wrap and eat the name, so the price
     drops under the name and the select button spans both rows. */
  @media (max-width: 640px) {
    .prop-avlist.picker .prop-avrow { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; padding: 10px 12px; }
    .prop-avlist.picker .prop-avrow > :first-child { grid-column: 1; grid-row: 1; }
    .prop-avlist.picker .prop-avamt { grid-column: 1; grid-row: 2; text-align: left; white-space: normal; }
    .prop-avlist.picker .prop-avbasis { display: inline; margin: 0 0 0 6px; }
    .prop-avlist.picker .prop-avrow > span { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  }

  .prop-layout { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .prop-main { min-width: 0; width: 100%; }
  .prop-rail { width: 100%; display: flex; flex-direction: column; gap: 13px; }
  @media (min-width: 1100px) {
    .prop-layout { flex-direction: row; }
    .prop-main { flex: 1; }
    .prop-rail { width: 300px; flex-shrink: 0; }
  }

  .prop-trow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; }
  .prop-tk { font-size: 12.5px; color: #6b7280; min-width: 0; }
  .dark .prop-tk { color: #9ca3af; }
  .prop-tv { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; color: #1f2937; }
  .dark .prop-tv { color: #f3f4f6; }
  .prop-tk.grand { font-size: 14px; font-weight: 750; color: #1f2937; }
  .prop-tv.grand { font-size: 19px; font-weight: 750; letter-spacing: -0.4px; }
  .dark .prop-tk.grand { color: #f3f4f6; }

  /* Totals ("Proposal Settings") modal controls — plain CSS, no build
     dependence. */
  .prop-setrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .prop-setlabel { font-size: 13px; font-weight: 600; color: #374151; width: 72px; flex-shrink: 0; }
  .dark .prop-setlabel { color: #d1d5db; }
  .prop-inp { height: 36px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 10px; font-size: 13px; color: #1f2937; background: #fff; font-family: inherit; }
  .prop-inp:focus { outline: none; border-color: var(--color-primary-500, #377EF9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #377EF9) 12%, transparent); }
  .prop-inp.num { font-variant-numeric: tabular-nums; font-weight: 600; }
  .dark .prop-inp { background: #1f2937; border-color: #4b5563; color: #f3f4f6; }
  select.prop-inp { -webkit-appearance: none; appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 8px center; }
  .prop-inp.num::-webkit-outer-spin-button, .prop-inp.num::-webkit-inner-spin-button,
  .prop-cellinp.num::-webkit-outer-spin-button, .prop-cellinp.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .prop-inp.num, .prop-cellinp.num { -moz-appearance: textfield; appearance: textfield; }
  .prop-inp, .prop-cellinp, .prop-title { box-sizing: border-box; }

  .prop-modal-feerow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; }
  .dark .prop-modal-feerow { border-color: #4b5563; }

/* ── payments ────────────────────────────────────────────── */
.pay-wrap { display: flex; gap: 16px; align-items: flex-start; }
  .pay-col { flex: 1; min-width: 0; align-self: stretch; }
  .pay-rail { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
  /* Same breakpoint and rail width as the Proposal tab (.prop-layout,
     1100px / 300px). They sit on the same page behind two tabs, so a
     window between the two old values made one tab two-column and the
     other stacked. */
  @media (max-width: 1099px) { .pay-wrap { flex-direction: column; } .pay-rail { width: 100%; } }

  .pay-card { background: #fff; border: 1px solid #e9ecf1; border-radius: 13px; overflow: hidden; }
  .dark .pay-card { background: #1f2937; border-color: rgba(55, 65, 81, 0.6); }
  .pay-band { border-top: 1px solid #edeff3; }
  .dark .pay-band { border-top-color: rgba(55, 65, 81, 0.4); }

  .pay-title { font-size: 16px; font-weight: 750; letter-spacing: -0.25px; color: #1b2433; }
  .dark .pay-title { color: #f3f4f6; }
  .pay-sub { font-size: 12.5px; color: #646e7e; margin-top: 2px; }
  .dark .pay-sub { color: #9ca3af; }

  .pay-banner { display: flex; gap: 12px; align-items: center; padding: 12px 20px; flex-wrap: wrap; }
  .pay-banner .bt { font-size: 13.5px; font-weight: 700; color: #1b2433; }
  .dark .pay-banner .bt { color: #f3f4f6; }
  .pay-banner .bs { font-size: 12px; color: #646e7e; margin-top: 1px; }
  .pay-banner.change { background: linear-gradient(180deg, #fff5f5, #fffbfb); }
  .pay-banner.unsched { background: linear-gradient(180deg, #f3f7ff, #fbfcff); }
  .pay-banner.overdue { background: linear-gradient(180deg, #fffaf0, #fffdfa); }
  .dark .pay-banner.change, .dark .pay-banner.unsched, .dark .pay-banner.overdue { background: rgba(55, 65, 81, 0.25); }
  .pay-bico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }

  .pay-cols { display: grid; grid-template-columns: 26px minmax(140px, 1fr) minmax(0, 104px) minmax(0, 98px) minmax(0, 116px) minmax(0, 104px) minmax(0, 120px); gap: 14px; align-items: center; padding: 9px 20px; background: #fcfcfd; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: #9aa3b2; }
  .dark .pay-cols { background: rgba(17, 24, 39, 0.2); }
  .pay-row { display: grid; grid-template-columns: 26px minmax(140px, 1fr) minmax(0, 104px) minmax(0, 98px) minmax(0, 116px) minmax(0, 104px) minmax(0, 120px); gap: 14px; align-items: center; padding: 12px 20px; cursor: pointer; }
  .pay-row:hover { background: #fcfdff; }
  .dark .pay-row:hover { background: rgba(55, 65, 81, 0.2); }
  .pay-row.paid { background: #fdfefd; }
  .pay-row.overdue { background: #fffbfb; }
  .dark .pay-row.paid, .dark .pay-row.overdue { background: transparent; }
  /* Was a @container query on .pay-col. A container context on a flex item
     is the one structural thing this layout had that the Proposal tab's
     working two-column layout does not, so it is gone; the column is
     roughly the viewport minus page padding once stacked, which puts 720px
     of column at about 784px of viewport. */
  @media (max-width: 784px) {
    .pay-cols { display: none; }
    .pay-row { grid-template-columns: 22px 1fr auto; }
    .pay-row .pay-due, .pay-row .pay-paid, .pay-row .pay-status, .pay-row .pay-acts { grid-column: 2 / -1; }
  }

  .pay-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
  .pay-dot.paid { background: #15803d; color: #fff; }
  .pay-dot.overdue { background: #b91c1c; color: #fff; }
  .pay-dot.sched { background: #edeff3; border: 1px solid #dfe3ea; }

  .pay-name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.15px; color: #1b2433; }
  .dark .pay-name { color: #f3f4f6; }
  .pay-subline { font-size: 11.5px; color: #9aa3b2; margin-top: 2px; }
  .pay-amt .was { display: block; font-size: 11px; color: #9aa3b2; text-decoration: line-through; font-weight: 500; }
  .pay-paid { font-size: 12.5px; font-weight: 550; color: #3a4456; }
  .dark .pay-paid { color: #d1d5db; }
  .pay-paid .how { display: block; font-size: 11px; color: #9aa3b2; font-weight: 500; margin-top: 1px; }
  .pay-status { font-size: 11.5px; font-weight: 700; }
  .pay-status.ok { color: #15803d; }
  .pay-status.bad { color: #b91c1c; }
  .pay-status.acc { color: var(--color-primary-600, #2f6ae0); }
  .pay-status.mut { color: #646e7e; }
  .pay-status .qual { display: block; font-size: 10.5px; font-weight: 500; color: #9aa3b2; margin-top: 1px; }
  .pay-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
  .pay-hero .pay-chip { margin-top: 4px; font-size: 11.5px; padding: 4px 10px; }
  .pay-hero-sub { font-size: 11.5px; color: #9aa3b2; margin-top: 2px; }
  .pay-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; background: #fcfcfd; border: 1px solid #edeff3; border-radius: 10px; padding: 13px 14px; }
  .dark .pay-facts { background: rgba(17, 24, 39, 0.2); border-color: rgba(55, 65, 81, 0.4); }
  .pay-facts .wide { grid-column: 1 / -1; }
  .pay-facts .l { display: block; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: #9aa3b2; margin-bottom: 2px; }
  .pay-facts .v { display: block; font-size: 13px; font-weight: 650; color: #1b2433; min-width: 0; overflow-wrap: break-word; }
  .dark .pay-facts .v { color: #f3f4f6; }
  .pay-facts .v .sub { display: block; font-size: 11px; font-weight: 500; color: #9aa3b2; margin-top: 1px; }
  @media (max-width: 700px) { .pay-facts { grid-template-columns: 1fr 1fr; } }
  .pay-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
  .pay-chip { font-size: 10.5px; font-weight: 650; border-radius: 6px; padding: 3px 8px; background: #edeff3; color: #646e7e; white-space: nowrap; }
  .pay-chip.ok { background: #f0fdf4; color: #15803d; }
  .pay-chip.bad { background: #fef2f2; color: #b91c1c; }
  .pay-chip.acc { background: #eef3fd; color: var(--color-primary-600, #2f6ae0); }
  .dark .pay-chip { background: rgba(75, 85, 99, 0.4); color: #d1d5db; }
  .dark .pay-chip.ok { background: rgba(21, 128, 61, 0.25); color: #86efac; }
  .dark .pay-chip.bad { background: rgba(185, 28, 28, 0.25); color: #fca5a5; }
  .dark .pay-chip.acc { background: rgba(55, 126, 249, 0.2); color: #93c5fd; }

  .pay-due { font-size: 12.5px; font-weight: 550; color: #3a4456; }
  .dark .pay-due { color: #d1d5db; }
  .pay-due .rel { color: #9aa3b2; }
  .pay-amt { font-size: 14.5px; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; color: #1b2433; }
  .dark .pay-amt { color: #f3f4f6; }
  .pay-acts { display: flex; gap: 6px; justify-content: flex-end; }

  .pay-line { position: relative; display: flex; gap: 10px; align-items: center; padding: 10px 20px 10px 46px; background: #fafbfc; }
  .dark .pay-line { background: rgba(17, 24, 39, 0.25); }
  .pay-line::before { content: ''; position: absolute; left: 32px; top: -1px; bottom: 50%; width: 9px; border-left: 1.5px solid #d8dde5; border-bottom: 1.5px solid #d8dde5; border-bottom-left-radius: 6px; }
  .pay-line.loose { padding-left: 20px; }
  .pay-line.loose::before { display: none; }
  .pay-lico { width: 24px; height: 24px; border-radius: 7px; background: #fff; border: 1px solid #e9ecf1; display: grid; place-items: center; flex-shrink: 0; color: #646e7e; }
  .pay-lmethod { font-size: 12.5px; font-weight: 700; color: #1b2433; }
  .dark .pay-lmethod { color: #f3f4f6; }
  .pay-lmeta { font-size: 11.5px; color: #9aa3b2; margin-top: 1px; }
  .pay-lamt { font-size: 13px; font-weight: 750; color: #15803d; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pay-lamt.muted { color: #9aa3b2; text-decoration: line-through; }

  .pay-btn { height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid #e9ecf1; background: #fff; color: #3a4456; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
  .pay-btn:hover { border-color: #d8dde5; }
  .dark .pay-btn { background: transparent; border-color: rgba(75, 85, 99, 0.6); color: #d1d5db; }
  .pay-btn.pri { background: var(--color-primary-500, #377EF9); border-color: var(--color-primary-500, #377EF9); color: #fff; }
  .pay-btn.lg { height: 34px; padding: 0 14px; font-size: 13px; }

  .pay-eyebrow { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; color: #9aa3b2; }
  .pay-big { font-size: 26px; font-weight: 750; letter-spacing: -0.8px; color: #1b2433; font-variant-numeric: tabular-nums; }
  .dark .pay-big { color: #f3f4f6; }
  .pay-track { height: 7px; border-radius: 99px; background: #edeff3; overflow: hidden; margin-top: 10px; }
  .pay-fill { height: 100%; background: #15803d; border-radius: 99px; transition: width 0.5s cubic-bezier(0.3, 0.8, 0.4, 1); }
  .pay-kv { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; }
  .pay-kv .k { color: #646e7e; }
  .pay-kv .v { font-weight: 650; font-variant-numeric: tabular-nums; color: #1b2433; }
  .dark .pay-kv .v { color: #f3f4f6; }
  .pay-railcard { background: #fff; border: 1px solid #e9ecf1; border-radius: 13px; padding: 16px 18px; }
  .dark .pay-railcard { background: #1f2937; border-color: rgba(55, 65, 81, 0.6); }
  .pay-railcard.baddue { border-color: #fecaca; background: #fffcfc; }
  .pay-ledsub { padding: 9px 20px 4px; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: #9aa3b2; }

/* ══ Extracted from embedded <style> blocks in the views (JC's rule) ══ */

/* ── from app/views/proposals/_sent_confirmation.html.erb ── */
@keyframes prop-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
  @keyframes prop-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
  .prop-sent-badge { animation: prop-pop 0.35s ease-out both; }
  .prop-sent-badge path { stroke-dasharray: 24; animation: prop-draw 0.4s ease-out 0.25s both; }
/* Extracted from embedded <style> blocks in the views (JC's rule:
   CSS belongs in a stylesheet the page links, not in the HTML).
   Required by the application.css manifest. */

/* ── from app/views/conversations/_ai_reminder_banner.html.erb ── */
@keyframes ai-reminder-banner-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

/* ── from app/views/conversations/_messages.html.erb ── */
/* Slide-in for live-broadcast messages only (_live_timeline_entry wrapper);
       initial page render never animates. */
    .msg-live-in {
      animation: msg-live-in 350ms cubic-bezier(0.21, 1.02, 0.73, 1) both;
    }
    @keyframes msg-live-in {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .msg-live-in { animation: none; }
    }

/* ── from app/views/conversations/index.html.erb ── */
@media (prefers-reduced-motion: reduce) {
    #rightSidebar { transition: none !important; }
  }

  /* Desktop collapse is driven by .js-sidebar-closed on <html> (set pre-paint
     from localStorage in the layout head, toggled by open/closeSidebarNow).
     The panel is in-flow, so margin-right collapses its slot and the messages
     column reflows with the slide — the old display swap snapped the layout
     18.5em the moment the fade ended. Visibility flips after the slide so the
     closed panel isn't tabbable, and immediately on open. Because the class is
     on <html> before first paint, a closed sidebar renders collapsed with no
     flash and no transition. */
  #rightSidebar {
    transition: margin-right 300ms ease-in-out, transform 300ms ease-in-out, visibility 0s;
  }
  @media (min-width: 768px) {
    .js-sidebar-closed #rightSidebar {
      margin-right: -18.5em; /* matches the inline width */
      visibility: hidden;
      transition: margin-right 300ms ease-in-out, transform 300ms ease-in-out, visibility 0s 300ms;
    }
  }

  /* Show open button when sidebar is closed (its own `hidden` class hides it otherwise) */
  .js-sidebar-closed #openSidebarBtn {
    display: inline-flex !important;
  }

  /* Mobile overrides */
  @media (max-width: 767px) {
    #filter-buttons-row {
      gap: 0.75rem; /* 12px on mobile vs 6px on desktop */
    }

    /* Full-screen overlay; .sidebar-hidden is the off-screen position it
       slides from/to (JS toggles display around the slide). */
    #rightSidebar.mobile-sidebar-open {
      display: block !important;
      position: fixed !important;
      inset: 0 !important;
      z-index: 50 !important;
      width: 100% !important;
      max-width: 100% !important;
      border-left: none !important;
    }

    #rightSidebar.sidebar-hidden {
      transform: translateX(100%);
    }
  }
/* Extracted from embedded <style> blocks in the views (JC's rule:
   CSS belongs in a stylesheet the page links, not in the HTML).
   Required by the application.css manifest. */

/* ── from app/views/marketing/funnels/index.html.erb ── */
.lp-funnel-row, .lp-funnel-row > td { cursor: pointer; }

/* ── from app/views/marketing/funnels/wireframes/_wireframe_shared.html.erb ── */
.wf { width: 100%; height: 100%; background: #fbfcfd; padding: 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 9px; }
  .wf-nav { display: flex; align-items: center; justify-content: space-between; }
  .wf-nav__brand { width: 28px; height: 6px; background: #cdd4de; border-radius: 3px; }
  .wf-nav__links { display: flex; gap: 5px; }
  .wf-nav__links span { width: 14px; height: 4px; background: #dfe4ea; border-radius: 3px; display: inline-block; }
  .wf-photo { border-radius: 6px; background: linear-gradient(135deg, #e7ebf1, #dde3ec); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .wf-photo svg { color: #b7c0cd; }
  .wf-cta { height: 11px; border-radius: 6px; background: #6366f1; }
  .wf-bar { background: #dde2e9; border-radius: 3px; }
  .wf-bar--lead { background: #c2c9d4; height: 7px; }
  .wf-bar--reg  { height: 5px; }
  .wf-bar--thin { height: 4px; }
  .wf-input { height: 11px; border-radius: 4px; background: #fff; border: 1px solid #e2e7ee; }
  .wf-stack { display: flex; flex-direction: column; gap: 5px; }
  .wf-lines { display: flex; flex-direction: column; gap: 4px; }
  .wf-row { display: flex; gap: 6px; }