/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: var(--font-sans);
    --font-mono: var(--font-mono);
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-red-950: oklch(25.8% .092 26.042);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-amber-950: oklch(27.9% .077 45.635);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-green-50: oklch(98.2% .018 155.826);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-green-300: oklch(87.1% .15 154.449);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-green-800: oklch(44.8% .119 151.328);
    --color-green-900: oklch(39.3% .095 152.535);
    --color-green-950: oklch(26.6% .065 152.934);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-emerald-800: oklch(43.2% .095 166.913);
    --color-emerald-950: oklch(26.2% .051 172.552);
    --color-cyan-300: oklch(86.5% .127 207.078);
    --color-cyan-500: oklch(71.5% .143 215.221);
    --color-cyan-600: oklch(60.9% .126 221.723);
    --color-sky-100: oklch(95.1% .026 236.824);
    --color-sky-200: oklch(90.1% .058 230.902);
    --color-sky-300: oklch(82.8% .111 230.318);
    --color-sky-500: oklch(68.5% .169 237.323);
    --color-sky-600: oklch(58.8% .158 241.966);
    --color-sky-700: oklch(50% .134 242.749);
    --color-sky-900: oklch(39.1% .09 240.876);
    --color-sky-950: oklch(29.3% .066 243.157);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-blue-950: oklch(28.2% .091 267.935);
    --color-indigo-50: oklch(96.2% .018 272.314);
    --color-indigo-100: oklch(93% .034 272.788);
    --color-indigo-200: oklch(87% .065 274.039);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-indigo-900: oklch(35.9% .144 278.697);
    --color-indigo-950: oklch(25.7% .09 281.288);
    --color-violet-100: oklch(94.3% .029 294.588);
    --color-violet-300: oklch(81.1% .111 293.571);
    --color-violet-400: oklch(70.2% .183 293.541);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-violet-600: oklch(54.1% .281 293.009);
    --color-violet-700: oklch(49.1% .27 292.581);
    --color-violet-800: oklch(43.2% .232 292.759);
    --color-violet-900: oklch(38% .189 293.745);
    --color-purple-50: oklch(97.7% .014 308.299);
    --color-purple-200: oklch(90.2% .063 306.703);
    --color-purple-300: oklch(82.7% .119 306.383);
    --color-purple-400: oklch(71.4% .203 305.504);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-purple-950: oklch(29.1% .149 302.717);
    --color-pink-300: oklch(82.3% .12 346.018);
    --color-pink-500: oklch(65.6% .241 354.308);
    --color-pink-600: oklch(59.2% .249 .584);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-slate-50: oklch(98.4% .003 247.858);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: oklch(21% .034 264.665);
    --color-zinc-200: oklch(92% .004 286.32);
    --color-zinc-300: oklch(87.1% .006 286.286);
    --color-zinc-900: oklch(21% .006 285.885);
    --color-zinc-950: oklch(14.1% .005 285.823);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --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-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-sm: calc(var(--radius) - 2px);
    --radius-md: var(--radius);
    --radius-lg: calc(var(--radius) + 4px);
    --radius-xl: calc(var(--radius) + 8px);
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-xs: 0 1px 2px 0 #0000000d;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --drop-shadow-xl: 0 9px 7px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.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 {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        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 {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: var(--border);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
  }

  #root {
    min-height: 100vh;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: none;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--border);
    background-clip: padding-box;
    border: 2px solid #0000;
    border-radius: 9999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--muted-foreground);
  }

  ::-webkit-scrollbar-corner {
    background: none;
  }
}

@layer components;

@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-4 {
    inset: calc(var(--spacing) * 4);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .-top-1 {
    top: calc(var(--spacing) * -1);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-6 {
    top: calc(var(--spacing) * 6);
  }

  .top-7 {
    top: calc(var(--spacing) * 7);
  }

  .top-9 {
    top: calc(var(--spacing) * 9);
  }

  .top-10 {
    top: calc(var(--spacing) * 10);
  }

  .top-\[20\%\] {
    top: 20%;
  }

  .top-\[50\%\] {
    top: 50%;
  }

  .top-\[calc\(100\%\+4px\)\] {
    top: calc(100% + 4px);
  }

  .top-full {
    top: 100%;
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-0\.5 {
    right: calc(var(--spacing) * .5);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-2\.5 {
    right: calc(var(--spacing) * 2.5);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-5 {
    right: calc(var(--spacing) * 5);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .right-8 {
    right: calc(var(--spacing) * 8);
  }

  .right-12 {
    right: calc(var(--spacing) * 12);
  }

  .right-full {
    right: 100%;
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }

  .bottom-1\.5 {
    bottom: calc(var(--spacing) * 1.5);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-full {
    bottom: 100%;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1 {
    left: calc(var(--spacing) * 1);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-2\.5 {
    left: calc(var(--spacing) * 2.5);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-\[4\.5rem\] {
    left: 4.5rem;
  }

  .left-\[50\%\] {
    left: 50%;
  }

  .left-full {
    left: 100%;
  }

  .z-0 {
    z-index: 0;
  }

  .z-1 {
    z-index: 1;
  }

  .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;
  }

  .z-60 {
    z-index: 60;
  }

  .z-100 {
    z-index: 100;
  }

  .z-9999 {
    z-index: 9999;
  }

  .z-\[1\] {
    z-index: 1;
  }

  .z-\[2\] {
    z-index: 2;
  }

  .z-\[60\] {
    z-index: 60;
  }

  .z-\[110\] {
    z-index: 110;
  }

  .z-\[1200\] {
    z-index: 1200;
  }

  .z-\[1300\] {
    z-index: 1300;
  }

  .z-\[1400\] {
    z-index: 1400;
  }

  .z-\[1500\] {
    z-index: 1500;
  }

  .z-\[9999\] {
    z-index: 9999;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-3 {
    grid-column: span 3 / span 3;
  }

  .col-span-9 {
    grid-column: span 9 / span 9;
  }

  .col-span-12 {
    grid-column: span 12 / span 12;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .m-0\.5 {
    margin: calc(var(--spacing) * .5);
  }

  .m-2 {
    margin: calc(var(--spacing) * 2);
  }

  .m-4 {
    margin: calc(var(--spacing) * 4);
  }

  .m-5 {
    margin: calc(var(--spacing) * 5);
  }

  .m-10 {
    margin: calc(var(--spacing) * 10);
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .-mx-3 {
    margin-inline: calc(var(--spacing) * -3);
  }

  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }

  .mx-0 {
    margin-inline: calc(var(--spacing) * 0);
  }

  .mx-0\.5 {
    margin-inline: calc(var(--spacing) * .5);
  }

  .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-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .-my-2 {
    margin-block: calc(var(--spacing) * -2);
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5);
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-1\.5 {
    margin-block: calc(var(--spacing) * 1.5);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }

  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }

  .-mt-0\.5 {
    margin-top: calc(var(--spacing) * -.5);
  }

  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }

  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }

  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-\[60px\] {
    margin-top: 60px;
  }

  .mt-auto {
    margin-top: auto;
  }

  .mt-px {
    margin-top: 1px;
  }

  .mr-0\.5 {
    margin-right: calc(var(--spacing) * .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-2\.5 {
    margin-right: calc(var(--spacing) * 2.5);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-5 {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8 {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-auto {
    margin-right: auto;
  }

  .-mb-px {
    margin-bottom: -1px;
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-3\.5 {
    margin-bottom: calc(var(--spacing) * 3.5);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .mb-px {
    margin-bottom: 1px;
  }

  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }

  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }

  .ml-0\.5 {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-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-5 {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-8 {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-11 {
    margin-left: calc(var(--spacing) * 11);
  }

  .ml-56 {
    margin-left: calc(var(--spacing) * 56);
  }

  .ml-\[4\.5rem\] {
    margin-left: 4.5rem;
  }

  .ml-auto {
    margin-left: auto;
  }

  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scrollbar-none::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }

  .\!h-3 {
    height: calc(var(--spacing) * 3) !important;
  }

  .h-\(--radix-select-trigger-height\) {
    height: var(--radix-select-trigger-height);
  }

  .h-0 {
    height: calc(var(--spacing) * 0);
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .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-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-5\.5 {
    height: calc(var(--spacing) * 5.5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-72 {
    height: calc(var(--spacing) * 72);
  }

  .h-80 {
    height: calc(var(--spacing) * 80);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

  .h-\[5px\] {
    height: 5px;
  }

  .h-\[11px\] {
    height: 11px;
  }

  .h-\[18px\] {
    height: 18px;
  }

  .h-\[20rem\] {
    height: 20rem;
  }

  .h-\[22px\] {
    height: 22px;
  }

  .h-\[30px\] {
    height: 30px;
  }

  .h-\[40px\] {
    height: 40px;
  }

  .h-\[50vh\] {
    height: 50vh;
  }

  .h-\[52px\] {
    height: 52px;
  }

  .h-\[75vh\] {
    height: 75vh;
  }

  .h-\[80vh\] {
    height: 80vh;
  }

  .h-\[92vh\] {
    height: 92vh;
  }

  .h-\[96vh\] {
    height: 96vh;
  }

  .h-\[300px\] {
    height: 300px;
  }

  .h-\[320px\] {
    height: 320px;
  }

  .h-\[450px\] {
    height: 450px;
  }

  .h-\[calc\(\.\.\.\)\] {
    height: calc(...);
  }

  .h-\[calc\(100vh-2\.5rem\)\] {
    height: calc(100vh - 2.5rem);
  }

  .h-\[calc\(100vh-2\.5rem-2rem\)\] {
    height: calc(100vh - 4.5rem);
  }

  .h-\[calc\(100vh-2rem\)\] {
    height: calc(100vh - 2rem);
  }

  .h-\[calc\(100vh-60px\)\] {
    height: calc(100vh - 60px);
  }

  .h-\[calc\(100vh-80px\)\] {
    height: calc(100vh - 80px);
  }

  .h-auto {
    height: auto;
  }

  .h-fit {
    height: fit-content;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .max-h-9 {
    max-height: calc(var(--spacing) * 9);
  }

  .max-h-20 {
    max-height: calc(var(--spacing) * 20);
  }

  .max-h-24 {
    max-height: calc(var(--spacing) * 24);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }

  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[40vh\] {
    max-height: 40vh;
  }

  .max-h-\[42vh\] {
    max-height: 42vh;
  }

  .max-h-\[45vh\] {
    max-height: 45vh;
  }

  .max-h-\[46vh\] {
    max-height: 46vh;
  }

  .max-h-\[55vh\] {
    max-height: 55vh;
  }

  .max-h-\[60vh\] {
    max-height: 60vh;
  }

  .max-h-\[65vh\] {
    max-height: 65vh;
  }

  .max-h-\[70vh\] {
    max-height: 70vh;
  }

  .max-h-\[78vh\] {
    max-height: 78vh;
  }

  .max-h-\[80vh\] {
    max-height: 80vh;
  }

  .max-h-\[85vh\] {
    max-height: 85vh;
  }

  .max-h-\[88vh\] {
    max-height: 88vh;
  }

  .max-h-\[90vh\] {
    max-height: 90vh;
  }

  .max-h-\[92vh\] {
    max-height: 92vh;
  }

  .max-h-\[96vh\] {
    max-height: 96vh;
  }

  .max-h-\[120px\] {
    max-height: 120px;
  }

  .max-h-\[150px\] {
    max-height: 150px;
  }

  .max-h-\[200px\] {
    max-height: 200px;
  }

  .max-h-\[280px\] {
    max-height: 280px;
  }

  .max-h-\[300px\] {
    max-height: 300px;
  }

  .max-h-\[340px\] {
    max-height: 340px;
  }

  .max-h-\[360px\] {
    max-height: 360px;
  }

  .max-h-\[380px\] {
    max-height: 380px;
  }

  .max-h-\[400px\] {
    max-height: 400px;
  }

  .max-h-\[420px\] {
    max-height: 420px;
  }

  .max-h-\[440px\] {
    max-height: 440px;
  }

  .max-h-\[500px\] {
    max-height: 500px;
  }

  .max-h-\[520px\] {
    max-height: 520px;
  }

  .max-h-\[540px\] {
    max-height: 540px;
  }

  .max-h-\[600px\] {
    max-height: 600px;
  }

  .max-h-\[calc\(100vh-8rem\)\] {
    max-height: calc(100vh - 8rem);
  }

  .max-h-full {
    max-height: 100%;
  }

  .max-h-none {
    max-height: none;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }

  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }

  .min-h-30 {
    min-height: calc(var(--spacing) * 30);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-75 {
    min-height: calc(var(--spacing) * 75);
  }

  .min-h-80 {
    min-height: calc(var(--spacing) * 80);
  }

  .min-h-\[2\.2rem\] {
    min-height: 2.2rem;
  }

  .min-h-\[2\.5rem\] {
    min-height: 2.5rem;
  }

  .min-h-\[3\.5rem\] {
    min-height: 3.5rem;
  }

  .min-h-\[3rem\] {
    min-height: 3rem;
  }

  .min-h-\[20px\] {
    min-height: 20px;
  }

  .min-h-\[40px\] {
    min-height: 40px;
  }

  .min-h-\[48px\] {
    min-height: 48px;
  }

  .min-h-\[50px\] {
    min-height: 50px;
  }

  .min-h-\[50vh\] {
    min-height: 50vh;
  }

  .min-h-\[60px\] {
    min-height: 60px;
  }

  .min-h-\[60vh\] {
    min-height: 60vh;
  }

  .min-h-\[70px\] {
    min-height: 70px;
  }

  .min-h-\[80px\] {
    min-height: 80px;
  }

  .min-h-\[90px\] {
    min-height: 90px;
  }

  .min-h-\[92vh\] {
    min-height: 92vh;
  }

  .min-h-\[96px\] {
    min-height: 96px;
  }

  .min-h-\[100px\] {
    min-height: 100px;
  }

  .min-h-\[120px\] {
    min-height: 120px;
  }

  .min-h-\[130px\] {
    min-height: 130px;
  }

  .min-h-\[160px\] {
    min-height: 160px;
  }

  .min-h-\[180px\] {
    min-height: 180px;
  }

  .min-h-\[200px\] {
    min-height: 200px;
  }

  .min-h-\[220px\] {
    min-height: 220px;
  }

  .min-h-\[280px\] {
    min-height: 280px;
  }

  .min-h-\[300px\] {
    min-height: 300px;
  }

  .min-h-\[320px\] {
    min-height: 320px;
  }

  .min-h-\[500px\] {
    min-height: 500px;
  }

  .min-h-\[560px\] {
    min-height: 560px;
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .\!w-3 {
    width: calc(var(--spacing) * 3) !important;
  }

  .w-\(--radix-popover-trigger-width\) {
    width: var(--radix-popover-trigger-width);
  }

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

  .w-0\.5 {
    width: calc(var(--spacing) * .5);
  }

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

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-1\/4 {
    width: 25%;
  }

  .w-1\/5 {
    width: 20%;
  }

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

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-2\/5 {
    width: 40%;
  }

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

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-3\/5 {
    width: 60%;
  }

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

  .w-4\.5 {
    width: calc(var(--spacing) * 4.5);
  }

  .w-4\/5 {
    width: 80%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .w-37\.5 {
    width: calc(var(--spacing) * 37.5);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .w-\[4\.5rem\] {
    width: 4.5rem;
  }

  .w-\[10\%\] {
    width: 10%;
  }

  .w-\[11px\] {
    width: 11px;
  }

  .w-\[15\%\] {
    width: 15%;
  }

  .w-\[18px\] {
    width: 18px;
  }

  .w-\[20\%\] {
    width: 20%;
  }

  .w-\[20rem\] {
    width: 20rem;
  }

  .w-\[22\%\] {
    width: 22%;
  }

  .w-\[22px\] {
    width: 22px;
  }

  .w-\[25\%\] {
    width: 25%;
  }

  .w-\[30\%\] {
    width: 30%;
  }

  .w-\[30px\] {
    width: 30px;
  }

  .w-\[40\%\] {
    width: 40%;
  }

  .w-\[52px\] {
    width: 52px;
  }

  .w-\[60\%\] {
    width: 60%;
  }

  .w-\[60px\] {
    width: 60px;
  }

  .w-\[60vw\] {
    width: 60vw;
  }

  .w-\[70px\] {
    width: 70px;
  }

  .w-\[70vw\] {
    width: 70vw;
  }

  .w-\[72px\] {
    width: 72px;
  }

  .w-\[80px\] {
    width: 80px;
  }

  .w-\[80vw\] {
    width: 80vw;
  }

  .w-\[90\%\] {
    width: 90%;
  }

  .w-\[90px\] {
    width: 90px;
  }

  .w-\[90vw\] {
    width: 90vw;
  }

  .w-\[92\%\] {
    width: 92%;
  }

  .w-\[92vw\] {
    width: 92vw;
  }

  .w-\[95vw\] {
    width: 95vw;
  }

  .w-\[96vw\] {
    width: 96vw;
  }

  .w-\[100px\] {
    width: 100px;
  }

  .w-\[110px\] {
    width: 110px;
  }

  .w-\[120px\] {
    width: 120px;
  }

  .w-\[130px\] {
    width: 130px;
  }

  .w-\[140px\] {
    width: 140px;
  }

  .w-\[150px\] {
    width: 150px;
  }

  .w-\[160px\] {
    width: 160px;
  }

  .w-\[200px\] {
    width: 200px;
  }

  .w-\[220px\] {
    width: 220px;
  }

  .w-\[240px\] {
    width: 240px;
  }

  .w-\[250px\] {
    width: 250px;
  }

  .w-\[260px\] {
    width: 260px;
  }

  .w-\[280px\] {
    width: 280px;
  }

  .w-\[300px\] {
    width: 300px;
  }

  .w-\[320px\] {
    width: 320px;
  }

  .w-\[350px\] {
    width: 350px;
  }

  .w-\[360px\] {
    width: 360px;
  }

  .w-\[380px\] {
    width: 380px;
  }

  .w-\[420px\] {
    width: 420px;
  }

  .w-\[480px\] {
    width: 480px;
  }

  .w-\[640px\] {
    width: 640px;
  }

  .w-\[min\(960px\,95vw\)\] {
    width: min(960px, 95vw);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .w-px {
    width: 1px;
  }

  .w-screen {
    width: 100vw;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-28 {
    max-width: calc(var(--spacing) * 28);
  }

  .max-w-60 {
    max-width: calc(var(--spacing) * 60);
  }

  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }

  .max-w-75 {
    max-width: calc(var(--spacing) * 75);
  }

  .max-w-120 {
    max-width: calc(var(--spacing) * 120);
  }

  .max-w-160 {
    max-width: calc(var(--spacing) * 160);
  }

  .max-w-\[30rem\] {
    max-width: 30rem;
  }

  .max-w-\[50vw\] {
    max-width: 50vw;
  }

  .max-w-\[60vw\] {
    max-width: 60vw;
  }

  .max-w-\[70vw\] {
    max-width: 70vw;
  }

  .max-w-\[80px\] {
    max-width: 80px;
  }

  .max-w-\[80vw\] {
    max-width: 80vw;
  }

  .max-w-\[85\%\] {
    max-width: 85%;
  }

  .max-w-\[92vw\] {
    max-width: 92vw;
  }

  .max-w-\[95vw\] {
    max-width: 95vw;
  }

  .max-w-\[96vw\] {
    max-width: 96vw;
  }

  .max-w-\[100px\] {
    max-width: 100px;
  }

  .max-w-\[120px\] {
    max-width: 120px;
  }

  .max-w-\[150px\] {
    max-width: 150px;
  }

  .max-w-\[160px\] {
    max-width: 160px;
  }

  .max-w-\[200px\] {
    max-width: 200px;
  }

  .max-w-\[240px\] {
    max-width: 240px;
  }

  .max-w-\[260px\] {
    max-width: 260px;
  }

  .max-w-\[280px\] {
    max-width: 280px;
  }

  .max-w-\[300px\] {
    max-width: 300px;
  }

  .max-w-\[320px\] {
    max-width: 320px;
  }

  .max-w-\[360px\] {
    max-width: 360px;
  }

  .max-w-\[375px\] {
    max-width: 375px;
  }

  .max-w-\[400px\] {
    max-width: 400px;
  }

  .max-w-\[420px\] {
    max-width: 420px;
  }

  .max-w-\[440px\] {
    max-width: 440px;
  }

  .max-w-\[480px\] {
    max-width: 480px;
  }

  .max-w-\[520px\] {
    max-width: 520px;
  }

  .max-w-\[540px\] {
    max-width: 540px;
  }

  .max-w-\[550px\] {
    max-width: 550px;
  }

  .max-w-\[560px\] {
    max-width: 560px;
  }

  .max-w-\[600px\] {
    max-width: 600px;
  }

  .max-w-\[700px\] {
    max-width: 700px;
  }

  .max-w-\[750px\] {
    max-width: 750px;
  }

  .max-w-\[800px\] {
    max-width: 800px;
  }

  .max-w-\[840px\] {
    max-width: 840px;
  }

  .max-w-\[860px\] {
    max-width: 860px;
  }

  .max-w-\[880px\] {
    max-width: 880px;
  }

  .max-w-\[900px\] {
    max-width: 900px;
  }

  .max-w-\[1000px\] {
    max-width: 1000px;
  }

  .max-w-\[1100px\] {
    max-width: 1100px;
  }

  .max-w-\[1200px\] {
    max-width: 1200px;
  }

  .max-w-\[1300px\] {
    max-width: 1300px;
  }

  .max-w-\[1400px\] {
    max-width: 1400px;
  }

  .max-w-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem);
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-\(--radix-select-trigger-width\) {
    min-width: var(--radix-select-trigger-width);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-4 {
    min-width: calc(var(--spacing) * 4);
  }

  .min-w-6 {
    min-width: calc(var(--spacing) * 6);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-10\.5 {
    min-width: calc(var(--spacing) * 10.5);
  }

  .min-w-24 {
    min-width: calc(var(--spacing) * 24);
  }

  .min-w-37\.5 {
    min-width: calc(var(--spacing) * 37.5);
  }

  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }

  .min-w-44 {
    min-width: calc(var(--spacing) * 44);
  }

  .min-w-48 {
    min-width: calc(var(--spacing) * 48);
  }

  .min-w-55 {
    min-width: calc(var(--spacing) * 55);
  }

  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }

  .min-w-60 {
    min-width: calc(var(--spacing) * 60);
  }

  .min-w-64 {
    min-width: calc(var(--spacing) * 64);
  }

  .min-w-80 {
    min-width: calc(var(--spacing) * 80);
  }

  .min-w-\[3rem\] {
    min-width: 3rem;
  }

  .min-w-\[7rem\] {
    min-width: 7rem;
  }

  .min-w-\[8rem\] {
    min-width: 8rem;
  }

  .min-w-\[10rem\] {
    min-width: 10rem;
  }

  .min-w-\[15rem\] {
    min-width: 15rem;
  }

  .min-w-\[18px\] {
    min-width: 18px;
  }

  .min-w-\[20rem\] {
    min-width: 20rem;
  }

  .min-w-\[30px\] {
    min-width: 30px;
  }

  .min-w-\[32px\] {
    min-width: 32px;
  }

  .min-w-\[34px\] {
    min-width: 34px;
  }

  .min-w-\[35px\] {
    min-width: 35px;
  }

  .min-w-\[40px\] {
    min-width: 40px;
  }

  .min-w-\[50px\] {
    min-width: 50px;
  }

  .min-w-\[60px\] {
    min-width: 60px;
  }

  .min-w-\[68px\] {
    min-width: 68px;
  }

  .min-w-\[70px\] {
    min-width: 70px;
  }

  .min-w-\[80px\] {
    min-width: 80px;
  }

  .min-w-\[90px\] {
    min-width: 90px;
  }

  .min-w-\[100px\] {
    min-width: 100px;
  }

  .min-w-\[120px\] {
    min-width: 120px;
  }

  .min-w-\[130px\] {
    min-width: 130px;
  }

  .min-w-\[140px\] {
    min-width: 140px;
  }

  .min-w-\[150px\] {
    min-width: 150px;
  }

  .min-w-\[160px\] {
    min-width: 160px;
  }

  .min-w-\[170px\] {
    min-width: 170px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .min-w-\[210px\] {
    min-width: 210px;
  }

  .min-w-\[220px\] {
    min-width: 220px;
  }

  .min-w-\[230px\] {
    min-width: 230px;
  }

  .min-w-\[240px\] {
    min-width: 240px;
  }

  .min-w-\[250px\] {
    min-width: 250px;
  }

  .min-w-\[260px\] {
    min-width: 260px;
  }

  .min-w-\[300px\] {
    min-width: 300px;
  }

  .min-w-\[320px\] {
    min-width: 320px;
  }

  .min-w-\[340px\] {
    min-width: 340px;
  }

  .min-w-\[900px\] {
    min-width: 900px;
  }

  .min-w-full {
    min-width: 100%;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-\[0_1_auto\] {
    flex: 0 auto;
  }

  .flex-\[2\] {
    flex: 2;
  }

  .flex-\[3\] {
    flex: 3;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .table-fixed {
    table-layout: fixed;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .border-separate {
    border-collapse: separate;
  }

  .border-spacing-0 {
    --tw-border-spacing-x: calc(var(--spacing) * 0);
    --tw-border-spacing-y: calc(var(--spacing) * 0);
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    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-0\.5 {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-\[1\.01\] {
    scale: 1.01;
  }

  .scale-\[1\.005\] {
    scale: 1.005;
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-0 {
    rotate: 0deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-\[slideIn_0\.2s_ease-out\] {
    animation: .2s ease-out slideIn;
  }

  .animate-bounce {
    animation: var(--animate-bounce);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-col-resize {
    cursor: col-resize;
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-ew-resize {
    cursor: ew-resize;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-help {
    cursor: help;
  }

  .cursor-move {
    cursor: move;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-row-resize {
    cursor: row-resize;
  }

  .cursor-text {
    cursor: text;
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .resize-y {
    resize: vertical;
  }

  .scrollbar-none {
    scrollbar-width: none;
  }

  .list-disc {
    list-style-type: disc;
  }

  .list-none {
    list-style-type: none;
  }

  .\[appearance\:textfield\] {
    appearance: textfield;
  }

  .appearance-none {
    appearance: none;
  }

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

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

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

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

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

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

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

  .grid-cols-\[1fr_1fr_1fr_auto\] {
    grid-template-columns: 1fr 1fr 1fr auto;
  }

  .grid-cols-\[32px_70px_70px_180px_1fr_32px\] {
    grid-template-columns: 32px 70px 70px 180px 1fr 32px;
  }

  .grid-cols-\[max-content_1fr\] {
    grid-template-columns: max-content 1fr;
  }

  .grid-cols-\[minmax\(320px\,1\.6fr\)_minmax\(260px\,1fr\)_minmax\(240px\,1fr\)\] {
    grid-template-columns: minmax(320px, 1.6fr) minmax(260px, 1fr) minmax(240px, 1fr);
  }

  .grid-cols-\[repeat\(auto-fit\,minmax\(260px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .grid-cols-\[repeat\(auto-fit\,minmax\(320px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  .grid-rows-\[auto_1fr_auto\] {
    grid-template-rows: auto 1fr auto;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

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

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-baseline {
    align-items: baseline;
  }

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

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

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

  .items-stretch {
    align-items: stretch;
  }

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

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

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

  .justify-start {
    justify-content: flex-start;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  :where(.space-y-0 > :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)));
  }

  :where(.space-y-0\.5 > :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)));
  }

  :where(.space-y-1 > :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)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :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)));
  }

  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :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)));
  }

  :where(.space-y-3\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :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)));
  }

  :where(.space-y-5 > :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)));
  }

  :where(.space-y-6 > :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)));
  }

  :where(.space-y-8 > :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)));
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  :where(.space-x-1 > :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)));
  }

  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }

  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }

  :where(.divide-y > :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)));
  }

  :where(.divide-\[var\(--ta-border\)\] > :not(:last-child)) {
    border-color: var(--ta-border);
  }

  :where(.divide-border > :not(:last-child)) {
    border-color: var(--border);
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

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

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

  .rounded-\[3px\] {
    border-radius: 3px;
  }

  .rounded-\[5px\] {
    border-radius: 5px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[14px\] {
    border-radius: 14px;
  }

  .rounded-\[18px\] {
    border-radius: 18px;
  }

  .rounded-\[inherit\] {
    border-radius: inherit;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: calc(var(--radius) + 4px);
  }

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

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

  .rounded-sm {
    border-radius: calc(var(--radius) - 2px);
  }

  .rounded-xl {
    border-radius: calc(var(--radius) + 8px);
  }

  .rounded-t {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
  }

  .rounded-t-lg {
    border-top-left-radius: calc(var(--radius) + 4px);
    border-top-right-radius: calc(var(--radius) + 4px);
  }

  .rounded-t-md {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }

  .rounded-l {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
  }

  .rounded-l-md {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
  }

  .rounded-l-xl {
    border-top-left-radius: calc(var(--radius) + 8px);
    border-bottom-left-radius: calc(var(--radius) + 8px);
  }

  .rounded-r {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
  }

  .rounded-r-full {
    border-top-right-radius: 3.40282e38px;
    border-bottom-right-radius: 3.40282e38px;
  }

  .rounded-r-lg {
    border-top-right-radius: calc(var(--radius) + 4px);
    border-bottom-right-radius: calc(var(--radius) + 4px);
  }

  .rounded-r-md {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }

  .rounded-b-2xl {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }

  .rounded-b-lg {
    border-bottom-right-radius: calc(var(--radius) + 4px);
    border-bottom-left-radius: calc(var(--radius) + 4px);
  }

  .\!border-2 {
    border-style: var(--tw-border-style) !important;
    border-width: 2px !important;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-\[5px\] {
    border-style: var(--tw-border-style);
    border-width: 5px;
  }

  .border-x-0 {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 0;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-dotted {
    --tw-border-style: dotted;
    border-style: dotted;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .\!border-\[var\(--ta-danger\)\]\/60 {
    border-color: var(--ta-danger) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!border-\[var\(--ta-danger\)\]\/60 {
      border-color: color-mix(in oklab, var(--ta-danger) 60%, transparent) !important;
    }
  }

  .\!border-background {
    border-color: var(--background) !important;
  }

  .border-\(--navy-800\) {
    border-color: var(--navy-800);
  }

  .border-\[\#1b7a3e\] {
    border-color: #1b7a3e;
  }

  .border-\[\#0077b5\]\/40 {
    border-color: oklab(54.5803% -.0605667 -.115234 / .4);
  }

  .border-\[\#075194\] {
    border-color: #075194;
  }

  .border-\[\#f57c1f\] {
    border-color: #f57c1f;
  }

  .border-\[\#ff0000\]\/40 {
    border-color: oklab(62.7955% .224863 .125846 / .4);
  }

  .border-\[var\(--ta-border\)\], .border-\[var\(--ta-border\)\]\/40 {
    border-color: var(--ta-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-border\)\]\/40 {
      border-color: color-mix(in oklab, var(--ta-border) 40%, transparent);
    }
  }

  .border-\[var\(--ta-border\)\]\/50 {
    border-color: var(--ta-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-border\)\]\/50 {
      border-color: color-mix(in oklab, var(--ta-border) 50%, transparent);
    }
  }

  .border-\[var\(--ta-border\)\]\/60 {
    border-color: var(--ta-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-border\)\]\/60 {
      border-color: color-mix(in oklab, var(--ta-border) 60%, transparent);
    }
  }

  .border-\[var\(--ta-border-strong\)\] {
    border-color: var(--ta-border-strong);
  }

  .border-\[var\(--ta-danger\)\], .border-\[var\(--ta-danger\)\]\/20 {
    border-color: var(--ta-danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-danger\)\]\/20 {
      border-color: color-mix(in oklab, var(--ta-danger) 20%, transparent);
    }
  }

  .border-\[var\(--ta-danger\)\]\/30 {
    border-color: var(--ta-danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-danger\)\]\/30 {
      border-color: color-mix(in oklab, var(--ta-danger) 30%, transparent);
    }
  }

  .border-\[var\(--ta-danger\)\]\/40 {
    border-color: var(--ta-danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-danger\)\]\/40 {
      border-color: color-mix(in oklab, var(--ta-danger) 40%, transparent);
    }
  }

  .border-\[var\(--ta-primary\)\]\/20 {
    border-color: var(--ta-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-primary\)\]\/20 {
      border-color: color-mix(in oklab, var(--ta-primary) 20%, transparent);
    }
  }

  .border-\[var\(--ta-primary\)\]\/30 {
    border-color: var(--ta-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-primary\)\]\/30 {
      border-color: color-mix(in oklab, var(--ta-primary) 30%, transparent);
    }
  }

  .border-\[var\(--ta-primary\)\]\/40 {
    border-color: var(--ta-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-primary\)\]\/40 {
      border-color: color-mix(in oklab, var(--ta-primary) 40%, transparent);
    }
  }

  .border-\[var\(--ta-primary\)\]\/50 {
    border-color: var(--ta-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-primary\)\]\/50 {
      border-color: color-mix(in oklab, var(--ta-primary) 50%, transparent);
    }
  }

  .border-\[var\(--ta-success\)\]\/20 {
    border-color: var(--ta-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-success\)\]\/20 {
      border-color: color-mix(in oklab, var(--ta-success) 20%, transparent);
    }
  }

  .border-\[var\(--ta-success\)\]\/30 {
    border-color: var(--ta-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-success\)\]\/30 {
      border-color: color-mix(in oklab, var(--ta-success) 30%, transparent);
    }
  }

  .border-\[var\(--ta-warning\)\]\/20 {
    border-color: var(--ta-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-warning\)\]\/20 {
      border-color: color-mix(in oklab, var(--ta-warning) 20%, transparent);
    }
  }

  .border-\[var\(--ta-warning\)\]\/30 {
    border-color: var(--ta-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-warning\)\]\/30 {
      border-color: color-mix(in oklab, var(--ta-warning) 30%, transparent);
    }
  }

  .border-\[var\(--ta-warning\)\]\/40 {
    border-color: var(--ta-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--ta-warning\)\]\/40 {
      border-color: color-mix(in oklab, var(--ta-warning) 40%, transparent);
    }
  }

  .border-amber-200 {
    border-color: var(--color-amber-200);
  }

  .border-amber-400 {
    border-color: var(--color-amber-400);
  }

  .border-amber-500\/30 {
    border-color: #f99c004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/30 {
      border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
    }
  }

  .border-amber-500\/40 {
    border-color: #f99c0066;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/40 {
      border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
    }
  }

  .border-amber-600\/40 {
    border-color: #dd740066;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-600\/40 {
      border-color: color-mix(in oklab, var(--color-amber-600) 40%, transparent);
    }
  }

  .border-background\/40 {
    border-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-background\/40 {
      border-color: color-mix(in oklab, var(--background) 40%, transparent);
    }
  }

  .border-blue-100 {
    border-color: var(--color-blue-100);
  }

  .border-blue-200 {
    border-color: var(--color-blue-200);
  }

  .border-blue-300 {
    border-color: var(--color-blue-300);
  }

  .border-blue-500\/30 {
    border-color: #3080ff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-500\/30 {
      border-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
    }
  }

  .border-blue-600 {
    border-color: var(--color-blue-600);
  }

  .border-blue-600\/40 {
    border-color: #155dfc66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-600\/40 {
      border-color: color-mix(in oklab, var(--color-blue-600) 40%, transparent);
    }
  }

  .border-border, .border-border\/50 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/50 {
      border-color: color-mix(in oklab, var(--border) 50%, transparent);
    }
  }

  .border-border\/60 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/60 {
      border-color: color-mix(in oklab, var(--border) 60%, transparent);
    }
  }

  .border-current\/20 {
    border-color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-current\/20 {
      border-color: color-mix(in oklab, currentcolor 20%, transparent);
    }
  }

  .border-cyan-500\/30 {
    border-color: #00b7d74d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-cyan-500\/30 {
      border-color: color-mix(in oklab, var(--color-cyan-500) 30%, transparent);
    }
  }

  .border-destructive, .border-destructive\/20 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/20 {
      border-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .border-destructive\/30 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/30 {
      border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
    }
  }

  .border-destructive\/40 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/40 {
      border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .border-destructive\/50 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/50 {
      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
    }
  }

  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }

  .border-emerald-500\/30 {
    border-color: #00bb7f4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/30 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
    }
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-green-200 {
    border-color: var(--color-green-200);
  }

  .border-green-300 {
    border-color: var(--color-green-300);
  }

  .border-green-600\/40 {
    border-color: #00a54466;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-600\/40 {
      border-color: color-mix(in oklab, var(--color-green-600) 40%, transparent);
    }
  }

  .border-indigo-200 {
    border-color: var(--color-indigo-200);
  }

  .border-input {
    border-color: var(--input);
  }

  .border-muted-foreground {
    border-color: var(--muted-foreground);
  }

  .border-pink-500\/30 {
    border-color: #f6339a4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-pink-500\/30 {
      border-color: color-mix(in oklab, var(--color-pink-500) 30%, transparent);
    }
  }

  .border-primary, .border-primary\/20 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/20 {
      border-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .border-primary\/30 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/30 {
      border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .border-primary\/40 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/40 {
      border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

  .border-primary\/60 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/60 {
      border-color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

  .border-purple-300 {
    border-color: var(--color-purple-300);
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-red-300 {
    border-color: var(--color-red-300);
  }

  .border-red-500 {
    border-color: var(--color-red-500);
  }

  .border-red-500\/30 {
    border-color: #fb2c364d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/30 {
      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
  }

  .border-red-600\/40 {
    border-color: #e4001466;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-600\/40 {
      border-color: color-mix(in oklab, var(--color-red-600) 40%, transparent);
    }
  }

  .border-sky-200 {
    border-color: var(--color-sky-200);
  }

  .border-slate-700 {
    border-color: var(--color-slate-700);
  }

  .border-success, .border-success\/20 {
    border-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-success\/20 {
      border-color: color-mix(in oklab, var(--success) 20%, transparent);
    }
  }

  .border-success\/30 {
    border-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-success\/30 {
      border-color: color-mix(in oklab, var(--success) 30%, transparent);
    }
  }

  .border-success\/40 {
    border-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-success\/40 {
      border-color: color-mix(in oklab, var(--success) 40%, transparent);
    }
  }

  .border-success\/50 {
    border-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-success\/50 {
      border-color: color-mix(in oklab, var(--success) 50%, transparent);
    }
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-violet-500\/30 {
    border-color: #8d54ff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-violet-500\/30 {
      border-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent);
    }
  }

  .border-warning, .border-warning\/20 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/20 {
      border-color: color-mix(in oklab, var(--warning) 20%, transparent);
    }
  }

  .border-warning\/30 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/30 {
      border-color: color-mix(in oklab, var(--warning) 30%, transparent);
    }
  }

  .border-warning\/40 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/40 {
      border-color: color-mix(in oklab, var(--warning) 40%, transparent);
    }
  }

  .border-warning\/50 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/50 {
      border-color: color-mix(in oklab, var(--warning) 50%, transparent);
    }
  }

  .border-white\/20 {
    border-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .border-white\/30 {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .border-x-transparent {
    border-inline-color: #0000;
  }

  .border-y-transparent {
    border-block-color: #0000;
  }

  .border-t-\[var\(--ta-surface-2\)\] {
    border-top-color: var(--ta-surface-2);
  }

  .border-t-blue-500 {
    border-top-color: var(--color-blue-500);
  }

  .border-t-popover {
    border-top-color: var(--popover);
  }

  .border-t-primary {
    border-top-color: var(--primary);
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-t-white {
    border-top-color: var(--color-white);
  }

  .border-r-\[var\(--ta-surface-2\)\] {
    border-right-color: var(--ta-surface-2);
  }

  .border-r-popover {
    border-right-color: var(--popover);
  }

  .border-r-transparent {
    border-right-color: #0000;
  }

  .border-b-\[var\(--ta-surface-2\)\] {
    border-bottom-color: var(--ta-surface-2);
  }

  .border-b-popover {
    border-bottom-color: var(--popover);
  }

  .border-b-transparent {
    border-bottom-color: #0000;
  }

  .border-l-\[var\(--ta-surface-2\)\] {
    border-left-color: var(--ta-surface-2);
  }

  .border-l-amber-500 {
    border-left-color: var(--color-amber-500);
  }

  .border-l-blue-500 {
    border-left-color: var(--color-blue-500);
  }

  .border-l-blue-600 {
    border-left-color: var(--color-blue-600);
  }

  .border-l-border {
    border-left-color: var(--border);
  }

  .border-l-destructive {
    border-left-color: var(--destructive);
  }

  .border-l-emerald-500 {
    border-left-color: var(--color-emerald-500);
  }

  .border-l-green-600 {
    border-left-color: var(--color-green-600);
  }

  .border-l-orange-500 {
    border-left-color: var(--color-orange-500);
  }

  .border-l-popover {
    border-left-color: var(--popover);
  }

  .border-l-primary {
    border-left-color: var(--primary);
  }

  .border-l-red-500 {
    border-left-color: var(--color-red-500);
  }

  .border-l-success {
    border-left-color: var(--success);
  }

  .border-l-transparent {
    border-left-color: #0000;
  }

  .border-l-warning {
    border-left-color: var(--warning);
  }

  .\!bg-primary {
    background-color: var(--primary) !important;
  }

  .bg-\(--navy-800\) {
    background-color: var(--navy-800);
  }

  .bg-\(--navy-900\) {
    background-color: var(--navy-900);
  }

  .bg-\[\#1b7a3e\] {
    background-color: #1b7a3e;
  }

  .bg-\[\#075194\] {
    background-color: #075194;
  }

  .bg-\[\#f57c1f\] {
    background-color: #f57c1f;
  }

  .bg-\[var\(--gold-500\)\] {
    background-color: var(--gold-500);
  }

  .bg-\[var\(--success\)\] {
    background-color: var(--success);
  }

  .bg-\[var\(--ta-bg\)\], .bg-\[var\(--ta-bg\)\]\/60 {
    background-color: var(--ta-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-bg\)\]\/60 {
      background-color: color-mix(in oklab, var(--ta-bg) 60%, transparent);
    }
  }

  .bg-\[var\(--ta-bg\)\]\/80 {
    background-color: var(--ta-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-bg\)\]\/80 {
      background-color: color-mix(in oklab, var(--ta-bg) 80%, transparent);
    }
  }

  .bg-\[var\(--ta-danger\)\], .bg-\[var\(--ta-danger\)\]\/10 {
    background-color: var(--ta-danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-danger\)\]\/10 {
      background-color: color-mix(in oklab, var(--ta-danger) 10%, transparent);
    }
  }

  .bg-\[var\(--ta-danger\)\]\/15 {
    background-color: var(--ta-danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-danger\)\]\/15 {
      background-color: color-mix(in oklab, var(--ta-danger) 15%, transparent);
    }
  }

  .bg-\[var\(--ta-danger\)\]\/40 {
    background-color: var(--ta-danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-danger\)\]\/40 {
      background-color: color-mix(in oklab, var(--ta-danger) 40%, transparent);
    }
  }

  .bg-\[var\(--ta-muted\)\] {
    background-color: var(--ta-muted);
  }

  .bg-\[var\(--ta-primary\)\], .bg-\[var\(--ta-primary\)\]\/5 {
    background-color: var(--ta-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-primary\)\]\/5 {
      background-color: color-mix(in oklab, var(--ta-primary) 5%, transparent);
    }
  }

  .bg-\[var\(--ta-primary\)\]\/10 {
    background-color: var(--ta-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-primary\)\]\/10 {
      background-color: color-mix(in oklab, var(--ta-primary) 10%, transparent);
    }
  }

  .bg-\[var\(--ta-primary\)\]\/15 {
    background-color: var(--ta-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-primary\)\]\/15 {
      background-color: color-mix(in oklab, var(--ta-primary) 15%, transparent);
    }
  }

  .bg-\[var\(--ta-primary\)\]\/20 {
    background-color: var(--ta-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-primary\)\]\/20 {
      background-color: color-mix(in oklab, var(--ta-primary) 20%, transparent);
    }
  }

  .bg-\[var\(--ta-primary\)\]\/40 {
    background-color: var(--ta-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-primary\)\]\/40 {
      background-color: color-mix(in oklab, var(--ta-primary) 40%, transparent);
    }
  }

  .bg-\[var\(--ta-success\)\], .bg-\[var\(--ta-success\)\]\/10 {
    background-color: var(--ta-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-success\)\]\/10 {
      background-color: color-mix(in oklab, var(--ta-success) 10%, transparent);
    }
  }

  .bg-\[var\(--ta-success\)\]\/15 {
    background-color: var(--ta-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-success\)\]\/15 {
      background-color: color-mix(in oklab, var(--ta-success) 15%, transparent);
    }
  }

  .bg-\[var\(--ta-surface\)\], .bg-\[var\(--ta-surface\)\]\/50 {
    background-color: var(--ta-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-surface\)\]\/50 {
      background-color: color-mix(in oklab, var(--ta-surface) 50%, transparent);
    }
  }

  .bg-\[var\(--ta-surface\)\]\/60 {
    background-color: var(--ta-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-surface\)\]\/60 {
      background-color: color-mix(in oklab, var(--ta-surface) 60%, transparent);
    }
  }

  .bg-\[var\(--ta-surface\)\]\/80 {
    background-color: var(--ta-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-surface\)\]\/80 {
      background-color: color-mix(in oklab, var(--ta-surface) 80%, transparent);
    }
  }

  .bg-\[var\(--ta-surface-2\)\], .bg-\[var\(--ta-surface-2\)\]\/50 {
    background-color: var(--ta-surface-2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-surface-2\)\]\/50 {
      background-color: color-mix(in oklab, var(--ta-surface-2) 50%, transparent);
    }
  }

  .bg-\[var\(--ta-surface-2\)\]\/60 {
    background-color: var(--ta-surface-2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-surface-2\)\]\/60 {
      background-color: color-mix(in oklab, var(--ta-surface-2) 60%, transparent);
    }
  }

  .bg-\[var\(--ta-surface-3\)\], .bg-\[var\(--ta-surface-3\)\]\/40 {
    background-color: var(--ta-surface-3);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-surface-3\)\]\/40 {
      background-color: color-mix(in oklab, var(--ta-surface-3) 40%, transparent);
    }
  }

  .bg-\[var\(--ta-surface-3\)\]\/50 {
    background-color: var(--ta-surface-3);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-surface-3\)\]\/50 {
      background-color: color-mix(in oklab, var(--ta-surface-3) 50%, transparent);
    }
  }

  .bg-\[var\(--ta-warning\)\], .bg-\[var\(--ta-warning\)\]\/10 {
    background-color: var(--ta-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-warning\)\]\/10 {
      background-color: color-mix(in oklab, var(--ta-warning) 10%, transparent);
    }
  }

  .bg-\[var\(--ta-warning\)\]\/15 {
    background-color: var(--ta-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ta-warning\)\]\/15 {
      background-color: color-mix(in oklab, var(--ta-warning) 15%, transparent);
    }
  }

  .bg-accent, .bg-accent\/50 {
    background-color: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-accent\/50 {
      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
    }
  }

  .bg-accent\/60 {
    background-color: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-accent\/60 {
      background-color: color-mix(in oklab, var(--accent) 60%, transparent);
    }
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-amber-500\/10 {
    background-color: #f99c001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/10 {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .bg-amber-500\/15 {
    background-color: #f99c0026;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/15 {
      background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
    }
  }

  .bg-background, .bg-background\/40 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/40 {
      background-color: color-mix(in oklab, var(--background) 40%, transparent);
    }
  }

  .bg-background\/50 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/50 {
      background-color: color-mix(in oklab, var(--background) 50%, transparent);
    }
  }

  .bg-background\/60 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/60 {
      background-color: color-mix(in oklab, var(--background) 60%, transparent);
    }
  }

  .bg-background\/70 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/70 {
      background-color: color-mix(in oklab, var(--background) 70%, transparent);
    }
  }

  .bg-background\/80 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/80 {
      background-color: color-mix(in oklab, var(--background) 80%, transparent);
    }
  }

  .bg-background\/95 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/95 {
      background-color: color-mix(in oklab, var(--background) 95%, transparent);
    }
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/20 {
    background-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }

  .bg-black\/30 {
    background-color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/30 {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .bg-black\/40 {
    background-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/40 {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-50\/50 {
    background-color: #eff6ff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-50\/50 {
      background-color: color-mix(in oklab, var(--color-blue-50) 50%, transparent);
    }
  }

  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-blue-500\/10 {
    background-color: #3080ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/10 {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }

  .bg-blue-500\/15 {
    background-color: #3080ff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/15 {
      background-color: color-mix(in oklab, var(--color-blue-500) 15%, transparent);
    }
  }

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-blue-600\/10 {
    background-color: #155dfc1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-600\/10 {
      background-color: color-mix(in oklab, var(--color-blue-600) 10%, transparent);
    }
  }

  .bg-border {
    background-color: var(--border);
  }

  .bg-card, .bg-card\/95 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/95 {
      background-color: color-mix(in oklab, var(--card) 95%, transparent);
    }
  }

  .bg-cyan-500\/15 {
    background-color: #00b7d726;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-cyan-500\/15 {
      background-color: color-mix(in oklab, var(--color-cyan-500) 15%, transparent);
    }
  }

  .bg-destructive, .bg-destructive\/5 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/5 {
      background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
    }
  }

  .bg-destructive\/10 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/10 {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .bg-destructive\/15 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/15 {
      background-color: color-mix(in oklab, var(--destructive) 15%, transparent);
    }
  }

  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-emerald-500\/15 {
    background-color: #00bb7f26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/15 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
    }
  }

  .bg-foreground, .bg-foreground\/30 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/30 {
      background-color: color-mix(in oklab, var(--foreground) 30%, transparent);
    }
  }

  .bg-foreground\/50 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/50 {
      background-color: color-mix(in oklab, var(--foreground) 50%, transparent);
    }
  }

  .bg-foreground\/80 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/80 {
      background-color: color-mix(in oklab, var(--foreground) 80%, transparent);
    }
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-green-50 {
    background-color: var(--color-green-50);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-green-500\/10 {
    background-color: #00c7581a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/10 {
      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
  }

  .bg-green-500\/15 {
    background-color: #00c75826;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/15 {
      background-color: color-mix(in oklab, var(--color-green-500) 15%, transparent);
    }
  }

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-indigo-50 {
    background-color: var(--color-indigo-50);
  }

  .bg-indigo-100 {
    background-color: var(--color-indigo-100);
  }

  .bg-indigo-500 {
    background-color: var(--color-indigo-500);
  }

  .bg-indigo-500\/10 {
    background-color: #625fff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-500\/10 {
      background-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);
    }
  }

  .bg-input {
    background-color: var(--input);
  }

  .bg-muted {
    background-color: var(--muted);
  }

  .bg-muted-foreground, .bg-muted-foreground\/25 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/25 {
      background-color: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
    }
  }

  .bg-muted-foreground\/30 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/30 {
      background-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    }
  }

  .bg-muted-foreground\/40 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/40 {
      background-color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
    }
  }

  .bg-muted\/20 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/20 {
      background-color: color-mix(in oklab, var(--muted) 20%, transparent);
    }
  }

  .bg-muted\/30 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/30 {
      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
    }
  }

  .bg-muted\/40 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/40 {
      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
    }
  }

  .bg-muted\/50 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/50 {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }

  .bg-muted\/60 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/60 {
      background-color: color-mix(in oklab, var(--muted) 60%, transparent);
    }
  }

  .bg-muted\/90 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/90 {
      background-color: color-mix(in oklab, var(--muted) 90%, transparent);
    }
  }

  .bg-muted\/95 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/95 {
      background-color: color-mix(in oklab, var(--muted) 95%, transparent);
    }
  }

  .bg-orange-500\/10 {
    background-color: #fe6e001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-orange-500\/10 {
      background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
    }
  }

  .bg-pink-500\/15 {
    background-color: #f6339a26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-pink-500\/15 {
      background-color: color-mix(in oklab, var(--color-pink-500) 15%, transparent);
    }
  }

  .bg-popover {
    background-color: var(--popover);
  }

  .bg-primary {
    background-color: var(--primary);
  }

  .bg-primary-foreground\/20 {
    background-color: var(--primary-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary-foreground\/20 {
      background-color: color-mix(in oklab, var(--primary-foreground) 20%, transparent);
    }
  }

  .bg-primary-foreground\/80 {
    background-color: var(--primary-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary-foreground\/80 {
      background-color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
    }
  }

  .bg-primary-light, .bg-primary-light\/30 {
    background-color: var(--primary-light);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary-light\/30 {
      background-color: color-mix(in oklab, var(--primary-light) 30%, transparent);
    }
  }

  .bg-primary-light\/40 {
    background-color: var(--primary-light);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary-light\/40 {
      background-color: color-mix(in oklab, var(--primary-light) 40%, transparent);
    }
  }

  .bg-primary\/5 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/5 {
      background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    }
  }

  .bg-primary\/10 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .bg-primary\/15 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/15 {
      background-color: color-mix(in oklab, var(--primary) 15%, transparent);
    }
  }

  .bg-primary\/20 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .bg-primary\/40 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/40 {
      background-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

  .bg-primary\/60 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/60 {
      background-color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

  .bg-purple-50 {
    background-color: var(--color-purple-50);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-red-500\/10 {
    background-color: #fb2c361a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/10 {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }

  .bg-red-500\/15 {
    background-color: #fb2c3626;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/15 {
      background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
    }
  }

  .bg-secondary {
    background-color: var(--secondary);
  }

  .bg-sidebar {
    background-color: var(--sidebar);
  }

  .bg-sky-100 {
    background-color: var(--color-sky-100);
  }

  .bg-sky-500\/15 {
    background-color: #00a5ef26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sky-500\/15 {
      background-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent);
    }
  }

  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }

  .bg-slate-800 {
    background-color: var(--color-slate-800);
  }

  .bg-success, .bg-success\/5 {
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-success\/5 {
      background-color: color-mix(in oklab, var(--success) 5%, transparent);
    }
  }

  .bg-success\/10 {
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-success\/10 {
      background-color: color-mix(in oklab, var(--success) 10%, transparent);
    }
  }

  .bg-success\/15 {
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-success\/15 {
      background-color: color-mix(in oklab, var(--success) 15%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-violet-100 {
    background-color: var(--color-violet-100);
  }

  .bg-violet-500\/15 {
    background-color: #8d54ff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-violet-500\/15 {
      background-color: color-mix(in oklab, var(--color-violet-500) 15%, transparent);
    }
  }

  .bg-warning, .bg-warning\/5 {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/5 {
      background-color: color-mix(in oklab, var(--warning) 5%, transparent);
    }
  }

  .bg-warning\/10 {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/10 {
      background-color: color-mix(in oklab, var(--warning) 10%, transparent);
    }
  }

  .bg-warning\/15 {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/15 {
      background-color: color-mix(in oklab, var(--warning) 15%, transparent);
    }
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .bg-zinc-900 {
    background-color: var(--color-zinc-900);
  }

  .bg-zinc-950 {
    background-color: var(--color-zinc-950);
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-blue-50 {
    --tw-gradient-from: var(--color-blue-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-blue-50\/60 {
    --tw-gradient-from: #eff6ff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-blue-50\/60 {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-50) 60%, transparent);
    }
  }

  .from-blue-50\/60 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-blue-300 {
    --tw-gradient-from: var(--color-blue-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-muted\/40 {
    --tw-gradient-from: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-muted\/40 {
      --tw-gradient-from: color-mix(in oklab, var(--muted) 40%, transparent);
    }
  }

  .from-muted\/40 {
    --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-primary\/10 {
    --tw-gradient-from: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .from-primary\/10 {
    --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-success\/10 {
    --tw-gradient-from: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-success\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--success) 10%, transparent);
    }
  }

  .from-success\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-warning\/10 {
    --tw-gradient-from: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-warning\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--warning) 10%, transparent);
    }
  }

  .from-warning\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-blue-500 {
    --tw-gradient-via: var(--color-blue-500);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-blue-300 {
    --tw-gradient-to: var(--color-blue-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-card {
    --tw-gradient-to: var(--card);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-indigo-50\/60 {
    --tw-gradient-to: #eef2ff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-indigo-50\/60 {
      --tw-gradient-to: color-mix(in oklab, var(--color-indigo-50) 60%, transparent);
    }
  }

  .to-indigo-50\/60 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-indigo-100 {
    --tw-gradient-to: var(--color-indigo-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-muted\/70 {
    --tw-gradient-to: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-muted\/70 {
      --tw-gradient-to: color-mix(in oklab, var(--muted) 70%, transparent);
    }
  }

  .to-muted\/70 {
    --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\/10 {
    --tw-gradient-to: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-primary\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .to-primary\/10 {
    --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-success\/10 {
    --tw-gradient-to: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-success\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--success) 10%, transparent);
    }
  }

  .to-success\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-warning\/10 {
    --tw-gradient-to: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-warning\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--warning) 10%, transparent);
    }
  }

  .to-warning\/10 {
    --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-foreground {
    fill: var(--foreground);
  }

  .fill-warning {
    fill: var(--warning);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .p-\[18px\] {
    padding: 18px;
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-0\.5 {
    padding-inline: calc(var(--spacing) * .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-4\.5 {
    padding-inline: calc(var(--spacing) * 4.5);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-\[18px\] {
    padding-inline: 18px;
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-px {
    padding-block: 1px;
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-0\.5 {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-3\.5 {
    padding-top: calc(var(--spacing) * 3.5);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }

  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }

  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }

  .pr-20 {
    padding-right: calc(var(--spacing) * 20);
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .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);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .\!pl-9 {
    padding-left: calc(var(--spacing) * 9) !important;
  }

  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }

  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-1\.5 {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-7 {
    padding-left: calc(var(--spacing) * 7);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }

  .pl-\[72px\] {
    padding-left: 72px;
  }

  .\!text-right {
    text-align: right !important;
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-top {
    vertical-align: top;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[0\.6rem\] {
    font-size: .6rem;
  }

  .text-\[0\.7rem\] {
    font-size: .7rem;
  }

  .text-\[0\.8rem\] {
    font-size: .8rem;
  }

  .text-\[0\.65rem\] {
    font-size: .65rem;
  }

  .text-\[0\.75rem\] {
    font-size: .75rem;
  }

  .text-\[0\.85rem\] {
    font-size: .85rem;
  }

  .text-\[0\.95rem\] {
    font-size: .95rem;
  }

  .text-\[0\.98rem\] {
    font-size: .98rem;
  }

  .text-\[0\.6875rem\] {
    font-size: .6875rem;
  }

  .text-\[1\.1em\] {
    font-size: 1.1em;
  }

  .text-\[1\.6rem\] {
    font-size: 1.6rem;
  }

  .text-\[1\.15rem\] {
    font-size: 1.15rem;
  }

  .text-\[1\.35rem\] {
    font-size: 1.35rem;
  }

  .text-\[1\.75rem\] {
    font-size: 1.75rem;
  }

  .text-\[2\.5rem\] {
    font-size: 2.5rem;
  }

  .text-\[2rem\] {
    font-size: 2rem;
  }

  .text-\[3\.5rem\] {
    font-size: 3.5rem;
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9\.5px\] {
    font-size: 9.5px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10\.5px\] {
    font-size: 10.5px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11\.5px\] {
    font-size: 11.5px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-\[1\.1\] {
    --tw-leading: 1.1;
    line-height: 1.1;
  }

  .leading-\[1\.8\] {
    --tw-leading: 1.8;
    line-height: 1.8;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .\[overflow-wrap\:anywhere\] {
    overflow-wrap: anywhere;
  }

  .break-words, .wrap-break-word {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .text-ellipsis {
    text-overflow: ellipsis;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre {
    white-space: pre;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .tab-1 {
    tab-size: 1;
  }

  .\!text-\[var\(--ta-text\)\] {
    color: var(--ta-text) !important;
  }

  .text-\[\#5D8B6E\] {
    color: #5d8b6e;
  }

  .text-\[\#0077b5\] {
    color: #0077b5;
  }

  .text-\[\#15396a\] {
    color: #15396a;
  }

  .text-\[\#075194\] {
    color: #075194;
  }

  .text-\[\#ed2d2d\] {
    color: #ed2d2d;
  }

  .text-\[\#f57c1f\] {
    color: #f57c1f;
  }

  .text-\[\#ff0000\] {
    color: red;
  }

  .text-\[var\(--success\)\] {
    color: var(--success);
  }

  .text-\[var\(--ta-body\)\] {
    color: var(--ta-body);
  }

  .text-\[var\(--ta-danger\)\] {
    color: var(--ta-danger);
  }

  .text-\[var\(--ta-faint\)\] {
    color: var(--ta-faint);
  }

  .text-\[var\(--ta-muted\)\] {
    color: var(--ta-muted);
  }

  .text-\[var\(--ta-primary-soft\)\] {
    color: var(--ta-primary-soft);
  }

  .text-\[var\(--ta-success\)\] {
    color: var(--ta-success);
  }

  .text-\[var\(--ta-text\)\] {
    color: var(--ta-text);
  }

  .text-\[var\(--ta-warning\)\], .text-\[var\(--ta-warning\)\]\/60 {
    color: var(--ta-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-\[var\(--ta-warning\)\]\/60 {
      color: color-mix(in oklab, var(--ta-warning) 60%, transparent);
    }
  }

  .text-accent-foreground {
    color: var(--accent-foreground);
  }

  .text-amber-400 {
    color: var(--color-amber-400);
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-amber-600 {
    color: var(--color-amber-600);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-background, .text-background\/60 {
    color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-background\/60 {
      color: color-mix(in oklab, var(--background) 60%, transparent);
    }
  }

  .text-background\/70 {
    color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-background\/70 {
      color: color-mix(in oklab, var(--background) 70%, transparent);
    }
  }

  .text-blue-100 {
    color: var(--color-blue-100);
  }

  .text-blue-200 {
    color: var(--color-blue-200);
  }

  .text-blue-300 {
    color: var(--color-blue-300);
  }

  .text-blue-400 {
    color: var(--color-blue-400);
  }

  .text-blue-500 {
    color: var(--color-blue-500);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-blue-800 {
    color: var(--color-blue-800);
  }

  .text-border {
    color: var(--border);
  }

  .text-card-foreground {
    color: var(--card-foreground);
  }

  .text-current {
    color: currentColor;
  }

  .text-cyan-300 {
    color: var(--color-cyan-300);
  }

  .text-cyan-500 {
    color: var(--color-cyan-500);
  }

  .text-cyan-600 {
    color: var(--color-cyan-600);
  }

  .text-destructive {
    color: var(--destructive);
  }

  .text-destructive-foreground {
    color: var(--destructive-foreground);
  }

  .text-destructive\/70 {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-destructive\/70 {
      color: color-mix(in oklab, var(--destructive) 70%, transparent);
    }
  }

  .text-destructive\/90 {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-destructive\/90 {
      color: color-mix(in oklab, var(--destructive) 90%, transparent);
    }
  }

  .text-emerald-400 {
    color: var(--color-emerald-400);
  }

  .text-emerald-500 {
    color: var(--color-emerald-500);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-foreground, .text-foreground\/80 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/80 {
      color: color-mix(in oklab, var(--foreground) 80%, transparent);
    }
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-green-500 {
    color: var(--color-green-500);
  }

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-green-800 {
    color: var(--color-green-800);
  }

  .text-indigo-500 {
    color: var(--color-indigo-500);
  }

  .text-muted-foreground, .text-muted-foreground\/30 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/30 {
      color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    }
  }

  .text-muted-foreground\/40 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/40 {
      color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
    }
  }

  .text-muted-foreground\/50 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/50 {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .text-muted-foreground\/60 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/60 {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .text-muted-foreground\/70 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/70 {
      color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
    }
  }

  .text-muted-foreground\/80 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/80 {
      color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
    }
  }

  .text-orange-500 {
    color: var(--color-orange-500);
  }

  .text-orange-600 {
    color: var(--color-orange-600);
  }

  .text-orange-700 {
    color: var(--color-orange-700);
  }

  .text-pink-600 {
    color: var(--color-pink-600);
  }

  .text-popover-foreground {
    color: var(--popover-foreground);
  }

  .text-primary {
    color: var(--primary);
  }

  .text-primary-dark {
    color: var(--primary-dark);
  }

  .text-primary-foreground, .text-primary-foreground\/50 {
    color: var(--primary-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary-foreground\/50 {
      color: color-mix(in oklab, var(--primary-foreground) 50%, transparent);
    }
  }

  .text-primary-foreground\/60 {
    color: var(--primary-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary-foreground\/60 {
      color: color-mix(in oklab, var(--primary-foreground) 60%, transparent);
    }
  }

  .text-primary-foreground\/80 {
    color: var(--primary-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary-foreground\/80 {
      color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
    }
  }

  .text-primary\/50 {
    color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/50 {
      color: color-mix(in oklab, var(--primary) 50%, transparent);
    }
  }

  .text-primary\/60 {
    color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/60 {
      color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

  .text-primary\/70 {
    color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/70 {
      color: color-mix(in oklab, var(--primary) 70%, transparent);
    }
  }

  .text-primary\/80 {
    color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/80 {
      color: color-mix(in oklab, var(--primary) 80%, transparent);
    }
  }

  .text-purple-200 {
    color: var(--color-purple-200);
  }

  .text-purple-400 {
    color: var(--color-purple-400);
  }

  .text-purple-500 {
    color: var(--color-purple-500);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-red-800 {
    color: var(--color-red-800);
  }

  .text-rose-500 {
    color: var(--color-rose-500);
  }

  .text-secondary-foreground {
    color: var(--secondary-foreground);
  }

  .text-sky-600 {
    color: var(--color-sky-600);
  }

  .text-sky-700 {
    color: var(--color-sky-700);
  }

  .text-sky-900 {
    color: var(--color-sky-900);
  }

  .text-slate-100 {
    color: var(--color-slate-100);
  }

  .text-slate-200 {
    color: var(--color-slate-200);
  }

  .text-slate-300 {
    color: var(--color-slate-300);
  }

  .text-slate-700 {
    color: var(--color-slate-700);
  }

  .text-success, .text-success\/70 {
    color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-success\/70 {
      color: color-mix(in oklab, var(--success) 70%, transparent);
    }
  }

  .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-violet-700 {
    color: var(--color-violet-700);
  }

  .text-violet-800 {
    color: var(--color-violet-800);
  }

  .text-warning, .text-warning\/70 {
    color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-warning\/70 {
      color: color-mix(in oklab, var(--warning) 70%, transparent);
    }
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-yellow-500 {
    color: var(--color-yellow-500);
  }

  .text-zinc-200 {
    color: var(--color-zinc-200);
  }

  .text-zinc-300 {
    color: var(--color-zinc-300);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .normal-case {
    text-transform: none;
  }

  .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;
  }

  .no-underline {
    text-decoration-line: none;
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .accent-\[var\(--primary\)\] {
    accent-color: var(--primary);
  }

  .accent-\[var\(--ta-primary\)\] {
    accent-color: var(--ta-primary);
  }

  .accent-\[var\(--warning\)\] {
    accent-color: var(--warning);
  }

  .accent-primary {
    accent-color: var(--primary);
  }

  .scheme-dark {
    color-scheme: dark;
  }

  .scheme-light {
    color-scheme: light;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-25 {
    opacity: .25;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-45 {
    opacity: .45;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-55 {
    opacity: .55;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .\!shadow-\[0_0_0_1px_var\(--primary\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--primary)) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_3px_var\(--ring\)\] {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--ring));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_0_0_rgba\(30\,41\,59\,1\)\] {
    --tw-shadow: 0 1px 0 0 var(--tw-shadow-color, #1e293b);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_0_0_2px_\#f59e0b\] {
    --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, #f59e0b);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    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, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-0 {
    --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);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-\[var\(--ta-primary\)\]\/20 {
    --tw-ring-color: var(--ta-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-\[var\(--ta-primary\)\]\/20 {
      --tw-ring-color: color-mix(in oklab, var(--ta-primary) 20%, transparent);
    }
  }

  .ring-primary, .ring-primary\/20 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/20 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .ring-primary\/40 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/40 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

  .ring-offset-1 {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .ring-offset-background {
    --tw-ring-offset-color: var(--background);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .outline-2 {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .outline-primary {
    outline-color: var(--primary);
  }

  .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, );
  }

  .drop-shadow-xl {
    --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[1px\] {
    --tw-backdrop-blur: blur(1px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,transform\] {
    transition-property: border-color, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[padding\,background-color\,color\] {
    transition-property: padding, background-color, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[padding\,color\] {
    transition-property: padding, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .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);
  }

  .animate-in {
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
    animation-name: enter;
    animation-duration: .15s;
  }

  .outline-dashed {
    --tw-outline-style: dashed;
    outline-style: dashed;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .select-text {
    -webkit-user-select: text;
    user-select: text;
  }

  .duration-100 {
    animation-duration: .1s;
  }

  .duration-150 {
    animation-duration: .15s;
  }

  .duration-200 {
    animation-duration: .2s;
  }

  .duration-300 {
    animation-duration: .3s;
  }

  .duration-500 {
    animation-duration: .5s;
  }

  .duration-700 {
    animation-duration: .7s;
  }

  .ease-in-out {
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }

  .ease-out {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
  }

  .fade-in, .fade-in-0 {
    --tw-enter-opacity: 0;
  }

  .paused {
    animation-play-state: paused;
  }

  .ring-inset {
    --tw-ring-inset: inset;
  }

  .running {
    animation-play-state: running;
  }

  .slide-in-from-bottom-2 {
    --tw-enter-translate-y: .5rem;
  }

  .slide-in-from-bottom-4 {
    --tw-enter-translate-y: 1rem;
  }

  .slide-in-from-left-2 {
    --tw-enter-translate-x: -.5rem;
  }

  .zoom-in-95 {
    --tw-enter-scale: .95;
  }

  @media (hover: hover) {
    .group-hover\:border-primary:is(:where(.group):hover *) {
      border-color: var(--primary);
    }

    .group-hover\:text-blue-500:is(:where(.group):hover *) {
      color: var(--color-blue-500);
    }

    .group-hover\:text-foreground:is(:where(.group):hover *) {
      color: var(--foreground);
    }

    .group-hover\:text-primary:is(:where(.group):hover *) {
      color: var(--primary);
    }

    .group-hover\:text-warning:is(:where(.group):hover *) {
      color: var(--warning);
    }

    .group-hover\:underline:is(:where(.group):hover *) {
      text-decoration-line: underline;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *), .group-hover\/chip\:opacity-100:is(:where(.group\/chip):hover *), .group-hover\/desc\:opacity-100:is(:where(.group\/desc):hover *), .group-hover\/title\:opacity-100:is(:where(.group\/title):hover *) {
      opacity: 1;
    }
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
    opacity: .7;
  }

  .file\:mr-2::file-selector-button {
    margin-right: calc(var(--spacing) * 2);
  }

  .file\:mr-3::file-selector-button {
    margin-right: calc(var(--spacing) * 3);
  }

  .file\:rounded::file-selector-button {
    border-radius: .25rem;
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-muted::file-selector-button {
    background-color: var(--muted);
  }

  .file\:bg-primary-light::file-selector-button {
    background-color: var(--primary-light);
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:px-2::file-selector-button {
    padding-inline: calc(var(--spacing) * 2);
  }

  .file\:py-1::file-selector-button {
    padding-block: calc(var(--spacing) * 1);
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .file\:text-foreground::file-selector-button {
    color: var(--foreground);
  }

  .placeholder\:text-sm::placeholder {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .placeholder\:font-normal::placeholder {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .placeholder\:text-muted-foreground::placeholder, .placeholder\:text-muted-foreground\/60::placeholder {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-muted-foreground\/60::placeholder {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .placeholder\:text-primary\/70::placeholder {
    color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-primary\/70::placeholder {
      color: color-mix(in oklab, var(--primary) 70%, transparent);
    }
  }

  .placeholder\:text-success\/70::placeholder {
    color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-success\/70::placeholder {
      color: color-mix(in oklab, var(--success) 70%, transparent);
    }
  }

  .placeholder\:text-warning\/70::placeholder {
    color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-warning\/70::placeholder {
      color: color-mix(in oklab, var(--warning) 70%, transparent);
    }
  }

  .first\:border-l-0:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 0;
  }

  .last\:mb-0:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .last\:flex-none:last-child {
    flex: none;
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .focus-within\:ring-1:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-ring:focus-within {
    --tw-ring-color: var(--ring);
  }

  @media (hover: hover) {
    .hover\:translate-x-1:hover {
      --tw-translate-x: calc(var(--spacing) * 1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-1:hover {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-150:hover {
      --tw-scale-x: 150%;
      --tw-scale-y: 150%;
      --tw-scale-z: 150%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-\[1\.01\]:hover {
      scale: 1.01;
    }

    .hover\:scale-\[1\.02\]:hover {
      scale: 1.02;
    }

    .hover\:border-\[var\(--ta-border-strong\)\]:hover {
      border-color: var(--ta-border-strong);
    }

    .hover\:border-blue-200:hover {
      border-color: var(--color-blue-200);
    }

    .hover\:border-blue-300:hover {
      border-color: var(--color-blue-300);
    }

    .hover\:border-border:hover {
      border-color: var(--border);
    }

    .hover\:border-destructive\/30:hover {
      border-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-destructive\/30:hover {
        border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
      }
    }

    .hover\:border-destructive\/40:hover {
      border-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-destructive\/40:hover {
        border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }

    .hover\:border-muted-foreground\/50:hover {
      border-color: var(--muted-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-muted-foreground\/50:hover {
        border-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
      }
    }

    .hover\:border-primary:hover, .hover\:border-primary\/30:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/30:hover {
        border-color: color-mix(in oklab, var(--primary) 30%, transparent);
      }
    }

    .hover\:border-primary\/40:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/40:hover {
        border-color: color-mix(in oklab, var(--primary) 40%, transparent);
      }
    }

    .hover\:border-primary\/50:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/50:hover {
        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
      }
    }

    .hover\:border-primary\/60:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/60:hover {
        border-color: color-mix(in oklab, var(--primary) 60%, transparent);
      }
    }

    .hover\:border-success\/30:hover {
      border-color: var(--success);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-success\/30:hover {
        border-color: color-mix(in oklab, var(--success) 30%, transparent);
      }
    }

    .hover\:border-warning\/30:hover {
      border-color: var(--warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-warning\/30:hover {
        border-color: color-mix(in oklab, var(--warning) 30%, transparent);
      }
    }

    .hover\:bg-\[\#0077b5\]\/10:hover {
      background-color: oklab(54.5803% -.0605667 -.115234 / .1);
    }

    .hover\:bg-\[\#075194\]\/90:hover {
      background-color: oklab(43.3432% -.0381103 -.12194 / .9);
    }

    .hover\:bg-\[\#166331\]:hover {
      background-color: #166331;
    }

    .hover\:bg-\[\#ff0000\]\/10:hover {
      background-color: oklab(62.7955% .224863 .125846 / .1);
    }

    .hover\:bg-\[var\(--success\)\]\/90:hover {
      background-color: var(--success);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--success\)\]\/90:hover {
        background-color: color-mix(in oklab, var(--success) 90%, transparent);
      }
    }

    .hover\:bg-\[var\(--ta-danger\)\]:hover, .hover\:bg-\[var\(--ta-danger\)\]\/10:hover {
      background-color: var(--ta-danger);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--ta-danger\)\]\/10:hover {
        background-color: color-mix(in oklab, var(--ta-danger) 10%, transparent);
      }
    }

    .hover\:bg-\[var\(--ta-danger\)\]\/30:hover {
      background-color: var(--ta-danger);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--ta-danger\)\]\/30:hover {
        background-color: color-mix(in oklab, var(--ta-danger) 30%, transparent);
      }
    }

    .hover\:bg-\[var\(--ta-primary\)\]:hover {
      background-color: var(--ta-primary);
    }

    .hover\:bg-\[var\(--ta-success\)\]\/20:hover {
      background-color: var(--ta-success);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--ta-success\)\]\/20:hover {
        background-color: color-mix(in oklab, var(--ta-success) 20%, transparent);
      }
    }

    .hover\:bg-\[var\(--ta-surface-2\)\]:hover, .hover\:bg-\[var\(--ta-surface-2\)\]\/30:hover {
      background-color: var(--ta-surface-2);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--ta-surface-2\)\]\/30:hover {
        background-color: color-mix(in oklab, var(--ta-surface-2) 30%, transparent);
      }
    }

    .hover\:bg-\[var\(--ta-surface-2\)\]\/40:hover {
      background-color: var(--ta-surface-2);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--ta-surface-2\)\]\/40:hover {
        background-color: color-mix(in oklab, var(--ta-surface-2) 40%, transparent);
      }
    }

    .hover\:bg-\[var\(--ta-surface-2\)\]\/50:hover {
      background-color: var(--ta-surface-2);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--ta-surface-2\)\]\/50:hover {
        background-color: color-mix(in oklab, var(--ta-surface-2) 50%, transparent);
      }
    }

    .hover\:bg-\[var\(--ta-surface-2\)\]\/60:hover {
      background-color: var(--ta-surface-2);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--ta-surface-2\)\]\/60:hover {
        background-color: color-mix(in oklab, var(--ta-surface-2) 60%, transparent);
      }
    }

    .hover\:bg-\[var\(--ta-surface-3\)\]:hover {
      background-color: var(--ta-surface-3);
    }

    .hover\:bg-\[var\(--ta-warning\)\]\/10:hover {
      background-color: var(--ta-warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--ta-warning\)\]\/10:hover {
        background-color: color-mix(in oklab, var(--ta-warning) 10%, transparent);
      }
    }

    .hover\:bg-accent:hover, .hover\:bg-accent\/40:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/40:hover {
        background-color: color-mix(in oklab, var(--accent) 40%, transparent);
      }
    }

    .hover\:bg-accent\/60:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/60:hover {
        background-color: color-mix(in oklab, var(--accent) 60%, transparent);
      }
    }

    .hover\:bg-amber-600:hover {
      background-color: var(--color-amber-600);
    }

    .hover\:bg-background:hover, .hover\:bg-background\/60:hover {
      background-color: var(--background);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-background\/60:hover {
        background-color: color-mix(in oklab, var(--background) 60%, transparent);
      }
    }

    .hover\:bg-blue-50:hover {
      background-color: var(--color-blue-50);
    }

    .hover\:bg-blue-50\/50:hover {
      background-color: #eff6ff80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-blue-50\/50:hover {
        background-color: color-mix(in oklab, var(--color-blue-50) 50%, transparent);
      }
    }

    .hover\:bg-blue-700:hover {
      background-color: var(--color-blue-700);
    }

    .hover\:bg-card:hover {
      background-color: var(--card);
    }

    .hover\:bg-destructive:hover, .hover\:bg-destructive\/10:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/10:hover {
        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
      }
    }

    .hover\:bg-destructive\/20:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/20:hover {
        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
      }
    }

    .hover\:bg-emerald-600:hover {
      background-color: var(--color-emerald-600);
    }

    .hover\:bg-green-700:hover {
      background-color: var(--color-green-700);
    }

    .hover\:bg-indigo-500\/20:hover {
      background-color: #625fff33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-indigo-500\/20:hover {
        background-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
      }
    }

    .hover\:bg-muted:hover, .hover\:bg-muted\/20:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/20:hover {
        background-color: color-mix(in oklab, var(--muted) 20%, transparent);
      }
    }

    .hover\:bg-muted\/30:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/30:hover {
        background-color: color-mix(in oklab, var(--muted) 30%, transparent);
      }
    }

    .hover\:bg-muted\/40:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/40:hover {
        background-color: color-mix(in oklab, var(--muted) 40%, transparent);
      }
    }

    .hover\:bg-muted\/50:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/50:hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }

    .hover\:bg-muted\/60:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/60:hover {
        background-color: color-mix(in oklab, var(--muted) 60%, transparent);
      }
    }

    .hover\:bg-muted\/70:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/70:hover {
        background-color: color-mix(in oklab, var(--muted) 70%, transparent);
      }
    }

    .hover\:bg-muted\/80:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/80:hover {
        background-color: color-mix(in oklab, var(--muted) 80%, transparent);
      }
    }

    .hover\:bg-primary:hover {
      background-color: var(--primary);
    }

    .hover\:bg-primary-foreground\/5:hover {
      background-color: var(--primary-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary-foreground\/5:hover {
        background-color: color-mix(in oklab, var(--primary-foreground) 5%, transparent);
      }
    }

    .hover\:bg-primary-light:hover {
      background-color: var(--primary-light);
    }

    .hover\:bg-primary\/10:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/10:hover {
        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
      }
    }

    .hover\:bg-primary\/20:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/20:hover {
        background-color: color-mix(in oklab, var(--primary) 20%, transparent);
      }
    }

    .hover\:bg-primary\/40:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/40:hover {
        background-color: color-mix(in oklab, var(--primary) 40%, transparent);
      }
    }

    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }

    .hover\:bg-red-600:hover {
      background-color: var(--color-red-600);
    }

    .hover\:bg-slate-700:hover {
      background-color: var(--color-slate-700);
    }

    .hover\:bg-success:hover, .hover\:bg-success\/10:hover {
      background-color: var(--success);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-success\/10:hover {
        background-color: color-mix(in oklab, var(--success) 10%, transparent);
      }
    }

    .hover\:bg-success\/90:hover {
      background-color: var(--success);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-success\/90:hover {
        background-color: color-mix(in oklab, var(--success) 90%, transparent);
      }
    }

    .hover\:bg-warning:hover, .hover\:bg-warning\/10:hover {
      background-color: var(--warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-warning\/10:hover {
        background-color: color-mix(in oklab, var(--warning) 10%, transparent);
      }
    }

    .hover\:bg-warning\/90:hover {
      background-color: var(--warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-warning\/90:hover {
        background-color: color-mix(in oklab, var(--warning) 90%, transparent);
      }
    }

    .hover\:text-\[var\(--ta-body\)\]:hover {
      color: var(--ta-body);
    }

    .hover\:text-\[var\(--ta-text\)\]:hover {
      color: var(--ta-text);
    }

    .hover\:text-\[var\(--ta-warning\)\]:hover {
      color: var(--ta-warning);
    }

    .hover\:text-accent-foreground:hover {
      color: var(--accent-foreground);
    }

    .hover\:text-amber-600:hover {
      color: var(--color-amber-600);
    }

    .hover\:text-blue-600:hover {
      color: var(--color-blue-600);
    }

    .hover\:text-blue-700:hover {
      color: var(--color-blue-700);
    }

    .hover\:text-destructive:hover, .hover\:text-destructive\/80:hover {
      color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-destructive\/80:hover {
        color: color-mix(in oklab, var(--destructive) 80%, transparent);
      }
    }

    .hover\:text-foreground:hover {
      color: var(--foreground);
    }

    .hover\:text-indigo-600:hover {
      color: var(--color-indigo-600);
    }

    .hover\:text-muted-foreground:hover {
      color: var(--muted-foreground);
    }

    .hover\:text-primary:hover {
      color: var(--primary);
    }

    .hover\:text-primary-foreground:hover {
      color: var(--primary-foreground);
    }

    .hover\:text-primary\/80:hover {
      color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-primary\/80:hover {
        color: color-mix(in oklab, var(--primary) 80%, transparent);
      }
    }

    .hover\:text-red-500:hover {
      color: var(--color-red-500);
    }

    .hover\:text-red-600:hover {
      color: var(--color-red-600);
    }

    .hover\:text-success:hover {
      color: var(--success);
    }

    .hover\:text-warning:hover {
      color: var(--warning);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:no-underline:hover {
      text-decoration-line: none;
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-85:hover {
      opacity: .85;
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-md:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-sm:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-xl:hover {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:ring-1:hover {
      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:ring-2:hover {
      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:ring-primary\/40:hover {
      --tw-ring-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:ring-primary\/40:hover {
        --tw-ring-color: color-mix(in oklab, var(--primary) 40%, transparent);
      }
    }

    .hover\:brightness-95:hover {
      --tw-brightness: brightness(95%);
      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, );
    }

    .hover\:brightness-110:hover {
      --tw-brightness: brightness(110%);
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    }
  }

  .focus\:border-destructive\/40:focus {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-destructive\/40:focus {
      border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .focus\:border-input:focus {
    border-color: var(--input);
  }

  .focus\:border-primary:focus, .focus\:border-primary\/30:focus {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-primary\/30:focus {
      border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .focus\:border-primary\/40:focus {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-primary\/40:focus {
      border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

  .focus\:border-primary\/50:focus {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-primary\/50:focus {
      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
    }
  }

  .focus\:border-success\/40:focus {
    border-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-success\/40:focus {
      border-color: color-mix(in oklab, var(--success) 40%, transparent);
    }
  }

  .focus\:border-transparent:focus {
    border-color: #0000;
  }

  .focus\:border-warning\/30:focus {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-warning\/30:focus {
      border-color: color-mix(in oklab, var(--warning) 30%, transparent);
    }
  }

  .focus\:border-warning\/40:focus {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-warning\/40:focus {
      border-color: color-mix(in oklab, var(--warning) 40%, transparent);
    }
  }

  .focus\:bg-accent:focus {
    background-color: var(--accent);
  }

  .focus\:bg-background:focus {
    background-color: var(--background);
  }

  .focus\:bg-card:focus {
    background-color: var(--card);
  }

  .focus\:text-accent-foreground:focus {
    color: var(--accent-foreground);
  }

  .focus\:text-destructive:focus {
    color: var(--destructive);
  }

  .focus\:ring-0:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-destructive:focus, .focus\:ring-destructive\/40:focus {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-destructive\/40:focus {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .focus\:ring-primary\/40:focus {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-primary\/40:focus {
      --tw-ring-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

  .focus\:ring-ring:focus, .focus\:ring-ring\/30:focus {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-ring\/30:focus {
      --tw-ring-color: color-mix(in oklab, var(--ring) 30%, transparent);
    }
  }

  .focus\:ring-success\/40:focus {
    --tw-ring-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-success\/40:focus {
      --tw-ring-color: color-mix(in oklab, var(--success) 40%, transparent);
    }
  }

  .focus\:ring-warning\/40:focus {
    --tw-ring-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-warning\/40:focus {
      --tw-ring-color: color-mix(in oklab, var(--warning) 40%, transparent);
    }
  }

  .focus\:ring-offset-1:focus {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus\:ring-inset:focus {
    --tw-ring-inset: inset;
  }

  .focus-visible\:border-input:focus-visible {
    border-color: var(--input);
  }

  .focus-visible\:bg-background:focus-visible {
    background-color: var(--background);
  }

  .focus-visible\:ring-0:focus-visible {
    --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-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-destructive:focus-visible {
    --tw-ring-color: var(--destructive);
  }

  .focus-visible\:ring-ring:focus-visible {
    --tw-ring-color: var(--ring);
  }

  .focus-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .active\:bg-blue-800:active {
    background-color: var(--color-blue-800);
  }

  .active\:bg-destructive:active {
    background-color: var(--destructive);
  }

  .active\:bg-primary:active {
    background-color: var(--primary);
  }

  .active\:bg-success:active {
    background-color: var(--success);
  }

  .active\:bg-warning:active {
    background-color: var(--warning);
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:bg-muted:disabled {
    background-color: var(--muted);
  }

  .disabled\:opacity-30:disabled {
    opacity: .3;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .disabled\:opacity-70:disabled {
    opacity: .7;
  }

  @media (hover: hover) {
    .disabled\:hover\:bg-transparent:disabled:hover {
      background-color: #0000;
    }
  }

  .data-disabled\:pointer-events-none[data-disabled] {
    pointer-events: none;
  }

  .data-disabled\:opacity-50[data-disabled] {
    opacity: .5;
  }

  .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
    --tw-enter-translate-y: -.5rem;
  }

  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
    --tw-enter-translate-x: .5rem;
  }

  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
    --tw-enter-translate-x: -.5rem;
  }

  .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
    --tw-enter-translate-y: .5rem;
  }

  .data-\[state\=active\]\:border-primary[data-state="active"] {
    border-color: var(--primary);
  }

  .data-\[state\=active\]\:font-semibold[data-state="active"] {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .data-\[state\=active\]\:text-foreground[data-state="active"] {
    color: var(--foreground);
  }

  .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
    background-color: var(--primary);
  }

  .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
    color: var(--primary-foreground);
  }

  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial;
    animation-name: exit;
    animation-duration: .15s;
  }

  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
    animation-duration: .3s;
  }

  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
    --tw-exit-opacity: 0;
  }

  .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
    --tw-exit-translate-y: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
    --tw-exit-translate-x: -100%;
  }

  .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
    --tw-exit-translate-x: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
    --tw-exit-translate-y: -100%;
  }

  .data-\[state\=indeterminate\]\:border-primary[data-state="indeterminate"] {
    border-color: var(--primary);
  }

  .data-\[state\=indeterminate\]\:bg-primary\/40[data-state="indeterminate"] {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[state\=indeterminate\]\:bg-primary\/40[data-state="indeterminate"] {
      background-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

  .data-\[state\=indeterminate\]\:text-primary-foreground[data-state="indeterminate"] {
    color: var(--primary-foreground);
  }

  .data-\[state\=open\]\:bg-accent[data-state="open"] {
    background-color: var(--accent);
  }

  .data-\[state\=open\]\:duration-500[data-state="open"] {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .data-\[state\=open\]\:animate-in[data-state="open"] {
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
    animation-name: enter;
    animation-duration: .15s;
  }

  .data-\[state\=open\]\:duration-500[data-state="open"] {
    animation-duration: .5s;
  }

  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
    --tw-enter-opacity: 0;
  }

  .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
    --tw-enter-translate-x: -100%;
  }

  .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
    --tw-enter-translate-x: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
    --tw-enter-translate-y: -100%;
  }

  .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
    background-color: var(--input);
  }

  @supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
    .supports-backdrop-filter\:bg-muted\/40 {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .supports-backdrop-filter\:bg-muted\/40 {
        background-color: color-mix(in oklab, var(--muted) 40%, transparent);
      }
    }

    .supports-backdrop-filter\:bg-muted\/80 {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .supports-backdrop-filter\:bg-muted\/80 {
        background-color: color-mix(in oklab, var(--muted) 80%, transparent);
      }
    }

    .supports-\[backdrop-filter\]\:bg-background\/80 {
      background-color: var(--background);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .supports-\[backdrop-filter\]\:bg-background\/80 {
        background-color: color-mix(in oklab, var(--background) 80%, transparent);
      }
    }
  }

  @media not all and (min-width: 48rem) {
    .max-md\:hidden {
      display: none;
    }

    .max-md\:flex-col {
      flex-direction: column;
    }

    .max-md\:text-left {
      text-align: left;
    }

    .max-md\:text-\[2\.5rem\] {
      font-size: 2.5rem;
    }
  }

  @media (min-width: 40rem) {
    .sm\:-mx-6 {
      margin-inline: calc(var(--spacing) * -6);
    }

    .sm\:my-2 {
      margin-block: calc(var(--spacing) * 2);
    }

    .sm\:mr-2 {
      margin-right: calc(var(--spacing) * 2);
    }

    .sm\:ml-2 {
      margin-left: calc(var(--spacing) * 2);
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:w-1\/2 {
      width: 50%;
    }

    .sm\:w-60 {
      width: calc(var(--spacing) * 60);
    }

    .sm\:w-\[150px\] {
      width: 150px;
    }

    .sm\:w-\[180px\] {
      width: 180px;
    }

    .sm\:w-\[420px\] {
      width: 420px;
    }

    .sm\:max-w-2xl {
      max-width: var(--container-2xl);
    }

    .sm\:max-w-4xl {
      max-width: var(--container-4xl);
    }

    .sm\:max-w-\[70vw\] {
      max-width: 70vw;
    }

    .sm\:max-w-\[96vw\] {
      max-width: 96vw;
    }

    .sm\:max-w-\[400px\] {
      max-width: 400px;
    }

    .sm\:max-w-\[450px\] {
      max-width: 450px;
    }

    .sm\:max-w-\[480px\] {
      max-width: 480px;
    }

    .sm\:max-w-\[500px\] {
      max-width: 500px;
    }

    .sm\:max-w-\[600px\] {
      max-width: 600px;
    }

    .sm\:max-w-\[640px\] {
      max-width: 640px;
    }

    .sm\:max-w-\[800px\] {
      max-width: 800px;
    }

    .sm\:max-w-\[900px\] {
      max-width: 900px;
    }

    .sm\:max-w-\[1200px\] {
      max-width: 1200px;
    }

    .sm\:max-w-\[1300px\] {
      max-width: 1300px;
    }

    .sm\:max-w-\[1400px\] {
      max-width: 1400px;
    }

    .sm\:max-w-md {
      max-width: var(--container-md);
    }

    .sm\:max-w-none {
      max-width: none;
    }

    .sm\:max-w-sm {
      max-width: var(--container-sm);
    }

    .sm\:flex-1 {
      flex: 1;
    }

    .sm\:flex-\[1\.4\] {
      flex: 1.4;
    }

    .sm\:basis-0 {
      flex-basis: calc(var(--spacing) * 0);
    }

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

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

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

    .sm\:flex-col {
      flex-direction: column;
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

    .sm\:justify-end {
      justify-content: flex-end;
    }

    :where(.sm\:space-x-2 > :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\:rounded-lg {
      border-radius: calc(var(--radius) + 4px);
    }

    .sm\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .sm\:pr-1\.5 {
      padding-right: calc(var(--spacing) * 1.5);
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .md\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .md\:col-span-9 {
      grid-column: span 9 / span 9;
    }

    .md\:inline {
      display: inline;
    }

    .md\:w-\[340px\] {
      width: 340px;
    }

    .md\:w-auto {
      width: auto;
    }

    .md\:shrink-0 {
      flex-shrink: 0;
    }

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

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

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

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

    .md\:grid-cols-\[1fr_340px\] {
      grid-template-columns: 1fr 340px;
    }

    .md\:grid-cols-\[280px_1fr\] {
      grid-template-columns: 280px 1fr;
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:border-r {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }

    .md\:pr-6 {
      padding-right: calc(var(--spacing) * 6);
    }

    .md\:pl-6 {
      padding-left: calc(var(--spacing) * 6);
    }

    .md\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }

  @media (min-width: 64rem) {
    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .lg\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .lg\:col-span-9 {
      grid-column: span 9 / span 9;
    }

    .lg\:mr-24 {
      margin-right: calc(var(--spacing) * 24);
    }

    .lg\:inline {
      display: inline;
    }

    .lg\:w-5\/12 {
      width: 41.6667%;
    }

    .lg\:w-7\/12 {
      width: 58.3333%;
    }

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

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

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

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

    .lg\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:px-7 {
      padding-inline: calc(var(--spacing) * 7);
    }
  }

  @media (min-width: 80rem) {
    .xl\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .xl\:col-span-3 {
      grid-column: span 3 / span 3;
    }

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

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

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

  .dark\:border-amber-800:is(.dark *) {
    border-color: var(--color-amber-800);
  }

  .dark\:border-amber-900:is(.dark *) {
    border-color: var(--color-amber-900);
  }

  .dark\:border-blue-300:is(.dark *) {
    border-color: var(--color-blue-300);
  }

  .dark\:border-blue-700:is(.dark *) {
    border-color: var(--color-blue-700);
  }

  .dark\:border-blue-900:is(.dark *) {
    border-color: var(--color-blue-900);
  }

  .dark\:border-emerald-800:is(.dark *) {
    border-color: var(--color-emerald-800);
  }

  .dark\:border-gray-700:is(.dark *) {
    border-color: var(--color-gray-700);
  }

  .dark\:border-green-800:is(.dark *) {
    border-color: var(--color-green-800);
  }

  .dark\:border-green-900:is(.dark *) {
    border-color: var(--color-green-900);
  }

  .dark\:border-indigo-900:is(.dark *) {
    border-color: var(--color-indigo-900);
  }

  .dark\:border-purple-700\/70:is(.dark *) {
    border-color: #8200dab3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-purple-700\/70:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-purple-700) 70%, transparent);
    }
  }

  .dark\:border-red-900:is(.dark *) {
    border-color: var(--color-red-900);
  }

  .dark\:border-red-900\/50:is(.dark *) {
    border-color: #82181a80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-red-900\/50:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
    }
  }

  .dark\:border-sky-900:is(.dark *) {
    border-color: var(--color-sky-900);
  }

  .dark\:bg-amber-900\/40:is(.dark *) {
    background-color: #7b330666;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-900\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-amber-900) 40%, transparent);
    }
  }

  .dark\:bg-amber-950\/30:is(.dark *) {
    background-color: #4619014d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-amber-950) 30%, transparent);
    }
  }

  .dark\:bg-amber-950\/40:is(.dark *) {
    background-color: #46190166;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-950\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-amber-950) 40%, transparent);
    }
  }

  .dark\:bg-blue-400:is(.dark *) {
    background-color: var(--color-blue-400);
  }

  .dark\:bg-blue-900\/40:is(.dark *) {
    background-color: #1c398e66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-900\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-blue-900) 40%, transparent);
    }
  }

  .dark\:bg-blue-900\/50:is(.dark *) {
    background-color: #1c398e80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-900\/50:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
    }
  }

  .dark\:bg-blue-950\/20:is(.dark *) {
    background-color: #16245633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-950\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-blue-950) 20%, transparent);
    }
  }

  .dark\:bg-blue-950\/30:is(.dark *) {
    background-color: #1624564d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-blue-950) 30%, transparent);
    }
  }

  .dark\:bg-blue-950\/40:is(.dark *) {
    background-color: #16245666;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-950\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-blue-950) 40%, transparent);
    }
  }

  .dark\:bg-emerald-950\/40:is(.dark *) {
    background-color: #002c2266;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-emerald-950\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-emerald-950) 40%, transparent);
    }
  }

  .dark\:bg-gray-800:is(.dark *) {
    background-color: var(--color-gray-800);
  }

  .dark\:bg-gray-800\/40:is(.dark *) {
    background-color: #1e293966;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-gray-800\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
    }
  }

  .dark\:bg-gray-900:is(.dark *) {
    background-color: var(--color-gray-900);
  }

  .dark\:bg-green-700:is(.dark *) {
    background-color: var(--color-green-700);
  }

  .dark\:bg-green-900\/40:is(.dark *) {
    background-color: #0d542b66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-green-900\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-green-900) 40%, transparent);
    }
  }

  .dark\:bg-green-950\/30:is(.dark *) {
    background-color: #032e154d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-green-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-green-950) 30%, transparent);
    }
  }

  .dark\:bg-green-950\/40:is(.dark *) {
    background-color: #032e1566;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-green-950\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-green-950) 40%, transparent);
    }
  }

  .dark\:bg-indigo-950:is(.dark *) {
    background-color: var(--color-indigo-950);
  }

  .dark\:bg-indigo-950\/40:is(.dark *) {
    background-color: #1e1a4d66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-indigo-950\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 40%, transparent);
    }
  }

  .dark\:bg-indigo-950\/50:is(.dark *) {
    background-color: #1e1a4d80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-indigo-950\/50:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-indigo-950) 50%, transparent);
    }
  }

  .dark\:bg-purple-950\/30:is(.dark *) {
    background-color: #3c03664d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-purple-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-purple-950) 30%, transparent);
    }
  }

  .dark\:bg-red-950\/30:is(.dark *) {
    background-color: #4608094d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-red-950) 30%, transparent);
    }
  }

  .dark\:bg-red-950\/40:is(.dark *) {
    background-color: #46080966;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-950\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-red-950) 40%, transparent);
    }
  }

  .dark\:bg-sky-950\/30:is(.dark *) {
    background-color: #052f4a4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-sky-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-sky-950) 30%, transparent);
    }
  }

  .dark\:bg-slate-800:is(.dark *) {
    background-color: var(--color-slate-800);
  }

  .dark\:bg-slate-900:is(.dark *) {
    background-color: var(--color-slate-900);
  }

  .dark\:bg-violet-900\/40:is(.dark *) {
    background-color: #4d179a66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-violet-900\/40:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-violet-900) 40%, transparent);
    }
  }

  .dark\:from-blue-950\/30:is(.dark *) {
    --tw-gradient-from: #1624564d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:from-blue-950\/30:is(.dark *) {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-950) 30%, transparent);
    }
  }

  .dark\:from-blue-950\/30:is(.dark *) {
    --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-blue-950\/50:is(.dark *) {
    --tw-gradient-from: #16245680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:from-blue-950\/50:is(.dark *) {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-950) 50%, transparent);
    }
  }

  .dark\:from-blue-950\/50:is(.dark *) {
    --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-indigo-950\/30:is(.dark *) {
    --tw-gradient-to: #1e1a4d4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:to-indigo-950\/30:is(.dark *) {
      --tw-gradient-to: color-mix(in oklab, var(--color-indigo-950) 30%, transparent);
    }
  }

  .dark\:to-indigo-950\/30:is(.dark *) {
    --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-indigo-950\/50:is(.dark *) {
    --tw-gradient-to: #1e1a4d80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:to-indigo-950\/50:is(.dark *) {
      --tw-gradient-to: color-mix(in oklab, var(--color-indigo-950) 50%, transparent);
    }
  }

  .dark\:to-indigo-950\/50:is(.dark *) {
    --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\:text-amber-300:is(.dark *) {
    color: var(--color-amber-300);
  }

  .dark\:text-amber-400:is(.dark *) {
    color: var(--color-amber-400);
  }

  .dark\:text-blue-300:is(.dark *) {
    color: var(--color-blue-300);
  }

  .dark\:text-blue-400:is(.dark *) {
    color: var(--color-blue-400);
  }

  .dark\:text-cyan-300:is(.dark *) {
    color: var(--color-cyan-300);
  }

  .dark\:text-emerald-300:is(.dark *) {
    color: var(--color-emerald-300);
  }

  .dark\:text-emerald-400:is(.dark *) {
    color: var(--color-emerald-400);
  }

  .dark\:text-gray-100:is(.dark *) {
    color: var(--color-gray-100);
  }

  .dark\:text-gray-300:is(.dark *) {
    color: var(--color-gray-300);
  }

  .dark\:text-green-300:is(.dark *) {
    color: var(--color-green-300);
  }

  .dark\:text-green-400:is(.dark *) {
    color: var(--color-green-400);
  }

  .dark\:text-indigo-400:is(.dark *) {
    color: var(--color-indigo-400);
  }

  .dark\:text-orange-400:is(.dark *) {
    color: var(--color-orange-400);
  }

  .dark\:text-pink-300:is(.dark *) {
    color: var(--color-pink-300);
  }

  .dark\:text-red-300:is(.dark *) {
    color: var(--color-red-300);
  }

  .dark\:text-red-400:is(.dark *) {
    color: var(--color-red-400);
  }

  .dark\:text-sky-200:is(.dark *) {
    color: var(--color-sky-200);
  }

  .dark\:text-sky-300:is(.dark *) {
    color: var(--color-sky-300);
  }

  .dark\:text-violet-300:is(.dark *) {
    color: var(--color-violet-300);
  }

  .dark\:text-violet-400:is(.dark *) {
    color: var(--color-violet-400);
  }

  .dark\:text-yellow-400:is(.dark *) {
    color: var(--color-yellow-400);
  }

  .dark\:scheme-dark:is(.dark *) {
    color-scheme: dark;
  }

  @media (hover: hover) {
    .dark\:hover\:border-blue-500:is(.dark *):hover {
      border-color: var(--color-blue-500);
    }

    .dark\:hover\:border-blue-600:is(.dark *):hover {
      border-color: var(--color-blue-600);
    }

    .dark\:hover\:border-blue-800:is(.dark *):hover {
      border-color: var(--color-blue-800);
    }

    .dark\:hover\:bg-blue-950\/30:is(.dark *):hover {
      background-color: #1624564d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-blue-950\/30:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--color-blue-950) 30%, transparent);
      }
    }

    .dark\:hover\:bg-blue-950\/40:is(.dark *):hover {
      background-color: #16245666;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-blue-950\/40:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--color-blue-950) 40%, transparent);
      }
    }

    .dark\:hover\:bg-green-600:is(.dark *):hover {
      background-color: var(--color-green-600);
    }

    .dark\:hover\:bg-red-950\/40:is(.dark *):hover {
      background-color: #46080966;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-red-950\/40:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--color-red-950) 40%, transparent);
      }
    }

    .dark\:hover\:text-blue-300:is(.dark *):hover {
      color: var(--color-blue-300);
    }

    .dark\:hover\:text-blue-400:is(.dark *):hover {
      color: var(--color-blue-400);
    }
  }

  .\[\&_\*\]\:ring-1 * {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .\[\&_\*\]\:ring-destructive * {
    --tw-ring-color: var(--destructive);
  }

  .\[\&_a\]\:text-primary a {
    color: var(--primary);
  }

  .\[\&_a\]\:underline a {
    text-decoration-line: underline;
  }

  .\[\&_button\]\:w-full button {
    width: 100%;
  }

  .\[\&_button\]\:justify-start button {
    justify-content: flex-start;
  }

  .\[\&_button\]\:font-normal button {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .\[\&_img\]\:max-w-full img {
    max-width: 100%;
  }

  .\[\&_ol\]\:list-decimal ol {
    list-style-type: decimal;
  }

  .\[\&_ol\]\:pl-6 ol {
    padding-left: calc(var(--spacing) * 6);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:size-3 svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&_svg\]\:size-4 svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_svg\]\:size-\[11px\] svg {
    width: 11px;
    height: 11px;
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\]\:animate-spin svg {
    animation: var(--animate-spin);
  }

  .\[\&_tbody_tr\:last-child_td\]\:border-b-0 tbody tr:last-child td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .\[\&_td\]\:border-r td {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .\[\&_td\]\:border-b td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .\[\&_td\]\:border-border td {
    border-color: var(--border);
  }

  .\[\&_td\:last-child\]\:border-r-0 td:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .\[\&_th\]\:border-r th {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .\[\&_th\]\:border-b th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .\[\&_th\]\:border-border th {
    border-color: var(--border);
  }

  .\[\&_th\:last-child\]\:border-r-0 th:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .\[\&_ul\]\:list-disc ul {
    list-style-type: disc;
  }

  .\[\&_ul\]\:pl-6 ul {
    padding-left: calc(var(--spacing) * 6);
  }

  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
    appearance: none;
  }

  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
    appearance: none;
  }

  .\[\&\>div\]\:\!bg-destructive > div {
    background-color: var(--destructive) !important;
  }

  .\[\&\>div\]\:\!bg-success > div {
    background-color: var(--success) !important;
  }

  .\[\&\>span\]\:line-clamp-1 > span {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg {
    rotate: 180deg;
  }
}

:root {
  --background: #fafafa;
  --foreground: #18181b;
  --card: #fff;
  --card-foreground: #18181b;
  --popover: #fff;
  --popover-foreground: #18181b;
  --primary: #3b82f6;
  --primary-foreground: #fff;
  --primary-dark: #2563eb;
  --primary-light: #dbeafe;
  --bg-theme: #3b82f6;
  --secondary: #f4f4f5;
  --secondary-foreground: #27272a;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --destructive: #dc2626;
  --destructive-foreground: #fff;
  --success: #16a34a;
  --warning: #d97706;
  --border: #e4e4e7;
  --input: #d4d4d8;
  --ring: #3b82f6;
  --radius: .5rem;
  --sidebar: #fff;
  --sidebar-foreground: #71717a;
  --sidebar-border: #e4e4e7;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --surface: #fff;
  --surface-card: #fff;
  --surface-sunken: #f4f4f5;
  --text-body: #3f3f46;
  --text-muted: #71717a;
  --border-strong: #d4d4d8;
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-base: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --tracking-tight: -.02em;
  --tracking-wider: .08em;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px #18181b0f;
  --shadow-sm: 0 1px 3px #18181b14, 0 1px 2px #18181b0a;
  --shadow-md: 0 4px 12px #18181b14, 0 2px 4px #18181b0a;
  --shadow-lg: 0 12px 28px #18181b1f, 0 4px 8px #18181b0f;
  --shadow-xl: 0 24px 48px #18181b29;
  --navy-800: #1c253b;
  --navy-900: #131a2b;
  --gold-400: #e9a621;
  --gold-500: #dda029;
  --topbar-height: 2.5rem;
  --rail-width: 4.5rem;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: .12s;
  --duration-base: .18s;
  --duration-slow: .28s;
}

.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #18181b;
  --card-foreground: #fafafa;
  --popover: #18181b;
  --popover-foreground: #fafafa;
  --primary-foreground: #fff;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --accent: #27272a;
  --accent-foreground: #fafafa;
  --destructive: #7f1d1d;
  --destructive-foreground: #fafafa;
  --border: #71717a;
  --input: #3f3f46;
  --ring: var(--primary);
  --sidebar: #18181b;
  --sidebar-foreground: #a1a1aa;
  --sidebar-border: #71717a;
  --surface: #18181b;
  --surface-card: #18181b;
  --surface-sunken: #27272a;
  --text-body: #d4d4d8;
  --text-muted: #a1a1aa;
  --border-strong: #3f3f46;
  --shadow-xs: 0 1px 2px #0006;
  --shadow-sm: 0 1px 3px #00000080;
  --shadow-md: 0 4px 12px #0000008c;
  --shadow-lg: 0 12px 28px #0009;
  --shadow-xl: 0 24px 48px #000000b3;
}

.react-flow__node {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  padding: 0 !important;
}

.react-flow__controls {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  z-index: 5;
  border-radius: 6px;
  margin: 12px;
  overflow: hidden;
  background: var(--card) !important;
  color: var(--foreground) !important;
}

.react-flow__controls-button {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--foreground) !important;
}

.react-flow__controls-button:hover {
  background: var(--muted) !important;
}

.react-flow__controls-button svg {
  fill: var(--foreground) !important;
}

.dark .react-flow__attribution {
  background: #0006;
}

.dark .react-flow__attribution a {
  color: var(--muted-foreground);
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@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
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

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

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
  }

  50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
  }
}
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-font-weight: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-tracking: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}

@layer components {
  .gt-btn {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing, .25rem) * 2);
    border-radius: var(--radius);
    padding-inline: calc(var(--spacing, .25rem) * 3);
    padding-block: calc(var(--spacing, .25rem) * 2);
    font-size: var(--text-sm, .875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
    --tw-font-weight: var(--font-weight-medium, 500);
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
    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, cubic-bezier(.4, 0, .2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
    -webkit-user-select: none;
    user-select: none;
    display: inline-flex;
  }

  .gt-btn:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .gt-btn-primary {
    background-color: var(--color-amber-400, oklch(82.8% .189 84.429));
    color: var(--color-gray-900, oklch(21% .034 264.665));
  }

  @media (hover: hover) {
    .gt-btn-primary:hover {
      background-color: var(--color-amber-300, oklch(87.9% .169 91.605));
    }
  }

  .gt-btn-secondary {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200, oklch(92.8% .006 264.531));
    background-color: var(--color-gray-100, oklch(96.7% .003 264.542));
    color: var(--color-gray-800, oklch(27.8% .033 256.848));
  }

  @media (hover: hover) {
    .gt-btn-secondary:hover {
      background-color: var(--color-gray-200, oklch(92.8% .006 264.531));
    }
  }

  .gt-btn-danger {
    background-color: var(--color-rose-600, oklch(58.6% .253 17.585));
    color: var(--color-white, #fff);
  }

  @media (hover: hover) {
    .gt-btn-danger:hover {
      background-color: var(--color-rose-700, oklch(51.4% .222 16.935));
    }
  }

  .gt-btn-ghost {
    color: var(--color-gray-700, oklch(37.3% .034 259.733));
  }

  @media (hover: hover) {
    .gt-btn-ghost:hover {
      background-color: var(--color-gray-100, oklch(96.7% .003 264.542));
    }
  }

  .gt-btn-link {
    padding-inline: calc(var(--spacing, .25rem) * 0);
    padding-block: calc(var(--spacing, .25rem) * 0);
    color: var(--color-amber-500, oklch(76.9% .188 70.08));
  }

  @media (hover: hover) {
    .gt-btn-link:hover {
      color: var(--color-amber-400, oklch(82.8% .189 84.429));
      text-decoration-line: underline;
    }
  }

  .gt-btn-icon {
    height: calc(var(--spacing, .25rem) * 8);
    width: calc(var(--spacing, .25rem) * 8);
    padding: calc(var(--spacing, .25rem) * 0);
    color: var(--color-gray-500, oklch(55.1% .027 264.364));
    border-radius: 3.40282e38px;
  }

  @media (hover: hover) {
    .gt-btn-icon:hover {
      background-color: var(--color-gray-100, oklch(96.7% .003 264.542));
    }
  }

  .gt-btn-sm {
    padding-inline: calc(var(--spacing, .25rem) * 2);
    padding-block: calc(var(--spacing, .25rem) * 1);
    font-size: var(--text-xs, .75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));
  }

  .gt-btn-lg {
    padding-inline: calc(var(--spacing, .25rem) * 4);
    padding-block: calc(var(--spacing, .25rem) * 2.5);
    font-size: var(--text-sm, .875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
  }

  .scheme-dark .gt-btn-secondary, .dark .gt-btn-secondary {
    color: var(--color-gray-100, oklch(96.7% .003 264.542));
    background-color: #27272a;
    border-color: #3f3f46;
  }

  @media (hover: hover) {
    :is(.scheme-dark .gt-btn-secondary, .dark .gt-btn-secondary):hover {
      background-color: #3f3f46;
    }
  }

  .scheme-dark .gt-btn-ghost, .dark .gt-btn-ghost {
    color: var(--color-gray-200, oklch(92.8% .006 264.531));
  }

  @media (hover: hover) {
    :is(.scheme-dark .gt-btn-ghost, .dark .gt-btn-ghost):hover {
      background-color: #27272a;
    }
  }

  .scheme-dark .gt-btn-icon, .dark .gt-btn-icon {
    color: var(--color-gray-400, oklch(70.7% .022 261.325));
  }

  @media (hover: hover) {
    :is(.scheme-dark .gt-btn-icon, .dark .gt-btn-icon):hover {
      background-color: #27272a;
    }
  }

  .gt-input {
    border-radius: var(--radius);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300, oklch(87.2% .01 258.338));
    background-color: var(--color-white, #fff);
    width: 100%;
    padding-inline: calc(var(--spacing, .25rem) * 3);
    padding-block: calc(var(--spacing, .25rem) * 2);
    font-size: var(--text-sm, .875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
    color: var(--color-gray-900, oklch(21% .034 264.665));
  }

  .gt-input::placeholder {
    color: var(--color-gray-400, oklch(70.7% .022 261.325));
  }

  .gt-input:focus {
    border-color: var(--color-amber-400, oklch(82.8% .189 84.429));
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-amber-400, oklch(82.8% .189 84.429));
    --tw-outline-style: none;
    outline-style: none;
  }

  .gt-input-icon-wrap {
    position: relative;
  }

  .gt-input-icon-wrap .gt-input {
    padding-left: calc(var(--spacing, .25rem) * 9);
  }

  .gt-input-icon {
    pointer-events: none;
    top: 50%;
    left: calc(var(--spacing, .25rem) * 3);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    color: var(--color-gray-400, oklch(70.7% .022 261.325));
    position: absolute;
  }

  .scheme-dark .gt-input, .dark .gt-input {
    color: var(--color-gray-100, oklch(96.7% .003 264.542));
    background-color: #18181b;
    border-color: #3f3f46;
  }

  :is(.scheme-dark .gt-input, .dark .gt-input)::placeholder, .scheme-dark .gt-input-icon, .dark .gt-input-icon {
    color: var(--color-gray-500, oklch(55.1% .027 264.364));
  }

  .gt-table-wrap {
    border-radius: calc(var(--radius) + 4px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200, oklch(92.8% .006 264.531));
    background-color: var(--color-white, #fff);
    overflow: hidden;
  }

  .gt-table {
    width: 100%;
    font-size: var(--text-sm, .875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
  }

  .gt-table thead {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200, oklch(92.8% .006 264.531));
    background-color: var(--color-gray-50, oklch(98.5% .002 247.839));
  }

  .gt-table th {
    padding-inline: calc(var(--spacing, .25rem) * 4);
    padding-block: calc(var(--spacing, .25rem) * 3);
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-size: 11px;
    font-weight: var(--font-weight-semibold, 600);
    --tw-tracking: var(--tracking-wider, .05em);
    letter-spacing: var(--tracking-wider, .05em);
    white-space: nowrap;
    color: var(--color-gray-500, oklch(55.1% .027 264.364));
    text-transform: uppercase;
  }

  .gt-table td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100, oklch(96.7% .003 264.542));
    padding-inline: calc(var(--spacing, .25rem) * 4);
    padding-block: calc(var(--spacing, .25rem) * 3);
    vertical-align: middle;
    color: var(--color-gray-800, oklch(27.8% .033 256.848));
  }

  .gt-table tbody tr:nth-child(2n) {
    background-color: #f9fafb66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .gt-table tbody tr:nth-child(2n) {
      background-color: color-mix(in oklab, var(--color-gray-50, oklch(98.5% .002 247.839)) 40%, transparent);
    }
  }

  .gt-table tbody tr.clickable {
    cursor: pointer;
  }

  @media (hover: hover) {
    .gt-table tbody tr.clickable:hover {
      background-color: var(--color-amber-50, oklch(98.7% .022 95.277));
    }
  }

  .gt-table tbody tr:last-child td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .scheme-dark .gt-table-wrap, .dark .gt-table-wrap {
    background-color: #18181b;
    border-color: #27272a;
  }

  .scheme-dark .gt-table thead, .dark .gt-table thead {
    background-color: #18181b;
    border-bottom-color: #27272a;
  }

  .scheme-dark .gt-table th, .dark .gt-table th {
    color: var(--color-gray-400, oklch(70.7% .022 261.325));
  }

  .scheme-dark .gt-table td, .dark .gt-table td {
    color: var(--color-gray-200, oklch(92.8% .006 264.531));
    border-bottom-color: #27272a;
  }

  .scheme-dark .gt-table tbody tr:nth-child(2n), .dark .gt-table tbody tr:nth-child(2n) {
    background: #ffffff05;
  }

  .scheme-dark .gt-table tbody tr.clickable:hover, .dark .gt-table tbody tr.clickable:hover {
    background: #f59e0b0f;
  }

  .gt-drawer-overlay {
    inset: calc(var(--spacing, .25rem) * 0);
    z-index: 40;
    background-color: #0006;
    position: fixed;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .gt-drawer-overlay {
      background-color: color-mix(in oklab, var(--color-black, #000) 40%, transparent);
    }
  }

  .gt-drawer-overlay {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
  }

  .gt-drawer-panel {
    top: calc(var(--spacing, .25rem) * 0);
    right: calc(var(--spacing, .25rem) * 0);
    z-index: 50;
    background-color: var(--color-white, #fff);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    height: 100%;
    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: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
    --tw-duration: .2s;
    --tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1));
    transition-duration: .2s;
    transition-timing-function: var(--ease-out, cubic-bezier(0, 0, .2, 1));
    flex-direction: column;
    animation-duration: .2s;
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    display: flex;
    position: fixed;
  }

  .gt-drawer-header {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing, .25rem) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200, oklch(92.8% .006 264.531));
    padding-inline: calc(var(--spacing, .25rem) * 5);
    padding-block: calc(var(--spacing, .25rem) * 4);
    flex-shrink: 0;
    display: flex;
  }

  .gt-drawer-body {
    padding: calc(var(--spacing, .25rem) * 5);
    flex: 1;
    overflow: auto;
  }

  .scheme-dark .gt-drawer-overlay, .dark .gt-drawer-overlay {
    background: #000000a6;
  }

  .scheme-dark .gt-drawer-panel, .dark .gt-drawer-panel {
    background-color: #18181b;
  }

  .scheme-dark .gt-drawer-header, .dark .gt-drawer-header {
    border-bottom-color: #27272a;
  }

  .gt-select {
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300, oklch(87.2% .01 258.338));
    background-color: var(--color-white, #fff);
    width: 100%;
    padding-inline: calc(var(--spacing, .25rem) * 3);
    padding-block: calc(var(--spacing, .25rem) * 2);
    padding-right: calc(var(--spacing, .25rem) * 9);
    font-size: var(--text-sm, .875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
    color: var(--color-gray-900, oklch(21% .034 264.665));
  }

  .gt-select:focus {
    border-color: var(--color-amber-400, oklch(82.8% .189 84.429));
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-amber-400, oklch(82.8% .189 84.429));
    --tw-outline-style: none;
    outline-style: none;
  }

  .gt-select-wrap {
    position: relative;
  }

  .gt-select-caret {
    pointer-events: none;
    top: 50%;
    right: calc(var(--spacing, .25rem) * 3);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    font-size: var(--text-xs, .75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));
    color: var(--color-gray-400, oklch(70.7% .022 261.325));
    position: absolute;
  }

  .scheme-dark .gt-select, .dark .gt-select {
    color: var(--color-gray-100, oklch(96.7% .003 264.542));
    background-color: #18181b;
    border-color: #3f3f46;
  }

  .scheme-dark .gt-select-caret, .dark .gt-select-caret {
    color: var(--color-gray-500, oklch(55.1% .027 264.364));
  }

  .gt-progress {
    height: calc(var(--spacing, .25rem) * 2);
    background-color: var(--color-gray-100, oklch(96.7% .003 264.542));
    border-radius: .25rem;
    width: 100%;
    overflow: hidden;
  }

  .gt-progress-bar {
    background-color: var(--color-amber-400, oklch(82.8% .189 84.429));
    height: 100%;
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
  }

  .scheme-dark .gt-progress, .dark .gt-progress {
    background-color: #27272a;
  }

  .gt-spinner {
    height: calc(var(--spacing, .25rem) * 6);
    width: calc(var(--spacing, .25rem) * 6);
    animation: var(--animate-spin, spin 1s linear infinite);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-gray-200, oklch(92.8% .006 264.531));
    border-top-color: var(--color-amber-400, oklch(82.8% .189 84.429));
    border-radius: 3.40282e38px;
    display: inline-block;
  }

  .scheme-dark .gt-spinner, .dark .gt-spinner {
    border-color: #27272a;
    border-top-color: var(--color-amber-400, oklch(82.8% .189 84.429));
  }

  .gt-surface {
    border-radius: calc(var(--radius) + 8px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200, oklch(92.8% .006 264.531));
    background-color: var(--color-white, #fff);
  }

  .gt-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing, .25rem) * 3);
    border-radius: calc(var(--radius) + 4px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200, oklch(92.8% .006 264.531));
    background-color: var(--color-white, #fff);
    padding-inline: calc(var(--spacing, .25rem) * 3);
    padding-block: calc(var(--spacing, .25rem) * 2);
    display: flex;
  }

  .scheme-dark .gt-surface, .dark .gt-surface, .scheme-dark .gt-toolbar, .dark .gt-toolbar {
    background-color: #18181b;
    border-color: #27272a;
  }

  .gt-chip {
    align-items: center;
    gap: calc(var(--spacing, .25rem) * 1.5);
    border-radius: var(--radius);
    padding-inline: calc(var(--spacing, .25rem) * 3);
    padding-block: calc(var(--spacing, .25rem) * 1.5);
    font-size: var(--text-xs, .75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-gray-600, oklch(44.6% .03 256.802));
    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, cubic-bezier(.4, 0, .2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
    display: inline-flex;
  }

  @media (hover: hover) {
    .gt-chip:hover {
      background-color: var(--color-gray-100, oklch(96.7% .003 264.542));
      color: var(--color-gray-900, oklch(21% .034 264.665));
    }
  }

  .gt-chip-active {
    background-color: var(--color-amber-400, oklch(82.8% .189 84.429));
    color: var(--color-gray-900, oklch(21% .034 264.665));
  }

  @media (hover: hover) {
    .gt-chip-active:hover {
      background-color: var(--color-amber-400, oklch(82.8% .189 84.429));
      color: var(--color-gray-900, oklch(21% .034 264.665));
    }
  }

  .gt-chip-count {
    --tw-font-weight: var(--font-weight-normal, 400);
    font-size: 10px;
    font-weight: var(--font-weight-normal, 400);
    opacity: .7;
  }

  .scheme-dark .gt-chip, .dark .gt-chip {
    color: var(--color-gray-300, oklch(87.2% .01 258.338));
  }

  @media (hover: hover) {
    :is(.scheme-dark .gt-chip, .dark .gt-chip):hover {
      color: var(--color-white, #fff);
      background-color: #27272a;
    }
  }

  .scheme-dark .gt-chip.gt-chip-active, .dark .gt-chip.gt-chip-active {
    background-color: var(--color-amber-400, oklch(82.8% .189 84.429));
    color: var(--color-gray-900, oklch(21% .034 264.665));
  }

  .gt-trend {
    align-items: center;
    gap: calc(var(--spacing, .25rem) * 1);
    padding-inline: calc(var(--spacing, .25rem) * 1.5);
    padding-block: calc(var(--spacing, .25rem) * .5);
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-size: 11px;
    font-weight: var(--font-weight-semibold, 600);
    border-radius: .25rem;
    display: inline-flex;
  }

  .gt-trend-up {
    background-color: var(--color-emerald-100, oklch(95% .052 163.051));
    color: var(--color-emerald-700, oklch(50.8% .118 165.612));
  }

  .gt-trend-down {
    background-color: var(--color-rose-100, oklch(94.1% .03 12.58));
    color: var(--color-rose-700, oklch(51.4% .222 16.935));
  }

  .gt-trend-flat {
    background-color: var(--color-gray-100, oklch(96.7% .003 264.542));
    color: var(--color-gray-600, oklch(44.6% .03 256.802));
  }

  .scheme-dark .gt-trend-up, .dark .gt-trend-up {
    color: #6ee7b7;
    background: #10b98126;
  }

  .scheme-dark .gt-trend-down, .dark .gt-trend-down {
    color: #fda4af;
    background: #f43f5e2e;
  }

  .scheme-dark .gt-trend-flat, .dark .gt-trend-flat {
    color: #cbd5e1;
    background: #94a3b82e;
  }

  .gt-title {
    font-size: var(--text-3xl, 1.875rem);
    line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
    --tw-font-weight: var(--font-weight-extrabold, 800);
    font-weight: var(--font-weight-extrabold, 800);
    --tw-tracking: var(--tracking-tight, -.025em);
    letter-spacing: var(--tracking-tight, -.025em);
    color: #111827;
  }

  .gt-title-em {
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: #f59e0b;
    font-family: Georgia, Iowan Old Style, Palatino, serif;
    font-style: italic;
  }

  .scheme-dark .gt-title, .dark .gt-title {
    color: #f9fafb;
  }

  .scheme-dark .gt-title-em, .dark .gt-title-em {
    color: #fbbf24;
  }

  .gt-pill {
    padding-inline: calc(var(--spacing, .25rem) * 2);
    padding-block: calc(var(--spacing, .25rem) * .5);
    --tw-font-weight: var(--font-weight-medium, 500);
    font-size: 11px;
    font-weight: var(--font-weight-medium, 500);
    border-radius: .25rem;
    align-items: center;
    display: inline-flex;
  }

  .gt-pill-success {
    background-color: var(--color-emerald-100, oklch(95% .052 163.051));
    color: var(--color-emerald-700, oklch(50.8% .118 165.612));
  }

  .gt-pill-warning {
    background-color: var(--color-amber-100, oklch(96.2% .059 95.617));
    color: var(--color-amber-700, oklch(55.5% .163 48.998));
  }

  .gt-pill-danger {
    background-color: var(--color-rose-100, oklch(94.1% .03 12.58));
    color: var(--color-rose-700, oklch(51.4% .222 16.935));
  }

  .gt-pill-info {
    background-color: var(--color-sky-100, oklch(95.1% .026 236.824));
    color: var(--color-sky-700, oklch(50% .134 242.749));
  }

  .gt-pill-neutral {
    background-color: var(--color-gray-100, oklch(96.7% .003 264.542));
    color: var(--color-gray-600, oklch(44.6% .03 256.802));
  }

  .scheme-dark .gt-pill-success, .dark .gt-pill-success {
    color: #6ee7b7;
    background: #10b98126;
  }

  .scheme-dark .gt-pill-warning, .dark .gt-pill-warning {
    color: #fcd34d;
    background: #f59e0b2e;
  }

  .scheme-dark .gt-pill-danger, .dark .gt-pill-danger {
    color: #fda4af;
    background: #f43f5e2e;
  }

  .scheme-dark .gt-pill-info, .dark .gt-pill-info {
    color: #7dd3fc;
    background: #0ea5e92e;
  }

  .scheme-dark .gt-pill-neutral, .dark .gt-pill-neutral {
    color: #cbd5e1;
    background: #94a3b82e;
  }
}

.scheme-dark .rate-analytics-root, .dark .rate-analytics-root, .scheme-dark .gt-page-bg, .dark .gt-page-bg {
  background-color: #0a0a0a;
}

.gt-kpi-value {
  color: #111827;
}

.gt-kpi-sub {
  color: #6b7280;
}

.scheme-dark .gt-kpi-value, .dark .gt-kpi-value {
  color: #f9fafb;
}

.scheme-dark .gt-kpi-sub, .dark .gt-kpi-sub {
  color: #94a3b8;
}

.dark-text-soft {
  color: #6b7280;
}

.scheme-dark .dark-text-soft, .dark .dark-text-soft {
  color: #94a3b8;
}

.gt-lane-chip {
  align-items: center;
  gap: calc(var(--spacing, .25rem) * 1.5);
  border-radius: var(--radius);
  padding-inline: calc(var(--spacing, .25rem) * 2);
  padding-block: calc(var(--spacing, .25rem) * 1);
  font-family: var(--font-mono);
  font-size: var(--text-xs, .75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  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, cubic-bezier(.4, 0, .2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
  color: #4338ca;
  background: #eef2ff;
  display: inline-flex;
}

.gt-lane-chip:hover {
  background: #e0e7ff;
}

.scheme-dark .gt-lane-chip, .dark .gt-lane-chip {
  color: #fbbf24;
  background: #f59e0b1f;
}

.scheme-dark .gt-lane-chip:hover, .dark .gt-lane-chip:hover {
  background: #f59e0b33;
}

.gt-scac-chip {
  padding-inline: calc(var(--spacing, .25rem) * 1.5);
  padding-block: calc(var(--spacing, .25rem) * .5);
  font-family: var(--font-mono);
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-size: 11px;
  font-weight: var(--font-weight-semibold, 600);
  color: #374151;
  background: #f3f4f6;
  border-radius: .25rem;
}

.scheme-dark .gt-scac-chip, .dark .gt-scac-chip {
  color: #e5e7eb;
  background: #94a3b82e;
}

.gt-link-text {
  color: #1f2937;
}

.gt-link-text:hover {
  color: #4338ca;
}

.scheme-dark .gt-link-text, .dark .gt-link-text {
  color: #e5e7eb;
}

.scheme-dark .gt-link-text:hover, .dark .gt-link-text:hover {
  color: #fbbf24;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@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-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-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__pane.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow .react-flow__edges {
  pointer-events: none;
  overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
  stroke: #b1b1b7;
  stroke-width: 1;
  fill: none;
}
.react-flow__edge {
  pointer-events: visibleStroke;
  cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    -webkit-animation: none;
            animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge:focus .react-flow__edge-path,
  .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555;
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge-textbg {
    fill: white;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__connectionline {
  z-index: 1001;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__node.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: -webkit-grab;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 100%;
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
  }
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%);
  }
.react-flow__attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@-webkit-keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1a192b;
  background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
    }
.react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: 0 0 0 0.5px #1a192b;
    }
.react-flow__node-group {
  background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
    border: none;
    background: #fefefe;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 5px;
  }
.react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__minimap {
  background-color: #fff;
}
.react-flow__minimap svg {
  display: block;
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: #3367d9;
  transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: #3367d9;
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
/*
 * Gap A12: enlarge ReactFlow connection handles on hover and enlarge their
 * clickable hit-area so edges are easier to draw (OLD NodeStyles.js:88-114).
 *
 * Colours are intentionally left to the node's Tailwind classes (!bg-primary,
 * theme tokens) so the handles stay theme-aware — only sizing / hit-area / the
 * hover glow are added here.
 */
.react-flow__handle {
  transition: width 0.12s ease, height 0.12s ease, box-shadow 0.12s ease;
}

.react-flow__handle:hover {
  width: 16px !important;
  height: 16px !important;
  box-shadow: 0 0 0 2px var(--primary),
    0 0 8px color-mix(in srgb, var(--primary) 50%, transparent) !important;
}

/* Transparent, larger click target centred on the handle. */
.react-flow__handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: transparent;
}
/* GT Mapper V2 — theme tokens.
 *
 * theme.js reads these as inline-style colors. Light values reproduce the
 * original hardcoded palette exactly; the `.dark` block (matched against the
 * global `.dark` class the app sets on <html>) swaps in dark-surface
 * equivalents so the mapper canvas, panels, tabs, upload cards, and feature
 * config blocks follow the app shell into dark mode. Brand accent colors and
 * the translucent mapping-highlight tints are intentionally left to theme.js
 * literals — they read correctly on either background. */

:root {
  --m-bg: #f5f7fa;
  --m-bg-panel: #ffffff;
  --m-bg-sidebar: #fafbfc;
  --m-bg-header: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);
  --m-bg-input: #f5f7fa;
  --m-bg-hover: #eef2f7;
  --m-bg-popup: #ffffff;
  --m-bg-code-block: #f8f9fb;

  --m-border: #cbd5e1;
  --m-border-light: #e2e8f0;

  --m-text: #334155;
  --m-text-secondary: #64748b;
  --m-text-muted: #94a3b8;
  --m-text-light: #cbd5e1;

  --m-loop-bg: #fef3e2;
  --m-loop-border: #f5d0a0;
  --m-ifelse-bg: #f5f0fa;
  --m-ifelse-border: #d4b8e8;
  --m-lookup-bg: #edf9f6;
  --m-lookup-border: #a8ddd0;
  --m-code-bg: #fdf2f0;
  --m-code-border: #e8b8b0;
}

.dark {
  --m-bg: #0f1115;
  --m-bg-panel: #18181b;
  --m-bg-sidebar: #161619;
  --m-bg-header: linear-gradient(135deg, #1c1c20 0%, #141417 100%);
  --m-bg-input: #1f1f23;
  --m-bg-hover: #27272a;
  --m-bg-popup: #1f1f23;
  --m-bg-code-block: #141417;

  --m-border: #71717a;
  --m-border-light: #3f3f46;

  --m-text: #e4e4e7;
  --m-text-secondary: #a1a1aa;
  --m-text-muted: #71717a;
  --m-text-light: #52525b;

  /* Feature config blocks — keep the hue cue but on dark, low-chroma fills. */
  --m-loop-bg: rgba(230, 126, 34, 0.12);
  --m-loop-border: rgba(230, 126, 34, 0.4);
  --m-ifelse-bg: rgba(155, 89, 182, 0.14);
  --m-ifelse-border: rgba(155, 89, 182, 0.45);
  --m-lookup-bg: rgba(22, 160, 133, 0.14);
  --m-lookup-border: rgba(22, 160, 133, 0.45);
  --m-code-bg: rgba(192, 57, 43, 0.13);
  --m-code-border: rgba(192, 57, 43, 0.42);
}
/* Partner Network — design tokens (CSS custom properties).
   SCOPED to .pn-root (NOT :root) so they never leak to or clobber the app's
   global tokens. The NEUTRAL surface/text tokens and the ACCENT point DIRECTLY
   at the app's shadcn tokens (src/index.css) so the module matches the rest of
   the app and follows the light/dark switcher + the runtime accent palette
   automatically.

   NOTE: the module CSS uses `var(--border)` for its hairlines. We do NOT
   redefine `--border` here — it would be a self-referential cycle and would
   also shadow the app token. Instead the module simply INHERITS the app's
   `--border` (and `--card`, `--foreground`, etc.) from :root, which is exactly
   the value we want. Only the status hues keep their own light/dark pair. */
.pn-root {
  /* Accent → app primary (switchable palette). Scoped, so it only affects this
     module's own CSS. */
  --accent: var(--primary);
  --accent-dark: var(--primary-dark);
  --accent-light: var(--primary-light);

  /* Neutral surfaces / text → app tokens. (--border is inherited from :root.) */
  --bg: var(--card);
  --bg-2: var(--secondary);
  --bg-3: var(--muted);
  --border-2: var(--border-strong);

  --text: var(--foreground);
  --text-2: var(--muted-foreground);
  --text-3: var(--muted-foreground);

  --success-bg: #EAF3DE;
  --success: #27500A;
  --danger-bg: #FCEBEB;
  --danger: #A32D2D;
  --warning-bg: #FAEEDA;
  --warning: #854F0B;

  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  --shadow: var(--shadow-sm);
  --font: var(--font-sans);
}

/* Dark mode: only the status tints need remapping — the neutral tokens above
   already track the app's dark palette via the var() references. */
html.dark .pn-root,
.dark .pn-root {
  --success-bg: rgba(39, 80, 10, 0.30);
  --success: #86c655;
  --danger-bg: rgba(163, 45, 45, 0.28);
  --danger: #f0a0a0;
  --warning-bg: rgba(133, 79, 11, 0.32);
  --warning: #e0a44a;
}
/* Partner Network — shared primitives used across components.
   All rules are scoped under .pn-root to avoid colliding with the host app's
   global element styles (e.g. PrimeReact selects, Tailwind preflight). */

/* ── Page shell ──────────────────────────────────────────────────────────── */
/* Lock the page wrapper to the viewport (minus the host app's TopNav) so
   the inner flex chain (page-header pinned at top, page-body scrolling)
   actually engages. Using `height` instead of just `max-height` because
   the inline `flex: 1; min-height: 0` on `.pn-root` was sometimes letting
   the box outgrow `max-height` when the route container above wasn't a
   height-constrained flex parent — causing the whole window to scroll
   instead of the inner `.page-body`. */
.pn-root {
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
}

/* Module button classes (.btn/.btn-primary/.btn-secondary/.btn-danger/.btn-sm)
   were removed — every button in PartnerForm/OTMPlugPlay now uses the shared
   <Button> (@/components/ui/button). */

/* ── Form elements ──────────────────────────────────────────────────────────
   These are element-level resets for the module's NATIVE <input>/<select>/
   <textarea>/<label> (e.g. in PartnerForm + the filter selects). They MUST live
   in @layer base — unlayered scoped resets beat Tailwind's layered utilities in
   the cascade, which would clobber shared <Input>/<Button> rendered inside
   .pn-root (the directory toolbar uses them). Layering lets the shared
   primitives' utilities win while native elements still pick these up. */
@layer base {
  .pn-root input,
  .pn-root select,
  .pn-root textarea {
    font-family: var(--font);
    font-size: 12px;
    padding: 7px 10px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    color: var(--text);
    width: 100%;
    transition: border-color 0.15s;
  }
  .pn-root input:focus,
  .pn-root select:focus,
  .pn-root textarea:focus { outline: none; border-color: var(--accent); }
  .pn-root textarea { resize: vertical; min-height: 70px; }
  .pn-root label { font-size: 11px; font-weight: 500; color: var(--text-2); display: block; margin-bottom: 4px; }
  .pn-root label .req { color: var(--danger); }
}

.pn-root .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pn-root .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.pn-root .form-field { display: flex; flex-direction: column; }
.pn-root .form-field.full { grid-column: 1/-1; }

/* ── Chips ────────────────────────────────────────────────────────────────── */
.pn-root .chip-selector { display: flex; flex-wrap: wrap; gap: 5px; }
.pn-root .chip {
  font-size: 11px; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--border-2); cursor: pointer;
  background: var(--bg); color: var(--text-2);
  transition: all 0.12s; user-select: none;
}
.pn-root .chip.active { background: var(--accent-light); border-color: #378ADD; color: var(--accent-dark); font-weight: 500; }
.pn-root .chip.active-haz { background: var(--warning-bg); border-color: #EF9F27; color: var(--warning); font-weight: 500; }

/* ── Badges & status dot ──────────────────────────────────────────────────── */
.pn-root .badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 500;
}
.pn-root .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ── Stat cards (used by Directory + Hub) ─────────────────────────────────── */
.pn-root .stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 16px;
  align-items: start;          /* prevent host's grid-item stretch */
}
.pn-root .stat-card {
  background: var(--bg-2); border-radius: var(--radius);
  padding: 12px 14px; border: 1px solid var(--border);
  /* Pin to content height — defends against any host grid/flex stretch */
  align-self: start;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
}
.pn-root .stat-num { font-size: 24px; font-weight: 600; color: var(--text); line-height: 1; }
.pn-root .stat-label { font-size: 11px; color: var(--text-2); margin-top: 3px; }

/* ── Page header (used by Directory) ──────────────────────────────────────── */
/* The action toolbar now uses the shared <TableToolbar> (a Card). This row no
   longer adds its own padding/border so its left edge lines up with the module
   <PageHeader> above it (the host PageShell owns the page padding). */
.pn-root .page-header {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.pn-root .page-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; flex: 1; }
.pn-root .page-title svg { color: var(--accent); }
.pn-root .page-sub { font-size: 11px; color: var(--text-2); margin-top: 2px; }
/* Container for the stats + filters + table + pagination. Doesn't scroll
   itself — the shared DataTable (`.pn-datatable`) flex-fills and scrolls its
   own body internally so stats and filter controls stay visible while the user
   scans rows. No left/right padding so content aligns with the <PageHeader>; a
   top gap separates it from the toolbar above. */
.pn-root .page-body {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 16px 0 0;
  gap: 0;
}
/* Everything inside page-body EXCEPT the flex-filling shared DataTable should
   keep its natural height so the table gets the remaining space. */
.pn-root .page-body > *:not(.pn-datatable) { flex-shrink: 0; }

/* ── Table primitives (OTM success modal + PartnerForm bare tables) ─────────
   These are ELEMENT-level rules for the module's own utility-less <table>s.
   They MUST live in @layer base: the directory now uses the shared <DataTable>
   (rendered INSIDE .pn-root), whose cells are styled with Tailwind utilities —
   unlayered element rules would beat those utilities and clobber the
   DataTable's padding / borders / border-collapse / hover / font. Layering
   lets the DataTable's utilities win while the module's own bare tables (OTM
   success table, etc.) still pick these defaults up. */
@layer base {
  .pn-root table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .pn-root th {
    text-align: left; padding: 9px 12px;
    font-size: 10px; font-weight: 600; color: var(--text-2);
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    background: var(--bg-2); white-space: nowrap;
  }
  .pn-root td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .pn-root tr:last-child td { border-bottom: none; }
  .pn-root tr:hover td { background: var(--bg-2); }
}

/* ── Misc utilities ───────────────────────────────────────────────────────── */
.pn-root .empty-state {
  text-align: center; padding: 40px 20px;
  color: var(--text-2);
  border: 2px dashed var(--border-2);
  border-radius: var(--radius); font-size: 12px;
}
.pn-root .info-bar {
  font-size: 10px; color: var(--text-2);
  padding: 6px 10px; background: var(--accent-light);
  border-radius: var(--radius-sm); border-left: 2px solid var(--accent);
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
/* PartnerDirectory — stat cards, filters, and the DataTable cell renderers
   (partner avatar/name, mode chips) still used by the shared table's `body`. */

/* ── KPI stat cards ───────────────────────────────────────────────────────
   Light-mode: soft pastel fill + colored top bar + saturated number.
   Dark-mode: translucent tint of the same hue over the dark card surface so
   the cards read as colored without fighting the app's #18181b shell. */
.pn-root .stat-card.stat-blue   { border-top: 3px solid #185FA5; background: #F4F8FC; }
.pn-root .stat-card.stat-blue   .stat-num { color: #0C447C; }
.pn-root .stat-card.stat-green  { border-top: 3px solid #22c55e; background: #F2FBF5; }
.pn-root .stat-card.stat-green  .stat-num { color: #16803c; }
.pn-root .stat-card.stat-violet { border-top: 3px solid #8B5CF6; background: #F6F2FC; }
.pn-root .stat-card.stat-violet .stat-num { color: #5b21b6; }
.pn-root .stat-card.stat-amber  { border-top: 3px solid #F59E0B; background: #FFF8EC; }
.pn-root .stat-card.stat-amber  .stat-num { color: #854F0B; }

html.dark .pn-root .stat-card.stat-blue,
.dark .pn-root .stat-card.stat-blue   { background: rgba(24, 95, 165, 0.16); }
html.dark .pn-root .stat-card.stat-blue   .stat-num,
.dark .pn-root .stat-card.stat-blue   .stat-num { color: #7fb6ec; }
html.dark .pn-root .stat-card.stat-green,
.dark .pn-root .stat-card.stat-green  { background: rgba(34, 197, 94, 0.16); }
html.dark .pn-root .stat-card.stat-green  .stat-num,
.dark .pn-root .stat-card.stat-green  .stat-num { color: #5dd58b; }
html.dark .pn-root .stat-card.stat-violet,
.dark .pn-root .stat-card.stat-violet { background: rgba(139, 92, 246, 0.18); }
html.dark .pn-root .stat-card.stat-violet .stat-num,
.dark .pn-root .stat-card.stat-violet .stat-num { color: #b89cf8; }
html.dark .pn-root .stat-card.stat-amber,
.dark .pn-root .stat-card.stat-amber  { background: rgba(245, 158, 11, 0.16); }
html.dark .pn-root .stat-card.stat-amber  .stat-num,
.dark .pn-root .stat-card.stat-amber  .stat-num { color: #e6b65a; }

/* Wrapper around the filter <TableToolbar>; just provides bottom spacing
   before the table (the toolbar itself is the shared Card). */
.pn-root .filter-bar { margin-bottom: 14px; }

.pn-root .search-wrap { position: relative; }
.pn-root .search-wrap svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-3); z-index: 1; pointer-events: none; }

/* The directory table is now the shared <DataTable> (its own card/border/
   scroll body); the bespoke .table-wrap + frozen-column + .pn-row-selected
   rules were removed with it. NOTE: sticky first-columns are not carried over —
   the shared DataTable doesn't freeze columns (acceptable trade-off).

   The DataTable's own rows-per-page control is a native <select> rendered
   inside .pn-root, so the module's @layer base `.pn-root select { width:100% }`
   reset would stretch it full-width. Keep DataTable's native selects auto. */
.pn-root .page-body select { width: auto; }

.pn-root .partner-name-cell { display: flex; align-items: center; gap: 10px; }
.pn-root .partner-avatar {
  width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.pn-root .partner-name { font-weight: 500; font-size: 12px; }
.pn-root .partner-sub { font-size: 10px; color: var(--text-2); margin-top: 1px; }

.pn-root .mode-chips { display: flex; gap: 3px; flex-wrap: wrap; }
.pn-root .mode-chip-s { font-size: 9px; padding: 2px 6px; border-radius: 20px; white-space: nowrap; }

.pn-root .action-row { display: flex; gap: 5px; align-items: center; }
.pn-root .del-confirm {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: var(--danger-bg);
  border-radius: var(--radius-sm);
  border: 1px solid #F09595;
}
.pn-root .del-confirm span { font-size: 10px; color: var(--danger); }

/* Spinner for the Refresh button while reloading. */
@keyframes pn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* PartnerForm — form header, tabs, sections, interface cards, credentials, docs */

.pn-root .form-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg); flex-shrink: 0;
}
.pn-root .back-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-2); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2); flex-shrink: 0;
}
.pn-root .back-btn:hover { background: var(--bg-3); }

.pn-root .form-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-2); flex-shrink: 0; }
.pn-root .form-tab {
  padding: 10px 18px; font-size: 12px; cursor: pointer;
  color: var(--text-2); border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 6px;
  transition: color 0.12s; user-select: none; white-space: nowrap;
  margin-bottom: -1px;
}
.pn-root .form-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; background: var(--bg); }
.pn-root .tab-count { font-size: 9px; padding: 1px 6px; border-radius: 20px; background: var(--accent-light); color: var(--accent); font-weight: 600; }

.pn-root .form-body { flex: 1; overflow-y: auto; padding: 20px; }

.pn-root .form-section { margin-bottom: 24px; }
.pn-root .form-section-title {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
}
.pn-root .form-section-title svg { color: var(--accent); }

/* Checkbox rows (used in General tab capability flags) */
.pn-root .check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 5px 0; }
.pn-root .check-box {
  width: 16px; height: 16px; border-radius: 3px;
  border: 1px solid var(--border-2); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pn-root .check-box.on { background: var(--accent); border-color: var(--accent); }
.pn-root .check-box.on svg { color: #fff; }
.pn-root .check-label { font-size: 12px; color: var(--text); }

/* Interface cards */
.pn-root .iface-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pn-root .iface-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: visible; }
.pn-root .iface-card.expanded { border-color: var(--accent); }
.pn-root .iface-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-2); cursor: pointer; }
.pn-root .iface-card.expanded .iface-header { border-radius: var(--radius) var(--radius) 0 0; }
.pn-root .iface-name { font-size: 12px; font-weight: 500; color: var(--text); flex: 1; }
.pn-root .iface-body { padding: 14px; border-top: 1px solid var(--border); display: none; }
.pn-root .iface-card.expanded .iface-body { display: block; }
.pn-root .iface-actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.pn-root .test-result {
  font-size: 11px; padding: 4px 10px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 4px;
}

/* Scope + Hazmat row */
.pn-root .scope-haz-row { display: flex; gap: 20px; margin-bottom: 12px; }
.pn-root .scope-group { display: flex; flex-direction: column; gap: 5px; }
.pn-root .scope-group-label { font-size: 10px; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }

/* Documents tab */
.pn-root .upload-area {
  border: 2px dashed var(--border-2); border-radius: var(--radius);
  padding: 24px; text-align: center; cursor: pointer;
  background: var(--bg-2); transition: all 0.15s;
}
.pn-root .upload-area:hover { border-color: var(--accent); background: var(--accent-light); }
.pn-root .upload-area-icon { font-size: 28px; margin-bottom: 8px; }
.pn-root .upload-area-text { font-size: 12px; color: var(--text-2); }
.pn-root .upload-area-sub { font-size: 10px; color: var(--text-3); margin-top: 4px; }

.pn-root .file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-top: 6px;
}
.pn-root .file-name { font-size: 11px; color: var(--text); flex: 1; }
/* .file-rm removed — file remove uses the shared <Button variant="ghost">. */

/* Legacy: protocol-specific config block (kept for the per-interface env/docs panels that use the same look) */
.pn-root .proto-config {
  background: var(--bg-2); border-radius: var(--radius-sm);
  padding: 12px; margin: 10px 0;
  border: 1px solid var(--border);
}
.pn-root .proto-config-title {
  font-size: 10px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 10px;
}

/* Legacy: credentials block (kept in case the tab is re-enabled) */
.pn-root .cred-block { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.pn-root .cred-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.pn-root .cred-body { padding: 14px; }
.pn-root .masked-field { display: flex; gap: 6px; align-items: center; }
.pn-root .masked-field input { flex: 1; }
.pn-root .eye-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2); flex-shrink: 0;
}
/* OTMPlugPlay — top bar, partner panel, OTM adapter, integration hub, PnP modal, settings panel */

/* ── App shell ────────────────────────────────────────────────────────────── */
.pn-root .otm-app { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
/* NOTE: the old `.otm-topbar` blue banner (hardcoded var(--accent-dark), stayed
   blue in dark mode + duplicated the module PageHeader) was removed in favour of
   a tokenized <TableToolbar>. Its Back + Integration-hub controls now live there. */

.pn-root .otm-main { display: flex; flex: 1; overflow: hidden; position: relative; }
.pn-root .otm-main.hidden { display: none; }

/* ── Left panel ───────────────────────────────────────────────────────────── */
.pn-root .otm-left { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); }

/* Drag handle that sits between .otm-left and .otm-right. The actual hit
   target is 6px wide for easier grabbing; the visible 1px line lives in
   the centre via the gradient so it doesn't visually thicken the seam. */
.pn-root .otm-resizer {
  flex-shrink: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 1;
}
.pn-root .otm-resizer::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: 50%; width: 1px;
  background: var(--border);
  transform: translateX(-50%);
}
.pn-root .otm-resizer:hover::before,
.pn-root .otm-resizer:active::before {
  width: 2px;
  background: var(--accent);
}
.pn-root .otm-left-hd { padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg); flex-shrink: 0; }
.pn-root .otm-left-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pn-root .otm-left-title { font-size: 12px; font-weight: 600; flex: 1; display: flex; align-items: center; gap: 5px; }
.pn-root .otm-left-title svg { color: var(--accent); }
.pn-root .otm-sum-chip {
  font-size: 9px; padding: 2px 7px; border-radius: 20px;
  background: var(--accent-light); color: var(--accent-dark); font-weight: 500;
  display: flex; align-items: center; gap: 2px;
}
.pn-root .settings-btn {
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2);
}
.pn-root .settings-btn.active { background: var(--warning-bg); border-color: #EF9F27; color: var(--warning); }

.pn-root .active-filters { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; }
.pn-root .af-pill {
  font-size: 9px; padding: 2px 7px; border-radius: 20px;
  background: var(--warning-bg); color: var(--warning);
  border: 1px solid #EF9F27;
  display: flex; align-items: center; gap: 3px; font-weight: 500; cursor: pointer;
}
.pn-root .af-pill:hover { background: #f5c875; }

.pn-root .otm-search { position: relative; margin-bottom: 6px; }
.pn-root .otm-search svg { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.pn-root .otm-search input { padding-left: 26px; font-size: 11px; }

.pn-root .qf-row { margin-bottom: 4px; }
.pn-root .qf-label { font-size: 8px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.pn-root .qf-chips { display: flex; flex-wrap: wrap; gap: 2px; }
.pn-root .qf-chip {
  font-size: 9px; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--border-2); cursor: pointer;
  background: var(--bg); color: var(--text-2);
  white-space: nowrap; transition: all 0.1s;
}
.pn-root .qf-chip.on { background: var(--accent-light); border-color: #378ADD; color: var(--accent-dark); }
.pn-root .qf-divider { height: 1px; background: var(--border); margin: 5px 0; }

.pn-root .partner-list { flex: 1; overflow-y: auto; padding: 5px; background: var(--bg-2); }

/* Carrier card */
.pn-root .carrier-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 4px; }
.pn-root .carrier-card.expanded { border-color: #378ADD; }
.pn-root .carrier-header { display: flex; align-items: center; gap: 7px; padding: 7px 9px; cursor: pointer; user-select: none; }
.pn-root .carrier-icon {
  width: 26px; height: 26px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.pn-root .carrier-name { font-size: 11px; font-weight: 500; flex: 1; }
.pn-root .carrier-modes-sub { font-size: 9px; color: var(--text-2); margin-top: 1px; }
.pn-root .carrier-chevron { color: var(--text-3); transition: transform 0.15s; font-size: 12px; }
.pn-root .carrier-card.expanded .carrier-chevron { transform: rotate(180deg); }
.pn-root .carrier-body { display: none; padding: 0 6px 5px; }
.pn-root .carrier-card.expanded .carrier-body { display: block; }

.pn-root .mode-group { margin-bottom: 3px; }
.pn-root .mode-group-header { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 4px; cursor: pointer; }
.pn-root .mode-group-header:hover { background: var(--bg-2); }
.pn-root .mode-group-label { font-size: 10px; font-weight: 500; flex: 1; }
.pn-root .mode-group-count { font-size: 8px; color: var(--text-3); }
.pn-root .mode-group-chevron { font-size: 10px; color: var(--text-3); transition: transform 0.12s; }
.pn-root .mode-group.open .mode-group-chevron { transform: rotate(180deg); }
.pn-root .mode-group-items { display: none; padding-left: 5px; }
.pn-root .mode-group.open .mode-group-items { display: block; }

.pn-root .iface-block { border: 1px solid var(--border); border-radius: 3px; margin-bottom: 2px; background: var(--bg); }
.pn-root .iface-block.selected { border-color: #3B6D11; background: var(--success-bg); }
.pn-root .iface-block.filtered { opacity: 0.25; pointer-events: none; }
.pn-root .iface-block-header { display: flex; align-items: center; gap: 3px; padding: 5px 7px; cursor: pointer; }
.pn-root .iface-block-name { font-size: 10px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-root .iface-block.selected .iface-block-name { color: var(--success); }
.pn-root .iface-proto-pill { font-size: 8px; padding: 1px 5px; border-radius: 20px; font-weight: 500; flex-shrink: 0; }
.pn-root .iface-sel-btn {
  font-size: 8px; padding: 1px 7px; border-radius: 20px;
  border: 1px solid #378ADD;
  background: var(--accent-light); color: var(--accent-dark);
  cursor: pointer; flex-shrink: 0;
}
.pn-root .iface-block.selected .iface-sel-btn { border-color: #3B6D11; background: #c0dd97; color: #173404; }

/* ── Right panel: OTM Adapter ─────────────────────────────────────────────── */
.pn-root .otm-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pn-root .otm-right-hd { padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pn-root .otm-right-title { font-size: 12px; font-weight: 600; flex: 1; display: flex; align-items: center; gap: 6px; }
.pn-root .otm-right-title svg { color: #3B6D11; }
.pn-root .otm-oracle-badge {
  font-size: 9px; padding: 2px 8px; border-radius: 20px;
  background: var(--accent-dark); color: #fff; font-weight: 500;
}
/* .automap-btn removed — Auto map all / Clear all use the shared <Button>. */

.pn-root .otm-sum-bar { padding: 5px 12px; background: var(--bg-2); border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.pn-root .otm-sum-label { font-size: 9px; color: var(--text-2); font-weight: 500; }
.pn-root .otm-sum-chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }

.pn-root .otm-slot-zone { flex: 1; overflow-y: auto; padding: 8px 10px; }
.pn-root .slot-category { margin-bottom: 8px; }
.pn-root .slot-cat-label {
  font-size: 9px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding-bottom: 3px; border-bottom: 1px solid var(--border);
  margin-bottom: 3px;
}
.pn-root .slot-row {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 8px; border-radius: 3px;
  border: 1px solid var(--border);
  margin-bottom: 2px;
  background: var(--bg); min-height: 30px;
}
.pn-root .slot-row.drop-hover { border: 1.5px dashed #378ADD; background: var(--accent-light); }
.pn-root .slot-row.mapped { border-color: #3B6D11; background: var(--success-bg); }
.pn-root .slot-icon { font-size: 11px; color: var(--text-3); flex-shrink: 0; margin-top: 2px; }
.pn-root .slot-row.mapped .slot-icon { color: #3B6D11; }
.pn-root .slot-label { font-size: 10px; color: var(--text); flex: 1; }
/* Compact count pill shown next to the slot label whenever the slot has
   at least one mapping — gives an at-a-glance view of how many carriers
   are mapped without having to count chips. */
.pn-root .slot-count {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 20px;
  background: #3B6D11;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 14px;
  min-width: 14px;
  text-align: center;
}
/* Lay mapped-carrier chips horizontally and let them wrap onto multiple
   lines when a single slot has many integrations mapped. `flex: 1`
   lets the badges area share the slot row with the label cell on the
   left, and `justify-content: flex-end` keeps chips right-aligned so
   they line up the same way no matter how many there are. */
.pn-root .slot-badges {
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 3px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}
.pn-root .slot-badge {
  font-size: 7px; padding: 2px 5px; border-radius: 3px;
  background: #C0DD97; color: var(--success); font-weight: 500;
  display: inline-flex; align-items: center; gap: 3px;
  white-space: nowrap;
}
.pn-root .slot-empty { font-size: 9px; color: var(--text-3); font-style: italic; }

.pn-root .otm-status-bar { padding: 5px 12px; border-top: 1px solid var(--border); background: var(--bg-2); display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-2); flex-shrink: 0; }
.pn-root .otm-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #97C459; }

/* ── Integration Hub ──────────────────────────────────────────────────────── */
.pn-root .hub-panel { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.pn-root .hub-panel.open { display: flex; }
.pn-root .hub-hd { padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pn-root .hub-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex: 1; }
.pn-root .hub-title svg { color: var(--accent); }

.pn-root .view-toggle { display: flex; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; }
.pn-root .vt-btn {
  font-size: 11px; padding: 5px 12px; cursor: pointer;
  color: var(--text-2); background: var(--bg);
  border: none; display: flex; align-items: center; gap: 4px;
  white-space: nowrap; transition: all 0.1s;
  font-family: var(--font);
}
.pn-root .vt-btn:not(:last-child) { border-right: 1px solid var(--border-2); }
.pn-root .vt-btn.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }

.pn-root .export-wrap { position: relative; }
.pn-root .export-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--bg-2);
  cursor: pointer; font-size: 11px; color: var(--text-2);
  font-family: var(--font);
}
.pn-root .export-btn:hover { background: var(--bg-3); }
.pn-root .export-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg); border: 1px solid var(--border-2);
  border-radius: var(--radius);
  min-width: 175px; z-index: 200; display: none;
  box-shadow: var(--shadow); overflow: hidden;
}
.pn-root .export-menu.open { display: block; }
.pn-root .exp-menu-hd {
  font-size: 9px; font-weight: 600; color: var(--text-2);
  padding: 6px 12px 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.pn-root .exp-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  font-size: 11px; color: var(--text); transition: background 0.1s;
}
.pn-root .exp-menu-item:hover { background: var(--bg-2); }
.pn-root .exp-ext { font-size: 8px; padding: 1px 6px; border-radius: 20px; margin-left: auto; font-weight: 500; }

.pn-root .pnp-launch-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: var(--radius-sm);
  border: none; background: var(--accent-dark); color: #fff;
  cursor: pointer; font-size: 11px; font-weight: 500;
  white-space: nowrap; font-family: var(--font);
}

/* Grid wrapper for the shared <MetricCard> KPI tiles (the cards bring their
   own surface/padding now). */
.pn-root .hub-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-2); flex-shrink: 0; }
.pn-root .hub-mode-bar { display: flex; gap: 4px; padding: 6px 16px; border-bottom: 1px solid var(--border); background: var(--bg-2); flex-shrink: 0; flex-wrap: wrap; }

.pn-root .hub-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.pn-root .hub-carrier-group { margin-bottom: 14px; }
.pn-root .hub-carrier-group.collapsed { margin-bottom: 6px; }
.pn-root .hub-carrier-hd {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 5px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.1s;
}
.pn-root .hub-carrier-hd:hover { background: var(--bg-2); }
.pn-root .hub-carrier-caret { transition: transform 0.12s; }
.pn-root .hub-carrier-ico {
  width: 24px; height: 24px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.pn-root .hub-carrier-name { font-size: 12px; font-weight: 500; }
.pn-root .hub-carrier-count { margin-left: auto; font-size: 10px; color: var(--text-2); }

.pn-root .hub-mode-group { margin-bottom: 6px; }
.pn-root .hub-mode-label { font-size: 9px; font-weight: 500; display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.pn-root .hub-iface-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg);
  margin-bottom: 2px;
}
.pn-root .hub-iface-name { font-size: 10px; flex: 1; }
.pn-root .hub-row-badges { display: flex; gap: 3px; flex-wrap: wrap; }
.pn-root .hub-badge { font-size: 8px; padding: 1px 6px; border-radius: 20px; font-weight: 500; }
.pn-root .hub-badge.proto { background: var(--accent-light); color: var(--accent-dark); }
.pn-root .hub-badge.fmt { background: var(--warning-bg); color: var(--warning); }
.pn-root .hub-badge.otm { background: var(--success-bg); color: var(--success); display: flex; align-items: center; gap: 2px; }

.pn-root .flow-view { flex: 1; overflow-y: auto; padding: 14px 16px; display: none; }
.pn-root .flow-view.open { display: block; }
.pn-root .flow-diagram { display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; padding-bottom: 10px; }
.pn-root .flow-col { display: flex; flex-direction: column; gap: 4px; }
.pn-root .flow-col-label { font-size: 9px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.pn-root .flow-carrier-box { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 4px; border: 1px solid; font-size: 9px; font-weight: 500; }
.pn-root .flow-connector { display: flex; align-items: center; color: #378ADD; font-size: 18px; padding-top: 20px; }
.pn-root .flow-slot-box {
  padding: 4px 8px; border-radius: 0 4px 4px 0;
  border: 1px solid var(--border); border-left: 2px solid;
  background: var(--bg); margin-bottom: 3px;
  font-size: 9px; font-weight: 500;
}
.pn-root .flow-otm-box { padding: 12px 14px; background: var(--accent-dark); border-radius: 7px; text-align: center; color: #fff; }
.pn-root .flow-otm-label { font-size: 11px; font-weight: 600; }
.pn-root .flow-otm-sub { font-size: 9px; color: #85B7EB; margin-top: 2px; }
.pn-root .flow-green-connector { display: flex; align-items: center; color: #3B6D11; font-size: 18px; padding-top: 20px; }
.pn-root .hub-empty { text-align: center; padding: 40px 20px; color: var(--text-2); font-size: 12px; }

/* ── PnP Modal ────────────────────────────────────────────────────────────── */
/* position: fixed (not absolute) so the dim layer covers the whole viewport —
   including the host app's sidebar and top nav, not just the OTM panel.
   z-index is high enough to sit above PrimeReact/host shells. */
.pn-root .modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.42);
  display: none; align-items: flex-start; justify-content: center;
  padding: 20px; z-index: 10000; overflow-y: auto;
}
.pn-root .modal-backdrop.open { display: flex; }
.pn-root .modal-box {
  background: var(--bg); border-radius: var(--radius-lg);
  border: 1px solid var(--border-2);
  width: 100%; max-width: 580px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
/* Neutral, tokenized header — mirrors the OTM top-bar precedent that replaced
   the old hardcoded blue banner. Reads correctly in light + dark; the only
   accent is the small icon glyph. */
.pn-root .modal-header {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pn-root .modal-header-icon {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--bg-3); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.pn-root .modal-header-title { font-size: 13px; font-weight: 500; color: var(--text); }
.pn-root .modal-header-sub { font-size: 10px; color: var(--text-3); margin-top: 1px; }
/* .modal-close removed — uses the shared <Button variant="ghost" size="icon">. */

.pn-root .modal-body { overflow-y: auto; max-height: 420px; padding: 14px 18px; }
.pn-root .modal-notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--warning-bg);
  border-radius: var(--radius-sm); border: 1px solid #EF9F27;
  margin-bottom: 14px;
}
.pn-root .modal-notice-text { font-size: 11px; color: #633806; line-height: 1.5; }
.pn-root .modal-notice-text strong { font-weight: 600; }

.pn-root .modal-section-title {
  font-size: 10px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 8px; display: flex; align-items: center; gap: 4px;
}

.pn-root .pnp-carrier-group { margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pn-root .pnp-carrier-hd { display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.pn-root .pnp-carrier-name { font-size: 11px; font-weight: 500; flex: 1; }
.pn-root .pnp-mode-badge { font-size: 8px; padding: 1px 7px; border-radius: 20px; font-weight: 500; }
.pn-root .pnp-iface-row { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.pn-root .pnp-iface-row:last-child { border-bottom: none; }
.pn-root .pnp-iface-left { flex: 1; min-width: 0; }
.pn-root .pnp-iface-name { font-size: 11px; font-weight: 500; }
.pn-root .pnp-iface-meta { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.pn-root .pnp-badge { font-size: 8px; padding: 1px 6px; border-radius: 20px; font-weight: 500; }
.pn-root .pnp-badge.edi { background: var(--warning-bg); color: var(--warning); }
.pn-root .pnp-badge.api { background: var(--accent-light); color: var(--accent-dark); }
.pn-root .pnp-badge.fmt { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border); }
.pn-root .pnp-badge.otm { background: var(--success-bg); color: var(--success); }

.pn-root .conn-selector { display: flex; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.pn-root .conn-opt {
  padding: 5px 12px; font-size: 10px; cursor: pointer;
  color: var(--text-2); background: var(--bg-2);
  border: none; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font);
}
.pn-root .conn-opt:not(:last-child) { border-right: 1px solid var(--border-2); }
.pn-root .conn-opt.active-sftp { background: #EEEDFE; color: #3C3489; font-weight: 500; }
.pn-root .conn-opt.active-as2 { background: var(--accent-light); color: var(--accent-dark); font-weight: 500; }
.pn-root .api-ready-badge { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-2); flex-shrink: 0; }
.pn-root .conn-label-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.pn-root .conn-req-label { font-size: 8px; font-weight: 500; color: var(--text-2); }
.pn-root .conn-req-label span { color: var(--danger); }

.pn-root .modal-sum-bar { display: flex; gap: 8px; align-items: center; padding: 9px 18px; background: var(--bg-2); border-top: 1px solid var(--border); flex-wrap: wrap; flex-shrink: 0; }
.pn-root .modal-sum-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-2); }
.pn-root .modal-sum-item strong { color: var(--text); font-weight: 500; }
.pn-root .modal-sum-dot { width: 6px; height: 6px; border-radius: 50%; }

.pn-root .modal-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-top: 1px solid var(--border);
  background: var(--bg); flex-shrink: 0;
}
.pn-root .modal-ft-note { font-size: 10px; color: var(--text-2); flex: 1; display: flex; align-items: center; gap: 5px; }
.pn-root .modal-ft-note.ok { color: var(--success); }

.pn-root .success-screen { display: none; flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px; }
.pn-root .success-screen.open { display: flex; }
.pn-root .success-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--success-bg);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.pn-root .success-title { font-size: 15px; font-weight: 600; color: var(--text); text-align: center; }
.pn-root .success-sub { font-size: 11px; color: var(--text-2); text-align: center; }
.pn-root .success-table { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pn-root .success-table table { width: 100%; border-collapse: collapse; font-size: 10px; }
.pn-root .success-table th { background: var(--bg-2); padding: 6px 10px; font-size: 9px; color: var(--text-2); font-weight: 500; border-bottom: 1px solid var(--border); text-align: left; }
.pn-root .success-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
.pn-root .success-table tr:last-child td { border-bottom: none; }

/* ── Settings slide-out panel (used by both partner-network + adapter settings) ── */
/* The `.pn-root { max-height: ... }` cap lives in lib/styles/base.css so
   it applies to both the OTM Plug & Play page AND the Partner directory
   (this CSS file is only loaded when the OTM page mounts). */
.pn-root .sp-overlay { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.pn-root .sp-panel {
  /* Scoped inside .pn-root so it doesn't bleed over the playground's
     global TopNav / sidenav. The .pn-root cap above makes sure the
     panel's `top:0; bottom:0` resolves to the visible viewport area. */
  position: absolute; top: 0; bottom: 0; left: 0; width: 360px;
  background: var(--bg); border-right: 1px solid var(--border-2);
  display: flex; flex-direction: column;
  transform: translateX(-102%); transition: transform 0.25s ease;
  pointer-events: all; box-shadow: 4px 0 20px rgba(0,0,0,0.1);
}
.pn-root .sp-panel.open { transform: translateX(0); }
.pn-root .sp-hd {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; background: var(--bg-2);
}
.pn-root .sp-title { font-size: 12px; font-weight: 600; flex: 1; display: flex; align-items: center; gap: 5px; }
.pn-root .sp-title svg { color: var(--accent); }
/* .sp-close removed — settings-panel close uses the shared <Button>. */
.pn-root .sp-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.pn-root .sp-section { margin-bottom: 16px; }
.pn-root .sp-section-title {
  font-size: 10px; font-weight: 600; color: var(--text-2);
  margin-bottom: 6px; display: flex; align-items: center; gap: 4px;
  padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.pn-root .sp-note {
  font-size: 9px; color: var(--text-2);
  margin-bottom: 8px; line-height: 1.5;
  padding: 5px 8px;
  background: var(--accent-light);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pn-root .sp-foot {
  padding: 10px 14px; border-top: 1px solid var(--border);
  display: flex; gap: 8px;
  /* Keep the Reset / Cancel / Apply buttons pinned at the bottom of the
     panel even when the body content is very tall. Without flex-shrink:0
     the footer can collapse and visually disappear below the fold. */
  flex-shrink: 0; background: var(--bg);
}
/* .sp-btn* removed — settings-panel Reset/Cancel/Apply/Done use the shared
   <Button> with `flex-1` to preserve the equal-fill footer layout. */

.pn-root .sp-carrier-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.pn-root .sp-carrier-table th { font-size: 9px; font-weight: 500; color: var(--text-2); padding: 5px 8px; border-bottom: 1px solid var(--border); background: var(--bg-2); text-align: left; }
.pn-root .sp-carrier-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pn-root .sp-carrier-table tr:last-child td { border-bottom: none; }

/* Switch (used inside the settings panel) */
.pn-root .sw-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pn-root .sw { position: relative; width: 34px; height: 18px; }
.pn-root .sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.pn-root .sw-track {
  position: absolute; inset: 0; border-radius: 9px;
  background: var(--bg-3); border: 1px solid var(--border-2);
  cursor: pointer; transition: background 0.2s;
}
.pn-root .sw input:checked + .sw-track { background: var(--accent); border-color: var(--accent); }
.pn-root .sw-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
  pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.pn-root .sw input:checked ~ .sw-thumb { transform: translateX(16px); }
.pn-root .sw-label { font-size: 7px; color: var(--text-3); white-space: nowrap; }
.pn-root .sw-label.blue { color: var(--accent); font-weight: 500; }
.pn-root .sw-label.amber { color: var(--warning); font-weight: 500; }

/* Searchable dropdown (used in the settings panel) */
.pn-root .dd-input-wrap {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--bg-2); margin-bottom: 8px;
}
.pn-root .dd-input-wrap input { border: none; background: transparent; padding: 0; font-size: 11px; }
.pn-root .dd-input-wrap input:focus { outline: none; }
.pn-root .dd-dropdown {
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  max-height: 160px; overflow-y: auto; display: none; background: var(--bg);
}
.pn-root .dd-dropdown.open { display: block; }
.pn-root .dd-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 11px; }
.pn-root .dd-item:hover { background: var(--bg-2); }
.pn-root .dd-item.sel { background: var(--accent-light); color: var(--accent-dark); }
.pn-root .dd-item-ico {
  width: 22px; height: 22px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.pn-root .dd-item-modes { font-size: 8px; color: var(--text-2); margin-left: auto; }

/* Selection-count badge (carrier card) */
.pn-root .sel-cnt-badge {
  font-size: 7px; padding: 1px 5px; border-radius: 20px;
  background: var(--success-bg); color: var(--success); font-weight: 600;
}
/* GoParcel — two-pane drag & drop board.
   All rules are scoped under .gp-root so nothing leaks into the host app.
   The module-local tokens below point DIRECTLY at the app's shadcn tokens
   (src/index.css), so the board follows the light/dark switcher and the
   runtime accent palette automatically. `--border` is inherited from :root
   on purpose — redefining it here would be a self-referential cycle. */

.gp-root {
  --gp-accent: var(--primary);
  --gp-accent-dark: var(--primary-dark);
  --gp-accent-light: var(--primary-light);

  --gp-bg: var(--card);
  --gp-bg-2: var(--secondary);
  --gp-border-2: var(--border-strong);

  --gp-text: var(--foreground);
  --gp-text-2: var(--muted-foreground);

  --gp-ok-bg: #eaf3de;
  --gp-ok: #27500a;
  --gp-ok-line: #3b6d11;
  --gp-warn-bg: #faeeda;
  --gp-warn: #854f0b;
  --gp-warn-line: #ef9f27;

  font-family: var(--font-sans);
  color: var(--gp-text);
}

html.dark .gp-root,
.dark .gp-root {
  --gp-ok-bg: rgba(39, 80, 10, 0.3);
  --gp-ok: #86c655;
  --gp-warn-bg: rgba(133, 79, 11, 0.32);
  --gp-warn: #e0a44a;
}

/* ── Shell ────────────────────────────────────────────────────────────────── */
.gp-root .gp-board { display: flex; flex: 1; min-height: 0; overflow: hidden; position: relative; }
.gp-root .gp-board.hidden { display: none; }

.gp-root .gp-banner {
  padding: 8px 14px; font-size: 11px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.gp-root .gp-banner.info { background: var(--gp-accent-light); color: var(--gp-accent-dark); }
.gp-root .gp-banner.warn { background: var(--gp-warn-bg); color: var(--gp-warn); border-bottom-color: var(--gp-warn-line); }

/* ── Panel chrome shared by both sides ────────────────────────────────────── */
.gp-root .gp-pane-hd {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  background: var(--gp-bg); flex-shrink: 0;
}
.gp-root .gp-pane-top { display: flex; align-items: center; gap: 6px; }
.gp-root .gp-pane-title {
  font-size: 12px; font-weight: 600; flex: 1;
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.gp-root .gp-pane-title svg { color: var(--gp-accent); flex-shrink: 0; }

.gp-root .gp-chip {
  font-size: 9px; padding: 2px 7px; border-radius: 20px;
  background: var(--gp-accent-light); color: var(--gp-accent-dark);
  font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
}
.gp-root .gp-chip.ok { background: var(--gp-ok-bg); color: var(--gp-ok); }

/* ── Left pane: carriers ──────────────────────────────────────────────────── */
.gp-root .gp-left {
  flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); min-width: 0;
}

.gp-root .gp-search { position: relative; margin: 6px 0; }
.gp-root .gp-search svg {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  color: var(--gp-text-2); pointer-events: none;
}
.gp-root .gp-search input {
  width: 100%; padding: 6px 8px 6px 26px; font-size: 11px;
  border: 1px solid var(--gp-border-2); border-radius: 5px;
  background: var(--gp-bg-2); color: var(--gp-text);
}
.gp-root .gp-search input:focus { outline: none; border-color: var(--gp-accent); }

.gp-root .gp-filter-row { margin-bottom: 4px; }
.gp-root .gp-filter-label {
  font-size: 8px; font-weight: 700; color: var(--gp-text-2);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px;
}
.gp-root .gp-filter-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.gp-root .gp-fchip {
  font-size: 9px; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--gp-border-2); background: var(--gp-bg);
  color: var(--gp-text-2); cursor: pointer; white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.gp-root .gp-fchip:hover { border-color: var(--gp-accent); }
.gp-root .gp-fchip.on {
  background: var(--gp-accent-light); border-color: var(--gp-accent);
  color: var(--gp-accent-dark); font-weight: 600;
}

.gp-root .gp-carrier-list { flex: 1; overflow-y: auto; padding: 6px; background: var(--gp-bg-2); }
.gp-root .gp-empty {
  padding: 24px 12px; text-align: center;
  font-size: 11px; color: var(--gp-text-2); font-style: italic;
}

/* Carrier card */
.gp-root .gp-carrier {
  background: var(--gp-bg); border: 1px solid var(--border);
  border-radius: 6px; margin-bottom: 5px; overflow: hidden;
}
.gp-root .gp-carrier.open { border-color: var(--gp-accent); }
.gp-root .gp-carrier-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; cursor: pointer; user-select: none;
}
.gp-root .gp-carrier-hd:hover { background: var(--gp-bg-2); }
.gp-root .gp-logo {
  width: 28px; height: 28px; border-radius: 5px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
}
.gp-root .gp-carrier-meta { flex: 1; min-width: 0; }
.gp-root .gp-carrier-name {
  font-size: 11.5px; font-weight: 600; display: flex;
  align-items: center; gap: 5px; min-width: 0;
}
.gp-root .gp-carrier-name > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-root .gp-carrier-sub {
  font-size: 9px; color: var(--gp-text-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-root .gp-status {
  font-size: 8px; padding: 1px 6px; border-radius: 20px;
  font-weight: 600; flex-shrink: 0;
}
.gp-root .gp-sel-badge {
  font-size: 8px; font-weight: 700; padding: 1px 6px; border-radius: 20px;
  background: var(--gp-ok-line); color: #fff; flex-shrink: 0;
}
.gp-root .gp-chevron { font-size: 10px; color: var(--gp-text-2); transition: transform 0.15s; }
.gp-root .gp-carrier.open .gp-chevron { transform: rotate(180deg); }

/* Coverage bar under the carrier header */
.gp-root .gp-cov { height: 3px; background: var(--gp-bg-2); }
.gp-root .gp-cov-fill { height: 100%; background: var(--gp-accent); transition: width 0.2s; }

.gp-root .gp-carrier-body { padding: 6px 7px 7px; border-top: 1px solid var(--border); }
.gp-root .gp-carrier-note {
  font-size: 9px; color: var(--gp-text-2); line-height: 1.4;
  margin-bottom: 6px; font-style: italic;
}

/* Draggable interface row */
.gp-root .gp-iface {
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--gp-bg); margin-bottom: 3px;
  cursor: grab; transition: border-color 0.1s, box-shadow 0.1s;
}
.gp-root .gp-iface:hover { border-color: var(--gp-accent); box-shadow: var(--shadow-sm); }
.gp-root .gp-iface:active { cursor: grabbing; }
.gp-root .gp-iface.used { border-color: var(--gp-ok-line); background: var(--gp-ok-bg); }
.gp-root .gp-iface.dragging { opacity: 0.45; }

.gp-root .gp-iface-hd { display: flex; align-items: center; gap: 5px; padding: 5px 7px; }
.gp-root .gp-grip { color: var(--gp-text-2); flex-shrink: 0; opacity: 0.6; }
.gp-root .gp-iface.used .gp-grip { color: var(--gp-ok); opacity: 1; }
.gp-root .gp-iface-name {
  font-size: 10px; font-weight: 500; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-root .gp-iface.used .gp-iface-name { color: var(--gp-ok); font-weight: 600; }
.gp-root .gp-pill {
  font-size: 8px; padding: 1px 5px; border-radius: 20px;
  font-weight: 600; flex-shrink: 0; white-space: nowrap;
}
.gp-root .gp-add {
  font-size: 8px; padding: 1px 7px; border-radius: 20px; flex-shrink: 0;
  border: 1px solid var(--gp-accent); background: var(--gp-accent-light);
  color: var(--gp-accent-dark); cursor: pointer; font-weight: 600;
}
.gp-root .gp-add:hover { background: var(--gp-accent); color: #fff; }
.gp-root .gp-iface.used .gp-add {
  border-color: var(--gp-ok-line); background: transparent; color: var(--gp-ok);
}
.gp-root .gp-iface-sub {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 0 7px 5px 24px;
}
.gp-root .gp-tag {
  font-size: 7.5px; padding: 1px 5px; border-radius: 3px;
  background: var(--gp-bg-2); color: var(--gp-text-2); font-weight: 500;
}

/* ── Resizer ──────────────────────────────────────────────────────────────── */
.gp-root .gp-resizer {
  flex-shrink: 0; width: 6px; cursor: col-resize;
  background: transparent; position: relative; z-index: 1;
}
.gp-root .gp-resizer::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--border); transform: translateX(-50%);
}
.gp-root .gp-resizer:hover::before,
.gp-root .gp-resizer:active::before { width: 2px; background: var(--gp-accent); }

/* ── Right pane: interface slots ──────────────────────────────────────────── */
.gp-root .gp-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.gp-root .gp-sum-bar {
  padding: 5px 12px; background: var(--gp-bg-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0;
}
.gp-root .gp-sum-label { font-size: 9px; color: var(--gp-text-2); font-weight: 600; }
.gp-root .gp-sum-hint { font-size: 9px; color: var(--gp-text-2); font-style: italic; }
.gp-root .gp-carrier-chip {
  font-size: 8px; padding: 2px 7px; border-radius: 20px; font-weight: 700;
}

.gp-root .gp-slot-zone { flex: 1; overflow-y: auto; padding: 8px 10px; }
.gp-root .gp-slot-cat { margin-bottom: 10px; }
.gp-root .gp-slot-cat-label {
  font-size: 9px; font-weight: 700; color: var(--gp-text-2);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding-bottom: 3px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.gp-root .gp-slot {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 6px 9px; margin-bottom: 3px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--gp-bg); min-height: 34px;
  transition: border-color 0.1s, background 0.1s;
}
.gp-root .gp-slot.filled { border-color: var(--gp-ok-line); background: var(--gp-ok-bg); }
/* Highlighted while a compatible interface is being dragged anywhere on the page */
.gp-root .gp-slot.candidate { border-color: var(--gp-accent); border-style: dashed; }
/* The slot the cursor is currently over */
.gp-root .gp-slot.hover {
  border: 1.5px dashed var(--gp-accent); background: var(--gp-accent-light);
}
.gp-root .gp-slot-icon { font-size: 12px; flex-shrink: 0; line-height: 18px; }
.gp-root .gp-slot-main { flex: 1; min-width: 0; }
.gp-root .gp-slot-label {
  font-size: 10.5px; font-weight: 600; display: flex;
  align-items: center; gap: 5px; flex-wrap: wrap;
}
.gp-root .gp-slot-count {
  min-width: 15px; padding: 0 5px; border-radius: 20px;
  background: var(--gp-ok-line); color: #fff;
  font-size: 8px; font-weight: 700; line-height: 15px; text-align: center;
}
.gp-root .gp-slot-hint { font-size: 8.5px; color: var(--gp-text-2); margin-top: 1px; }
.gp-root .gp-slot-drop { font-size: 9px; color: var(--gp-text-2); font-style: italic; }

.gp-root .gp-slot-badges {
  display: flex; flex-wrap: wrap; gap: 3px;
  justify-content: flex-end; align-items: flex-start;
  flex: 1; min-width: 0; max-width: 58%;
}
.gp-root .gp-badge {
  font-size: 8px; padding: 2px 3px 2px 6px; border-radius: 4px;
  font-weight: 600; display: inline-flex; align-items: center; gap: 3px;
  white-space: nowrap; max-width: 100%;
}
.gp-root .gp-badge-text { overflow: hidden; text-overflow: ellipsis; }
/* Manual override marker — drop landed on a slot that isn't the interface's
   canonical kind. Kept visible so a deliberate remap is obvious on review. */
.gp-root .gp-badge.manual { outline: 1px dashed var(--gp-warn-line); outline-offset: 1px; }
.gp-root .gp-badge-x {
  border: none; background: transparent; cursor: pointer;
  color: inherit; opacity: 0.65; padding: 0; line-height: 1;
  display: inline-flex; align-items: center;
}
.gp-root .gp-badge-x:hover { opacity: 1; }

.gp-root .gp-status-bar {
  padding: 5px 12px; border-top: 1px solid var(--border);
  background: var(--gp-bg-2); display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--gp-text-2); flex-shrink: 0;
}
.gp-root .gp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gp-ok-line); }
.gp-root .gp-dot.idle { background: var(--gp-border-2); }

/* ── Integration hub ──────────────────────────────────────────────────────── */
/* Replaces the board (not an overlay) — same approach as Plug & Play's hub. */
.gp-root .gp-hub { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.gp-root .gp-hub.open { display: flex; }

.gp-root .gp-hub-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--gp-bg-2); flex-shrink: 0;
}
@media (max-width: 900px) {
  .gp-root .gp-hub-stats { grid-template-columns: repeat(2, 1fr); }
}
.gp-root .gp-hub-cat-bar {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 6px 16px; border-bottom: 1px solid var(--border);
  background: var(--gp-bg-2); flex-shrink: 0; min-height: 27px;
}

.gp-root .gp-hub-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.gp-root .gp-hub-empty {
  padding: 48px 16px; text-align: center; line-height: 1.7;
  font-size: 12px; color: var(--gp-text-2);
}

.gp-root .gp-hub-group { margin-bottom: 14px; }
.gp-root .gp-hub-group.collapsed { margin-bottom: 6px; }
.gp-root .gp-hub-group-hd {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 5px; padding: 4px 6px; border-radius: 4px;
  cursor: pointer; user-select: none; transition: background 0.1s;
}
.gp-root .gp-hub-group-hd:hover { background: var(--gp-bg-2); }
.gp-root .gp-hub-caret { font-size: 9px; color: var(--gp-text-2); width: 10px; }
.gp-root .gp-hub-ico {
  width: 24px; height: 24px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.gp-root .gp-hub-name { font-size: 12px; font-weight: 600; }
.gp-root .gp-hub-count { margin-left: auto; font-size: 10px; color: var(--gp-text-2); }

.gp-root .gp-hub-cat-group { margin-bottom: 6px; }
.gp-root .gp-hub-cat-label { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.gp-root .gp-hub-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; margin-bottom: 2px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--gp-bg);
}
.gp-root .gp-hub-row-name { font-size: 10.5px; flex: 1; min-width: 0; }
.gp-root .gp-hub-row-badges { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.gp-root .gp-hub-badge { font-size: 8px; padding: 1px 6px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.gp-root .gp-hub-badge.proto { background: var(--gp-accent-light); color: var(--gp-accent-dark); }
.gp-root .gp-hub-badge.slot { background: var(--gp-ok-bg); color: var(--gp-ok); }
.gp-root .gp-hub-badge.slot.manual { background: var(--gp-warn-bg); color: var(--gp-warn); }

/* Export dropdown */
.gp-root .gp-export-wrap { position: relative; }
.gp-root .gp-export-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 180px; z-index: 200; display: none; overflow: hidden;
  background: var(--gp-bg); border: 1px solid var(--gp-border-2);
  border-radius: 8px; box-shadow: var(--shadow-md, var(--shadow-sm));
}
.gp-root .gp-export-menu.open { display: block; }
.gp-root .gp-exp-hd {
  font-size: 9px; font-weight: 700; color: var(--gp-text-2);
  padding: 6px 12px 4px; text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.gp-root .gp-exp-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  cursor: pointer; font-size: 11px; color: var(--gp-text); transition: background 0.1s;
}
.gp-root .gp-exp-item:hover { background: var(--gp-bg-2); }
.gp-root .gp-exp-ext { font-size: 8px; padding: 1px 6px; border-radius: 20px; margin-left: auto; font-weight: 600; }

/* Thin divider between the hub's export controls and the build controls. */
.gp-root .gp-hub-sep {
  width: 1px; height: 20px; background: var(--border); flex-shrink: 0;
}

/* Flow view */
.gp-root .gp-flow { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.gp-root .gp-flow-col { display: flex; flex-direction: column; gap: 4px; }
.gp-root .gp-flow-col-label {
  font-size: 9px; font-weight: 700; color: var(--gp-text-2);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
}
.gp-root .gp-flow-carrier {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 5px; border: 1px solid;
  font-size: 9px; font-weight: 600; min-width: 190px;
}
.gp-root .gp-flow-abbr {
  font-size: 9px; font-weight: 800; padding: 2px 5px;
  border-radius: 4px; background: rgba(255, 255, 255, 0.6);
}
.gp-root .gp-flow-arrow {
  display: flex; align-items: center; font-size: 18px;
  padding-top: 22px; color: var(--gp-accent);
}
.gp-root .gp-flow-arrow.ok { color: var(--gp-ok-line); }
.gp-root .gp-flow-slot {
  font-size: 9.5px; padding: 5px 8px; margin-bottom: 3px;
  border: 1px solid var(--border); border-left: 3px solid var(--gp-accent);
  border-radius: 4px; background: var(--gp-bg); font-weight: 500;
}
.gp-root .gp-flow-target {
  padding: 16px 22px; border-radius: 8px; text-align: center;
  border: 1px solid var(--gp-ok-line); background: var(--gp-ok-bg); color: var(--gp-ok);
}
.gp-root .gp-flow-target-label { font-size: 13px; font-weight: 700; }
.gp-root .gp-flow-target-sub { font-size: 9px; opacity: 0.8; margin-top: 2px; }
/* ── Tariff Analysis CSS Module — scoped to TariffAnalysis only ─────────────
   REDESIGN: both token layers now alias the app's design tokens
   (src/index.css) DIRECTLY, so this module reshades with the rest of the
   platform — light/dark mode AND the switchable accent (applyTheme() in
   lib/theme.js sets --primary live) come for free. No hardcoded slate/zinc
   palette and no per-mode override block remain: the app tokens already flip
   under `.dark`, so aliasing them is enough.

   1. `--t-*`  — legacy base names, kept only as aliases of the app tokens so
      any lingering references still resolve.
   2. `--ta-*` — the semantic vocabulary the JSX + module classes consume.

   Notes on the mapping:
   • `--ta-primary-soft` (used as ACCENT TEXT, e.g. text-[var(--ta-primary-soft)])
     → `var(--primary)` — the switchable accent reads on both light & dark
     cards. (NOT --primary-light, which is a pale tint that would be invisible
     as text on a light surface.)
   • `--ta-faint` (used as faint TEXT) → `var(--muted-foreground)` for
     legibility (a surface token like --muted would vanish as text).

   The CSS module here defines only class selectors (.card, .btn…, .input, …),
   never bare element resets, so it cannot clobber shared primitives — no
   @layer base wrapping is required.

   Tokens live on `.tariffRoot` (not :root) to stay scoped; portaled content
   (the ChartCard fullscreen modal rendered into document.body) is wrapped in
   `s.tariffRoot` too, so it resolves them as well. */

._tariffRoot_1492d_25 {
  /* ── Legacy base names (`--t-*`) → app tokens ────────────────────────── */
  --t-bg: var(--background);
  --t-card: var(--card);
  --t-card-2: var(--muted);
  --t-elevated: var(--accent);
  --t-border: var(--border);
  --t-border-2: var(--border-strong);
  --t-text: var(--foreground);
  --t-text-2: var(--muted-foreground);
  --t-text-3: var(--muted-foreground);
  --t-text-4: var(--muted-foreground);

  /* ── Semantic tokens (`--ta-*`) → app tokens ─────────────────────────── */
  --ta-scheme: light;

  --ta-bg:            var(--background);      /* page background   */
  --ta-surface:       var(--card);           /* card / panel      */
  --ta-surface-2:     var(--muted);          /* input / elevated  */
  --ta-surface-3:     var(--accent);         /* hover / active    */
  --ta-border:        var(--border);         /* hairline border   */
  --ta-border-strong: var(--border-strong);  /* stronger border   */

  --ta-text:  var(--foreground);         /* headings / key values  */
  --ta-body:  var(--muted-foreground);   /* body copy              */
  --ta-muted: var(--muted-foreground);   /* secondary / labels     */
  --ta-faint: var(--muted-foreground);   /* tertiary / placeholder */

  --ta-primary:      var(--primary);            /* switchable theme accent */
  --ta-primary-soft: var(--primary);            /* accent text (reads L/D)  */
  --ta-on-primary:   var(--primary-foreground);

  --ta-danger:  var(--destructive);
  --ta-warning: var(--warning);
  --ta-success: var(--success);

  /* Module root — paints the region background/text + chrome font. */
  background-color: var(--ta-bg);
  color: var(--ta-body);
  font-family: var(--font-sans);
}

/* Only the native color-scheme hint needs a per-mode value (drives date
   pickers / native controls); all colours already flip via the app tokens. */
html.dark ._tariffRoot_1492d_25 { --ta-scheme: dark; }

._card_1492d_21 {
  background-color: var(--ta-surface);
  border: 1px solid var(--ta-border);
  border-radius: 0.75rem;
}
._cardHeader_1492d_80 {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ta-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
._cardTitle_1492d_87 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ta-body);
}

._btnPrimary_1492d_93 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--ta-primary);
  color: var(--ta-on-primary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: filter 150ms, background-color 150ms;
}
._btnPrimary_1492d_93:hover { filter: brightness(1.1); }
._btnPrimary_1492d_93:disabled { opacity: 0.4; cursor: not-allowed; }

._btnSecondary_1492d_110 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--ta-surface-2);
  color: var(--ta-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--ta-border-strong);
  cursor: pointer;
  transition: background-color 150ms;
}
._btnSecondary_1492d_110:hover { background-color: var(--ta-surface-3); }

._btnGhost_1492d_126 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ta-muted);
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
._btnGhost_1492d_126:hover { background-color: var(--ta-surface-2); color: var(--ta-text); }

._input_1492d_21 {
  background-color: var(--ta-surface-2);
  border: 1px solid var(--ta-border-strong);
  color: var(--ta-text);
  font-size: 0.875rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  outline: none;
  color-scheme: var(--ta-scheme);
  transition: border-color 150ms, box-shadow 150ms;
}
._input_1492d_21::placeholder { color: var(--ta-faint); }
._input_1492d_21:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--ta-primary);
}

._select_1492d_158 {
  background-color: var(--ta-surface-2);
  border: 1px solid var(--ta-border-strong);
  color: var(--ta-text);
  font-size: 0.875rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  outline: none;
  cursor: pointer;
  color-scheme: var(--ta-scheme);
  transition: border-color 150ms, box-shadow 150ms;
}
._select_1492d_158:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--ta-primary);
}

._badge_1492d_175 {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

._tableTh_1492d_184 {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--ta-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background-color: var(--ta-surface);
}

._tableTd_1492d_196 {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--ta-body);
}

._tableTallRows_1492d_202 ._tableTd_1492d_196,
._tableTallRows_1492d_202 ._tableTh_1492d_184 {
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

/* ── Fancy date picker ─────────────────────────────────────────────────── */
._datePicker_1492d_209 {
  background-color: var(--ta-surface-2);
  border: 1px solid color-mix(in srgb, var(--ta-primary) 35%, transparent);
  color: var(--ta-text);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
  font-family: inherit;
  color-scheme: var(--ta-scheme);
}
._datePicker_1492d_209:hover {
  border-color: color-mix(in srgb, var(--ta-primary) 65%, transparent);
  background-color: var(--ta-surface-3);
}
._datePicker_1492d_209:focus {
  border-color: var(--ta-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ta-primary) 18%, transparent);
}
._datePicker_1492d_209::-webkit-calendar-picker-indicator {
  background-color: #ffffff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%231e293b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  border-radius: 4px;
  cursor: pointer;
  padding: 4px;
  margin-left: 6px;
  width: 18px;
  height: 18px;
  opacity: 0.95;
  transition: background-color 150ms, opacity 150ms;
}
._datePicker_1492d_209::-webkit-calendar-picker-indicator:hover {
  background-color: #e2e8f0;
  opacity: 1;
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
._scrollbarNone_1492d_252 {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
._scrollbarNone_1492d_252::-webkit-scrollbar { display: none; }

._animateFadeIn_1492d_258         { animation: _tariff-fade-in_1492d_1 200ms ease-out both; }
._animateSlideDown_1492d_259      { animation: _tariff-slide-down_1492d_1 200ms ease-out both; overflow: hidden; }
._animateScaleIn_1492d_260        { animation: _tariff-scale-in_1492d_1 150ms ease-out both; }
._animateSlideInRight_1492d_261   { animation: _tariff-slide-in-right_1492d_1 300ms ease-out both; }
._animateSlideOutRight_1492d_262  { animation: _tariff-slide-out-right_1492d_1 200ms ease-in both; }
._animateShimmer_1492d_263 {
  background: linear-gradient(90deg, var(--ta-surface-2) 25%, var(--ta-surface-3) 50%, var(--ta-surface-2) 75%);
  background-size: 200% 100%;
  animation: _tariff-shimmer_1492d_1 1.5s ease-in-out infinite;
}

@keyframes _tariff-fade-in_1492d_1 {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes _tariff-slide-down_1492d_1 {
  from { opacity: 0; max-height: 0; transform: scaleY(0.95); transform-origin: top; }
  to   { opacity: 1; max-height: 2000px; transform: scaleY(1); transform-origin: top; }
}
@keyframes _tariff-scale-in_1492d_1 {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes _tariff-slide-in-right_1492d_1 {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes _tariff-slide-out-right_1492d_1 {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}
@keyframes _tariff-shimmer_1492d_1 {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
/* Module-specific styles for N8nIntegration (Ticketing System).
   Generic Tailwind-like utility duplicates from the original were dropped
   because Tailwind v4 already provides them in the new app. */

.middleware-dashboard-container {
  background-color: var(--background);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 2rem;
  font-family: var(--font-sans);
  animation: nm-n8n-fadeIn 0.4s ease-out;
}

.middleware-dashboard-container::-webkit-scrollbar {
  width: 10px;
}

.middleware-dashboard-container::-webkit-scrollbar-track {
  background: transparent;
}

.middleware-dashboard-container::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.middleware-dashboard-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted-foreground);
}

.centered-dashboard-layout {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  gap: 3rem;
  align-items: center;
  width: 100%;
  padding: 2rem 0;
}

.dashboard-header-centered {
  text-align: center;
  max-width: 800px;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  width: 100%;
}

.dashboard-main-heading {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--foreground);
  margin-bottom: 1rem;
  letter-spacing: -0.035em;
  text-align: center;
  font-family: var(--font-sans);
}

.dashboard-sub-text {
  font-size: 1.05rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  font-weight: 400;
  margin: 0 auto 1.5rem auto;
  max-width: 750px;
}

.active-integration-header-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--foreground);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-left: 5px solid var(--primary);
  padding-left: 1.25rem;
  margin: 0.5rem 0;
  line-height: 1.2;
  display: block;
}

@keyframes nm-n8n-fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dashboard Stat Boxes (Colorful Cards) */
.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 1200px;
  margin-top: 2rem;
}

.stat-card {
  border-radius: 16px;
  padding: 1.75rem;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 170px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.stat-card-icon-container {
  margin-bottom: 0.5rem;
  opacity: 0.9;
  display: flex;
  align-items: center;
}

.stat-card-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.stat-card-label {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.02em;
}

/* Vendor cards keep three distinguishable tints, but sourced from design
   tokens so they follow the switchable accent / adapt to dark instead of using
   fixed brand hex. Salesforce → accent, Zoho → warning, ServiceNow → success. */
.bg-purple {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.bg-orange {
  background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 80%, white) 0%, var(--warning) 100%);
}

.bg-green {
  background: linear-gradient(135deg, color-mix(in srgb, var(--success) 80%, white) 0%, var(--success) 100%);
}

/* Info Section */
.dashboard-info-section {
  width: 100%;
  max-width: 1200px;
  margin-top: 3rem;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 2rem;
}

.info-card {
  background: color-mix(in srgb, var(--card) 95%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border-top: 4px solid var(--primary);
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border-color: var(--muted-foreground);
}

.info-card:nth-child(2) {
  border-top-color: var(--warning);
}

.info-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--card-foreground);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.info-card-text {
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.info-card-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.info-card-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.info-card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1;
}

/* Status pills now render via the shared <StatusBadge> (semantic soft-tinted
   palette that adapts to dark mode); the old hardcoded .status-* classes were
   removed. */

/* Urgency Badge Styles */
.urgency-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.urgency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.urgency-high {
  background: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
}

.urgency-medium {
  background: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 20%, transparent);
}

.urgency-low {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
}

.urgency-text {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

.table-card-wrapper {
  margin: 1rem;
  background: var(--card);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border);
  overflow: hidden;
  padding: 0.5rem;
}
/* Keyframes — safe to be global (just animations, no colour/layout) */
@keyframes lc-fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes lc-spin-once {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lc-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

/* Scoped reset — only inside .lc-wrap */
.lc-wrap * {
  box-sizing: border-box;
}

/* Base + CSS custom properties for primitives */
.lc-wrap {
  background: var(--lc-bg);
  color: var(--lc-text);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* Scrollbar (scoped to lc-wrap children) */
.lc-wrap ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.lc-wrap ::-webkit-scrollbar-track {
  background: var(--lc-bg);
}

.lc-wrap ::-webkit-scrollbar-thumb {
  background: var(--lc-border);
  border-radius: 3px;
}

/* Form inputs */
.lc-wrap input,
.lc-wrap select,
.lc-wrap textarea {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  outline: none;
  background: var(--lc-surfaceEl);
  border: 1px solid var(--lc-border);
  color: var(--lc-text);
  border-radius: 6px;
  padding: 9px 13px;
  font-size: 15px;
  transition: all .15s;
  width: 100%;
}

.lc-wrap input:focus,
.lc-wrap select:focus,
.lc-wrap textarea:focus {
  border-color: var(--lc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc-accent) 22%, transparent);
}

.lc-wrap input::placeholder,
.lc-wrap textarea::placeholder {
  color: var(--lc-textDim);
}

.lc-wrap select option {
  background: var(--lc-surface);
}

/* Labels */
.lc-wrap label {
  font-size: 13px;
  font-weight: 600;
  color: var(--lc-textMuted);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
}

/* Tables */
.lc-wrap table {
  border-collapse: collapse;
  width: 100%;
}

.lc-wrap th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--lc-textMuted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 9px 16px;
  border-bottom: 1px solid var(--lc-border);
  cursor: pointer;
  user-select: none;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  background: var(--lc-surfaceEl);
}

.lc-wrap td {
  padding: 11px 16px;
  font-size: 15px;
  border-bottom: 1px solid var(--lc-border);
  color: var(--lc-text);
  vertical-align: middle;
}

.lc-wrap tr:last-child td {
  border-bottom: none;
}

.lc-wrap tr:hover td {
  background: var(--lc-surfaceHover);
}

/* Utility animation classes */
.lc-fade {
  animation: lc-fadeUp .25s ease both;
}

.lc-spin {
  animation: lc-spin 1s linear infinite;
}

.lc-pulse {
  animation: lc-pulse 2s ease infinite;
}/* LumenObject dark-mode theming.
   - The module's main palette (page bg, surfaces, borders, text, primary, etc.) lives in
     theme/theme.js as the reactive `C` object, which swaps light<->dark hex in JS on `.dark` toggle.
   - This file backs the many HARDCODED inline-style colors that were swapped to var(--lo-h-*).
     Light values are IDENTICAL to the original hardcoded colors -> light mode is pixel-identical.
     Dark overrides flip neutral surfaces & accent tints; accent text / brand colors are kept vivid.
   - Plus two semantic helpers (--lo-payload-bg, --lo-panel-subtle) for translucent surfaces.
   Everything is scoped to `.lumenobject-root` (the module wrapper) under the global `.dark` class. */

/* Make native form controls (inputs, selects, option popups, scrollbars) follow dark mode. */
html.dark .lumenobject-root { color-scheme: dark; }
html.dark .lumenobject-root input::placeholder,
html.dark .lumenobject-root textarea::placeholder { color: #71717a; }
html.dark .lumenobject-root select option { background: #18181b; color: #fafafa; }

/* Per-literal token layer (auto-generated). */
.lumenobject-root {
  /* Semantic helper tokens for translucent surfaces (light defaults preserve original look). */
  --lo-payload-bg: #ffffff80;
  --lo-panel-subtle: #F1F5F933;
  --lo-h-0369a1: #0369a1;
  --lo-h-047857: #047857;
  --lo-h-059669: #059669;
  --lo-h-064e3b: #064e3b;
  --lo-h-065f46: #065f46;
  --lo-h-0ea5e9: #0ea5e9;
  --lo-h-0f172a: #0f172a;
  --lo-h-10b981: #10b981;
  --lo-h-15803d: #15803d;
  --lo-h-166534: #166534;
  --lo-h-1d4ed8: #1d4ed8;
  --lo-h-1e1e2e: #1e1e2e;
  --lo-h-1e293b: #1e293b;
  --lo-h-1e40af: #1e40af;
  --lo-h-22c55e: #22c55e;
  --lo-h-2563eb: #2563eb;
  --lo-h-334155: #334155;
  --lo-h-34d399: #34d399;
  --lo-h-3b82f6: #3b82f6;
  --lo-h-475569: #475569;
  --lo-h-4c1d95: #4c1d95;
  --lo-h-64748b: #64748b;
  --lo-h-6d28d9: #6d28d9;
  --lo-h-6ee7b7: #6ee7b7;
  --lo-h-7c3aed: #7c3aed;
  --lo-h-7f1d1d: #7f1d1d;
  --lo-h-86efac: #86efac;
  --lo-h-89b4fa: #89b4fa;
  --lo-h-8b5cf6: #8b5cf6;
  --lo-h-92400e: #92400e;
  --lo-h-94a3b8: #94a3b8;
  --lo-h-9a3412: #9a3412;
  --lo-h-9ca3af: #9ca3af;
  --lo-h-a16207: #a16207;
  --lo-h-a6e3a1: #a6e3a1;
  --lo-h-a7f3d0: #a7f3d0;
  --lo-h-bae6fd: #bae6fd;
  --lo-h-bbf7d0: #bbf7d0;
  --lo-h-c4b5fd: #c4b5fd;
  --lo-h-c7d2fe: #c7d2fe;
  --lo-h-cba6f7: #cba6f7;
  --lo-h-cdd6f4: #cdd6f4;
  --lo-h-d1d5db: #d1d5db;
  --lo-h-d97706: #d97706;
  --lo-h-dc2626: #dc2626;
  --lo-h-dcfce7: #dcfce7;
  --lo-h-ddd6fe: #ddd6fe;
  --lo-h-e0f2fe: #e0f2fe;
  --lo-h-e2e8f0: #e2e8f0;
  --lo-h-eab308: #eab308;
  --lo-h-ecfdf5: #ecfdf5;
  --lo-h-ede9fe: #ede9fe;
  --lo-h-eef2ff: #eef2ff;
  --lo-h-ef4444: #ef4444;
  --lo-h-eff6ff: #eff6ff;
  --lo-h-f0f7ff: #f0f7ff;
  --lo-h-f0f9ff: #f0f9ff;
  --lo-h-f0fdf4: #f0fdf4;
  --lo-h-f1f5f9: #f1f5f9;
  --lo-h-f3f4f6: #f3f4f6;
  --lo-h-f5f3ff: #f5f3ff;
  --lo-h-f8fafc: #f8fafc;
  --lo-h-f8faff: #f8faff;
  --lo-h-f9e2af: #f9e2af;
  --lo-h-f9fafb: #f9fafb;
  --lo-h-fafafa: #fafafa;
  --lo-h-fafbff: #fafbff;
  --lo-h-fca5a5: #fca5a5;
  --lo-h-fcd34d: #fcd34d;
  --lo-h-fdba74: #fdba74;
  --lo-h-fde68a: #fde68a;
  --lo-h-fecaca: #fecaca;
  --lo-h-fee2e2: #fee2e2;
  --lo-h-fef2f2: #fef2f2;
  --lo-h-fef3c7: #fef3c7;
  --lo-h-fef9c3: #fef9c3;
  --lo-h-fefcff: #fefcff;
  --lo-h-fff: #fff;
  --lo-h-fff7ed: #fff7ed;
  --lo-h-fffbeb: #fffbeb;
  --lo-h-ffffff: #ffffff;
}
html.dark .lumenobject-root {
  --lo-payload-bg: #0e0e10cc;
  --lo-panel-subtle: #1f1f2380;
  --lo-h-6ee7b7: #1f5034;
  --lo-h-86efac: #1f5034;
  --lo-h-a7f3d0: #1f5034;
  --lo-h-bae6fd: #0e3550;
  --lo-h-bbf7d0: #1f5034;
  --lo-h-c4b5fd: #3a2d6a;
  --lo-h-c7d2fe: #2a3a6a;
  --lo-h-cba6f7: #3a2d6a;
  --lo-h-d1d5db: #3f3f46;
  --lo-h-dcfce7: #14361f;
  --lo-h-ddd6fe: #2e2350;
  --lo-h-e0f2fe: #0e2a3a;
  --lo-h-e2e8f0: #3f3f46;
  --lo-h-ecfdf5: #0f2a1a;
  --lo-h-ede9fe: #241a3a;
  --lo-h-eef2ff: #1e2a4a;
  --lo-h-eff6ff: #1f2937;
  --lo-h-f0f7ff: #1f1f23;
  --lo-h-f0f9ff: #1f1f23;
  --lo-h-f0fdf4: #0f2a1a;
  --lo-h-f1f5f9: #27272a;
  --lo-h-f3f4f6: #27272a;
  --lo-h-f5f3ff: #241a3a;
  --lo-h-f8fafc: #1f1f23;
  --lo-h-f8faff: #1f1f23;
  --lo-h-f9e2af: #5a4410;
  --lo-h-f9fafb: #1f1f23;
  --lo-h-fafafa: #1f1f23;
  --lo-h-fafbff: #1f1f23;
  --lo-h-fca5a5: #5a2020;
  --lo-h-fcd34d: #5a4410;
  --lo-h-fdba74: #5a3a10;
  --lo-h-fde68a: #5a4410;
  --lo-h-fecaca: #5a2020;
  --lo-h-fee2e2: #3a1414;
  --lo-h-fef2f2: #3a1414;
  --lo-h-fef3c7: #3a2e10;
  --lo-h-fef9c3: #3a2e10;
  --lo-h-fefcff: #18181b;
  --lo-h-fff: #18181b;
  --lo-h-fff7ed: #3a2410;
  --lo-h-fffbeb: #3a2e10;
  --lo-h-ffffff: #18181b;
}
/* ============================================================
   Ocean Schedules — module-scoped styles
   Scoped under .oceanschedules-root so they can't leak to other
   modules.
   ============================================================ */

/* Keep all scrolling contained — never let it bubble to the window
   and push the platform top bar out of view. */
.oceanschedules-root {
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* ── Hover on the whole search-bar field cell ─────────────────── */
.oceanschedules-root form > div:first-child > div[class*="sm:flex-1"]:hover {
  background-color: var(--muted);
}
/* ═══════════════════════════════════════════════════════════
   GoHubX CarrierConnect — Design System
   Theme: Modern SaaS — clean blue primary on white, icon-rail sidebar
   Font: Inter
════════════════════════════════════════════════════════════ */

:root {
  /* Primary blue scale */
  /* Derived from the app's theme accent (lib/theme.js sets --primary /
     --primary-dark / --primary-light), so the whole COT module follows the
     selected theme palette instead of a hardcoded blue.

     PALE STEPS (50/100/200) are used as BACKGROUNDS — mixed toward
     var(--background) so they become subtle washes that reshade automatically
     (pale on a light page, faint dark-tint on a dark page) without a separate
     .dark override.

     DARK STEPS (700/800/900) are used as TEXT on those washes — mixed toward
     var(--foreground) so they darken on light (readable dark-blue on a pale
     wash) and lighten on dark (readable light-blue on a dark wash). */
  --primary-50:  color-mix(in srgb, var(--primary) 10%, var(--background));
  --primary-100: color-mix(in srgb, var(--primary) 18%, var(--background));
  --primary-200: color-mix(in srgb, var(--primary) 30%, var(--background));
  --primary-300: color-mix(in srgb, var(--primary) 52%, var(--background));
  --primary-400: color-mix(in srgb, var(--primary) 72%, var(--background));
  --primary-500: var(--primary);
  --primary-600: var(--primary-dark, var(--primary));
  --primary-700: color-mix(in srgb, var(--primary-dark, var(--primary)) 80%, var(--foreground));
  --primary-800: color-mix(in srgb, var(--primary-dark, var(--primary)) 64%, var(--foreground));
  --primary-900: color-mix(in srgb, var(--primary-dark, var(--primary)) 52%, var(--foreground));

  /* Backwards-compat aliases — older components reference navy-*.
     All resolve to the derived --primary-* scale (token-driven). */
  --navy-950: var(--primary-900);
  --navy-900: var(--primary-900);
  --navy-800: var(--primary-800);
  --navy-700: var(--primary-700);
  --navy-600: var(--primary-600);
  --navy-500: var(--primary-500);
  --navy-400: var(--primary-400);
  --navy-300: var(--primary-300);
  --navy-100: var(--primary-100);
  --navy-50:  var(--primary-50);

  /* Neutral "steel" ramp → GoHubX neutral tokens (reshade automatically). */
  --steel-600: var(--muted-foreground);
  --steel-400: var(--muted-foreground);
  --steel-200: var(--border-strong);
  --steel-100: var(--muted);
  --steel-50:  var(--surface-sunken);

  /* Status accents → semantic tokens; soft fills are token tints. */
  --amber-500: var(--warning);
  --amber-400: var(--warning);
  --amber-100: color-mix(in srgb, var(--warning) 14%, transparent);

  --green-600: var(--success);
  --green-100: color-mix(in srgb, var(--success) 14%, transparent);
  --red-600:   var(--destructive);
  --red-100:   color-mix(in srgb, var(--destructive) 14%, transparent);
  --orange-500: var(--warning);
  --orange-100: color-mix(in srgb, var(--warning) 14%, transparent);

  --white: var(--primary-foreground);
  --text-primary:   var(--foreground);
  --text-secondary: var(--text-body);
  --text-muted:     var(--muted-foreground);

  /* Semantic */
  --bg-app:    var(--background);
  --bg-card:   var(--card);
  --bg-sidebar: var(--navy-900);
  /* --border is inherited from the app's :root (index.css) so it reshades. */

  /* Inline-style surface tokens — map onto the app's neutral surfaces so they
     flip with light/dark automatically. */
  --surface-0:  var(--card);            /* cards/panels            */
  --surface-1:  var(--surface-sunken);  /* subtle striped/view     */
  --surface-2:  var(--muted);           /* read-only / pane bg     */
  --surface-3:  var(--surface-sunken);  /* section header          */
  --surface-4:  var(--surface-sunken);  /* muted row               */
  --surface-5:  var(--muted);           /* preview / expired       */
  --table-stripe: color-mix(in srgb, var(--muted) 55%, transparent); /* even-row stripe */
  /* Status soft fills used inline */
  --fill-amber: color-mix(in srgb, var(--warning) 14%, transparent);
  --fill-green: color-mix(in srgb, var(--success) 14%, transparent);
  --fill-red:   color-mix(in srgb, var(--destructive) 14%, transparent);
  /* Amber badge text */
  --amber-text: var(--warning);
  /* Phase-6 Carrier Tracker blue washes (inline in CarrierTrackerPage.jsx) →
     subtle accent tints over the app surfaces. */
  --tint-blue-row:  color-mix(in srgb, var(--primary) 8%, var(--card));   /* expanded carrier row + stats bar */
  --tint-blue-nest: color-mix(in srgb, var(--primary) 4%, var(--card));   /* nested integration table wrapper */
  --tint-blue-sub:  color-mix(in srgb, var(--primary) 5%, var(--card));   /* test-case sub-table wrapper      */
  --tint-blue-head: color-mix(in srgb, var(--primary) 10%, var(--card));  /* test-case sub-table header band  */
  /* Inline thead text in the Tracker tables. */
  --thead-fg: var(--primary-800);

  /* Shadows: --shadow-sm/md/lg are inherited from the app's :root (index.css)
     elevation tokens, so they reshade in dark automatically. Only the COT-only
     focus glow is defined here, derived from the accent ring. */
  --shadow-glow: 0 0 0 3px color-mix(in srgb, var(--ring) 30%, transparent);

  /* Modal scrim — a fixed dark overlay (same intent in light + dark, like the
     app's <Dialog> bg-black/50). This is the one place a fixed dark is the
     correct UI; it is the single literal kept, isolated in a token. */
  --cot-scrim: rgba(0, 0, 0, 0.55);

  /* Document preview canvas — PDFs / images render correctly on a white "paper"
     surface regardless of the app scheme (a transparent PNG or a PDF page on a
     dark surface looks broken). Isolated as a token so the JSX stays literal-free. */
  --cot-doc-canvas: #ffffff;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Transitions */
  --transition: 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* removed global * reset to avoid clashing with GT-Frontend layout */

/* removed html base — GT chrome owns this */

/* removed body base — GT chrome owns this */
/* removed h1-h5 base — GT chrome owns this */

/* ─── EVERY rule below is scoped under .cot-page so it does not leak ─
       into other GT-Frontend modules (PartnerOnboarding, GoRates, etc.)
       Uses modern CSS nesting — handled by Vite/PostCSS. */
.cot-page {

/* ─── Layout Shell ─────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
}

.topbar {
  grid-column: 1 / -1;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.sidebar {
  background: linear-gradient(180deg, var(--primary-700) 0%, var(--primary-900) 100%);
  height: calc(100vh - 64px);
  position: sticky;
  top: 64px;
  overflow-y: auto;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.main-content {
  padding: 32px;
  overflow-x: hidden;
}

/* ─── Sidebar Nav ──────────────────────────────────────── */
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.5px;
}

.brand-logo { font-size: 18px; font-weight: 800; color: var(--white); }
.brand-sub { display: none; }

.nav-section-label {
  display: none;
}

/* Icon-rail nav items — centered, icon-only, hover tooltip via title attr */
.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  margin: 4px auto;
  border-radius: 12px;
  color: color-mix(in srgb, var(--primary-foreground) 70%, transparent);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.nav-item > span,
.nav-item > :not(svg):not(:empty) {
  /* Hide text content; only icon survives. */
  display: none;
}

.nav-item:hover {
  background: color-mix(in srgb, var(--primary-foreground) 12%, transparent);
  color: var(--white);
}

.nav-item.active {
  background: color-mix(in srgb, var(--primary-foreground) 18%, transparent);
  color: var(--white);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--white);
  border-radius: 0 2px 2px 0;
}

.nav-item svg { opacity: 0.9; flex-shrink: 0; }
.nav-item.active svg, .nav-item:hover svg { opacity: 1; }

/* Bottom-of-sidebar user block (kept simple in icon rail) */
.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--primary-foreground) 12%, transparent);
}

.sidebar-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary-foreground) 15%, transparent); color: var(--primary-foreground);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}

/* ─── Cards ────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* ─── Actions toolbar (visible blue button row above tables) ─── */
/* Match the shared <TableToolbar>: a neutral Card panel with OUTLINE icon
   buttons (was a primary-tinted panel with filled bright-blue buttons). */
.actions-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-top: 16px;
  margin-bottom: 16px;
}
.actions-toolbar .actions-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  margin-right: 4px;
}
.actions-toolbar .icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
}
.actions-toolbar .icon-btn:hover { background: var(--muted); }
.actions-toolbar .icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.actions-toolbar .icon-btn.danger { color: var(--destructive); }
.actions-toolbar .icon-btn.danger:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); }
.actions-toolbar .spacer { flex: 1; }

/* ─── KPI Cards ─────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.kpi-value {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

/* ─── Badges / Status ───────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-active      { background: var(--green-100);  color: var(--green-600); }
.badge-invited     { background: var(--navy-100);   color: var(--navy-600); }
.badge-in_progress { background: var(--amber-100);  color: var(--amber-text); }
.badge-pending     { background: var(--orange-100); color: var(--orange-500); }
.badge-draft       { background: var(--steel-100);  color: var(--steel-600); }
.badge-suspended   { background: var(--red-100);    color: var(--red-600); }
.badge-archived    { background: var(--steel-100);  color: var(--steel-400); }
.badge-green       { background: var(--green-100);  color: var(--green-600); }
.badge-amber       { background: var(--amber-100);  color: var(--amber-text); }
.badge-red         { background: var(--red-100);    color: var(--red-600); }

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  line-height: 1;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary-600);
  color: var(--white);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.btn-primary:hover { background: var(--primary-700); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); }

.btn-accent {
  background: var(--primary-100);
  color: var(--primary-800);
}
.btn-accent:hover { background: var(--primary-200); }

.btn-ghost {
  background: var(--primary-50);
  color: var(--primary-700);
  border: 1px solid var(--primary-200);
}
.btn-ghost:hover { background: var(--primary-100); color: var(--primary-800); }

.btn-danger {
  background: var(--red-100);
  color: var(--red-600);
}
.btn-danger:hover { background: var(--red-600); color: var(--white); }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Table (Excel-style: vertical gridlines + striped rows + shadow) ───── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

/* NOTE: the table/thead/tbody/th/td ELEMENT rules were moved OUT of this
   .cot-page nesting into an `@layer base` block at the END of this file, so the
   app's shared <DataTable> (Tailwind utilities) wins when rendered inside a COT
   page. `.table-wrap` (a class, above) stays here — it never bleeds onto the
   shared table. (ported-module-css-layer-gotcha) */

/* ─── Form Fields ───────────────────────────────────────── */
.field-group { margin-bottom: 20px; }

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.field-label .required { color: var(--red-600); margin-left: 2px; }

.field-input, .field-select, .field-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-card);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.field-input:focus, .field-select:focus, .field-textarea:focus {
  border-color: var(--navy-400);
  box-shadow: var(--shadow-glow);
}

.field-error {
  font-size: 12px;
  color: var(--red-600);
  margin-top: 4px;
}

/* ─── Search Bar ────────────────────────────────────────── */
.search-bar {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-bar svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.search-bar input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  background: var(--steel-50);
  outline: none;
  transition: all var(--transition);
}

.search-bar input:focus {
  background: var(--bg-card);
  border-color: var(--navy-400);
  box-shadow: var(--shadow-glow);
}

/* ─── Page Header ───────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}

.page-title {
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ─── Modal ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* Scrim — intentionally a fixed dark overlay in BOTH schemes (matches the
     app's <Dialog> bg-black/50). Routed through the --cot-scrim token so this
     rule carries no literal; the literal lives once in the token definition. */
  background: var(--cot-scrim);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Scoped via the .cot-page wrapper above — does NOT affect any other
     module's overlays (verified: only ReportIssueDialog uses a different
     class .report-issue-modal-overlay). 9999 keeps it above AppDesignLayout
     sidebar/topbar chrome. */
  z-index: 9999;
  padding: 24px;
  animation: fadeIn 0.15s ease;
}

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

.modal-header {
  padding: 24px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.modal-body { padding: 20px 28px; }
.modal-footer { padding: 0 28px 24px; display: flex; gap: 10px; justify-content: flex-end; }

/* ─── Progress Bar ──────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--steel-100);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--navy-600), var(--navy-400));
  transition: width 0.5s ease;
}

/* ─── Loader ────────────────────────────────────────────── */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--navy-600);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* ─── Empty State ───────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state svg { opacity: 0.3; margin-bottom: 16px; }
.empty-state h3 { font-family: 'Syne', sans-serif; font-size: 18px; color: var(--text-secondary); }
.empty-state p  { font-size: 14px; margin-top: 6px; }

/* ─── Tabs ──────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}

.tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tab:hover { color: var(--text-primary); background: var(--steel-50); }
.tab.active { color: var(--navy-600); border-bottom-color: var(--navy-600); }

/* ─── Timeline ──────────────────────────────────────────── */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}

.timeline-item { position: relative; padding-bottom: 24px; }
.timeline-dot {
  position: absolute;
  left: -23px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--border);
}

/* ─── Chip filters ──────────────────────────────────────── */
.chip-group { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-card);
  color: var(--text-secondary);
}
.chip:hover { border-color: var(--navy-400); color: var(--navy-600); }
.chip.active { background: var(--navy-600); color: var(--white); border-color: var(--navy-600); }

/* ─── Animations ────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn 0.3s ease both; }

/* ─── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--steel-200); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--steel-400); }

/* Opt-in: hides the scrollbar on the carrier Overview tab wrapper only.
   Scroll still works via mouse wheel / touchpad / keyboard. Applied only
   to the one <div> that wraps <CarrierOverviewForm> in CarriersPage. */
.cot-scroll-hidden { scrollbar-width: none; -ms-overflow-style: none; }
.cot-scroll-hidden::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Carrier side-panel: thick, always-visible scrollbar so users can see
   they can scroll down to the TIMESTAMPS section. Applied only to the
   <aside> in CarrierSidePanel. */
.cot-side-scroll { scrollbar-width: auto; scrollbar-color: var(--steel-400) var(--steel-100); }
.cot-side-scroll::-webkit-scrollbar { width: 12px; }
.cot-side-scroll::-webkit-scrollbar-track { background: var(--steel-100); border-radius: 8px; }
.cot-side-scroll::-webkit-scrollbar-thumb { background: var(--steel-400); border-radius: 8px; border: 2px solid var(--steel-100); }
.cot-side-scroll::-webkit-scrollbar-thumb:hover { background: var(--steel-600); }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main-content { padding: 20px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

}  /* end .cot-page wrapper */

/* ─── COT table element styling, in @layer base ──────────────────────────
   These live in @layer base (NOT unlayered, NOT nested in .cot-page) so the
   app's shared <DataTable> — whose look comes from Tailwind utilities in
   @layer utilities — WINS when rendered inside a COT page: its own px-3/py-2
   padding, sticky bg-muted/95 header, selected bg-primary/10 and
   hover:bg-muted/40 all show, identical to DataTables elsewhere in the app.
   Bespoke COT tables (CarrierTracker matrix, carrier-detail sub-tables, etc.)
   carry no utility classes, so they still pick these up. The Excel-style row
   stripe is intentionally dropped — the app's DataTable doesn't stripe, so
   every COT table now matches. */
@layer base {
  .cot-page table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
  }
  .cot-page thead tr {
    background: var(--muted);
    border-bottom: 1px solid var(--border);
  }
  .cot-page thead th {
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid var(--border);
  }
  .cot-page thead th:last-child { border-right: none; }
  .cot-page tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
  }
  .cot-page tbody tr:last-child { border-bottom: none; }
  .cot-page tbody tr:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); }
  .cot-page tbody td {
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--text-primary);
    vertical-align: middle;
    border-right: 1px solid var(--border);
  }
  .cot-page tbody td:last-child { border-right: none; }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — no longer needs a manual remap.
   Every COT custom property in the :root block above is now defined in
   terms of GoHubX semantic tokens (--background / --card / --foreground /
   --muted / --border / --primary / --success / --warning / --destructive /
   --surface-sunken / --muted-foreground / --border-strong …). Those tokens
   are flipped by `.dark` in src/index.css, so the whole COT palette reshades
   automatically — the old `html.dark .cot-page { … }` remap (≈90 lines of
   hardcoded dark hexes) and its companion literal-color overrides (thead text,
   danger hover, scrim, scrollbars) are deleted. The accent washes (--primary-50
   /100/200) mix toward var(--background) and the on-wash text (--primary-700
   /800/900, --thead-fg) mixes toward var(--foreground), so both stay legible in
   light AND dark without per-mode rules. The only fixed-dark value is the modal
   scrim (--cot-scrim), which is intentionally dark in both schemes.
════════════════════════════════════════════════════════════ */
/* ─── Go EDI-X — Standalone EDI Document Exchange App ─── */
/* Mapped onto the app theme tokens (light + dark aware). */

.gc-shell {
    --gc-primary: var(--primary, #0f4c81);
    --gc-accent: var(--primary, #1b7fd4);
    --gc-bg: var(--background, #f4f6f9);
    --gc-card: var(--card, #ffffff);
    --gc-text: var(--foreground, #1e293b);
    --gc-text-muted: var(--muted-foreground, #64748b);
    --gc-border: var(--border, #e2e8f0);
    --gc-hover: var(--accent, #f8fafc);
    --gc-surface: var(--muted, #f8fafc);
    --gc-success: var(--success, #059669);
    --gc-warning: var(--warning, #d97706);
    --gc-danger: var(--destructive, #dc2626);
    --gc-sidebar-w: 240px;
    --gc-topbar-h: 56px;
}

/* ─── Shell ─── */
.gc-shell {
    display: flex;
    min-height: 100vh;
    background: var(--gc-bg);
    color: var(--gc-text);
}

/* ─── Sidebar ─── */
.gc-sidebar {
    width: var(--gc-sidebar-w);
    flex-shrink: 0;
    background: var(--gc-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    z-index: 40;
    transition: transform 0.25s ease;
}

.gc-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gc-sidebar-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}

.gc-sidebar-brand-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.gc-sidebar-brand-sub {
    font-size: 10px;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gc-sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.gc-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.15s;
    user-select: none;
}

.gc-nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.gc-nav-item.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 600;
}

.gc-nav-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.gc-nav-section {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.4);
    padding: 16px 14px 6px;
    font-weight: 600;
}

.gc-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

/* ─── Main Content ─── */
.gc-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ─── Topbar ─── */
.gc-topbar {
    height: var(--gc-topbar-h);
    background: var(--gc-card);
    border-bottom: 1px solid var(--gc-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.gc-topbar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gc-text);
}

.gc-topbar-spacer {
    flex: 1;
}

.gc-topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gc-text-muted);
}

.gc-topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.gc-topbar-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gc-accent);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}

.gc-topbar-back:hover {
    background: var(--gc-hover);
}

/* ─── Content area ─── */
.gc-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

/* ─── Dashboard ─── */
.gc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.gc-stat-card {
    background: var(--gc-card);
    border: 1px solid var(--gc-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.gc-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-stat-icon svg {
    width: 20px;
    height: 20px;
}

.gc-stat-icon.forms { background: #ede9fe; color: #7c3aed; }
.gc-stat-icon.records { background: #dbeafe; color: #2563eb; }
.gc-stat-icon.sent { background: #d1fae5; color: #059669; }
.gc-stat-icon.draft { background: #fef3c7; color: #d97706; }

html.dark .gc-stat-icon.forms { background: #312e81; color: #c4b5fd; }
html.dark .gc-stat-icon.records { background: #1e3a5f; color: #93c5fd; }
html.dark .gc-stat-icon.sent { background: #052e16; color: #86efac; }
html.dark .gc-stat-icon.draft { background: #451a03; color: #fcd34d; }

.gc-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gc-text);
    line-height: 1;
}

.gc-stat-label {
    font-size: 12px;
    color: var(--gc-text-muted);
    margin-top: 2px;
}

/* ─── Cards grid ─── */
.gc-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gc-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gc-section-title svg {
    width: 15px;
    height: 15px;
}

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

.gc-form-card {
    background: var(--gc-card);
    border: 1px solid var(--gc-border);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gc-form-card:hover {
    border-color: var(--gc-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.gc-form-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.gc-form-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--gc-hover);
    color: var(--gc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gc-form-card-icon svg {
    width: 18px;
    height: 18px;
}

.gc-form-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--gc-text);
}

.gc-form-card-schema {
    font-size: 11px;
    color: var(--gc-text-muted);
    margin-top: 2px;
}

.gc-form-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gc-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.gc-tag.x12 { background: #1e3a5f; color: #93c5fd; }
.gc-tag.edifact { background: #4a1942; color: #f9a8d4; }
.gc-tag.version { background: #14532d; color: #86efac; }
.gc-tag.transaction { background: #451a03; color: #fcd34d; }

.gc-form-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gc-text-muted);
    border-top: 1px solid var(--gc-border);
    padding-top: 10px;
    margin-top: auto;
}

/* ─── Records table ─── */
.gc-records-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.gc-records-search {
    position: relative;
}

.gc-records-search input {
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--gc-border);
    border-radius: 8px;
    font-size: 13px;
    width: 260px;
    outline: none;
    transition: border-color 0.15s;
    background: var(--gc-card);
    color: var(--gc-text);
}

.gc-records-search input:focus {
    border-color: var(--gc-accent);
}

.gc-records-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--gc-text-muted);
}

.gc-records-table-wrap {
    background: var(--gc-card);
    border: 1px solid var(--gc-border);
    border-radius: 12px;
    padding: 12px;
    overflow: hidden;
}

/* ─── Form fill page ─── */
.gc-form-fill {
    width: 100%;
}

.gc-form-fill-header {
    background: var(--gc-primary);
    border-radius: 12px;
    padding: 24px;
    color: #fff;
    margin-bottom: 20px;
}

.gc-form-fill-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
}

.gc-form-fill-subtitle {
    font-size: 13px;
    opacity: 0.8;
    margin: 0;
}

.gc-form-fill-name {
    background: var(--gc-card);
    border: 1px solid var(--gc-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.gc-form-section {
    background: var(--gc-card);
    border: 1px solid var(--gc-border);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.gc-form-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--gc-surface);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--gc-border);
    transition: background 0.15s;
}

.gc-form-section-header:hover {
    background: var(--gc-hover);
}

.gc-form-section-header svg {
    width: 12px;
    height: 12px;
    color: var(--gc-text-muted);
}

.gc-form-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gc-text);
    flex: 1;
}

.gc-form-section-count {
    font-size: 11px;
    color: var(--gc-text-muted);
    background: var(--gc-border);
    padding: 2px 8px;
    border-radius: 10px;
}

.gc-form-section-body {
    display: grid;
    gap: 16px;
    padding: 16px 20px;
}

.gc-form-section .gc-form-section {
    margin: 0 16px 12px;
    border: 1px solid var(--gc-border);
}

.gc-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gc-form-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gc-text-muted);
}

.gc-form-field .gc-required {
    color: var(--gc-danger);
    margin-left: 3px;
}

.gc-form-field .gc-auto-calc {
    font-size: 11px;
    color: var(--gc-accent);
    font-weight: 400;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.gc-form-field .gc-auto-calc svg {
    width: 10px;
    height: 10px;
}

.gc-form-spacer {
    min-height: 40px;
}

/* ─── Action bar (top) ─── */
.gc-form-footer {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--gc-card);
    border: 1px solid var(--gc-border);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.gc-form-footer-integration {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.gc-form-footer-integration label {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.gc-form-footer-actions {
    display: flex;
    gap: 8px;
}

/* ─── Empty state ─── */
.gc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--gc-text-muted);
}

.gc-empty svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.4; }
.gc-empty h3 { font-size: 18px; color: var(--gc-text); margin: 0 0 8px; }
.gc-empty p { font-size: 13px; max-width: 400px; margin: 0; }

/* ─── Status badges ─── */
.gc-status {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gc-status.draft { background: #451a03; color: #fcd34d; }
.gc-status.sent { background: #052e16; color: #86efac; }
.gc-status.failed { background: #450a0a; color: #fca5a5; }

/* ─── EDI Preview ─── */
.gc-edi-preview {
    background: #0f172a;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 10px;
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.7;
    overflow-x: auto;
    max-height: 400px;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 12px 0;
}

/* ─── Recent records on dashboard ─── */
.gc-recent-list {
    background: var(--gc-card);
    border: 1px solid var(--gc-border);
    border-radius: 12px;
    overflow: hidden;
}

.gc-recent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gc-border);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.gc-recent-row:last-child { border-bottom: none; }
.gc-recent-row:hover { background: var(--gc-hover); }

.gc-recent-label { font-weight: 500; flex: 1; color: var(--gc-text); }
.gc-recent-form { color: var(--gc-text-muted); font-size: 12px; }
.gc-recent-date { color: var(--gc-text-muted); font-size: 12px; min-width: 100px; text-align: right; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .gc-sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
    .gc-sidebar.open { transform: translateX(0); }
    .gc-main { margin-left: 0; }
    .gc-content { padding: 16px; }
    .gc-stats { grid-template-columns: repeat(2, 1fr); }
    .gc-forms-grid { grid-template-columns: 1fr; }
    .gc-form-footer { flex-wrap: wrap; padding: 10px 12px; }
    .gc-form-footer-integration { width: 100%; }
    .gc-form-footer-actions { width: 100%; flex-wrap: wrap; }
}
/* Port of src/Modules/CMT/CMTDashboard.css — dark-aware via html.dark overrides.
   No Google-Fonts @import lines; relies on the app's base font stack. */

.cmt-dashboard-container {
  background-color: var(--background);
  color: var(--foreground);
  min-height: 100%;
}

.cmt-header {
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

html.dark .cmt-header {
  background: linear-gradient(135deg, #172554 0%, #1e3a8a 100%);
}

.cmt-nav-item {
  padding: 0.75rem 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.2s;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
}

.cmt-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.cmt-nav-item.active {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-bottom: 3px solid #60a5fa;
}

.cmt-card {
  background: var(--card);
  color: var(--card-foreground);
  border-radius: 12px;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border);
}

html.dark .cmt-card {
  box-shadow: none;
}

.kpi-card {
  transition: transform 0.2s;
  overflow: hidden;
  position: relative;
}

.kpi-card:hover {
  transform: translateY(-4px);
}

/* The KPI gradients are intentional brand accents — white text stays readable
   on them in both light and dark mode, so they are not remapped. */

.gradient-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.gradient-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.gradient-orange {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.gradient-red {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.recharts-responsive-container {
  padding: 10px;
}
/* ============================================================
   GoRates — module-scoped styles.
   Scoped under .gorates-root so nothing leaks to other modules.
   Plain CSS (no @apply/@reference) so it builds identically under
   the app's Tailwind v4 pipeline.
   ============================================================ */

.gorates-root {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  /* Render rem-based Tailwind utilities at design scale */
  font-size: 16px;
  color: var(--foreground);
  background-color: var(--background);
  overscroll-behavior: contain;
}

/* Minimal preflight retained from the original module: guarantees the
   `border` utilities render and <button>/<input> chrome matches the old
   playground environment (notably cursor:pointer on buttons and the
   custom select chevron). :where() keeps specificity at 0 so Tailwind
   utilities win — these element resets live in @layer base so the app's
   LAYERED Tailwind utilities override them. (Unlayered CSS beats layered
   utilities regardless of specificity, which would otherwise kill the
   shared primitives' borders/backgrounds/padding inside .gorates-root.) */
@layer base {
:where(.gorates-root) *,
:where(.gorates-root) *::before,
:where(.gorates-root) *::after {
  border-width: 0;
  border-style: solid;
  /* Match the app default (src/index.css: `* { border-color: var(--border) }`).
     Using currentColor here painted every bordered element near-black in light
     mode once the resets moved into @layer base and borders started rendering. */
  border-color: var(--border);
}
:where(.gorates-root) button,
:where(.gorates-root) [type='button'],
:where(.gorates-root) [type='reset'],
:where(.gorates-root) [type='submit'] {
  background-color: transparent;
  background-image: none;
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}

:where(.gorates-root) input,
:where(.gorates-root) select,
:where(.gorates-root) textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
  padding: 0;
  margin: 0;
  line-height: inherit;
}
:where(.gorates-root) input:focus,
:where(.gorates-root) select:focus,
:where(.gorates-root) textarea:focus,
:where(.gorates-root) button:focus {
  outline: none;
}

:where(.gorates-root) select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  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='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2rem;
}
}

/* Scrollbar styles — scoped to GoRates. Token-driven so they reshade in dark. */
.gorates-root ::-webkit-scrollbar { width: 6px; height: 6px; }
.gorates-root ::-webkit-scrollbar-track { background-color: var(--muted); }
.gorates-root ::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: 0.25rem; }
.gorates-root ::-webkit-scrollbar-thumb:hover { background-color: var(--muted-foreground); }

/* ── Module utility classes (formerly @apply-based) ──────────────────── */

/* Card hover effect with elevation */
.gorates-root .card-hover {
  transition: all 0.2s ease-in-out;
}
.gorates-root .card-hover:hover {
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
}

/* Smooth transitions */
.gorates-root .transition-smooth {
  transition: all 0.2s ease-in-out;
}

/* Shimmer effect for skeleton loaders */
.gorates-root .shimmer {
  background: linear-gradient(90deg, var(--muted) 25%, var(--border-strong) 50%, var(--muted) 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Progress bar animation */
.gorates-root .progress-bar {
  transition: width 0.3s ease-in-out;
}

/* Focus ring for accessibility */
.gorates-root .focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* Glassmorphism effect */
.gorates-root .glass-effect {
  background: color-mix(in srgb, var(--card) 95%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gorates-root .glass-card {
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

/* Gradient backgrounds — follow the switchable accent / semantic tokens */
.gorates-root .gradient-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.gorates-root .gradient-success {
  background: linear-gradient(135deg, var(--success) 0%, var(--success) 100%);
}
.gorates-root .gradient-danger {
  background: linear-gradient(135deg, var(--destructive) 0%, var(--destructive) 100%);
}

.gorates-root .gradient-overlay {
  position: relative;
}
.gorates-root .gradient-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent) 0%, color-mix(in srgb, var(--primary-dark) 10%, transparent) 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* Enhanced shadows */
.gorates-root .shadow-glow {
  box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Animated gradient border */
.gorates-root .gradient-border {
  position: relative;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 2px;
  border-radius: 8px;
}
.gorates-root .gradient-border > * {
  background: var(--card);
  border-radius: 6px;
}

/* Custom animations for micro-interactions */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.gorates-root .pulse-soft {
  animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes gorates-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gorates-slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes gorates-scaleIn {
  from { transform: scale(0.9) translateY(-20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes gorates-bounce-in {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.gorates-root .animate-fade-in {
  animation: gorates-fadeIn 0.2s ease-in-out;
}
.gorates-root .animate-slide-in-right {
  animation: gorates-slideInRight 0.3s ease-out;
}
.gorates-root .animate-scale-in {
  animation: gorates-scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.gorates-root .animate-bounce-in {
  animation: gorates-bounce-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ripple effect for buttons */
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

.gorates-root .ripple-effect {
  position: relative;
  overflow: hidden;
}
.gorates-root .ripple-effect::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-foreground) 60%, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.gorates-root .ripple-effect:active::after {
  width: 200px;
  height: 200px;
  opacity: 0;
  transition: 0s;
}

/* Gradient text */
.gorates-root .gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Dashboard card staggered entrance animation ─────────────────────── */
@keyframes dashboardCardEnter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.gorates-root .dashboard-card-enter {
  animation: dashboardCardEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ============================================================
   DARK MODE — scoped utility remaps.
   The GoRates kit was authored light-only (bg-white cards,
   gray borders, light tone pills) and the un-migrated screens
   still use raw Tailwind color utilities directly in JSX. Rather
   than touch ~13k lines of those screens, the structural neutrals
   + soft tone fills are remapped here under `.dark .gorates-root`
   onto the GoHubX tokens, so they follow the same palette as the
   rest of the suite and reshade with light/dark. Light mode is
   untouched (these rules are dark-only by selector).
   NOTE: kept (not redundant) — they serve hardcoded Tailwind
   classes in screens this task does not own; only var-based color
   rules elsewhere in this file had their paired .dark overrides
   removed.
   ============================================================ */

/* Surfaces → token surfaces */
.dark .gorates-root .bg-white { background-color: var(--card); }
.dark .gorates-root .hover\:bg-white:hover { background-color: var(--muted); }
.dark .gorates-root .bg-gray-50,
.dark .gorates-root .bg-slate-50 { background-color: var(--background); }
.dark .gorates-root [class*='bg-gray-50/'],
.dark .gorates-root [class*='bg-slate-50/'] { background-color: color-mix(in srgb, var(--muted) 85%, transparent); }
.dark .gorates-root .bg-gray-100,
.dark .gorates-root .bg-slate-100 { background-color: var(--muted); }
.dark .gorates-root [class*='bg-slate-100/'] { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.dark .gorates-root .bg-gray-200 { background-color: var(--border-strong); }
.dark .gorates-root .bg-slate-300,
.dark .gorates-root .bg-gray-300 { background-color: var(--muted-foreground); }
.dark .gorates-root .hover\:bg-gray-50:hover,
.dark .gorates-root .hover\:bg-slate-50:hover,
.dark .gorates-root .hover\:bg-gray-100:hover,
.dark .gorates-root .hover\:bg-slate-100:hover { background-color: var(--muted); }
.dark .gorates-root [class*='hover\:bg-gray-50/']:hover,
.dark .gorates-root [class*='hover\:bg-slate-50/']:hover { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.dark .gorates-root .hover\:bg-gray-200:hover { background-color: var(--border-strong); }

/* Borders / dividers → token borders */
.dark .gorates-root .border-gray-50 { border-color: var(--background); }
.dark .gorates-root .border-gray-100,
.dark .gorates-root .border-slate-100,
.dark .gorates-root [class*='border-gray-100/'] { border-color: var(--border); }
.dark .gorates-root .border-gray-200,
.dark .gorates-root .border-slate-200 { border-color: var(--border-strong); }
.dark .gorates-root .border-gray-300 { border-color: var(--muted-foreground); }
.dark .gorates-root .hover\:border-gray-300:hover { border-color: var(--muted-foreground); }
.dark .gorates-root .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }

/* Text → token foregrounds */
.dark .gorates-root .text-gray-900,
.dark .gorates-root .text-slate-900 { color: var(--foreground); }
.dark .gorates-root .text-gray-800,
.dark .gorates-root .text-slate-800 { color: var(--secondary-foreground); }
.dark .gorates-root .text-gray-700,
.dark .gorates-root .text-slate-700 { color: var(--text-body); }
.dark .gorates-root .text-gray-600,
.dark .gorates-root .text-slate-600 { color: var(--muted-foreground); }
.dark .gorates-root .text-gray-500,
.dark .gorates-root .text-slate-500 { color: var(--muted-foreground); }
.dark .gorates-root .text-gray-400,
.dark .gorates-root .text-slate-400 { color: var(--text-muted); }
.dark .gorates-root .text-gray-300 { color: var(--border-strong); }
.dark .gorates-root .hover\:text-gray-800:hover,
.dark .gorates-root .hover\:text-gray-700:hover,
.dark .gorates-root .hover\:text-slate-700:hover { color: var(--secondary-foreground); }
.dark .gorates-root .hover\:text-gray-600:hover,
.dark .gorates-root .hover\:text-slate-600:hover { color: var(--text-body); }
.dark .gorates-root .hover\:text-gray-500:hover { color: var(--muted-foreground); }

/* Soft tone fills (-50/-100 pills, banners, chips) → semantic-token tints.
   indigo/blue → primary, emerald → success, amber/orange → warning,
   red/rose → destructive, sky/fuchsia → primary (closest semantic token). */
.dark .gorates-root .bg-indigo-50,
.dark .gorates-root [class*='bg-indigo-50/'] { background-color: color-mix(in srgb, var(--primary) 14%, transparent); }
.dark .gorates-root .bg-indigo-100 { background-color: color-mix(in srgb, var(--primary) 22%, transparent); }
.dark .gorates-root .hover\:bg-indigo-50:hover,
.dark .gorates-root [class*='hover\:bg-indigo-50/']:hover { background-color: color-mix(in srgb, var(--primary) 18%, transparent); }
.dark .gorates-root .hover\:bg-indigo-100:hover { background-color: color-mix(in srgb, var(--primary) 28%, transparent); }
.dark .gorates-root .bg-amber-50 { background-color: color-mix(in srgb, var(--warning) 12%, transparent); }
.dark .gorates-root .bg-amber-100 { background-color: color-mix(in srgb, var(--warning) 20%, transparent); }
.dark .gorates-root .bg-red-50 { background-color: color-mix(in srgb, var(--destructive) 12%, transparent); }
.dark .gorates-root .bg-red-100,
.dark .gorates-root .hover\:bg-red-50:hover { background-color: color-mix(in srgb, var(--destructive) 20%, transparent); }
.dark .gorates-root .hover\:bg-red-100:hover { background-color: color-mix(in srgb, var(--destructive) 28%, transparent); }
.dark .gorates-root .bg-emerald-50 { background-color: color-mix(in srgb, var(--success) 12%, transparent); }
.dark .gorates-root .bg-emerald-100,
.dark .gorates-root .hover\:bg-emerald-100:hover { background-color: color-mix(in srgb, var(--success) 20%, transparent); }
.dark .gorates-root .bg-blue-50,
.dark .gorates-root [class*='bg-blue-50/'] { background-color: color-mix(in srgb, var(--primary) 12%, transparent); }
.dark .gorates-root .bg-blue-100 { background-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.dark .gorates-root .bg-rose-50,
.dark .gorates-root [class*='bg-rose-50/'] { background-color: color-mix(in srgb, var(--destructive) 12%, transparent); }
.dark .gorates-root .bg-rose-100 { background-color: color-mix(in srgb, var(--destructive) 20%, transparent); }
.dark .gorates-root .bg-orange-50 { background-color: color-mix(in srgb, var(--warning) 12%, transparent); }
.dark .gorates-root .bg-orange-100 { background-color: color-mix(in srgb, var(--warning) 20%, transparent); }
.dark .gorates-root .bg-sky-100 { background-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.dark .gorates-root .bg-fuchsia-50,
.dark .gorates-root [class*='bg-fuchsia-50/'] { background-color: color-mix(in srgb, var(--primary) 12%, transparent); }
.dark .gorates-root .hover\:bg-fuchsia-100:hover { background-color: color-mix(in srgb, var(--primary) 20%, transparent); }

/* Tone borders → semantic-token tints */
.dark .gorates-root .border-indigo-100 { border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.dark .gorates-root .border-indigo-200,
.dark .gorates-root .border-indigo-300 { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.dark .gorates-root .border-amber-100,
.dark .gorates-root .border-amber-200 { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.dark .gorates-root .border-red-100,
.dark .gorates-root .border-red-200,
.dark .gorates-root .border-red-300 { border-color: color-mix(in srgb, var(--destructive) 40%, transparent); }
.dark .gorates-root .border-emerald-100,
.dark .gorates-root .border-emerald-200 { border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.dark .gorates-root .border-rose-100,
.dark .gorates-root .border-rose-200,
.dark .gorates-root .border-rose-300 { border-color: color-mix(in srgb, var(--destructive) 40%, transparent); }
.dark .gorates-root .border-orange-200 { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.dark .gorates-root .border-blue-200 { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.dark .gorates-root .border-fuchsia-200,
.dark .gorates-root .border-fuchsia-300 { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

/* Tone text — lift toward the semantic token, lightened (mixed with the
   light --foreground) so it reads on dark surfaces. */
.dark .gorates-root .text-indigo-600, .dark .gorates-root .text-indigo-700 { color: color-mix(in srgb, var(--primary) 70%, var(--foreground)); }
.dark .gorates-root .text-amber-600, .dark .gorates-root .text-amber-700,
.dark .gorates-root .text-amber-800, .dark .gorates-root .text-amber-900 { color: color-mix(in srgb, var(--warning) 70%, var(--foreground)); }
.dark .gorates-root .text-red-600, .dark .gorates-root .text-red-700,
.dark .gorates-root .text-red-800 { color: color-mix(in srgb, var(--destructive) 60%, var(--foreground)); }
.dark .gorates-root .text-emerald-600, .dark .gorates-root .text-emerald-700 { color: color-mix(in srgb, var(--success) 65%, var(--foreground)); }
.dark .gorates-root .text-blue-600, .dark .gorates-root .text-blue-700 { color: color-mix(in srgb, var(--primary) 70%, var(--foreground)); }
.dark .gorates-root .text-rose-600, .dark .gorates-root .text-rose-700 { color: color-mix(in srgb, var(--destructive) 60%, var(--foreground)); }
.dark .gorates-root .text-orange-600, .dark .gorates-root .text-orange-700 { color: color-mix(in srgb, var(--warning) 65%, var(--foreground)); }
.dark .gorates-root .text-sky-700 { color: color-mix(in srgb, var(--primary) 65%, var(--foreground)); }
.dark .gorates-root .text-fuchsia-600, .dark .gorates-root .text-fuchsia-700,
.dark .gorates-root .text-fuchsia-800 { color: color-mix(in srgb, var(--primary) 65%, var(--foreground)); }

/* Variant-prefixed disabled fills (escape the class-name overrides above) */
.dark .gorates-root .disabled\:bg-gray-50:disabled { background-color: var(--background); }
.dark .gorates-root .disabled\:bg-gray-200:disabled,
.dark .gorates-root .disabled\:bg-slate-300:disabled { background-color: var(--border-strong); }

/* Form controls keep readable text/placeholder on dark */
.dark .gorates-root input::placeholder,
.dark .gorates-root textarea::placeholder { color: var(--muted-foreground); }

/* ── Rate Viewer grid striping / hover (RvTable) ─────────────────────── */
/* Token-driven so it reshades in dark without paired overrides. */
.gorates-root .rv-striped tbody tr { background-color: var(--card); }
.gorates-root .rv-striped tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.gorates-root .rv-striped tbody tr:hover { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
/* ============================================================
   TemplateManager — module-scoped styles.

   The Template Manager screens are now fully tokenized: every surface,
   border, and accent uses a semantic GoHubX token (primary / success /
   warning / destructive / muted / foreground / border…), so they reshade
   correctly in light AND dark on their own.

   This sheet used to carry a large block of `.dark .tm-root` overrides that
   remapped the raw Tailwind palette classes (teal / violet / sky / orange /
   extra slate shades + gradient stops) the screens used directly in JSX. Those
   raw classes are gone, so the paired `.dark` overrides were redundant and
   have been removed — there is nothing left to remap.

   The shared base preflight (button / input / select chrome, scrollbars) still
   comes from Modules/GoRates/index.css, where those element resets live inside
   `@layer base` so the app's layered Tailwind utilities (the shared
   <Button>/<Card>/<PageHeader> borders, backgrounds, and padding) win.

   `.tm-root` is kept on the wrapper (TmShell.jsx) only as a stable scoping hook
   for any future module-specific rule; it currently styles nothing.
   ============================================================ */
/* ============================================================
   GCT (GoHubX Control Tower) — scoped CSS
   All rules are prefixed with .gct-root so they never bleed
   into the main application's styles.

   Ported from playground/src/components/GCT/gct.css with two
   adjustments for gt-frontend-new:
     1. The Google-Fonts @import was removed (breaks the build
        minifier); 'DM Sans' / 'JetBrains Mono' degrade to the
        app's Inter / monospace stacks.
     2. Tokens now derive from the shadcn scheme variables in
        src/index.css (--background, --foreground, --primary,
        --primary-dark) instead of the old playground globals
        (--color-bg, --color-text, --theme-bg, --theme-accent).
        Because every surface/border/text shade below is
        color-mix()-derived from those, the whole module remaps
        automatically when html.dark flips them — same approach
        as the CarrierOnboardingTool cot.css dark block, just
        with zero literal overrides needed.
   ============================================================ */

/* ── Root theme variables ───────────────────────────────── */

.gct-root {
  /* NEUTRAL chrome tokens point DIRECTLY at the app's scheme tokens (no
     color-mix) so GCT surfaces EXACTLY match the rest of the platform in
     both light and dark — the old color-mix derivations rendered grey. */
  --gct-bg:          var(--background);
  --gct-text:        var(--foreground);
  --gct-accent:      var(--primary);
  --gct-accent-hover:var(--primary-dark);

  --gct-surface:     var(--muted);   /* inputs / raised controls          */
  --gct-surface-2:   var(--card);    /* cards / stat-cards / table panels  */
  --gct-surface-hover: var(--secondary); /* row / interactive hover state  */
  --gct-border:      var(--border);
  --gct-text-muted:  var(--muted-foreground);
  --gct-text-dim:    var(--muted-foreground);

  font-family: var(--font-sans);
  color: var(--gct-text);
  background: var(--gct-bg);
}

/* ── Scrollbar ───────────────────────────────────────────── */

.gct-root ::-webkit-scrollbar       { width: 4px; height: 4px; }

.gct-root ::-webkit-scrollbar-track { background: var(--gct-surface); }

.gct-root ::-webkit-scrollbar-thumb { background: var(--gct-border); border-radius: 2px; }

/* (GCT section nav is now a top tab strip via the shared ClosableTabs — the
   old `.gct-sidebar-link` rules were removed with the second sidebar.) */

.gct-root .gct-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.gct-root .gct-page-head { flex-shrink: 0; }

.gct-root .gct-page-foot { flex-shrink: 0; }

.gct-root .gct-page-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.gct-root .gct-table-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.gct-root .gct-fill {
  flex: 1;
  min-height: 0;
}

/* ── Status badge ────────────────────────────────────────── */

.gct-root .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  line-height: 1;
  white-space: nowrap;
}

/* ── Cards ───────────────────────────────────────────────── */

.gct-root .card {
  background: var(--gct-surface-2);
  border: 1px solid var(--gct-border);
  border-radius: 12px;
  padding: 20px;
}

.gct-root .stat-card {
  background: var(--gct-surface-2);
  border: 1px solid var(--gct-border);
  border-radius: 12px;
  padding: 20px 24px;
}

/* ── Form controls ───────────────────────────────────────── */

.gct-root input,
.gct-root select,
.gct-root textarea {
  background: var(--gct-surface);
  border: 1px solid var(--gct-border);
  border-radius: 8px;
  color: var(--gct-text);
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s;
}

.gct-root input:focus,
.gct-root select:focus     { border-color: var(--gct-accent); }

.gct-root select option    { background: var(--popover); color: var(--popover-foreground); }

/* Compact per-column filter selects rendered inside the shared DataTable's
   filter row (replaces the PrimeReact p-column-filter dropdowns). */

.gct-root select.gct-col-filter {
  width: 100%;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 6px;
  font-weight: 400;
}

/* The generic input/select rules above out-specify the shared DataTable's
   Tailwind utilities; keep its filter-row inputs compact instead of
   inheriting the 8px/14px module form sizing. (The paginator's
   rows-per-page select picking up the module styling is fine.) */

.gct-root thead input {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
}

/* ── Buttons ─────────────────────────────────────────────── */

.gct-root .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  font-family: var(--font-sans);
}

.gct-root .btn-primary          { background: var(--gct-accent);       color: var(--primary-foreground); }

.gct-root .btn-primary:hover    { background: var(--gct-accent-hover); }

.gct-root .btn-ghost            { background: var(--gct-surface-2); color: var(--gct-text-muted); border: 1px solid var(--gct-border); }

.gct-root .btn-ghost:hover      { color: var(--gct-text); border-color: var(--gct-accent); }

.gct-root .btn-danger           { background: #7f1d1d; color: #fca5a5; }

.gct-root .btn-danger:hover     { background: #991b1b; }

/* ── Tables ──────────────────────────────────────────────── */

.gct-root table           { width: 100%; border-collapse: collapse; }

.gct-root thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gct-text-dim);
  border-bottom: 1px solid var(--gct-border);
}

.gct-root .gct-page-body > table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gct-surface-2);
}

.gct-root tbody tr         { border-bottom: 1px solid var(--gct-border); transition: background 0.1s; }

.gct-root tbody tr:hover   { background: var(--gct-surface-hover); }

.gct-root tbody td         { padding: 12px 14px; font-size: 14px; color: var(--gct-text); }

/* ── Timeline dot ────────────────────────────────────────── */

.gct-root .timeline-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

/* ── Shared DataTable blend ──────────────────────────────────
   The shadcn-based @/components/DataTable brings its own Tailwind table
   styling (bg-muted header, borders, paginator buttons), which already
   tracks the app scheme. Only the row-click affordance carries over from
   the old PrimeReact blend. */

.gct-root .shipment-row { cursor: pointer; }

/* ── Spin animation (used in Configuration sync button) ─── */

.gct-root .spin {
  animation: gct-spin 1s linear infinite;
}

@keyframes gct-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Dark: rules that reference literal colors ─────────────
   (cf. CarrierOnboardingTool/styles/cot.css end-of-file block.)
   Everything above is token-derived and re-mixes itself when html.dark
   flips --background/--foreground, so no surface remap is needed here.
   The few hardcoded accents (.btn-danger reds, status hexes in JSX) were
   chosen on the dark-first gct-ui palette and stay legible on both
   schemes — they are intentionally left verbatim. NEVER mutate the global
   .dark class or localStorage('theme') from this module. */

html.dark .gct-root ::-webkit-scrollbar-thumb { background: #3f3f46; }

html.dark .gct-root ::-webkit-scrollbar-thumb:hover { background: #52525b; }
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}