*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Plus Jakarta Sans, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

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

/*
Remove the default font size and weight for headings.
*/

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

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

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

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  * {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  }

  :root {
    /* ── Kanfy brand primitives ─────────────────────────────────────────
       Do not use these directly in components — go through the semantic
       tokens below so light/dark stays coherent. */
    --kanfy-ink:        168 63% 14%;  /* #0D3A31 */
    --kanfy-teal:       166 73% 26%;  /* #12735C */
    /* Clay sits on the WCAG contrast knife-edge: at its original 55% lightness
       NEITHER light nor dark text cleared AA on it (cream 3.28:1, ink 3.60:1),
       so every one of the ~176 primary buttons failed, on all 10 public routes.
       A foreground swap could not fix that — the background had to move. 44% is
       the first lightness where the label clears 4.5:1, and it simultaneously
       fixes clay-as-text on cream (3.20 → 4.57). Hue and saturation are
       untouched. Do not lighten this without re-running e2e/a11y-audit.spec.ts. */
    --kanfy-clay:        16 67% 44%;  /* #BB4D25 — actions only */
    --kanfy-amber:       36 88% 59%;  /* #F2A93B — fills only, never text on cream */
    --kanfy-cream:       36 71% 95%;  /* #FBF3E7 */

    --kanfy-border-warm: 38 36% 84%;  /* #E4D9C6 */
    --kanfy-sec-cream:   35 12% 40%;  /* #72685A — secondary text on cream (43% was 4.44:1, just under AA) */
    /* Was 77% L (#B9CFC7) — tuned for --background (kanfy-ink, 14% L) but
       also used as --muted-foreground/--sidebar-foreground text on --card
       (kanfy-teal, 26% L, lighter than ink), where 77% only cleared 3.55:1.
       Caught live by e2e/dark-mode-smoke.spec.ts's axe pass on the stats
       bar. 88% clears 4.5:1 against the harder-to-read (lighter) of the
       two backgrounds, so it clears both. Hue/saturation untouched. */
    --kanfy-sec-ink:    158 19% 88%;  /* #DBE6E2 */
    --kanfy-teal-tint:  159 50% 92%;  /* #E1F5EE */
    --kanfy-teal-mid:   160 51% 58%;  /* #5DCAA5 — icons on dark */
    --kanfy-on-amber:    32 94% 13%;  /* #412402 — the only text colour on amber */
    --kanfy-nav-dark:   168 64% 11%;  /* #0A2E27 */
    --kanfy-border-dark:167 51% 21%;  /* #1A5145 */


    /* Mobile floating layer stack */
    --mobile-bottom-nav-height: 4rem;
    --mobile-active-bottom-nav-height: 0rem;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-fab-bottom: calc(var(--mobile-active-bottom-nav-height) + var(--mobile-safe-bottom) + 1.25rem);
    --mobile-fab-right: 3.75rem; /* right-3 (12px) + w-12 (48px) = 60px ≈ 3.75rem */
    --cookie-banner-height: 11rem;

    /* ── Kanfy semantic tokens — light mode ─────────────────────────────
       The light page is cream, not white. White is reserved for raised
       surfaces (cards, the search bar) so they lift off the page. */
    --background: var(--kanfy-cream);
    --foreground: var(--kanfy-ink);

    --card: 0 0% 100%;
    --card-foreground: var(--kanfy-ink);

    --popover: 0 0% 100%;
    --popover-foreground: var(--kanfy-ink);

    /* Clay — primary actions ONLY. One per screen. */
    --primary: var(--kanfy-clay);
    --primary-foreground: 24 100% 97%;
    --primary-hover: 16 67% 38%;  /* #A24320 */

    /* Trust indicators: brand teal rather than a generic green, so
       "verified" reads as part of the identity. */
    --trust: var(--kanfy-teal);
    --trust-foreground: var(--kanfy-cream);
    --trust-light: var(--kanfy-teal-tint);

    /* Secondary surfaces sit on the teal tint, not a second warm accent —
       clay must stay unique to actions. */
    --secondary: var(--kanfy-teal-tint);
    --secondary-foreground: var(--kanfy-ink);

    --muted: 38 44% 92%;
    --muted-foreground: var(--kanfy-sec-cream);

    /* A step off --background/--card for zebra rows, sticky headers and
       hover states (e.g. admin tables) — same value as --muted, which
       already does this job everywhere else; alias rather than a second
       primitive so the two can never drift apart. */
    --surface: var(--muted);

    --accent: var(--kanfy-teal-tint);
    --accent-foreground: var(--kanfy-teal);

    /* Destructive stays a true red, deliberately NOT clay — a delete
       confirm and a primary CTA must never be the same colour. */
    --destructive: 0 72% 45%;
    --destructive-foreground: 0 0% 100%;
    --success: var(--kanfy-teal);
    --success-foreground: var(--kanfy-cream);

    /* Same hue/saturation as the dark-mode value below, darkened from
       48% to 36% lightness — at 48% this fails AA (2.9:1) as text on a
       cream/white background, which is how every consumer uses it
       (text-info on a bg-info/10..20 tint, e.g. Alert's "info" variant). */
    --info: 199 89% 36%;
    --info-foreground: 0 0% 100%;

    /* kanfy-amber is fills-only (see primitive comment above) — it has
       ~2:1 contrast on cream and can't carry text or an icon stroke, so
       --warning itself stays the bright fill and --warning-foreground
       reuses kanfy-on-amber, the one colour already proven AA-safe on
       amber (StatusChip's "pending" chip and Alert's "warning" variant
       both pair a warning/10-15 tint with text-warning-foreground). */
    --warning: var(--kanfy-amber);
    --warning-foreground: var(--kanfy-on-amber);

    --border: var(--kanfy-border-warm);
    /* Inputs get a DARKER border than surfaces on purpose. --border (#E4D9C6)
       on a cream page (#FBF3E7) is a ~1.1:1 edge — fields visually dissolved,
       so it was never obvious what wanted filling in. This is the same warm
       family, several steps down, so a field reads as an affordance without
       shouting. */
    --input: 36 26% 68%;
    --ring: var(--kanfy-clay);

    /* Nav bar: cream with a hairline border on light, near-black teal on
       dark. Kept separate from --background so the nav can sit a step
       apart from the page without hardcoding a colour. */
    --bg-nav: var(--kanfy-cream);

    /* Logo colours for the `auto` KanfyLogo variant — flips with the
       cascade so the mark never disagrees with the nav it sits on. */
    --logo-house: var(--kanfy-teal);
    --logo-door:  var(--kanfy-cream);

    /* Highlighted word in a headline. Clay on cream; amber is ~2:1 there
       and disappears in direct sunlight, which matters for outdoor phone
       use in the launch market. Amber is only safe as a fill. */
    --accent-heading: var(--kanfy-clay);

    /* ── Trend semantics ────────────────────────────────────────────────
       Direction-of-travel colours for metrics: up-is-good in teal, flat or
       watch-this in amber, down-is-bad in red.

       Teal, not a generic green — the palette has no green, and "success"
       already means teal everywhere else in this app.

       COLOUR IS NEVER THE ONLY SIGNAL. Red/green is the classic
       colour-blind failure (deuteranopia and protanopia affect ~8% of men),
       so every consumer must also carry a direction arrow AND an explicit
       +/- sign. TrendPill enforces that; do not hand-roll a coloured
       percentage. Each -fg is measured on its own tint below. */
    --trend-up:        159 50% 92%;   /* #E0F5EE tint  */
    --trend-up-fg:     166 73% 26%;   /* #12735C 5.08:1 */
    --trend-flat:       38 70% 91%;   /* #F8ECD8 tint  */
    --trend-flat-fg:    25 85% 30%;   /* #8E420B 6.13:1 */
    --trend-down:        0 60% 95%;   /* #FBE9E9 tint  */
    --trend-down-fg:     0 65% 34%;   /* #8F1E1E 7.35:1 */

    /* ── Icon tints ─────────────────────────────────────────────────────
       Colour context without colour cycling. Surfaces stay neutral and the
       colour lives in the icon tile, the way iOS Settings does it — so a
       screen reads rich rather than monotone, but the hue still means
       something instead of being decoration assigned per card.

       Bound to DOMAIN, and the binding is fixed app-wide:
         teal  → work: jobs, bookings, anything verified or completed
         amber → people: applications, helpers, anything awaiting a human
         clay  → money: spend, earnings, payouts
         ink   → neutral / everything else

       Each -fg is the icon colour on its own tile. Icons are graphical
       objects, so these are held to WCAG 3:1 rather than 4.5:1 — measured,
       all four clear even the text threshold: teal 5.08, amber 6.13,
       clay 4.83, ink 11.11. Do not add a fifth without measuring it. */
    --tint-teal:     159 50% 92%;   /* #E1F5EE */
    --tint-teal-fg:  166 73% 26%;   /* #12735C */
    --tint-amber:     38 70% 91%;   /* #F7E9D4 */
    --tint-amber-fg:  25 85% 30%;   /* #8E3D0C */
    --tint-clay:      20 55% 92%;   /* #F6E5DD */
    --tint-clay-fg:   16 67% 40%;   /* #AA4622 */
    --tint-ink:      168 30% 93%;   /* #E8F1EF */
    --tint-ink-fg:   168 63% 14%;   /* #0D3A31 */

    /* Service category colors */
    --service-maid: 267 57% 78%;
    --service-cleaning: 142 76% 36%;
    --service-security: 25 95% 53%;




    /* Retired palettes (--financial-*, --tasks-*, --tx-*) lived here.
       They were three parallel colour systems in raw hex/HSL that predated
       Kanfy: --tx-* had no consumers at all, and the other two were each
       used by exactly one admin page. Those pages now use the sanctioned
       --admin-* tokens, which are deliberately distinct from the brand
       (see tailwind.config.ts) rather than a fourth private palette.
       Do not reintroduce a per-page palette — extend --admin-* instead. */

    /* Admin Design System - Consistent across all admin pages */
    --admin-bg: 210 20% 98%; /* Slate 50 #F8FAFC */
    --admin-card: 0 0% 100%; /* White */
    --admin-text: 215 25% 17%; /* Slate 800 #1E293B */
    --admin-text-secondary: 215 16% 47%; /* Slate 600 #475569 */
    --admin-border: 214 32% 91%; /* Zinc 200 #E4E4E7 */
    --admin-emerald: 142 71% 45%; /* Emerald 600 #10B981 */
    --admin-teal: 174 72% 56%; /* Teal 400 #2DD4BF — intentionally kept for admin accent */
    /* Was its own hex value (#FAFAFA) — near-identical in purpose and
       colour to --admin-bg (#F8FAFC) just above, and had no .dark override
       at all, so bg-admin-surface (the outer container on 8+ admin pages)
       stayed light-gray even in dark mode. Aliased rather than given its
       own dark value, per the "do not reintroduce a per-page palette"
       note above — one token, not two nearly-identical ones. */
    --admin-surface: var(--admin-bg);
    
    /* Status Colors - Consistent badge styling */
    --status-approved: 142 71% 45%; /* Emerald 600 */
    --status-pending: 38 92% 50%; /* Amber 500 */
    --status-rejected: 0 84% 60%; /* Red 500 */
    --status-suspended: 350 89% 60%; /* Rose 500 */
    --status-completed: 142 71% 45%; /* Emerald 600 */
    --status-cancelled: 215 16% 47%; /* Gray 500 */

    /* Analytics Dashboard Colors - Royal Indigo Theme */
    --analytics-primary: 244 58% 51%; /* Royal Indigo #4F46E5 */
    --analytics-success: 142 71% 45%; /* Emerald #10B981 */
    --analytics-warning: 43 96% 56%; /* Amber #FBBF24 */
    --analytics-danger: 0 84% 60%; /* Red #EF4444 */
    --analytics-bg: 210 20% 98%; /* Soft Gray #F9FAFB */
    --analytics-card: 0 0% 100%;
    --analytics-text: 215 25% 17%;
    --analytics-gradient-start: 244 58% 51%; /* Indigo */
    --analytics-gradient-end: 174 62% 47%; /* Teal */

    /* Care.com-inspired warm gradients */
    --gradient-hero: linear-gradient(135deg, var(--th-navy) 0%, hsl(var(--primary)) 100%);
    --gradient-trust: linear-gradient(135deg, hsl(142 71% 45%), hsl(142 71% 50%));
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(30 15% 95%));
    --gradient-warm: linear-gradient(135deg, hsl(30 60% 95%), hsl(16 40% 90%));
    --gradient-subtle: linear-gradient(160deg, hsl(210 40% 99%) 0%, hsl(210 30% 96%) 100%);
    
    /* ── Elevation ──────────────────────────────────────────────────────
       Two-layer shadows: a tight contact shadow that defines the card's
       edge, plus a wide, offset ambient bloom that lifts it off the page.
       A single blurred layer (what --shadow-soft/medium were) reads as a
       grey smudge rather than depth.

       Tinted with the ink hue, not neutral grey or black. The page is warm
       cream (#FBF4E9); a neutral shadow on a warm surface desaturates into
       something that looks like dirt. Matching the hue keeps it a shadow. */
    --elevation-1: 0 1px 2px hsl(168 40% 10% / 0.05), 0 1px 3px hsl(168 40% 10% / 0.04);
    --elevation-2: 0 2px 4px hsl(168 40% 10% / 0.05), 0 6px 16px -4px hsl(168 40% 10% / 0.10);
    --elevation-3: 0 4px 8px hsl(168 40% 10% / 0.06), 0 16px 32px -8px hsl(168 40% 10% / 0.14);
    --elevation-4: 0 8px 16px hsl(168 40% 10% / 0.08), 0 32px 56px -16px hsl(168 40% 10% / 0.18);

    /* Legacy aliases — retargeted onto the scale above so existing
       shadow-soft / shadow-medium call sites pick up the new depth. */
    --shadow-soft: var(--elevation-2);
    --shadow-medium: var(--elevation-3);
    --shadow-strong: var(--elevation-4);
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-out;

    /* ── Motion ─────────────────────────────────────────────────────────
       "Energetic restraint": the surface stays calm, the RESPONSE has
       personality. --ease-spring overshoots slightly on the way out, so a
       control springs back rather than easing to a stop — that overshoot is
       the whole effect, and it belongs on press/release, never on anything
       a user reads.

       Durations stay short on purpose. Playful is not slow; a long
       animation is just latency with a curve on it.

       Every consumer must be inside a `motion-safe:` variant or behind the
       prefers-reduced-motion block below — overshoot is exactly the kind of
       motion that triggers vestibular symptoms. */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-press: 120ms;
    --duration-pop: 220ms;

    /* 0.875rem, up from 0.75rem: softer without becoming a pill. The
       shadcn scale derives sm/md/lg from this one value, so everything
       rounds together. */
    --radius: 0.875rem;

    --sidebar-background: 222 47% 11%;
    --sidebar-foreground: 215 20% 65%;
    --sidebar-primary: 173 58% 39%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 40% 16%;
    --sidebar-accent-foreground: 210 40% 96%;
    --sidebar-border: 222 40% 16%;
    --sidebar-ring: 173 58% 39%;

    /* Design tokens */
    --color-surface: #FAFAFA;
    --color-surface-raised: #FFFFFF;
    --color-surface-overlay: #F4F4F5;
    --color-border-subtle: #F0F0F0;
    --color-text-primary: #09090B;
    --color-text-secondary: #52525B;
    /* WCAG AA: #A1A1AA (2.3:1 on white) failed contrast widely. #6B7280 is
       Gray-500 at ~4.6:1 on white — passes AA for normal text while staying a
       muted tertiary tone. */
    --color-text-tertiary: #6B7280;
    --color-accent-brand: #0D9488;
    --color-accent-subtle: #CCFBF1;
    --color-success: #16A34A;
    --color-warning: #D97706;
    --color-danger: #DC2626;
    --color-info: #2563EB;

    /* ── Legacy --th-* palette, remapped to Kanfy ───────────────────────
       These primitives feed src/styles/redesign.css (359 lines of
       selector-level overrides) and large parts of this file. Remapping
       the primitives carries the brand through all of it at once, instead
       of rewriting every rule that references them.

       Names are kept so nothing breaks; "navy" now means ink, "teal" means
       Kanfy teal. Renaming them is follow-up churn, not a design change.
       Category colours below are deliberately left alone — they encode
       service type, not brand. */

    /* Was #14B8A6 teal ramp → Kanfy teal */
    --th-teal:          #12735C;
    --th-teal-dark:     #0D3A31;
    --th-teal-light:    #5DCAA5;
    --th-mint-bg:       #E1F5EE;

    /* Was #0F2D4E navy ramp → Kanfy ink. --th-navy-light was #EFF6FF, a
       pale blue used as the page background in two files; it is cream now. */
    --th-navy:          #0D3A31;
    --th-navy-mid:      #12735C;
    --th-navy-light:    #FBF3E7;

    /* Accents */
    --th-amber:         #F2A93B;
    --th-amber-bg:      #FDF0D8;
    --th-green:         #10B981;
    --th-green-bg:      #F0FDF4;
    --th-rose:          #FB7185;
    --th-rose-bg:       #FFF1F2;
    --th-orange:        #F97316;
    --th-orange-bg:     #FFF7ED;
    --th-purple:        #8B5CF6;
    --th-purple-bg:     #F5F3FF;
    --th-blue:          #3B82F6;
    --th-blue-bg:       #EFF6FF;
    --th-sky:           #0EA5E9;
    --th-sky-bg:        #F0F9FF;
    --th-pink:          #D946EF;
    --th-pink-bg:       #FDF4FF;

    /* Service / Category colours */
    --th-cat-clean:     #14B8A6;
    --th-cat-child:     #F97316;
    --th-cat-repair:    #0EA5E9;
    --th-cat-tutor:     #8B5CF6;
    --th-cat-pet:       #F59E0B;
    --th-cat-garden:    #22C55E;
    --th-cat-elder:     #D946EF;
    --th-cat-sec:       #3B82F6;
    --th-cat-maid:      #FB7185;
    --th-cat-maint:     #64748B;

    /* ── Canonical brand tokens (used by tailwind.config.ts bg-brand-* utilities) ── */
    /* KEEP IN SYNC with --th-* values above. Primary = Clay, not red.                */
    /* --brand-red keeps its name so existing utilities resolve, but it is clay now — */
    /* the action colour. Anything that meant "danger" should use --destructive.      */
    --brand-red:    var(--kanfy-clay);   /* #BB4D25 — actions only                   */
    --brand-navy:   var(--kanfy-ink);    /* #0D3A31 — matches --th-navy              */
    --brand-amber:  var(--kanfy-amber);  /* #F2A93B — matches --th-amber             */
    --brand-teal:   var(--kanfy-teal);   /* #12735C — matches --th-teal              */

    /* Metric card left-border colours */
    --th-metric-revenue:      #10B981;
    --th-metric-bookings:     #3B82F6;
    --th-metric-helpers:      #14B8A6;
    --th-metric-completion:   #F59E0B;
    --th-metric-customers:    #8B5CF6;
    --th-metric-newusers:     #F97316;
    --th-metric-alerts:       #FB7185;

    /* Typography */
    --th-font-display:  'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --th-weight-black:  900;
    --th-weight-heavy:  800;
    --th-weight-bold:   700;
    --th-weight-medium: 500;

    /* Radius */
    --th-radius-sm:     0.5rem;
    --th-radius-md:     0.75rem;
    --th-radius-lg:     1rem;
    --th-radius-xl:     1.25rem;

    /* Shadows */
    --th-shadow-card:   0 2px 12px rgba(15, 45, 78, 0.08);
    --th-shadow-btn:    0 4px 14px rgba(20, 184, 166, 0.35);
    --th-shadow-hover:  0 6px 20px rgba(20, 184, 166, 0.45);

    /* Gradients */
    --th-grad-header:   linear-gradient(135deg, var(--th-navy) 0%, var(--th-navy-mid) 100%);
    --th-grad-teal:     linear-gradient(135deg, var(--th-teal) 0%, var(--th-sky) 100%);
    --th-grad-navy:     linear-gradient(135deg, var(--th-navy) 0%, var(--th-navy-mid) 100%);
    /* Progress reads as trust, not action, so it runs teal → teal-mid rather
       than clay. It previously ended on --th-blue (#3B82F6), a colour from no
       Kanfy palette at all; because redesign.css applies this via a global
       [role="progressbar"] > div rule, that stray blue was overriding the
       Progress component's own bg-primary on EVERY bar in the app. */
    --th-grad-progress: linear-gradient(90deg, hsl(var(--kanfy-teal)) 0%, hsl(var(--kanfy-teal-mid)) 100%);
    --th-grad-mint:     linear-gradient(135deg, #F0FDFA 0%, #ECFDF5 100%);
  }

  /* Kanfy dark mode. NOTE: a second, later `.dark` block outside
     @layer base (TH-032) also sets these tokens and wins on specificity —
     both are kept in sync. */
  .dark {
    --background: var(--kanfy-ink);
    --foreground: var(--kanfy-cream);

    /* Surfaces on dark are teal, not a darker grey — teal is what carries
       the identity once cream is gone. */
    --card: var(--kanfy-teal);
    --card-foreground: var(--kanfy-cream);

    --popover: var(--kanfy-teal);
    --popover-foreground: var(--kanfy-cream);

    /* Clay is the ONE token identical across modes, so the button looks
       the same everywhere and users learn it once. */
    --primary: var(--kanfy-clay);
    --primary-foreground: 24 100% 97%;
    --primary-hover: 16 67% 38%;  /* #A24320 */

    --secondary: 170 8% 31%;
    --secondary-foreground: var(--kanfy-cream);

    --muted: 170 8% 31%;
    --muted-foreground: var(--kanfy-sec-ink);

    --accent: 170 8% 31%;
    --accent-foreground: var(--kanfy-amber);

    --destructive: 0 62% 42%;
    --destructive-foreground: 0 0% 100%;

    --border: var(--kanfy-border-dark);
    --input: var(--kanfy-border-dark);
    --ring: var(--kanfy-clay);
    --accent-heading: var(--kanfy-amber);
    --bg-nav: var(--kanfy-nav-dark);
    --logo-house: var(--kanfy-cream);
    --logo-door:  var(--kanfy-nav-dark);
    --sidebar-background: var(--kanfy-nav-dark);
    --sidebar-foreground: var(--kanfy-sec-ink);
    --sidebar-primary: var(--kanfy-clay);
    --sidebar-primary-foreground: 24 100% 97%;
    --sidebar-accent: 170 8% 31%;
    --sidebar-accent-foreground: var(--kanfy-cream);
    --sidebar-border: var(--kanfy-border-dark);
    --sidebar-ring: var(--kanfy-clay);
  }
  * {
  border-color: hsl(var(--border));
}

  body {
  background-color: hsl(var(--background));
  font-family: Plus Jakarta Sans, system-ui, sans-serif;
  color: hsl(var(--foreground));
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: hsl(var(--primary) / 0.1);
}

  /* Mobile spacing — bottom clears BottomNav */
  @media (max-width: 767px) {
    body {
      padding-bottom: 0;
    }

    html[data-bottom-nav-visible="true"] body {
      padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-bottom));
    }

    html[data-bottom-nav-visible="true"] {
      --mobile-active-bottom-nav-height: var(--mobile-bottom-nav-height);
    }

    /* iOS Safari zooms focused editable controls that compute below 16px.
       !important keeps later utility/consumer classes from weakening this
       mobile-only accessibility contract; desktop typography is unaffected. */
    :where(
      input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
      textarea,
      select,
      [contenteditable]:not([contenteditable="false"])
    ) {
      font-size: 16px !important;
    }
  }
  
  /* Touch target optimization for pointer devices */
  button,
  a,
  [role="button"] {
    touch-action: manipulation;
  }

  /* Preserve 44px touch targets on mobile without stretching desktop links. */
  @media (max-width: 767px) {
    button,
    a,
    [role="button"] {
      min-height: 44px;
      min-width: 44px;
    }
  }
  
  /* Prevent accidental horizontal page expansion. `clip` does not create a
     second scroll container, so vertical document scrolling remains intact. */
  html {
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

  body,
  #root {
    overflow-x: clip;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  /* Admin-specific typography */

  /* Accessibility: Focus indicators — WCAG 2.1 AA
     3px ring + 2px offset ensures 3:1 non-text contrast ratio on all backgrounds */
  *:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }

  /* High-contrast mode support */
  @media (forced-colors: active) {
    *:focus-visible {
      outline: 3px solid ButtonText;
      outline-offset: 2px;
    }
  }

  /* Reduced motion support - respects user preferences */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    
    /* Disable all decorative animations */
    [class*="animate-marquee"],
    [class*="animate-drift"],
    [class*="animate-fade"],
    [class*="animate-scale"],
    [class*="animate-pulse"] {
      animation: none !important;
    }
  }

  /* Motion-safe utility classes for progressive enhancement */
  
  /* Safe area padding utility — use on elements that sit above the bottom edge */
  .pb-safe {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 1rem);
  }

  /* Full-page layout wrapper for user-facing pages with BottomNav.
     Prefer this over ad-hoc pb-safe on page roots — pages must NOT add their
     own pb-24/pb-28 on top (that stacked into a ~250px dead zone, issue #435).
     On mobile the body rule above (max-width 767px) already clears the nav
     bar (4rem + safe area); this only adds the ~30px visible gap above it. */
  .mobile-content-area {
    min-height: 100dvh;
    padding-bottom: 2.5rem;
  }

  @media (min-width: 768px) {
    .mobile-content-area {
      padding-bottom: 2rem;
    }
  }
  
  /* Hide scrollbars but keep functionality */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  /* Touch-friendly tap targets - only for interactive elements */
  @media (max-width: 767px) {
    button:not([size="icon"]),
    a[role="button"],
    [role="tab"],
    [role="menuitem"],
    [role="link"] {
      min-height: 44px;
      touch-action: manipulation;
    }
  }

  /* Compact UI override — resets 44px min-height for dense table/pill contexts */
  .compact-touch button,
  .compact-touch a,
  .compact-touch [role="button"],
  .compact-touch [role="tab"] {
    min-height: auto;
    min-width: auto;
  }

  /* Input fields - comfortable touch targets; mobile font sizing is defined above. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 48px;
    touch-action: manipulation;
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    :root {
      --foreground: 0 0% 0%;
      --background: 0 0% 100%;
      --muted-foreground: 0 0% 20%;
    }
  }
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    font-feature-settings: "cv11", "ss01";
  }

  /* ── Display type ──────────────────────────────────────────────────
     Heavier, tighter headings. This is where "youthful" is carried — a
     confident display weight reads energetic without touching the palette
     or adding motion. Scoped to h1/h2 so body copy stays calm and legible,
     and tracking tightens as size grows, which is how optical sizing works.
     A utility class on the element still wins, so any heading that needs a
     lighter weight can just say so. */
  h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  /* Numbers align in tables/cards */
  .tnum, .stat, td.num, th.num { font-variant-numeric: tabular-nums; }

  /* Consistent focus ring across custom elements */
  .focus-ring {
  border-radius: 10px;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
  .focus-ring:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(45 182 157 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
}

  /* Safe-area padding helpers */

  /* Horizontal chip rows — scroll without showing scrollbar */
  .scroll-x-chips {
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
  --tw-scroll-snap-strictness: mandatory;
  gap: 0.5rem;
  overflow-x: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
  #main-content .scroll-x-chips.gap-2.justify-start > *:nth-child(1) { animation: pillIn 0.45s ease-out 1.00s both; }
  #main-content .flex.scroll-x-chips.justify-start > *:nth-child(1) { animation: pillIn 0.45s ease-out 1.00s both; }
  #main-content .scroll-x-chips.gap-2.justify-start > *:nth-child(2) { animation: pillIn 0.45s ease-out 1.15s both; }
  #main-content .flex.scroll-x-chips.justify-start > *:nth-child(2) { animation: pillIn 0.45s ease-out 1.15s both; }
  #main-content .scroll-x-chips.gap-2.justify-start > *:nth-child(3) { animation: pillIn 0.45s ease-out 1.30s both; }
  #main-content .flex.scroll-x-chips.justify-start > *:nth-child(3) { animation: pillIn 0.45s ease-out 1.30s both; }
  #main-content .scroll-x-chips.gap-2.justify-start > *:nth-child(4) { animation: pillIn 0.45s ease-out 1.45s both; }
  #main-content .flex.scroll-x-chips.justify-start > *:nth-child(4) { animation: pillIn 0.45s ease-out 1.45s both; }
  #main-content .scroll-x-chips.gap-2.justify-start > *:nth-child(5) { animation: pillIn 0.45s ease-out 1.60s both; }
  #main-content .flex.scroll-x-chips.justify-start > *:nth-child(5) { animation: pillIn 0.45s ease-out 1.60s both; }
  #main-content .scroll-x-chips.gap-2.justify-start button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
  #main-content .flex.scroll-x-chips.justify-start button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
  #main-content .scroll-x-chips.gap-2.justify-start button:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
}
  #main-content .flex.scroll-x-chips.justify-start button:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
}
  .scroll-x-chips {
    scrollbar-width: none;
  }
  .scroll-x-chips::-webkit-scrollbar { display: none; }

  /* Right-edge fade for horizontally scrolling tables */
  .table-scroll {
  position: relative;
  overflow-x: auto;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
            mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
  .table-scroll.no-mask { -webkit-mask-image: none; mask-image: none; }
  body {
    /* Was hardcoded to --th-navy-light (#EFF6FF, a pale blue), which
       overrode --background and kept the page off-brand in light mode no
       matter what the tokens said. Goes through the token now so light is
       cream and dark is ink. */
    background-color: hsl(var(--background));
    font-family: var(--th-font-display);
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1440px) {

  .container {
    max-width: 1440px;
  }
}
  /* Unified FAB positioning — mobile uses CSS var, desktop falls back to bottom-6 */
  .fab-bottom {
    bottom: var(--mobile-fab-bottom);
  }
  .fab-bottom.cookie-visible {
    bottom: calc(var(--mobile-fab-bottom) + var(--cookie-banner-height));
  }
  @media (min-width: 768px) {
    .fab-bottom,
    .fab-bottom.cookie-visible {
      bottom: 1.5rem; /* bottom-6 — BottomNav is hidden on md+ */
    }
  }

  /* Toast z-index: above all fixed layers */
  [data-sonner-toaster] {
    z-index: 60 !important;
  }

  /* Interactive link with underline animation */

  /* Ensure dropdowns have proper background and z-index */
  [data-radix-popper-content-wrapper] {
    z-index: 50 !important;
  }
  
  [data-radix-select-content] {
  border-width: 1px;
  border-color: hsl(var(--input));
  background-color: hsl(var(--background));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  
  .dark .bg-white[data-radix-select-content] {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
}
  
  [data-radix-select-content] {
    z-index: 50 !important;
  }
  
  [data-radix-select-item]:hover {
  background-color: hsl(var(--accent));
}
  
  [data-radix-select-item]:focus {
  background-color: hsl(var(--accent));
}
  .card {
  border-radius: 20px;
  border-width: 1px;
  border-color: hsl(var(--border));
  background-color: hsl(var(--card));
  --tw-shadow: var(--shadow-soft);
  --tw-shadow-colored: var(--shadow-soft);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  
.dark [class*="bg-white"].card {
  background-color: hsl(var(--card));
  border-color: hsl(var(--border));
}
  .dark .bg-white.card input,
.dark .bg-white.card select {
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
  .dark .bg-white.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
}
  
.dark .card.bg-white {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-color: hsl(var(--border));
}
  .card-inner {
  border-radius: 16px;
  border-width: 1px;
  border-color: hsl(var(--border));
  background-color: hsl(var(--card));
}
  .dark .bg-white.card-inner {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
}
  /* Heading scale. Bold and high-contrast by design: section headings are the
     app's main wayfinding, so they carry weight rather than relying on size
     alone (benchmark: delivery-app checkout, where "Your order" / "Delivery
     address" anchor each block). */
  /* Marketing hero — the only place that outsizes .h-page. Kept separate so a
     page title inside the product never inherits billboard scale. */
  .h-hero {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
  @media (min-width: 640px) {

  .h-hero {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}
  @media (min-width: 768px) {

  .h-hero {
    font-size: 3rem;
    line-height: 1;
  }
}
  .h-page {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}
  @media (min-width: 640px) {

  .h-page {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
  .h-section {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}
  @media (min-width: 640px) {

  .h-section {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
  .h-card {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}
  .section-heading {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}
  @media (min-width: 640px) {

  .section-heading {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
  /* Helper text under a field — quieter than the label, never a heading. */
  .field-hint {
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
  .section-caption {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}
  .eyebrow {
  font-size: 0.6875rem;
  line-height: 1rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-0\.5 {
  bottom: -0.125rem;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-1 {
  left: -0.25rem;
}
.-left-12 {
  left: -3rem;
}
.-left-2 {
  left: -0.5rem;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-1 {
  right: -0.25rem;
}
.-right-1\.5 {
  right: -0.375rem;
}
.-right-12 {
  right: -3rem;
}
.-top-0\.5 {
  top: -0.125rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.-top-12 {
  top: -3rem;
}
.-top-16 {
  top: -4rem;
}
.-top-2 {
  top: -0.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1 {
  bottom: 0.25rem;
}
.bottom-1\.5 {
  bottom: 0.375rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-20 {
  bottom: 5rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-5 {
  bottom: 1.25rem;
}
.bottom-\[calc\(100\%\+0\.5rem\)\] {
  bottom: calc(100% + 0.5rem);
}
.bottom-\[calc\(var\(--mobile-active-bottom-nav-height\2c 0px\)\+var\(--mobile-safe-bottom\2c 0px\)\+4\.5rem\)\] {
  bottom: calc(var(--mobile-active-bottom-nav-height,0px) + var(--mobile-safe-bottom,0px) + 4.5rem);
}
.bottom-full {
  bottom: 100%;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-2\.5 {
  left: 0.625rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-7 {
  left: 1.75rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.right-6 {
  right: 1.5rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-10 {
  top: 2.5rem;
}
.top-14 {
  top: 3.5rem;
}
.top-16 {
  top: 4rem;
}
.top-2 {
  top: 0.5rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-24 {
  top: 6rem;
}
.top-3 {
  top: 0.75rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-6 {
  top: 1.5rem;
}
.top-9 {
  top: 2.25rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-\[64px\] {
  top: 64px;
}
.top-full {
  top: 100%;
}
.-z-10 {
  z-index: -10;
}
.z-0 {
  z-index: 0;
}
.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-\[10000\] {
  z-index: 10000;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[120\] {
  z-index: 120;
}
.z-\[130\] {
  z-index: 130;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[9990\] {
  z-index: 9990;
}
.z-\[9998\] {
  z-index: 9998;
}
.z-\[9999\] {
  z-index: 9999;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.m-0 {
  margin: 0px;
}
.m-1 {
  margin: 0.25rem;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.-mb-px {
  margin-bottom: -1px;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-ml-2 {
  margin-left: -0.5rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-7 {
  margin-left: 1.75rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-0\.5 {
  margin-right: 0.125rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-6 {
  margin-right: 1.5rem;
}
.mt-0 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.contents {
  display: contents;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[120px\] {
  height: 120px;
}
.h-\[180px\] {
  height: 180px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[220px\] {
  height: 220px;
}
.h-\[260px\] {
  height: 260px;
}
.h-\[300px\] {
  height: 300px;
}
.h-\[350px\] {
  height: 350px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[580px\] {
  height: 580px;
}
.h-\[600px\] {
  height: 600px;
}
.h-\[64px\] {
  height: 64px;
}
.h-\[72vh\] {
  height: 72vh;
}
.h-\[80vh\] {
  height: 80vh;
}
.h-\[85dvh\] {
  height: 85dvh;
}
.h-\[85vh\] {
  height: 85vh;
}
.h-\[95dvh\] {
  height: 95dvh;
}
.h-\[calc\(100dvh-10rem\)\] {
  height: calc(100dvh - 10rem);
}
.h-\[min\(620px\2c calc\(100vh-2\.5rem\)\)\] {
  height: min(620px, calc(100vh - 2.5rem));
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-dvh {
  height: 100dvh;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-24 {
  max-height: 6rem;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[380px\] {
  max-height: 380px;
}
.max-h-\[400px\] {
  max-height: 400px;
}
.max-h-\[420px\] {
  max-height: 420px;
}
.max-h-\[50vh\] {
  max-height: 50vh;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[75vh\] {
  max-height: 75vh;
}
.max-h-\[82vh\] {
  max-height: 82vh;
}
.max-h-\[85dvh\] {
  max-height: 85dvh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90px\] {
  max-height: 90px;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-10 {
  min-height: 2.5rem;
}
.min-h-24 {
  min-height: 6rem;
}
.min-h-28 {
  min-height: 7rem;
}
.min-h-\[100px\] {
  min-height: 100px;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[2\.5rem\] {
  min-height: 2.5rem;
}
.min-h-\[200px\] {
  min-height: 200px;
}
.min-h-\[300px\] {
  min-height: 300px;
}
.min-h-\[36px\] {
  min-height: 36px;
}
.min-h-\[38px\] {
  min-height: 38px;
}
.min-h-\[400px\] {
  min-height: 400px;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.min-h-\[40vh\] {
  min-height: 40vh;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[48px\] {
  min-height: 48px;
}
.min-h-\[52px\] {
  min-height: 52px;
}
.min-h-\[56px\] {
  min-height: 56px;
}
.min-h-\[58px\] {
  min-height: 58px;
}
.min-h-\[60px\] {
  min-height: 60px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[70dvh\] {
  min-height: 70dvh;
}
.min-h-\[70vh\] {
  min-height: 70vh;
}
.min-h-\[80dvh\] {
  min-height: 80dvh;
}
.min-h-\[80px\] {
  min-height: 80px;
}
.min-h-\[80vh\] {
  min-height: 80vh;
}
.min-h-\[90px\] {
  min-height: 90px;
}
.min-h-\[calc\(100dvh-80px\)\] {
  min-height: calc(100dvh - 80px);
}
.min-h-dvh {
  min-height: 100dvh;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-0\.5 {
  width: 0.125rem;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-1\/6 {
  width: 16.666667%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/5 {
  width: 80%;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-52 {
  width: 13rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-60 {
  width: 15rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[--sidebar-width\] {
  width: var(--sidebar-width);
}
.w-\[100px\] {
  width: 100px;
}
.w-\[10rem\] {
  width: 10rem;
}
.w-\[110px\] {
  width: 110px;
}
.w-\[130px\] {
  width: 130px;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[150px\] {
  width: 150px;
}
.w-\[160px\] {
  width: 160px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[1px\] {
  width: 1px;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[220px\] {
  width: 220px;
}
.w-\[240px\] {
  width: 240px;
}
.w-\[250px\] {
  width: 250px;
}
.w-\[260px\] {
  width: 260px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[32\%\] {
  width: 32%;
}
.w-\[4\.5rem\] {
  width: 4.5rem;
}
.w-\[480px\] {
  width: 480px;
}
.w-\[50px\] {
  width: 50px;
}
.w-\[7\.5rem\] {
  width: 7.5rem;
}
.w-\[78vw\] {
  width: 78vw;
}
.w-\[7rem\] {
  width: 7rem;
}
.w-\[8rem\] {
  width: 8rem;
}
.w-\[90vw\] {
  width: 90vw;
}
.w-\[min\(420px\2c calc\(100vw-2\.5rem\)\)\] {
  width: min(420px, calc(100vw - 2.5rem));
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-16 {
  min-width: 4rem;
}
.min-w-32 {
  min-width: 8rem;
}
.min-w-40 {
  min-width: 10rem;
}
.min-w-44 {
  min-width: 11rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-\[1\.25rem\] {
  min-width: 1.25rem;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[11rem\] {
  min-width: 11rem;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[18px\] {
  min-width: 18px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[280px\] {
  min-width: 280px;
}
.min-w-\[40px\] {
  min-width: 40px;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[5\.5rem\] {
  min-width: 5.5rem;
}
.min-w-\[520px\] {
  min-width: 520px;
}
.min-w-\[52px\] {
  min-width: 52px;
}
.min-w-\[540px\] {
  min-width: 540px;
}
.min-w-\[5rem\] {
  min-width: 5rem;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-\[7rem\] {
  min-width: 7rem;
}
.min-w-\[80px\] {
  min-width: 80px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-popover-trigger-width\)\] {
  min-width: var(--radix-popover-trigger-width);
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.min-w-full {
  min-width: 100%;
}
.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}
.\!max-w-\[95vw\] {
  max-width: 95vw !important;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-44 {
  max-width: 11rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[--skeleton-width\] {
  max-width: var(--skeleton-width);
}
.max-w-\[130px\] {
  max-width: 130px;
}
.max-w-\[1400px\] {
  max-width: 1400px;
}
.max-w-\[140px\] {
  max-width: 140px;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[240px\] {
  max-width: 240px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[55\%\] {
  max-width: 55%;
}
.max-w-\[5rem\] {
  max-width: 5rem;
}
.max-w-\[64px\] {
  max-width: 64px;
}
.max-w-\[70\%\] {
  max-width: 70%;
}
.max-w-\[8\.5rem\] {
  max-width: 8.5rem;
}
.max-w-\[80\%\] {
  max-width: 80%;
}
.max-w-\[80px\] {
  max-width: 80px;
}
.max-w-\[82\%\] {
  max-width: 82%;
}
.max-w-\[85\%\] {
  max-width: 85%;
}
.max-w-\[min\(480px\2c calc\(100vw-2rem\)\)\] {
  max-width: min(480px, calc(100vw - 2rem));
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-prose {
  max-width: 65ch;
}
.max-w-screen-xl {
  max-width: 1280px;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-none {
  flex: none;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-0\.5 {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[18px\] {
  --tw-translate-x: 18px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-150 {
  --tw-scale-x: 1.5;
  --tw-scale-y: 1.5;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[1\.01\] {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}
@keyframes fade-in {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}
@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes slide-up {

  from {
    transform: translateY(8px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slide-up {
  animation: slide-up 220ms ease-out;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-help {
  cursor: help;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-wait {
  cursor: wait;
}
.touch-none {
  touch-action: none;
}
.touch-manipulation {
  touch-action: manipulation;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.scroll-mt-16 {
  scroll-margin-top: 4rem;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, 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-\[110px_1fr_1fr\] {
  grid-template-columns: 110px 1fr 1fr;
}
.grid-cols-\[minmax\(58px\2c 0\.8fr\)_repeat\(3\2c 1fr\)\] {
  grid-template-columns: minmax(58px,0.8fr) repeat(3,1fr);
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-px {
  gap: 1px;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-y-0 {
  row-gap: 0px;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-amber-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-divide-opacity, 1));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--border));
}
.divide-border\/40 > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--border) / 0.4);
}
.divide-border\/50 > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--border) / 0.5);
}
.divide-border\/70 > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--border) / 0.7);
}
.divide-red-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-divide-opacity, 1));
}
.divide-zinc-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(244 244 245 / var(--tw-divide-opacity, 1));
}
.divide-zinc-50 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 8px;
}
.rounded-2xl {
  border-radius: 20px;
}
.rounded-3xl {
  border-radius: 28px;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 12px;
}
.rounded-md {
  border-radius: 10px;
}
.rounded-sm {
  border-radius: 6px;
}
.rounded-xl {
  border-radius: 16px;
}
.rounded-l-2xl {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.rounded-l-md {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.rounded-r {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.rounded-r-2xl {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}
.rounded-r-md {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.rounded-r-xl {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.rounded-t {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.rounded-t-2xl {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded-t-lg {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.rounded-bl-sm {
  border-bottom-left-radius: 6px;
}
.rounded-br-sm {
  border-bottom-right-radius: 6px;
}
.rounded-tl-sm {
  border-top-left-radius: 6px;
}
.rounded-tr-sm {
  border-top-right-radius: 6px;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-\[3px\] {
  border-width: 3px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-r-0 {
  border-right-width: 0px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-t-4 {
  border-top-width: 4px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#1a2942\]\/25 {
  border-color: rgb(26 41 66 / 0.25);
}
.border-\[--color-border\] {
  border-color: var(--color-border);
}
.border-admin-border {
  border-color: hsl(var(--admin-border));
}
.border-amber-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity, 1));
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-amber-600 {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}
.border-black\/5 {
  border-color: rgb(0 0 0 / 0.05);
}
.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-border {
  border-color: hsl(var(--border));
}
.border-border\/30 {
  border-color: hsl(var(--border) / 0.3);
}
.border-border\/40 {
  border-color: hsl(var(--border) / 0.4);
}
.border-border\/50 {
  border-color: hsl(var(--border) / 0.5);
}
.border-border\/60 {
  border-color: hsl(var(--border) / 0.6);
}
.border-border\/70 {
  border-color: hsl(var(--border) / 0.7);
}
.border-brand-200 {
  --tw-border-opacity: 1;
  border-color: rgb(174 238 218 / var(--tw-border-opacity, 1));
}
.border-brand-600 {
  --tw-border-opacity: 1;
  border-color: rgb(31 151 133 / var(--tw-border-opacity, 1));
}
.border-brand-amber {
  border-color: hsl(var(--brand-amber));
}
.border-brand-amber\/15 {
  border-color: hsl(var(--brand-amber) / 0.15);
}
.border-brand-amber\/30 {
  border-color: hsl(var(--brand-amber) / 0.3);
}
.border-brand-amber\/35 {
  border-color: hsl(var(--brand-amber) / 0.35);
}
.border-brand-amber\/40 {
  border-color: hsl(var(--brand-amber) / 0.4);
}
.border-destructive {
  border-color: hsl(var(--destructive));
}
.border-destructive\/15 {
  border-color: hsl(var(--destructive) / 0.15);
}
.border-destructive\/20 {
  border-color: hsl(var(--destructive) / 0.2);
}
.border-destructive\/25 {
  border-color: hsl(var(--destructive) / 0.25);
}
.border-destructive\/30 {
  border-color: hsl(var(--destructive) / 0.3);
}
.border-destructive\/40 {
  border-color: hsl(var(--destructive) / 0.4);
}
.border-destructive\/50 {
  border-color: hsl(var(--destructive) / 0.5);
}
.border-emerald-100 {
  --tw-border-opacity: 1;
  border-color: rgb(209 250 229 / var(--tw-border-opacity, 1));
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.border-green-600 {
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}
.border-indigo-100 {
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
}
.border-indigo-300 {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.border-info\/15 {
  border-color: hsl(var(--info) / 0.15);
}
.border-info\/20 {
  border-color: hsl(var(--info) / 0.2);
}
.border-info\/30 {
  border-color: hsl(var(--info) / 0.3);
}
.border-inherit {
  border-color: inherit;
}
.border-input {
  border-color: hsl(var(--input));
}
.border-kanfy-amber\/30 {
  border-color: hsl(var(--kanfy-amber) / 0.3);
}
.border-kanfy-cream\/15 {
  border-color: hsl(var(--kanfy-cream) / 0.15);
}
.border-kanfy-cream\/25 {
  border-color: hsl(var(--kanfy-cream) / 0.25);
}
.border-kanfy-on-amber\/20 {
  border-color: hsl(var(--kanfy-on-amber) / 0.2);
}
.border-kanfy-teal {
  border-color: hsl(var(--kanfy-teal));
}
.border-muted {
  border-color: hsl(var(--muted));
}
.border-muted-foreground {
  border-color: hsl(var(--muted-foreground));
}
.border-muted-foreground\/25 {
  border-color: hsl(var(--muted-foreground) / 0.25);
}
.border-muted-foreground\/30 {
  border-color: hsl(var(--muted-foreground) / 0.3);
}
.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-orange-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}
.border-orange-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}
.border-primary {
  border-color: hsl(var(--primary));
}
.border-primary\/20 {
  border-color: hsl(var(--primary) / 0.2);
}
.border-primary\/25 {
  border-color: hsl(var(--primary) / 0.25);
}
.border-primary\/30 {
  border-color: hsl(var(--primary) / 0.3);
}
.border-primary\/40 {
  border-color: hsl(var(--primary) / 0.4);
}
.border-primary\/50 {
  border-color: hsl(var(--primary) / 0.5);
}
.border-primary\/60 {
  border-color: hsl(var(--primary) / 0.6);
}
.border-primary\/80 {
  border-color: hsl(var(--primary) / 0.8);
}
.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-purple-300 {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}
.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-rose-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 228 230 / var(--tw-border-opacity, 1));
}
.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-secondary\/30 {
  border-color: hsl(var(--secondary) / 0.3);
}
.border-sidebar-border {
  border-color: hsl(var(--sidebar-border));
}
.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-200\/70 {
  border-color: rgb(226 232 240 / 0.7);
}
.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-success {
  border-color: hsl(var(--success));
}
.border-success\/10 {
  border-color: hsl(var(--success) / 0.1);
}
.border-success\/15 {
  border-color: hsl(var(--success) / 0.15);
}
.border-success\/20 {
  border-color: hsl(var(--success) / 0.2);
}
.border-success\/25 {
  border-color: hsl(var(--success) / 0.25);
}
.border-success\/30 {
  border-color: hsl(var(--success) / 0.3);
}
.border-success\/40 {
  border-color: hsl(var(--success) / 0.4);
}
.border-success\/90 {
  border-color: hsl(var(--success) / 0.9);
}
.border-teal-100 {
  --tw-border-opacity: 1;
  border-color: rgb(204 251 241 / var(--tw-border-opacity, 1));
}
.border-teal-200 {
  --tw-border-opacity: 1;
  border-color: rgb(153 246 228 / var(--tw-border-opacity, 1));
}
.border-teal-300 {
  --tw-border-opacity: 1;
  border-color: rgb(94 234 212 / var(--tw-border-opacity, 1));
}
.border-teal-500 {
  --tw-border-opacity: 1;
  border-color: rgb(20 184 166 / var(--tw-border-opacity, 1));
}
.border-teal-700 {
  --tw-border-opacity: 1;
  border-color: rgb(15 118 110 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-trust\/20 {
  border-color: hsl(var(--trust) / 0.2);
}
.border-trust\/30 {
  border-color: hsl(var(--trust) / 0.3);
}
.border-warning\/30 {
  border-color: hsl(var(--warning) / 0.3);
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-zinc-100 {
  --tw-border-opacity: 1;
  border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));
}
.border-zinc-200 {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.border-zinc-200\/60 {
  border-color: rgb(228 228 231 / 0.6);
}
.border-zinc-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.border-zinc-400 {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1));
}
.border-zinc-50 {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
}
.border-zinc-500 {
  --tw-border-opacity: 1;
  border-color: rgb(113 113 122 / var(--tw-border-opacity, 1));
}
.border-zinc-800 {
  --tw-border-opacity: 1;
  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-l-amber-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-l-blue-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-l-emerald-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-l-primary {
  border-left-color: hsl(var(--primary));
}
.border-l-red-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-l-zinc-200 {
  --tw-border-opacity: 1;
  border-left-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.border-t-amber-400 {
  --tw-border-opacity: 1;
  border-top-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-t-border {
  border-top-color: hsl(var(--border));
}
.border-t-brand-amber {
  border-top-color: hsl(var(--brand-amber));
}
.border-t-destructive {
  border-top-color: hsl(var(--destructive));
}
.border-t-emerald-400 {
  --tw-border-opacity: 1;
  border-top-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-t-primary {
  border-top-color: hsl(var(--primary));
}
.border-t-red-400 {
  --tw-border-opacity: 1;
  border-top-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-t-secondary {
  border-top-color: hsl(var(--secondary));
}
.border-t-success {
  border-top-color: hsl(var(--success));
}
.border-t-teal-400 {
  --tw-border-opacity: 1;
  border-top-color: rgb(45 212 191 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#0F172A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1a2942\] {
  --tw-bg-opacity: 1;
  background-color: rgb(26 41 66 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1e3a5f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 95 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F8FAFC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-\[--color-bg\] {
  background-color: var(--color-bg);
}
.bg-accent {
  background-color: hsl(var(--accent));
}
.bg-admin-bg {
  background-color: hsl(var(--admin-bg));
}
.bg-admin-bg\/80 {
  background-color: hsl(var(--admin-bg) / 0.8);
}
.bg-admin-card {
  background-color: hsl(var(--admin-card));
}
.bg-admin-emerald {
  background-color: hsl(var(--admin-emerald));
}
.bg-admin-surface {
  background-color: hsl(var(--admin-surface));
}
.bg-admin-teal {
  background-color: hsl(var(--admin-teal));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/30 {
  background-color: rgb(255 251 235 / 0.3);
}
.bg-amber-50\/60 {
  background-color: rgb(255 251 235 / 0.6);
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-600\/30 {
  background-color: rgb(217 119 6 / 0.3);
}
.bg-amber-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: hsl(var(--background));
}
.bg-background\/40 {
  background-color: hsl(var(--background) / 0.4);
}
.bg-background\/75 {
  background-color: hsl(var(--background) / 0.75);
}
.bg-background\/80 {
  background-color: hsl(var(--background) / 0.8);
}
.bg-background\/85 {
  background-color: hsl(var(--background) / 0.85);
}
.bg-background\/95 {
  background-color: hsl(var(--background) / 0.95);
}
.bg-black\/0 {
  background-color: rgb(0 0 0 / 0);
}
.bg-black\/10 {
  background-color: rgb(0 0 0 / 0.1);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/85 {
  background-color: rgb(0 0 0 / 0.85);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-50\/50 {
  background-color: rgb(239 246 255 / 0.5);
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.bg-border {
  background-color: hsl(var(--border));
}
.bg-brand-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 252 248 / var(--tw-bg-opacity, 1));
}
.bg-brand-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(45 182 157 / var(--tw-bg-opacity, 1));
}
.bg-brand-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 151 133 / var(--tw-bg-opacity, 1));
}
.bg-brand-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(27 122 108 / var(--tw-bg-opacity, 1));
}
.bg-brand-amber {
  background-color: hsl(var(--brand-amber));
}
.bg-brand-amber\/10 {
  background-color: hsl(var(--brand-amber) / 0.1);
}
.bg-brand-amber\/15 {
  background-color: hsl(var(--brand-amber) / 0.15);
}
.bg-brand-amber\/20 {
  background-color: hsl(var(--brand-amber) / 0.2);
}
.bg-brand-amber\/5 {
  background-color: hsl(var(--brand-amber) / 0.05);
}
.bg-brand-amber\/80 {
  background-color: hsl(var(--brand-amber) / 0.8);
}
.bg-brand-navy {
  background-color: hsl(var(--brand-navy));
}
.bg-brand-red {
  background-color: hsl(var(--brand-red));
}
.bg-brand-teal {
  background-color: hsl(var(--brand-teal));
}
.bg-brand-teal\/10 {
  background-color: hsl(var(--brand-teal) / 0.1);
}
.bg-card {
  background-color: hsl(var(--card));
}
.bg-card\/50 {
  background-color: hsl(var(--card) / 0.5);
}
.bg-card\/70 {
  background-color: hsl(var(--card) / 0.7);
}
.bg-current {
  background-color: currentColor;
}
.bg-destructive {
  background-color: hsl(var(--destructive));
}
.bg-destructive\/10 {
  background-color: hsl(var(--destructive) / 0.1);
}
.bg-destructive\/15 {
  background-color: hsl(var(--destructive) / 0.15);
}
.bg-destructive\/20 {
  background-color: hsl(var(--destructive) / 0.2);
}
.bg-destructive\/5 {
  background-color: hsl(var(--destructive) / 0.05);
}
.bg-destructive\/80 {
  background-color: hsl(var(--destructive) / 0.8);
}
.bg-destructive\/90 {
  background-color: hsl(var(--destructive) / 0.9);
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50\/20 {
  background-color: rgb(236 253 245 / 0.2);
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: hsl(var(--foreground));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-info {
  background-color: hsl(var(--info));
}
.bg-info\/10 {
  background-color: hsl(var(--info) / 0.1);
}
.bg-info\/15 {
  background-color: hsl(var(--info) / 0.15);
}
.bg-inherit {
  background-color: inherit;
}
.bg-kanfy-amber {
  background-color: hsl(var(--kanfy-amber));
}
.bg-kanfy-amber\/10 {
  background-color: hsl(var(--kanfy-amber) / 0.1);
}
.bg-kanfy-amber\/15 {
  background-color: hsl(var(--kanfy-amber) / 0.15);
}
.bg-kanfy-cream\/10 {
  background-color: hsl(var(--kanfy-cream) / 0.1);
}
.bg-kanfy-ink {
  background-color: hsl(var(--kanfy-ink));
}
.bg-kanfy-mid\/15 {
  background-color: hsl(var(--kanfy-teal-mid) / 0.15);
}
.bg-kanfy-teal {
  background-color: hsl(var(--kanfy-teal));
}
.bg-kanfy-teal\/10 {
  background-color: hsl(var(--kanfy-teal) / 0.1);
}
.bg-kanfy-tint {
  background-color: hsl(var(--kanfy-teal-tint));
}
.bg-kanfy-tint-amber {
  background-color: hsl(var(--tint-amber));
}
.bg-kanfy-tint-clay {
  background-color: hsl(var(--tint-clay));
}
.bg-kanfy-tint-ink {
  background-color: hsl(var(--tint-ink));
}
.bg-kanfy-tint-teal {
  background-color: hsl(var(--tint-teal));
}
.bg-kanfy-tint-teal\/50 {
  background-color: hsl(var(--tint-teal) / 0.5);
}
.bg-kanfy-trend-down {
  background-color: hsl(var(--trend-down));
}
.bg-kanfy-trend-flat {
  background-color: hsl(var(--trend-flat));
}
.bg-kanfy-trend-up {
  background-color: hsl(var(--trend-up));
}
.bg-muted {
  background-color: hsl(var(--muted));
}
.bg-muted-foreground {
  background-color: hsl(var(--muted-foreground));
}
.bg-muted-foreground\/20 {
  background-color: hsl(var(--muted-foreground) / 0.2);
}
.bg-muted-foreground\/30 {
  background-color: hsl(var(--muted-foreground) / 0.3);
}
.bg-muted-foreground\/35 {
  background-color: hsl(var(--muted-foreground) / 0.35);
}
.bg-muted-foreground\/40 {
  background-color: hsl(var(--muted-foreground) / 0.4);
}
.bg-muted-foreground\/50 {
  background-color: hsl(var(--muted-foreground) / 0.5);
}
.bg-muted\/20 {
  background-color: hsl(var(--muted) / 0.2);
}
.bg-muted\/25 {
  background-color: hsl(var(--muted) / 0.25);
}
.bg-muted\/30 {
  background-color: hsl(var(--muted) / 0.3);
}
.bg-muted\/40 {
  background-color: hsl(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}
.bg-muted\/60 {
  background-color: hsl(var(--muted) / 0.6);
}
.bg-muted\/70 {
  background-color: hsl(var(--muted) / 0.7);
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-orange-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}
.bg-pink-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.bg-popover {
  background-color: hsl(var(--popover));
}
.bg-primary {
  background-color: hsl(var(--primary));
}
.bg-primary-foreground\/10 {
  background-color: hsl(var(--primary-foreground) / 0.1);
}
.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/15 {
  background-color: hsl(var(--primary) / 0.15);
}
.bg-primary\/20 {
  background-color: hsl(var(--primary) / 0.2);
}
.bg-primary\/5 {
  background-color: hsl(var(--primary) / 0.05);
}
.bg-primary\/85 {
  background-color: hsl(var(--primary) / 0.85);
}
.bg-primary\/90 {
  background-color: hsl(var(--primary) / 0.9);
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-50\/30 {
  background-color: rgb(254 242 242 / 0.3);
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-rose-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  background-color: hsl(var(--secondary));
}
.bg-secondary\/10 {
  background-color: hsl(var(--secondary) / 0.1);
}
.bg-secondary\/15 {
  background-color: hsl(var(--secondary) / 0.15);
}
.bg-sidebar {
  background-color: hsl(var(--sidebar-background));
}
.bg-sidebar-border {
  background-color: hsl(var(--sidebar-border));
}
.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-50\/60 {
  background-color: rgb(248 250 252 / 0.6);
}
.bg-slate-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}
.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/40 {
  background-color: rgb(15 23 42 / 0.4);
}
.bg-status-blockBg {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-status-failBg {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-status-idleBg {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-status-passBg {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-status-skipBg {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-success {
  background-color: hsl(var(--success));
}
.bg-success\/10 {
  background-color: hsl(var(--success) / 0.1);
}
.bg-success\/15 {
  background-color: hsl(var(--success) / 0.15);
}
.bg-success\/20 {
  background-color: hsl(var(--success) / 0.2);
}
.bg-success\/40 {
  background-color: hsl(var(--success) / 0.4);
}
.bg-success\/5 {
  background-color: hsl(var(--success) / 0.05);
}
.bg-success\/70 {
  background-color: hsl(var(--success) / 0.7);
}
.bg-success\/80 {
  background-color: hsl(var(--success) / 0.8);
}
.bg-success\/90 {
  background-color: hsl(var(--success) / 0.9);
}
.bg-surface {
  background-color: hsl(var(--surface));
}
.bg-surface\/30 {
  background-color: hsl(var(--surface) / 0.3);
}
.bg-surface\/40 {
  background-color: hsl(var(--surface) / 0.4);
}
.bg-surface\/50 {
  background-color: hsl(var(--surface) / 0.5);
}
.bg-surface\/60 {
  background-color: hsl(var(--surface) / 0.6);
}
.bg-surface\/80 {
  background-color: hsl(var(--surface) / 0.8);
}
.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}
.bg-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}
.bg-teal-50\/40 {
  background-color: rgb(240 253 250 / 0.4);
}
.bg-teal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}
.bg-teal-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}
.bg-teal-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1));
}
.bg-th-amber {
  background-color: var(--th-amber);
}
.bg-th-navy {
  background-color: var(--th-navy);
}
.bg-transparent {
  background-color: transparent;
}
.bg-trust {
  background-color: hsl(var(--trust));
}
.bg-trust-light {
  background-color: hsl(var(--trust-light));
}
.bg-trust\/10 {
  background-color: hsl(var(--trust) / 0.1);
}
.bg-trust\/15 {
  background-color: hsl(var(--trust) / 0.15);
}
.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-warning\/10 {
  background-color: hsl(var(--warning) / 0.1);
}
.bg-warning\/15 {
  background-color: hsl(var(--warning) / 0.15);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/45 {
  background-color: rgb(255 255 255 / 0.45);
}
.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}
.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-zinc-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.bg-zinc-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.bg-zinc-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1));
}
.bg-zinc-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1));
}
.bg-zinc-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-zinc-50\/40 {
  background-color: rgb(250 250 250 / 0.4);
}
.bg-zinc-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(113 113 122 / var(--tw-bg-opacity, 1));
}
.bg-zinc-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.bg-zinc-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}
.bg-gradient-card {
  background-image: var(--gradient-card);
}
.bg-gradient-hero {
  background-image: var(--gradient-hero);
}
.bg-gradient-subtle {
  background-image: var(--gradient-subtle);
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.bg-gradient-trust {
  background-image: var(--gradient-trust);
}
.bg-gradient-warm {
  background-image: var(--gradient-warm);
}
.from-\[\#1a2942\] {
  --tw-gradient-from: #1a2942 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(26 41 66 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-900\/80 {
  --tw-gradient-from: rgb(120 53 15 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(120 53 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-background {
  --tw-gradient-from: hsl(var(--background)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/30 {
  --tw-gradient-from: rgb(0 0 0 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/40 {
  --tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/70 {
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-800\/80 {
  --tw-gradient-from: rgb(30 64 175 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 64 175 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-900\/80 {
  --tw-gradient-from: rgb(30 58 138 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-600 {
  --tw-gradient-from: #1f9785 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 151 133 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-card {
  --tw-gradient-from: hsl(var(--card)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-900\/80 {
  --tw-gradient-from: rgb(22 78 99 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 78 99 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-800\/80 {
  --tw-gradient-from: rgb(6 95 70 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 95 70 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-900\/80 {
  --tw-gradient-from: rgb(6 78 59 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 78 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-fuchsia-900\/80 {
  --tw-gradient-from: rgb(112 26 117 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(112 26 117 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-800\/80 {
  --tw-gradient-from: rgb(22 101 52 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 101 52 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-900\/80 {
  --tw-gradient-from: rgb(20 83 45 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-800\/80 {
  --tw-gradient-from: rgb(55 48 163 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(55 48 163 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-900\/80 {
  --tw-gradient-from: rgb(49 46 129 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(49 46 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-lime-900\/80 {
  --tw-gradient-from: rgb(54 83 20 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(54 83 20 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-muted {
  --tw-gradient-from: hsl(var(--muted)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-900\/80 {
  --tw-gradient-from: rgb(124 45 18 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(124 45 18 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-900\/80 {
  --tw-gradient-from: rgb(131 24 67 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(131 24 67 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/10 {
  --tw-gradient-from: hsl(var(--primary) / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/5 {
  --tw-gradient-from: hsl(var(--primary) / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/80 {
  --tw-gradient-from: rgb(88 28 135 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-900\/80 {
  --tw-gradient-from: rgb(127 29 29 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(127 29 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-rose-900\/80 {
  --tw-gradient-from: rgb(136 19 55 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(136 19 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-900\/80 {
  --tw-gradient-from: rgb(12 74 110 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(12 74 110 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-900\/80 {
  --tw-gradient-from: rgb(15 23 42 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface {
  --tw-gradient-from: hsl(var(--surface)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--surface) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-teal-800\/80 {
  --tw-gradient-from: rgb(17 94 89 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 94 89 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-teal-900\/80 {
  --tw-gradient-from: rgb(19 78 74 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(19 78 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-th-navy {
  --tw-gradient-from: var(--th-navy) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-800\/80 {
  --tw-gradient-from: rgb(91 33 182 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(91 33 182 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-900\/80 {
  --tw-gradient-from: rgb(76 29 149 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(76 29 149 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-900\/80 {
  --tw-gradient-from: rgb(24 24 27 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-background {
  --tw-gradient-to: hsl(var(--background) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--background)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/20 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-border {
  --tw-gradient-to: hsl(var(--border) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--border)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-muted\/50 {
  --tw-gradient-to: hsl(var(--muted) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--muted) / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-amber-700\/60 {
  --tw-gradient-to: rgb(180 83 9 / 0.6) var(--tw-gradient-to-position);
}
.to-blue-600\/60 {
  --tw-gradient-to: rgb(37 99 235 / 0.6) var(--tw-gradient-to-position);
}
.to-blue-700\/60 {
  --tw-gradient-to: rgb(29 78 216 / 0.6) var(--tw-gradient-to-position);
}
.to-brand-500 {
  --tw-gradient-to: #2db69d var(--tw-gradient-to-position);
}
.to-card\/50 {
  --tw-gradient-to: hsl(var(--card) / 0.5) var(--tw-gradient-to-position);
}
.to-cyan-700\/60 {
  --tw-gradient-to: rgb(14 116 144 / 0.6) var(--tw-gradient-to-position);
}
.to-emerald-600\/60 {
  --tw-gradient-to: rgb(5 150 105 / 0.6) var(--tw-gradient-to-position);
}
.to-emerald-700\/60 {
  --tw-gradient-to: rgb(4 120 87 / 0.6) var(--tw-gradient-to-position);
}
.to-fuchsia-700\/60 {
  --tw-gradient-to: rgb(162 28 175 / 0.6) var(--tw-gradient-to-position);
}
.to-green-600\/60 {
  --tw-gradient-to: rgb(22 163 74 / 0.6) var(--tw-gradient-to-position);
}
.to-green-700\/60 {
  --tw-gradient-to: rgb(21 128 61 / 0.6) var(--tw-gradient-to-position);
}
.to-indigo-600\/60 {
  --tw-gradient-to: rgb(79 70 229 / 0.6) var(--tw-gradient-to-position);
}
.to-indigo-700\/60 {
  --tw-gradient-to: rgb(67 56 202 / 0.6) var(--tw-gradient-to-position);
}
.to-lime-700\/60 {
  --tw-gradient-to: rgb(77 124 15 / 0.6) var(--tw-gradient-to-position);
}
.to-muted {
  --tw-gradient-to: hsl(var(--muted)) var(--tw-gradient-to-position);
}
.to-muted\/50 {
  --tw-gradient-to: hsl(var(--muted) / 0.5) var(--tw-gradient-to-position);
}
.to-orange-700\/60 {
  --tw-gradient-to: rgb(194 65 12 / 0.6) var(--tw-gradient-to-position);
}
.to-pink-700\/60 {
  --tw-gradient-to: rgb(190 24 93 / 0.6) var(--tw-gradient-to-position);
}
.to-primary {
  --tw-gradient-to: hsl(var(--primary)) var(--tw-gradient-to-position);
}
.to-primary\/10 {
  --tw-gradient-to: hsl(var(--primary) / 0.1) var(--tw-gradient-to-position);
}
.to-purple-700\/60 {
  --tw-gradient-to: rgb(126 34 206 / 0.6) var(--tw-gradient-to-position);
}
.to-red-700\/60 {
  --tw-gradient-to: rgb(185 28 28 / 0.6) var(--tw-gradient-to-position);
}
.to-rose-700\/60 {
  --tw-gradient-to: rgb(190 18 60 / 0.6) var(--tw-gradient-to-position);
}
.to-sky-700\/60 {
  --tw-gradient-to: rgb(3 105 161 / 0.6) var(--tw-gradient-to-position);
}
.to-slate-700\/60 {
  --tw-gradient-to: rgb(51 65 85 / 0.6) var(--tw-gradient-to-position);
}
.to-teal-600\/60 {
  --tw-gradient-to: rgb(13 148 136 / 0.6) var(--tw-gradient-to-position);
}
.to-teal-700\/60 {
  --tw-gradient-to: rgb(15 118 110 / 0.6) var(--tw-gradient-to-position);
}
.to-th-navy-mid {
  --tw-gradient-to: var(--th-navy-mid) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-trust\/5 {
  --tw-gradient-to: hsl(var(--trust) / 0.05) var(--tw-gradient-to-position);
}
.to-violet-600\/60 {
  --tw-gradient-to: rgb(124 58 237 / 0.6) var(--tw-gradient-to-position);
}
.to-violet-700\/60 {
  --tw-gradient-to: rgb(109 40 217 / 0.6) var(--tw-gradient-to-position);
}
.to-zinc-700\/60 {
  --tw-gradient-to: rgb(63 63 70 / 0.6) var(--tw-gradient-to-position);
}
.bg-cover {
  background-size: cover;
}
.bg-center {
  background-position: center;
}
.fill-\[\#EF4444\] {
  fill: #EF4444;
}
.fill-\[\#F59E0B\] {
  fill: #F59E0B;
}
.fill-current {
  fill: currentColor;
}
.fill-transparent {
  fill: transparent;
}
.fill-yellow-200 {
  fill: #fef08a;
}
.fill-yellow-400 {
  fill: #facc15;
}
.fill-yellow-500 {
  fill: #eab308;
}
.stroke-border {
  stroke: hsl(var(--border));
}
.stroke-kanfy-trend-down-fg {
  stroke: hsl(var(--trend-down-fg));
}
.stroke-kanfy-trend-flat-fg {
  stroke: hsl(var(--trend-flat-fg));
}
.stroke-kanfy-trend-up-fg {
  stroke: hsl(var(--trend-up-fg));
}
.stroke-2 {
  stroke-width: 2;
}
.stroke-\[2\.5\] {
  stroke-width: 2.5;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-top {
  -o-object-position: top;
     object-position: top;
}
.\!p-0 {
  padding: 0px !important;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[1px\] {
  padding: 1px;
}
.p-\[3px\] {
  padding: 3px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-28 {
  padding-bottom: 7rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-\[calc\(65px\+1rem\)\] {
  padding-bottom: calc(65px + 1rem);
}
.pb-\[env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom);
}
.pb-\[max\(0\.5rem\2c env\(safe-area-inset-bottom\2c 0\.5rem\)\)\] {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom,0.5rem));
}
.pb-\[max\(0\.75rem\2c env\(safe-area-inset-bottom\2c 0\.75rem\)\)\] {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom,0.75rem));
}
.pb-\[max\(1rem\2c env\(safe-area-inset-bottom\2c 1rem\)\)\] {
  padding-bottom: max(1rem, env(safe-area-inset-bottom,1rem));
}
.pb-\[max\(2rem\2c env\(safe-area-inset-bottom\2c 2rem\)\)\] {
  padding-bottom: max(2rem, env(safe-area-inset-bottom,2rem));
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-11 {
  padding-left: 2.75rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pl-\[2\.15rem\] {
  padding-left: 2.15rem;
}
.pl-\[max\(1rem\2c env\(safe-area-inset-left\2c 1rem\)\)\] {
  padding-left: max(1rem, env(safe-area-inset-left,1rem));
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-14 {
  padding-right: 3.5rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pr-\[max\(1rem\2c env\(safe-area-inset-right\2c 1rem\)\)\] {
  padding-right: max(1rem, env(safe-area-inset-right,1rem));
}
.pt-0 {
  padding-top: 0px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-\[max\(1rem\2c env\(safe-area-inset-top\2c 1rem\)\)\] {
  padding-top: max(1rem, env(safe-area-inset-top,1rem));
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-inter {
  font-family: Plus Jakarta Sans, system-ui, sans-serif;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-poppins {
  font-family: Poppins, sans-serif;
}
.font-sans {
  font-family: Plus Jakarta Sans, system-ui, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.68rem\] {
  font-size: 0.68rem;
}
.text-\[0\.72rem\] {
  font-size: 0.72rem;
}
.text-\[0\.75rem\] {
  font-size: 0.75rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.85em\] {
  font-size: 0.85em;
}
.text-\[1\.4rem\] {
  font-size: 1.4rem;
}
.text-\[1\.75rem\] {
  font-size: 1.75rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[9\.5px\] {
  font-size: 9.5px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-eyebrow {
  font-size: 0.6875rem;
  line-height: 1rem;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-metric-sm {
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 700;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-table-base {
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.text-table-sm {
  font-size: 0.75rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.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);
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[-0\.005em\] {
  letter-spacing: -0.005em;
}
.tracking-\[-0\.03em\] {
  letter-spacing: -0.03em;
}
.tracking-\[0\.07em\] {
  letter-spacing: 0.07em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#0D9488\] {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.text-\[\#0F172A\] {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-\[\#0F766E\] {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}
.text-\[\#1a2942\] {
  --tw-text-opacity: 1;
  color: rgb(26 41 66 / var(--tw-text-opacity, 1));
}
.text-\[\#1e3a5f\] {
  --tw-text-opacity: 1;
  color: rgb(30 58 95 / var(--tw-text-opacity, 1));
}
.text-\[\#EF4444\] {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-\[color\:hsl\(var\(--kanfy-ink\)\)\] {
  color: hsl(var(--kanfy-ink));
}
.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}
.text-admin-text {
  color: hsl(var(--admin-text));
}
.text-admin-text-secondary {
  color: hsl(var(--admin-text-secondary));
}
.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-amber-950 {
  --tw-text-opacity: 1;
  color: rgb(69 26 3 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-border {
  color: hsl(var(--border));
}
.text-brand-700 {
  --tw-text-opacity: 1;
  color: rgb(27 122 108 / var(--tw-text-opacity, 1));
}
.text-brand-800 {
  --tw-text-opacity: 1;
  color: rgb(25 95 87 / var(--tw-text-opacity, 1));
}
.text-brand-amber {
  color: hsl(var(--brand-amber));
}
.text-brand-teal {
  color: hsl(var(--brand-teal));
}
.text-card-foreground {
  color: hsl(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  color: hsl(var(--destructive));
}
.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}
.text-destructive\/80 {
  color: hsl(var(--destructive) / 0.8);
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-foreground {
  color: hsl(var(--foreground));
}
.text-foreground\/50 {
  color: hsl(var(--foreground) / 0.5);
}
.text-foreground\/70 {
  color: hsl(var(--foreground) / 0.7);
}
.text-foreground\/80 {
  color: hsl(var(--foreground) / 0.8);
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-info {
  color: hsl(var(--info));
}
.text-kanfy-amber {
  color: hsl(var(--kanfy-amber));
}
.text-kanfy-cream {
  color: hsl(var(--kanfy-cream));
}
.text-kanfy-cream\/55 {
  color: hsl(var(--kanfy-cream) / 0.55);
}
.text-kanfy-cream\/65 {
  color: hsl(var(--kanfy-cream) / 0.65);
}
.text-kanfy-cream\/75 {
  color: hsl(var(--kanfy-cream) / 0.75);
}
.text-kanfy-cream\/85 {
  color: hsl(var(--kanfy-cream) / 0.85);
}
.text-kanfy-mid {
  color: hsl(var(--kanfy-teal-mid));
}
.text-kanfy-on-amber {
  color: hsl(var(--kanfy-on-amber));
}
.text-kanfy-teal {
  color: hsl(var(--kanfy-teal));
}
.text-kanfy-tint-amber-fg {
  color: hsl(var(--tint-amber-fg));
}
.text-kanfy-tint-clay-fg {
  color: hsl(var(--tint-clay-fg));
}
.text-kanfy-tint-ink-fg {
  color: hsl(var(--tint-ink-fg));
}
.text-kanfy-tint-teal-fg {
  color: hsl(var(--tint-teal-fg));
}
.text-kanfy-trend-down-fg {
  color: hsl(var(--trend-down-fg));
}
.text-kanfy-trend-flat-fg {
  color: hsl(var(--trend-flat-fg));
}
.text-kanfy-trend-up-fg {
  color: hsl(var(--trend-up-fg));
}
.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
.text-muted-foreground\/30 {
  color: hsl(var(--muted-foreground) / 0.3);
}
.text-muted-foreground\/40 {
  color: hsl(var(--muted-foreground) / 0.4);
}
.text-muted-foreground\/50 {
  color: hsl(var(--muted-foreground) / 0.5);
}
.text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / 0.6);
}
.text-muted-foreground\/70 {
  color: hsl(var(--muted-foreground) / 0.7);
}
.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}
.text-primary {
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.text-primary-foreground\/70 {
  color: hsl(var(--primary-foreground) / 0.7);
}
.text-primary-foreground\/80 {
  color: hsl(var(--primary-foreground) / 0.8);
}
.text-primary\/15 {
  color: hsl(var(--primary) / 0.15);
}
.text-primary\/20 {
  color: hsl(var(--primary) / 0.2);
}
.text-primary\/70 {
  color: hsl(var(--primary) / 0.7);
}
.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-secondary {
  color: hsl(var(--secondary));
}
.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: hsl(var(--sidebar-foreground));
}
.text-sidebar-foreground\/70 {
  color: hsl(var(--sidebar-foreground) / 0.7);
}
.text-sky-700 {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-status-blockFg {
  --tw-text-opacity: 1;
  color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.text-status-failFg {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-status-idleFg {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-status-passFg {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-status-skipFg {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-success {
  color: hsl(var(--success));
}
.text-success-foreground {
  color: hsl(var(--success-foreground));
}
.text-success\/70 {
  color: hsl(var(--success) / 0.7);
}
.text-teal-500 {
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}
.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}
.text-teal-800 {
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
}
.text-th-navy {
  color: var(--th-navy);
}
.text-trust {
  color: hsl(var(--trust));
}
.text-violet-400 {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-warning {
  color: hsl(var(--warning));
}
.text-warning-foreground {
  color: hsl(var(--warning-foreground));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.text-yellow-900 {
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.text-zinc-200 {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.text-zinc-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-zinc-500 {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.text-zinc-700 {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.text-zinc-800 {
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / var(--tw-text-opacity, 1));
}
.text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.accent-amber-500 {
  accent-color: #f59e0b;
}
.accent-primary {
  accent-color: hsl(var(--primary));
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-\[0\.18\] {
  opacity: 0.18;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_30px_-8px_rgba\(15\2c 23\2c 42\2c 0\.28\)\] {
  --tw-shadow: 0 10px 30px -8px rgba(15,23,42,0.28);
  --tw-shadow-colored: 0 10px 30px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_2px_8px_-2px_rgba\(16\2c 185\2c 129\2c 0\.35\)\] {
  --tw-shadow: 0 2px 8px -2px rgba(16,185,129,0.35);
  --tw-shadow-colored: 0 2px 8px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-e1 {
  --tw-shadow: var(--elevation-1);
  --tw-shadow-colored: var(--elevation-1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-e2 {
  --tw-shadow: var(--elevation-2);
  --tw-shadow-colored: var(--elevation-2);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-e3 {
  --tw-shadow: var(--elevation-3);
  --tw-shadow-colored: var(--elevation-3);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-e4 {
  --tw-shadow: var(--elevation-4);
  --tw-shadow-colored: var(--elevation-4);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-medium {
  --tw-shadow: var(--shadow-medium);
  --tw-shadow-colored: var(--shadow-medium);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-pop {
  --tw-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-soft {
  --tw-shadow: var(--shadow-soft);
  --tw-shadow-colored: var(--shadow-soft);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-strong {
  --tw-shadow: var(--shadow-strong);
  --tw-shadow-colored: var(--shadow-strong);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow-color: hsl(var(--card));
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary\/10 {
  --tw-shadow-color: hsl(var(--primary) / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-100 {
  --tw-shadow-color: #fee2e2;
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-teal-500\/20 {
  --tw-shadow-color: rgb(20 184 166 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-\[\#1a2942\]\/15 {
  --tw-ring-color: rgb(26 41 66 / 0.15);
}
.ring-amber-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity, 1));
}
.ring-amber-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 211 77 / var(--tw-ring-opacity, 1));
}
.ring-background {
  --tw-ring-color: hsl(var(--background));
}
.ring-border {
  --tw-ring-color: hsl(var(--border));
}
.ring-card {
  --tw-ring-color: hsl(var(--card));
}
.ring-destructive\/40 {
  --tw-ring-color: hsl(var(--destructive) / 0.4);
}
.ring-emerald-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(167 243 208 / var(--tw-ring-opacity, 1));
}
.ring-kanfy-amber\/30 {
  --tw-ring-color: hsl(var(--kanfy-amber) / 0.3);
}
.ring-kanfy-cream\/20 {
  --tw-ring-color: hsl(var(--kanfy-cream) / 0.2);
}
.ring-kanfy-ink {
  --tw-ring-color: hsl(var(--kanfy-ink));
}
.ring-kanfy-mid\/30 {
  --tw-ring-color: hsl(var(--kanfy-teal-mid) / 0.3);
}
.ring-orange-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 186 116 / var(--tw-ring-opacity, 1));
}
.ring-primary {
  --tw-ring-color: hsl(var(--primary));
}
.ring-primary\/20 {
  --tw-ring-color: hsl(var(--primary) / 0.2);
}
.ring-primary\/25 {
  --tw-ring-color: hsl(var(--primary) / 0.25);
}
.ring-red-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity, 1));
}
.ring-red-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1));
}
.ring-ring {
  --tw-ring-color: hsl(var(--ring));
}
.ring-rose-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 205 211 / var(--tw-ring-opacity, 1));
}
.ring-sidebar-ring {
  --tw-ring-color: hsl(var(--sidebar-ring));
}
.ring-success\/20 {
  --tw-ring-color: hsl(var(--success) / 0.2);
}
.ring-success\/40 {
  --tw-ring-color: hsl(var(--success) / 0.4);
}
.ring-teal-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(94 234 212 / var(--tw-ring-opacity, 1));
}
.ring-teal-500\/20 {
  --tw-ring-color: rgb(20 184 166 / 0.2);
}
.ring-th-navy {
  --tw-ring-color: var(--th-navy);
}
.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-white\/25 {
  --tw-ring-color: rgb(255 255 255 / 0.25);
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.blur-2xl {
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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);
  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);
  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(12px);
  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(4px);
  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-xl {
  --tw-backdrop-blur: blur(24px);
  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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[colors\2c transform\] {
  transition-property: colors,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opa\] {
  transition-property: margin,opa;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[transform\2c box-shadow\2c background-color\2c border-color\] {
  transition-property: transform,box-shadow,background-color,border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.delay-150 {
  transition-delay: 150ms;
}
.delay-75 {
  transition-delay: 75ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-pop {
  transition-duration: var(--duration-pop);
}
.duration-press {
  transition-duration: var(--duration-press);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-spring {
  transition-timing-function: var(--ease-spring);
}
@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));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.fade-in-80 {
  --tw-enter-opacity: 0.8;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.slide-in-from-bottom-3 {
  --tw-enter-translate-y: 0.75rem;
}
.slide-in-from-bottom-5 {
  --tw-enter-translate-y: 1.25rem;
}
.slide-in-from-top-2 {
  --tw-enter-translate-y: -0.5rem;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.duration-pop {
  animation-duration: var(--duration-pop);
}
.duration-press {
  animation-duration: var(--duration-press);
}
.delay-150 {
  animation-delay: 150ms;
}
.delay-75 {
  animation-delay: 75ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-spring {
  animation-timing-function: var(--ease-spring);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.\[-ms-overflow-style\:none\] {
  -ms-overflow-style: none;
}
.\[animation-delay\:0ms\] {
  animation-delay: 0ms;
}
.\[animation-delay\:150ms\] {
  animation-delay: 150ms;
}
.\[animation-delay\:300ms\] {
  animation-delay: 300ms;
}
.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

/* Kanfy - Home Assistance Services Marketplace Design System
All colors MUST be HSL for consistency across light/dark modes.

Brand foundation (see BRAND.md). The Kanfy palette is five colours, each
with one job, defined once below as --kanfy-* primitives. Semantic tokens
(--background, --primary, …) reference those primitives so a palette change
happens in one place.

The rule that matters: clay is the action colour and nothing else. It is
--primary and the light-mode heading accent, and must not appear on badges,
icons, or decoration. The previous Kanfy system used red as
primary, destructive and accent simultaneously, which is exactly why
"press this" stopped reading as pressable.
*/

/* Autofill colour suppression — prevents browser lavender/yellow autofill */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px hsl(var(--card)) inset !important;
  -webkit-text-fill-color: hsl(var(--foreground)) !important;
  caret-color: hsl(var(--foreground));
  -webkit-transition: background-color 9999s ease-in-out 0s;
  transition: background-color 9999s ease-in-out 0s;
}

/* ============================================
   PRINT STYLES — A4 reports
   ============================================ */
@media print {
  @page {
    size: A4 portrait;
    margin: 15mm 12mm 15mm 12mm;
  }

  /* Hide everything except the designated print area */
  body * {
    visibility: hidden !important;
  }

  .uat-report-print-area,
  .uat-report-print-area * {
    visibility: visible !important;
  }

  .uat-report-print-area {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .exec-summary-print-area,
  .exec-summary-print-area * {
    visibility: visible !important;
  }

  .exec-summary-print-area {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide non-printable elements */
  .no-print,
  .print\:hidden,
  nav,
  header,
  footer,
  button,
  [class*="staging-banner"] {
    display: none !important;
  }

  /* But hide buttons inside print areas too */
  .uat-report-print-area button,
  .exec-summary-print-area button {
    display: none !important;
  }

  /* Table styling */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 9pt !important;
  }

  table th,
  table td {
    padding: 4px 6px !important;
    border: 0.5px solid #d4d4d8 !important;
    font-size: 9pt !important;
    line-height: 1.3 !important;
  }

  table th {
    background-color: #f4f4f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Prevent page breaks inside rows and sections */
  tr {
    page-break-inside: avoid !important;
  }

  .report-section {
    page-break-inside: avoid !important;
  }

  .report-page-break {
    page-break-before: always !important;
  }

  /* KPI grid overrides for print */
  .report-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }

  .report-kpi-card {
    border: 0.5px solid #d4d4d8 !important;
    padding: 6px 8px !important;
    text-align: center !important;
    page-break-inside: avoid !important;
  }

  .report-status-badge {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Print font sizes */
  h1 { font-size: 16pt !important; }
  h2 { font-size: 13pt !important; }
  h3 { font-size: 11pt !important; }
  p, li, span, td, th { font-size: 9pt !important; }

  /* Strip shadows */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Preserve status colours */
  .text-emerald-600, .text-green-600 {
    color: #059669 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .text-red-600 {
    color: #dc2626 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .text-amber-600, .text-yellow-600 {
    color: #d97706 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  [class*="bg-emerald"], [class*="bg-green"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  [class*="bg-red"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}
/* Mobile UI safeguards */
@media (max-width: 767px) {
  h1, h2, h3 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  html, body {
    max-width: 100vw;
  }

  [role="banner"][aria-label="Investor demo environment"] {
    max-width: 100vw;
    overflow-x: hidden;
  }

  [role="tablist"] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [role="tablist"]::-webkit-scrollbar {
    display: none;
  }

  [role="tab"] {
    font-size: 0.75rem;
    white-space: nowrap;
  }
}



/* ================================================================
   DESIGN TOKEN ADDITIONS — Part 1
   ================================================================ */

/* ===== HERO SECTION ANIMATIONS ===== */

@keyframes kenBurns {
  0%   { transform: scale(1.05) translate(0%, 0%); }
  33%  { transform: scale(1.10) translate(-1.2%, -0.8%); }
  66%  { transform: scale(1.08) translate(1%, 0.6%); }
  100% { transform: scale(1.05) translate(0%, 0%); }
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}

@keyframes pillIn {
  from { opacity: 0; transform: scale(0.8) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes heroMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.hero-marquee-track {
  animation: heroMarquee 30s linear infinite;
  will-change: transform;
}

.hero-marquee-track:hover,
.hero-marquee-track.marquee-offscreen {
  animation-play-state: paused;
}

@media (max-width: 640px) {
  .hero-marquee-track {
    animation-duration: 24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track {
    animation: none;
    transform: translateX(0);
  }
}

#main-content > .absolute.inset-0 {
  overflow: hidden;
}

#main-content > .absolute.inset-0 > img {
  animation: kenBurns 20s ease-in-out infinite;
  will-change: transform;
  transform-origin: center center;
}

#main-content .max-w-3xl {
  animation: heroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#main-content .max-w-3xl > div:first-child {
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
             floatY 4s ease-in-out 1.5s infinite;
}

/* ✅ FIXED: matches actual class .flex.gap-2.justify-start, not .flex.flex-wrap.gap-2 */
#main-content .flex.gap-2.justify-start > *:nth-child(1) { animation: pillIn 0.45s ease-out 1.00s both; }
#main-content .flex.gap-2.justify-start > *:nth-child(2) { animation: pillIn 0.45s ease-out 1.15s both; }
#main-content .flex.gap-2.justify-start > *:nth-child(3) { animation: pillIn 0.45s ease-out 1.30s both; }
#main-content .flex.gap-2.justify-start > *:nth-child(4) { animation: pillIn 0.45s ease-out 1.45s both; }
#main-content .flex.gap-2.justify-start > *:nth-child(5) { animation: pillIn 0.45s ease-out 1.60s both; }

/* ✅ FIXED: scoped to pill container only — Search button and inputs unaffected */
#main-content .flex.gap-2.justify-start button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#main-content .flex.gap-2.justify-start button:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
}


/* ── Body base override — navy-light bg, Inter font ── */


/* ================================================================
   KANFY — CONSOLIDATED UI UPGRADE (May 2026)
   Global micro-interactions, scroll-reveal, enhanced animations
   Direct CSS only — no runtime DOM injector
================================================================ */

/* ── Scroll-reveal utility: add .reveal class to elements, JS adds .visible ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .reveal.visible {
    opacity: 1;
    transform: none;
  }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
}

/* ── Global smooth transitions on interactive elements ── */
a, button, [role="button"], .card-hover {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* ── Card shadow — floating-card effect for non-Card component surfaces ── */
.card-shadow {
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-shadow:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-1px);
}

/* ── Card hover lift — apply .card-lift to any card for stronger lift ── */
.card-lift {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -8px rgba(15, 45, 78, 0.18);
}

/* ── Pulse ring animation for trust badges / CTAs ── */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 hsl(174 72% 56% / 0.4); }
  70% { box-shadow: 0 0 0 10px hsl(174 72% 56% / 0); }
  100% { box-shadow: 0 0 0 0 hsl(174 72% 56% / 0); }
}
.pulse-ring {
  animation: pulse-ring 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Count-up animation placeholder (CSS shimmer for stats while loading) ── */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.stat-shimmer {
  background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted-foreground) / 0.1) 50%, hsl(var(--muted)) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: 4px;
  display: inline-block;
}

/* ── Image zoom on card hover — pair with overflow-hidden on parent ── */
.img-zoom {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.group:hover .img-zoom {
  transform: scale(1.08);
}

/* ── Gradient text utility ── */
.gradient-text {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(142 71% 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero section gradient overlay ── */
.hero-gradient-overlay {
  background: linear-gradient(
    135deg,
    hsl(var(--primary) / 0.08) 0%,
    transparent 60%
  ),
  linear-gradient(
    to bottom,
    transparent 50%,
    hsl(var(--background)) 100%
  );
}

/* ── Stronger CTA button shadow for primary actions ── */
.btn-primary-glow {
  box-shadow: 0 4px 14px hsl(var(--primary) / 0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-primary-glow:hover {
  box-shadow: 0 6px 20px hsl(var(--primary) / 0.45);
  transform: translateY(-1px);
}
.btn-primary-glow:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.3);
}

/* ── Stats strip — large number display ── */
.stat-number {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: hsl(var(--primary));
}
.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

/* ── FAQ accordion open state teal ── */
[data-state="open"] .accordion-trigger-icon {
  color: hsl(var(--primary));
}

/* ── Mobile safe input sizing (prevents iOS auto-zoom) ── */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 1rem;
  }
  
  /* Booking flow button clip fix */
  .booking-continue-btn {
    min-width: 0;
    width: 100%;
  }
}

/* ── Profile page inputs — more contrast ── */
.profile-input {
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
  outline: none;
}

/* ── Verification badge enhanced style ── */
.verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1.5px solid;
}
.verification-badge-verified {
  background: hsl(142 71% 45% / 0.1);
  color: hsl(142 71% 35%);
  border-color: hsl(142 71% 45% / 0.3);
}
.verification-badge-pending {
  background: hsl(38 92% 50% / 0.1);
  color: hsl(38 92% 40%);
  border-color: hsl(38 92% 50% / 0.3);
}

/* ── About/Experience section pill tags ── */
.skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  border-radius: 9999px;
  border: 1px solid hsl(var(--primary) / 0.2);
  transition: background 0.15s ease, transform 0.15s ease;
}
.skill-pill:hover {
  background: hsl(var(--primary) / 0.18);
  transform: translateY(-1px);
}

/* ── Bottom nav active state refinements ── */
.bottom-nav-active {
  color: hsl(var(--primary));
  font-weight: 600;
}
.bottom-nav-active-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 3px;
  background: hsl(var(--primary));
  border-radius: 0 0 9999px 9999px;
}

/* ── Testimonial quote marks ── */
.testimonial-quote::before {
  content: '"';
  font-size: 4rem;
  line-height: 0;
  vertical-align: -1.5rem;
  color: hsl(var(--primary) / 0.2);
  font-family: Georgia, serif;
  margin-right: 0.25rem;
}

/* ── Mobile landing page hero fix — prevent text truncation ── */
@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    line-height: 1.2;
    word-break: break-word;
  }
  .hero-subtext {
    font-size: clamp(0.875rem, 3.5vw, 1rem);
  }
  /* Category pill buttons — always visible, no clipping */
  .category-pills-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-pills-row::-webkit-scrollbar {
    display: none;
  }
  .category-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  /* Help widget — don't cover messages screen on mobile */
  .help-widget-fab {
    /* Already uses virtual keyboard detection — just reinforce z-index */
    z-index: 44; /* below BottomNav z-40 on pages that need chat */
  }
  
  /* Account settings — reduce dryness */
  .account-settings-section {
    border-radius: var(--radius);
    padding: 1rem;
    background: hsl(var(--muted) / 0.3);
    margin-bottom: 1rem;
  }
}


/* ================================================================
   MOBILE RESPONSIVENESS — SAFE AREAS & WIZARD FOOTER NAV
   Fixes button/content truncation on notched phones and small screens
   ================================================================ */

/* Safe-area top padding for html root — lets sticky headers clear
   notch / status bar on iPhone/Android. Only applies when viewport-fit=cover. */
html {
   padding-top: env(safe-area-inset-top, 0px);
}

/* Wizard / multi-step pages — sticky bottom nav bar that keeps
   Back/Next buttons always reachable on any screen height.
   Usage: add class "wizard-sticky-footer" to the action-button row. */
.wizard-sticky-footer {
   position: sticky;
   bottom: 0;
   left: 0;
   right: 0;
   background: hsl(var(--background));
   border-top: 1px solid hsl(var(--border));
   padding: 0.75rem 1rem;
   padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
   z-index: 30;
   display: flex;
   gap: 0.75rem;
   align-items: center;
}

/* Paired scroll area above a sticky footer — fills remaining viewport */
.wizard-scroll-body {
   flex: 1;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior-y: contain;
}

/* Full-height wizard shell — flex column so footer sticks to bottom */
.wizard-shell {
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
}

/* On desktop the sticky footer is not needed — revert to normal flow */
@media (min-width: 768px) {
   .wizard-sticky-footer {
        position: static;
        border-top: none;
        padding: 1rem 0 0;
        background: transparent;
   }
   .wizard-scroll-body {
        overflow-y: visible;
   }
   .wizard-shell {
        min-height: unset;
   }
}

/* Onboarding flow pages (ClientOnboardingFlow, HelperOnboardingWizard)
   — ensure card never gets clipped at bottom on short screens */
@media (max-width: 767px) {
   /* Card inside onboarding */
  .onboarding-card {
       margin-bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
  }

}

/* Ensure no page-level element clips the bottom safe area */
@media (max-width: 767px) {
   /* Fix pages that use min-h-screen without accounting for safe areas */
  .min-h-screen {
       min-height: 100dvh;
  }

  /* Fix any remaining truncation from fixed-height containers */
  main, [role="main"] {
       overflow-y: auto;
       overflow-x: hidden;
  }
}

/* Horizontal overflow guard — catches any wide fixed-width element */
img, video, canvas, svg, table, pre {
   max-width: 100%;
}

/* Prevent tables from horizontal overflow on mobile */
@media (max-width: 767px) {
   table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
   }
}

/* ============================================================
   TH-032 — Dark Mode Token Overrides
   Apply .dark class to <html> via ThemeProvider
   ============================================================ */
.dark {
  /* ── Lighter dark-mode greens (2026-08-04) ────────────────────────────
     The dark theme read as oppressively dark. These redefine the green
     PRIMITIVES for dark mode only — deliberately scoped inside .dark
     rather than edited at :root, because --kanfy-ink is also light mode's
     --foreground/--card-foreground/--secondary-foreground and --kanfy-teal
     is light mode's --trust/--success/--accent-foreground. Lightening the
     :root values would have washed out light-mode body text.

     Every value keeps hue, drops saturation slightly, and raises lightness.
     Contrast against --foreground (cream #FBF3E7) recomputed for each; the
     binding constraint is cream-on-card, which caps card lightness near 30%
     — beyond that AA fails and the fix would require abandoning cream text.

       token              was          now          cream contrast
       kanfy-ink          168 63% 14%  168 55% 20%  11.4:1 -> 8.5:1
       kanfy-teal         166 73% 26%  166 60% 29%   5.3:1 -> 5.0:1
       kanfy-nav-dark     168 64% 11%  168 58% 16%  (chrome, not text bg)
       kanfy-border-dark  167 51% 21%  167 45% 30%  (border, raised for
                                                     visibility on lighter bg)
     All still clear AA. Re-run e2e/dark-mode-smoke.spec.ts after any edit. */
  --kanfy-ink:         168 55% 20%;  /* #174F44 */
  --kanfy-teal:        166 60% 29%;  /* #1E7662 */
  --kanfy-nav-dark:    168 58% 16%;  /* #114037 */
  --kanfy-border-dark: 167 45% 30%;  /* #2A6F60 */
  /* Secondary text has to rise WITH the card: at 88% it cleared 4.5:1 against
     the old 26% teal but only 4.29:1 against the new 29% one — caught live by
     the axe pass on the stats bar, not by inspection. 92% restores 4.66:1 on
     card and stays 6.8:1 on --muted. Light mode keeps 88% (unchanged at :root). */
  --kanfy-sec-ink:     158 19% 92%;  /* #E8EFEC — dark mode only */

  /* ── NEUTRAL-SLATE VARIANT (2026-08-04) ───────────────────────────────
     Teal-as-surface is dropped here: surfaces become near-neutral slate
     carrying only a faint green undertone (hue kept at ~170 so the theme
     still reads as Kanfy rather than generic grey), and teal survives as an
     ACCENT — success states, verified ticks, the teal-mid icon colour —
     rather than as the page and card background.

     The practical win is headroom. Cream on the teal card was 5.0:1, which
     left almost nothing spare and is why three separate foregrounds
     (stats text, ratings, prices) fell under AA the moment the card moved.
     Cream on the neutral card is 8.6:1, so those same foregrounds now sit
     around 8:1 and small future tweaks stop breaking things.

       token              teal version   neutral version   cream contrast
       ink   (page bg)    168 55% 20%    170 10% 20%       8.5:1 -> 11.0:1
       teal  (cards)      166 60% 29%    170  9% 26%       5.0:1 ->  8.6:1
       nav-dark           168 58% 16%    170 12% 15%       chrome
       border-dark        167 45% 30%    170  8% 36%       border
       secondary/muted    167 40% 25%    170  8% 31%       7.0:1

     Comment out this block to fall back to the teal version above. */
  --kanfy-ink:         170 10% 20%;  /* #2E3835 — page background */
  --kanfy-teal:        170  9% 26%;  /* #3C4845 — cards/popovers */
  --kanfy-nav-dark:    170 12% 15%;  /* #222B29 — nav/sidebar */
  --kanfy-border-dark: 170  8% 36%;  /* #55635F — borders */

  --background: var(--kanfy-ink);      /* #174F44 */
  --foreground: var(--kanfy-cream);    /* #FBF3E7 */
  --card: var(--kanfy-teal);           /* #1E7662 — surfaces go teal on dark */
  --card-foreground: var(--kanfy-cream);
  --popover: var(--kanfy-teal);
  --popover-foreground: var(--kanfy-cream);
  --primary: var(--kanfy-clay);        /* identical to light — learned once */
  --primary-foreground: 24 100% 97%;
  --primary-hover: 16 67% 38%;  /* #A24320 */
  --secondary: 170 8% 31%;
  --secondary-foreground: var(--kanfy-cream);
  --muted: 170 8% 31%;
  --muted-foreground: var(--kanfy-sec-ink);
  --accent: 170 8% 31%;
  --accent-foreground: var(--kanfy-amber);
  --destructive: 0 62% 42%;
  --destructive-foreground: 0 0% 100%;
  --success: var(--kanfy-teal-mid);
  --success-foreground: var(--kanfy-ink);
  --info: 199 89% 48%;
  --info-foreground: 0 0% 100%;
  --warning: var(--kanfy-amber);
  /* kanfy-on-amber is a light-mode-only text colour (near-black); a
     warning/10-15 tint over the dark ink page stays dark, so the
     readable text here is cream, not on-amber. */
  --warning-foreground: var(--kanfy-cream);
  --surface: var(--muted);
  --border: var(--kanfy-border-dark);
  --input: var(--kanfy-border-dark);
  --ring: var(--kanfy-clay);
  --accent-heading: var(--kanfy-amber);
  --bg-nav: var(--kanfy-nav-dark);
  --admin-bg: 215 28% 9%;
  --admin-surface: var(--admin-bg);
  --admin-card: 215 25% 13%;
  --admin-text: 210 40% 90%;
  --admin-text-secondary: 215 16% 60%;
  --admin-border: 215 20% 22%;
  --sidebar-background: 215 28% 9%;
  --sidebar-foreground: 210 40% 90%;
  --sidebar-border: 215 20% 22%;
  --sidebar-accent: 215 20% 18%;
  --sidebar-accent-foreground: 210 40% 80%;
  color-scheme: dark;
}

/* Smooth transitions for theme switching */
body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ============================================================
   DARK MODE COMPONENT OVERRIDES
   These ensure specific components inherit dark theme correctly.
   Fixes contrast issues found in audit (June 2026).
   ============================================================ */

/* Stat cards: white in dark mode becomes dark */
.dark .stat-card,
.dark [class*="bg-white"],
.dark .bg-white {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
}

/* Category pills: ensure sufficient contrast in dark mode */
.dark .category-pill,
.dark [class*="badge"] {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Form inputs in dark mode */
.dark input,
.dark textarea,
.dark select {
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

/* Page sections with hardcoded light backgrounds */
.dark .bg-gray-50,
.dark [class*="bg-gray-50"] {
  background-color: hsl(var(--background)) !important;
}

.dark .bg-blue-50,
.dark [class*="bg-blue-50"] {
  background-color: hsl(215 28% 12%) !important;
}

/* Cards and panels */
.dark .card,
.dark [class*="rounded-lg bg-white"],
.dark [class*="rounded-xl bg-white"] {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
}

/* Text contrast fixes */
.dark .text-gray-600,
.dark [class*="text-gray-600"] {
  color: hsl(var(--muted-foreground)) !important;
}

.dark .text-gray-700,
.dark [class*="text-gray-700"] {
  color: hsl(210 40% 80%) !important;
}

.dark .text-gray-800,
.dark .text-gray-900,
.dark [class*="text-gray-800"],
.dark [class*="text-gray-900"] {
  color: hsl(var(--foreground)) !important;
}

/* Border fixes */
.dark .border-gray-200,
.dark [class*="border-gray-200"] {
  border-color: hsl(var(--border)) !important;
}

/* Helper cards on browse page */
.dark .helper-card {
  background-color: hsl(var(--card));
  border-color: hsl(var(--border));
}

/* Navigation */
.dark nav {
  background-color: hsl(var(--background));
  border-bottom-color: hsl(var(--border));
}

/* Mobile bottom nav */
.dark .mobile-bottom-nav {
  background-color: hsl(var(--card));
  border-top-color: hsl(var(--border));
}

/* Ensure buttons have proper dark mode contrast */
.dark .btn-ghost:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}


/* ================================================================
DARK MODE — COMPREHENSIVE CONTRAST FIXES (June 2026)
Fixes all hardcoded light-mode colours across every page/role.
================================================================ */

/* ── Page-level section backgrounds ── */
/* Covers bg-[#F8FAFC], bg-[#F8FAFC], bg-gray-50 used throughout */
.dark section,
.dark [class*="bg-\[#F8FAFC\]"],
.dark .bg-slate-50,
.dark .bg-gray-50,
.dark .bg-zinc-50 {
  background-color: hsl(var(--background)) !important;
}

/* Stat / info bar — hardcoded bg-white used in Index.tsx */
.dark .bg-white {
  background-color: hsl(var(--card)) !important;
}

/* ── Hardcoded dark text colours ── */
/* text-[#0F172A] used in TrustSafety, Index heading */
.dark [class*="text-\[\#0F172A\]"],
.dark [class*="text-\[#0F172A\]"] {
  color: hsl(var(--foreground)) !important;
}
/* text-[#1E293B] and similar hardcoded dark colours */
.dark [class*="text-\[\#1E293B\]"] {
  color: hsl(var(--foreground)) !important;
}

/* ── Stat bar text (Index.tsx uses inline style color #0F172A) ── */
/* Stats numbers */
.dark .grid.grid-cols-4 span[style*="color: rgb(15, 23, 42)"],
.dark .grid.grid-cols-4 span[style*="color:#0F172A"],
.dark .grid.grid-cols-4 span[style*="color: #0F172A"],
.dark section span[style*="#0F172A"],
.dark span[style*="0F172A"] {
  color: hsl(var(--foreground)) !important;
}

/* ── Service / category cards in dark mode ── */
.dark .group.bg-white,
.dark button.bg-white,
.dark [class*="bg-white"].rounded-2xl {
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}

/* Card text that uses hardcoded dark hex */
.dark h3[style*="color: rgb(15, 23, 42)"],
.dark h3[style*="#0F172A"],
.dark p[style*="#0F172A"],
.dark [style*="color: rgb(15, 23, 42)"],
.dark [style*="color:#0F172A"] {
  color: hsl(var(--foreground)) !important;
}

/* Teal price text in service cards */
.dark p[style*="color: rgb(13, 148, 136)"],
.dark p[style*="#0D9488"] {
  color: hsl(142 71% 55%) !important;
}

/* ── Search bar in dark mode ── */
.dark .bg-white.rounded-2xl input,
.dark .bg-white.rounded-2xl select {
  background-color: hsl(var(--input)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}
.dark .bg-white.rounded-2xl {
  background-color: hsl(var(--card)) !important;
}

/* ── Gray text corrections ── */
.dark .text-gray-400,
.dark .text-gray-500,
.dark [class*="text-gray-400"],
.dark [class*="text-gray-500"] {
  color: hsl(var(--muted-foreground)) !important;
}

/* Gray-50 backgrounds */
.dark [class*="bg-gray-50"],
.dark .bg-gray-50 {
  background-color: hsl(var(--background)) !important;
}

/* ── Input backgrounds ── */
.dark input[class*="bg-gray-50"] {
  background-color: hsl(var(--input)) !important;
  color: hsl(var(--foreground)) !important;
}

/* ── Gray borders ── */
.dark [class*="border-gray-100"],
.dark [class*="border-gray-200"] {
  border-color: hsl(var(--border)) !important;
}

/* ── Profile / Onboarding form areas ── */
.dark .bg-blue-50 {
  background-color: hsl(215 28% 12%) !important;
}
.dark .text-blue-900,
.dark .text-slate-900 {
  color: hsl(var(--foreground)) !important;
}
.dark .text-slate-600,
.dark .text-slate-700 {
  color: hsl(var(--muted-foreground)) !important;
}

/* ── Admin pages: hardcoded zinc/slate backgrounds ── */
.dark .bg-zinc-50 {
  background-color: hsl(var(--background)) !important;
}
.dark .bg-zinc-100 {
  background-color: hsl(var(--muted)) !important;
}
.dark .text-zinc-900,
.dark .text-slate-800,
.dark .text-slate-900 {
  color: hsl(var(--foreground)) !important;
}
.dark .text-zinc-600,
.dark .text-zinc-700,
.dark .text-slate-500,
.dark .text-slate-600 {
  color: hsl(var(--muted-foreground)) !important;
}
.dark .border-zinc-200,
.dark .border-slate-200 {
  border-color: hsl(var(--border)) !important;
}

/* ── Admin white cards ── */
.dark .bg-white.border,
.dark .bg-white.shadow,
.dark .bg-white.rounded {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
}

/* ── Table rows in dark mode ── */
.dark thead th {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}
.dark tbody td {
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}
.dark tbody tr:hover td {
  background-color: hsl(var(--accent)) !important;
}

/* ── Onboarding / Profile creation white form cards ── */
.dark .rounded-3xl.bg-white,
.dark .rounded-2xl.bg-white {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

/* ── Step circles in onboarding ── */
.dark .rounded-full.border-2.border-gray-200 {
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ── Helper onboarding form inputs ── */
.dark input.bg-\[\#1E2942\],
.dark input[class*="bg-\[\#1E"],
.dark .dark-input {
  background-color: hsl(var(--input)) !important;
  color: hsl(var(--foreground)) !important;
}

/* ── Booking / My Bookings page ── */
.dark .bg-amber-50 { background-color: hsl(38 50% 12%) !important; }
.dark .text-amber-800 { color: hsl(38 92% 70%) !important; }
.dark .bg-green-50 { background-color: hsl(142 30% 10%) !important; }
.dark .text-green-800 { color: hsl(142 71% 65%) !important; }
.dark .bg-red-50 { background-color: hsl(0 40% 12%) !important; }
.dark .text-red-800 { color: hsl(0 74% 70%) !important; }

/* ── Dashboard stats cards ── */
.dark .bg-primary\/5,
.dark [class*="bg-primary\/5"] {
  background-color: hsl(0 74% 50% / 0.1) !important;
}

/* ── Bottom nav in dark mode on mobile ── */
.dark nav.fixed.bottom-0,
.dark [class*="bottom-nav"] {
  background-color: hsl(var(--card)) !important;
  border-top-color: hsl(var(--border)) !important;
}

/* ── Helper / Admin badge colours in dark ── */
.dark .bg-emerald-100 { background-color: hsl(142 30% 15%) !important; }
.dark .text-emerald-700 { color: hsl(142 71% 60%) !important; }
.dark .bg-blue-100 { background-color: hsl(214 30% 15%) !important; }
.dark .text-blue-700 { color: hsl(214 91% 70%) !important; }
.dark .bg-amber-100 { background-color: hsl(38 40% 15%) !important; }
/* Was 65% L (rgb(248,188,84)) — only 3.39:1 against --card (kanfy-teal),
   caught live by e2e/dark-mode-smoke.spec.ts's axe pass on the homepage
   service-card ratings, which reuse this same badge-text class. 85% clears
   4.5:1. Hue/saturation untouched. */
.dark .text-amber-700 { color: hsl(38 92% 90%) !important; }  /* 85% was 4.35:1 on the lightened card; 90% = 4.70:1 */
.dark .bg-rose-100 { background-color: hsl(0 40% 15%) !important; }
.dark .text-rose-700 { color: hsl(0 72% 70%) !important; }
.dark .bg-purple-100 { background-color: hsl(270 30% 15%) !important; }
.dark .text-purple-700 { color: hsl(270 72% 70%) !important; }

/* ── Ring/focus indicators ── */
.dark *:focus-visible {
  outline-color: hsl(var(--ring));
}

/* ── Popover / dropdown menus ── */
.dark [data-radix-popper-content-wrapper] > * {
  background-color: hsl(var(--popover)) !important;
  color: hsl(var(--popover-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

/* ── Skeleton/shimmer loaders ── */
.dark .animate-pulse.bg-gray-200,
.dark .animate-pulse.bg-slate-200 {
  background-color: hsl(var(--muted)) !important;
}

/* ── Footer ── */
.dark footer {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--muted-foreground)) !important;
  border-top-color: hsl(var(--border)) !important;
}
.dark footer a {
  color: hsl(var(--muted-foreground)) !important;
}
.dark footer a:hover {
  color: hsl(var(--foreground)) !important;
}

/* ── Ensure helper/client profile onboarding is visible ── */
/* The onboarding form background containers */
.dark .min-h-screen.bg-gradient-to-br,
.dark .min-h-screen[class*="bg-gradient"] {
  background: hsl(var(--background)) !important;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-foreground::file-selector-button {
  color: hsl(var(--foreground));
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}
.placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}
.placeholder\:text-slate-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.placeholder\:text-slate-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}
.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}
.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}
.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}
.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.last\:mb-0:last-child {
  margin-bottom: 0px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.even\:bg-zinc-50:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.focus-within\:relative:focus-within {
  position: relative;
}
.focus-within\:z-20:focus-within {
  z-index: 20;
}
.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-within\:ring-admin-emerald:focus-within {
  --tw-ring-color: hsl(var(--admin-emerald));
}
.focus-within\:ring-primary:focus-within {
  --tw-ring-color: hsl(var(--primary));
}
.focus-within\:ring-offset-2:focus-within {
  --tw-ring-offset-width: 2px;
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-px:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.03\]:hover {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[\#1a2942\]\/25:hover {
  border-color: rgb(26 41 66 / 0.25);
}
.hover\:border-border:hover {
  border-color: hsl(var(--border));
}
.hover\:border-border\/80:hover {
  border-color: hsl(var(--border) / 0.8);
}
.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:border-primary:hover {
  border-color: hsl(var(--primary));
}
.hover\:border-primary\/20:hover {
  border-color: hsl(var(--primary) / 0.2);
}
.hover\:border-primary\/30:hover {
  border-color: hsl(var(--primary) / 0.3);
}
.hover\:border-primary\/40:hover {
  border-color: hsl(var(--primary) / 0.4);
}
.hover\:border-primary\/50:hover {
  border-color: hsl(var(--primary) / 0.5);
}
.hover\:border-primary\/60:hover {
  border-color: hsl(var(--primary) / 0.6);
}
.hover\:border-primary\/80:hover {
  border-color: hsl(var(--primary) / 0.8);
}
.hover\:border-ring\/50:hover {
  border-color: hsl(var(--ring) / 0.5);
}
.hover\:border-teal-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(94 234 212 / var(--tw-border-opacity, 1));
}
.hover\:border-teal-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(45 212 191 / var(--tw-border-opacity, 1));
}
.hover\:border-zinc-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.hover\:border-zinc-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#1E293B\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#1a2942\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(26 41 66 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#2d4f7f\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(45 79 127 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#CCFBF1\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}
.hover\:bg-accent\/30:hover {
  background-color: hsl(var(--accent) / 0.3);
}
.hover\:bg-accent\/50:hover {
  background-color: hsl(var(--accent) / 0.5);
}
.hover\:bg-amber-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-600\/50:hover {
  background-color: rgb(217 119 6 / 0.5);
}
.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.hover\:bg-background\/70:hover {
  background-color: hsl(var(--background) / 0.7);
}
.hover\:bg-background\/80:hover {
  background-color: hsl(var(--background) / 0.8);
}
.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 252 248 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(27 122 108 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(25 95 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-amber\/10:hover {
  background-color: hsl(var(--brand-amber) / 0.1);
}
.hover\:bg-brand-amber\/15:hover {
  background-color: hsl(var(--brand-amber) / 0.15);
}
.hover\:bg-brand-red\/90:hover {
  background-color: hsl(var(--brand-red) / 0.9);
}
.hover\:bg-destructive\/10:hover {
  background-color: hsl(var(--destructive) / 0.1);
}
.hover\:bg-destructive\/15:hover {
  background-color: hsl(var(--destructive) / 0.15);
}
.hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / 0.8);
}
.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-info\/15:hover {
  background-color: hsl(var(--info) / 0.15);
}
.hover\:bg-kanfy-cream\/10:hover {
  background-color: hsl(var(--kanfy-cream) / 0.1);
}
.hover\:bg-kanfy-cream\/20:hover {
  background-color: hsl(var(--kanfy-cream) / 0.2);
}
.hover\:bg-kanfy-teal\/90:hover {
  background-color: hsl(var(--kanfy-teal) / 0.9);
}
.hover\:bg-muted:hover {
  background-color: hsl(var(--muted));
}
.hover\:bg-muted-foreground\/50:hover {
  background-color: hsl(var(--muted-foreground) / 0.5);
}
.hover\:bg-muted\/30:hover {
  background-color: hsl(var(--muted) / 0.3);
}
.hover\:bg-muted\/40:hover {
  background-color: hsl(var(--muted) / 0.4);
}
.hover\:bg-muted\/50:hover {
  background-color: hsl(var(--muted) / 0.5);
}
.hover\:bg-muted\/60:hover {
  background-color: hsl(var(--muted) / 0.6);
}
.hover\:bg-muted\/70:hover {
  background-color: hsl(var(--muted) / 0.7);
}
.hover\:bg-muted\/80:hover {
  background-color: hsl(var(--muted) / 0.8);
}
.hover\:bg-orange-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary:hover {
  background-color: hsl(var(--primary));
}
.hover\:bg-primary-hover:hover {
  background-color: hsl(var(--primary-hover));
}
.hover\:bg-primary\/10:hover {
  background-color: hsl(var(--primary) / 0.1);
}
.hover\:bg-primary\/15:hover {
  background-color: hsl(var(--primary) / 0.15);
}
.hover\:bg-primary\/5:hover {
  background-color: hsl(var(--primary) / 0.05);
}
.hover\:bg-primary\/80:hover {
  background-color: hsl(var(--primary) / 0.8);
}
.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}
.hover\:bg-purple-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary:hover {
  background-color: hsl(var(--secondary));
}
.hover\:bg-secondary\/10:hover {
  background-color: hsl(var(--secondary) / 0.1);
}
.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}
.hover\:bg-secondary\/90:hover {
  background-color: hsl(var(--secondary) / 0.9);
}
.hover\:bg-sidebar-accent:hover {
  background-color: hsl(var(--sidebar-accent));
}
.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-success:hover {
  background-color: hsl(var(--success));
}
.hover\:bg-success\/10:hover {
  background-color: hsl(var(--success) / 0.1);
}
.hover\:bg-success\/15:hover {
  background-color: hsl(var(--success) / 0.15);
}
.hover\:bg-success\/5:hover {
  background-color: hsl(var(--success) / 0.05);
}
.hover\:bg-success\/90:hover {
  background-color: hsl(var(--success) / 0.9);
}
.hover\:bg-surface:hover {
  background-color: hsl(var(--surface));
}
.hover\:bg-surface\/50:hover {
  background-color: hsl(var(--surface) / 0.5);
}
.hover\:bg-surface\/60:hover {
  background-color: hsl(var(--surface) / 0.6);
}
.hover\:bg-surface\/70:hover {
  background-color: hsl(var(--surface) / 0.7);
}
.hover\:bg-surface\/80:hover {
  background-color: hsl(var(--surface) / 0.8);
}
.hover\:bg-teal-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-teal-50\/30:hover {
  background-color: rgb(240 253 250 / 0.3);
}
.hover\:bg-teal-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1));
}
.hover\:bg-transparent:hover {
  background-color: transparent;
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15);
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/25:hover {
  background-color: rgb(255 255 255 / 0.25);
}
.hover\:bg-white\/70:hover {
  background-color: rgb(255 255 255 / 0.7);
}
.hover\:bg-white\/90:hover {
  background-color: rgb(255 255 255 / 0.9);
}
.hover\:bg-zinc-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.hover\:text-\[\#1a2942\]:hover {
  --tw-text-opacity: 1;
  color: rgb(26 41 66 / var(--tw-text-opacity, 1));
}
.hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}
.hover\:text-admin-text:hover {
  color: hsl(var(--admin-text));
}
.hover\:text-brand-amber:hover {
  color: hsl(var(--brand-amber));
}
.hover\:text-destructive:hover {
  color: hsl(var(--destructive));
}
.hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}
.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.hover\:text-kanfy-cream:hover {
  color: hsl(var(--kanfy-cream));
}
.hover\:text-muted-foreground:hover {
  color: hsl(var(--muted-foreground));
}
.hover\:text-primary:hover {
  color: hsl(var(--primary));
}
.hover\:text-primary-foreground:hover {
  color: hsl(var(--primary-foreground));
}
.hover\:text-primary\/80:hover {
  color: hsl(var(--primary) / 0.8);
}
.hover\:text-purple-700:hover {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-500:hover {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.hover\:text-sidebar-accent-foreground:hover {
  color: hsl(var(--sidebar-accent-foreground));
}
.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.hover\:text-success:hover {
  color: hsl(var(--success));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-white\/70:hover {
  color: rgb(255 255 255 / 0.7);
}
.hover\:text-zinc-600:hover {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-700:hover {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-900:hover {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:no-underline:hover {
  text-decoration-line: none;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-70:hover {
  opacity: 0.7;
}
.hover\:opacity-75:hover {
  opacity: 0.75;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-2xl:hover {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_4px_12px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]:hover {
  --tw-shadow: 0 4px 12px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-e2:hover {
  --tw-shadow: var(--elevation-2);
  --tw-shadow-colored: var(--elevation-2);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-e3:hover {
  --tw-shadow: var(--elevation-3);
  --tw-shadow-colored: var(--elevation-3);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-medium:hover {
  --tw-shadow: var(--shadow-medium);
  --tw-shadow-colored: var(--shadow-medium);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-pop:hover {
  --tw-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-strong:hover {
  --tw-shadow: var(--shadow-strong);
  --tw-shadow-colored: var(--shadow-strong);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-2:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.hover\:ring-primary:hover {
  --tw-ring-color: hsl(var(--primary));
}
.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\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: hsl(var(--sidebar-border));
}
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.focus\:fixed:focus {
  position: fixed;
}
.focus\:absolute:focus {
  position: absolute;
}
.focus\:left-3:focus {
  left: 0.75rem;
}
.focus\:left-4:focus {
  left: 1rem;
}
.focus\:top-3:focus {
  top: 0.75rem;
}
.focus\:top-4:focus {
  top: 1rem;
}
.focus\:z-10:focus {
  z-index: 10;
}
.focus\:z-\[9999\]:focus {
  z-index: 9999;
}
.focus\:m-2:focus {
  margin: 0.5rem;
}
.focus\:rounded-lg:focus {
  border-radius: 12px;
}
.focus\:rounded-md:focus {
  border-radius: 10px;
}
.focus\:border-destructive\/40:focus {
  border-color: hsl(var(--destructive) / 0.4);
}
.focus\:border-primary:focus {
  border-color: hsl(var(--primary));
}
.focus\:border-ring:focus {
  border-color: hsl(var(--ring));
}
.focus\:border-success:focus {
  border-color: hsl(var(--success));
}
.focus\:bg-accent:focus {
  background-color: hsl(var(--accent));
}
.focus\:bg-brand-600:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(31 151 133 / var(--tw-bg-opacity, 1));
}
.focus\:bg-card:focus {
  background-color: hsl(var(--card));
}
.focus\:bg-muted:focus {
  background-color: hsl(var(--muted));
}
.focus\:bg-muted\/60:focus {
  background-color: hsl(var(--muted) / 0.6);
}
.focus\:bg-primary:focus {
  background-color: hsl(var(--primary));
}
.focus\:px-3:focus {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}
.focus\:py-1\.5:focus {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.focus\:text-sm:focus {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.focus\:font-medium:focus {
  font-weight: 500;
}
.focus\:font-semibold:focus {
  font-weight: 600;
}
.focus\:text-accent-foreground:focus {
  color: hsl(var(--accent-foreground));
}
.focus\:text-destructive:focus {
  color: hsl(var(--destructive));
}
.focus\:text-primary-foreground:focus {
  color: hsl(var(--primary-foreground));
}
.focus\:text-red-600:focus {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.focus\:text-white:focus {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.focus\:opacity-100:focus {
  opacity: 1;
}
.focus\:shadow-lg:focus {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-brand-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(45 182 157 / var(--tw-ring-opacity, 1));
}
.focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}
.focus\:ring-primary:focus {
  --tw-ring-color: hsl(var(--primary));
}
.focus\:ring-primary\/30:focus {
  --tw-ring-color: hsl(var(--primary) / 0.3);
}
.focus\:ring-red-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1));
}
.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.focus\:ring-ring\/40:focus {
  --tw-ring-color: hsl(var(--ring) / 0.4);
}
.focus\:ring-success\/20:focus {
  --tw-ring-color: hsl(var(--success) / 0.2);
}
.focus\:ring-success\/30:focus {
  --tw-ring-color: hsl(var(--success) / 0.3);
}
.focus\:ring-teal-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(94 234 212 / var(--tw-ring-opacity, 1));
}
.focus\:ring-teal-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(45 212 191 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.focus-visible\:border-ring:focus-visible {
  border-color: hsl(var(--ring));
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline:focus-visible {
  outline-style: solid;
}
.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}
.focus-visible\:outline-ring:focus-visible {
  outline-color: hsl(var(--ring));
}
.focus-visible\:ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-amber-400\/30:focus-visible {
  --tw-ring-color: rgb(251 191 36 / 0.3);
}
.focus-visible\:ring-destructive:focus-visible {
  --tw-ring-color: hsl(var(--destructive));
}
.focus-visible\:ring-kanfy-cream\/50:focus-visible {
  --tw-ring-color: hsl(var(--kanfy-cream) / 0.5);
}
.focus-visible\:ring-kanfy-cream\/60:focus-visible {
  --tw-ring-color: hsl(var(--kanfy-cream) / 0.6);
}
.focus-visible\:ring-primary:focus-visible {
  --tw-ring-color: hsl(var(--primary));
}
.focus-visible\:ring-primary-foreground:focus-visible {
  --tw-ring-color: hsl(var(--primary-foreground));
}
.focus-visible\:ring-red-300:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.focus-visible\:ring-ring\/40:focus-visible {
  --tw-ring-color: hsl(var(--ring) / 0.4);
}
.focus-visible\:ring-sidebar-ring:focus-visible {
  --tw-ring-color: hsl(var(--sidebar-ring));
}
.focus-visible\:ring-success:focus-visible {
  --tw-ring-color: hsl(var(--success));
}
.focus-visible\:ring-teal-400:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(45 212 191 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-teal-500\/30:focus-visible {
  --tw-ring-color: rgb(20 184 166 / 0.3);
}
.focus-visible\:ring-white:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}
.active\:translate-y-0:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-90:active {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:bg-brand-red\/80:active {
  background-color: hsl(var(--brand-red) / 0.8);
}
.active\:bg-primary\/20:active {
  background-color: hsl(var(--primary) / 0.2);
}
.active\:bg-primary\/80:active {
  background-color: hsl(var(--primary) / 0.8);
}
.active\:bg-sidebar-accent:active {
  background-color: hsl(var(--sidebar-accent));
}
.active\:bg-teal-800:active {
  --tw-bg-opacity: 1;
  background-color: rgb(17 94 89 / var(--tw-bg-opacity, 1));
}
.active\:text-sidebar-accent-foreground:active {
  color: hsl(var(--sidebar-accent-foreground));
}
.active\:shadow-e1:active {
  --tw-shadow: var(--elevation-1);
  --tw-shadow-colored: var(--elevation-1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-25:disabled {
  opacity: 0.25;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.group:hover .group-hover\:bg-muted {
  background-color: hsl(var(--muted));
}
.group:hover .group-hover\:bg-primary {
  background-color: hsl(var(--primary));
}
.group:hover .group-hover\:bg-trust\/20 {
  background-color: hsl(var(--trust) / 0.2);
}
.group:hover .group-hover\:text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
.group:hover .group-hover\:text-primary {
  color: hsl(var(--primary));
}
.group:hover .group-hover\:text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.group:hover .group-hover\:text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-80 {
  opacity: 0.8;
}
.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
  border-color: hsl(var(--muted) / 0.4);
}
.group.toaster .group-\[\.toaster\]\:border-border {
  border-color: hsl(var(--border));
}
.group.toast .group-\[\.toast\]\:bg-muted {
  background-color: hsl(var(--muted));
}
.group.toast .group-\[\.toast\]\:bg-primary {
  background-color: hsl(var(--primary));
}
.group.toaster .group-\[\.toaster\]\:bg-background {
  background-color: hsl(var(--background));
}
.group.destructive .group-\[\.destructive\]\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.group.toast .group-\[\.toast\]\:text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
.group.toast .group-\[\.toast\]\:text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.group.toaster .group-\[\.toaster\]\:text-foreground {
  color: hsl(var(--foreground));
}
.group.toaster .group-\[\.toaster\]\:shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
  border-color: hsl(var(--destructive) / 0.3);
}
.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
  background-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
  color: hsl(var(--destructive-foreground));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
  --tw-ring-offset-color: #dc2626;
}
.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: hsl(var(--sidebar-accent-foreground));
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}
.has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]) {
  background-color: hsl(var(--sidebar-background));
}
.has-\[\:disabled\]\:opacity-50:has(:disabled) {
  opacity: 0.5;
}
.group\/menu-item:has([data-sidebar=menu-action]) .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8 {
  padding-right: 2rem;
}
.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}
.aria-selected\:bg-accent[aria-selected="true"] {
  background-color: hsl(var(--accent));
}
.aria-selected\:bg-transparent[aria-selected="true"] {
  background-color: transparent;
}
.aria-selected\:text-accent-foreground[aria-selected="true"] {
  color: hsl(var(--accent-foreground));
}
.aria-selected\:opacity-100[aria-selected="true"] {
  opacity: 1;
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=active\]\:translate-y-0[data-state="active"] {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[state\=active\]\:border-primary[data-state="active"] {
  border-color: hsl(var(--primary));
}
.data-\[state\=active\]\:border-success\/25[data-state="active"] {
  border-color: hsl(var(--success) / 0.25);
}
.data-\[state\=active\]\:border-transparent[data-state="active"] {
  border-color: transparent;
}
.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: hsl(var(--sidebar-accent));
}
.data-\[active\]\:bg-accent\/50[data-active] {
  background-color: hsl(var(--accent) / 0.5);
}
.data-\[selected\=\'true\'\]\:bg-accent[data-selected='true'] {
  background-color: hsl(var(--accent));
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: hsl(var(--background));
}
.data-\[state\=active\]\:bg-kanfy-teal[data-state="active"] {
  background-color: hsl(var(--kanfy-teal));
}
.data-\[state\=active\]\:bg-primary[data-state="active"] {
  background-color: hsl(var(--primary));
}
.data-\[state\=active\]\:bg-secondary[data-state="active"] {
  background-color: hsl(var(--secondary));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(var(--primary));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: hsl(var(--accent) / 0.5);
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(var(--muted));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(var(--input));
}
.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}
.data-\[state\=active\]\:font-semibold[data-state="active"] {
  font-weight: 600;
}
.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: hsl(var(--sidebar-accent-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: hsl(var(--accent-foreground));
}
.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(var(--foreground));
}
.data-\[state\=active\]\:text-primary-foreground[data-state="active"] {
  color: hsl(var(--primary-foreground));
}
.data-\[state\=active\]\:text-success[data-state="active"] {
  color: hsl(var(--success));
}
.data-\[state\=active\]\:text-white[data-state="active"] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(var(--primary-foreground));
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(var(--accent-foreground));
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}
.data-\[state\=active\]\:shadow-md[data-state="active"] {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[state\=active\]\:shadow-none[data-state="active"] {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: 0.8;
}
.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.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-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-right-full[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\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}
.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-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}
.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\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: hsl(var(--sidebar-accent));
}
.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: hsl(var(--sidebar-accent-foreground));
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}
.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}
.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!size-8 {
  width: 2rem !important;
  height: 2rem !important;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
  width: var(--sidebar-width-icon);
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
  width: calc(var(--sidebar-width-icon) + 1rem);
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: 12px;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}
.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}
.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: hsl(var(--sidebar-border));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-0 {
  padding: 0px !important;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-2 {
  padding: 0.5rem !important;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:hover {
  background-color: hsl(var(--sidebar-background));
}
.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}
.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}
.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}
.peer[data-variant="inset"] ~ .peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-theme\(spacing\.4\)\)\] {
  min-height: calc(100svh - 1rem);
}
.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: hsl(var(--sidebar-accent-foreground));
}
@media (prefers-reduced-motion: no-preference) {

  @keyframes fade-in {

    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .motion-safe\:animate-fade-in {
    animation: fade-in 0.3s ease-out;
  }

  @keyframes pulse {

    50% {
      opacity: .5;
    }
  }

  .motion-safe\:animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .motion-safe\:duration-500 {
    transition-duration: 500ms;
  }

  .motion-safe\:will-change-transform {
    will-change: transform;
  }

  .motion-safe\:animate-in {
    animation-name: enter;
    animation-duration: 150ms;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
  }

  .motion-safe\:zoom-in-50 {
    --tw-enter-scale: .5;
  }

  .motion-safe\:duration-500 {
    animation-duration: 500ms;
  }

  .motion-safe\:active\:scale-\[0\.96\]:active {
    --tw-scale-x: 0.96;
    --tw-scale-y: 0.96;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .group:hover .motion-safe\:group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
@media (prefers-reduced-motion: reduce) {

  .motion-reduce\:transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .motion-reduce\:transition-none {
    transition-property: none;
  }
}
.dark\:border-amber-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}
.dark\:border-amber-800\/40:is(.dark *) {
  border-color: rgb(146 64 14 / 0.4);
}
.dark\:border-blue-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-800\/40:is(.dark *) {
  border-color: rgb(30 64 175 / 0.4);
}
.dark\:border-brand-amber:is(.dark *) {
  border-color: hsl(var(--brand-amber));
}
.dark\:border-emerald-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.dark\:border-emerald-800\/40:is(.dark *) {
  border-color: rgb(6 95 70 / 0.4);
}
.dark\:border-green-800\/40:is(.dark *) {
  border-color: rgb(22 101 52 / 0.4);
}
.dark\:border-purple-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(107 33 168 / var(--tw-border-opacity, 1));
}
.dark\:border-red-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}
.dark\:border-rose-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(159 18 57 / var(--tw-border-opacity, 1));
}
.dark\:border-rose-800\/40:is(.dark *) {
  border-color: rgb(159 18 57 / 0.4);
}
.dark\:border-success\/20:is(.dark *) {
  border-color: hsl(var(--success) / 0.2);
}
.dark\:border-teal-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(15 118 110 / var(--tw-border-opacity, 1));
}
.dark\:border-yellow-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
}
.dark\:bg-amber-900\/20:is(.dark *) {
  background-color: rgb(120 53 15 / 0.2);
}
.dark\:bg-amber-900\/30:is(.dark *) {
  background-color: rgb(120 53 15 / 0.3);
}
.dark\:bg-amber-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
}
.dark\:bg-amber-950\/20:is(.dark *) {
  background-color: rgb(69 26 3 / 0.2);
}
.dark\:bg-amber-950\/30:is(.dark *) {
  background-color: rgb(69 26 3 / 0.3);
}
.dark\:bg-blue-900\/20:is(.dark *) {
  background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-900\/30:is(.dark *) {
  background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-blue-950\/20:is(.dark *) {
  background-color: rgb(23 37 84 / 0.2);
}
.dark\:bg-brand-amber\/5:is(.dark *) {
  background-color: hsl(var(--brand-amber) / 0.05);
}
.dark\:bg-cyan-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(8 51 68 / var(--tw-bg-opacity, 1));
}
.dark\:bg-destructive\/10:is(.dark *) {
  background-color: hsl(var(--destructive) / 0.1);
}
.dark\:bg-emerald-900\/20:is(.dark *) {
  background-color: rgb(6 78 59 / 0.2);
}
.dark\:bg-emerald-900\/30:is(.dark *) {
  background-color: rgb(6 78 59 / 0.3);
}
.dark\:bg-green-950\/20:is(.dark *) {
  background-color: rgb(5 46 22 / 0.2);
}
.dark\:bg-orange-900\/20:is(.dark *) {
  background-color: rgb(124 45 18 / 0.2);
}
.dark\:bg-orange-950\/20:is(.dark *) {
  background-color: rgb(67 20 7 / 0.2);
}
.dark\:bg-primary\/5:is(.dark *) {
  background-color: hsl(var(--primary) / 0.05);
}
.dark\:bg-purple-900\/30:is(.dark *) {
  background-color: rgb(88 28 135 / 0.3);
}
.dark\:bg-purple-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(59 7 100 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-900\/30:is(.dark *) {
  background-color: rgb(127 29 29 / 0.3);
}
.dark\:bg-red-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-950\/20:is(.dark *) {
  background-color: rgb(69 10 10 / 0.2);
}
.dark\:bg-red-950\/30:is(.dark *) {
  background-color: rgb(69 10 10 / 0.3);
}
.dark\:bg-rose-900\/20:is(.dark *) {
  background-color: rgb(136 19 55 / 0.2);
}
.dark\:bg-rose-900\/30:is(.dark *) {
  background-color: rgb(136 19 55 / 0.3);
}
.dark\:bg-secondary\/10:is(.dark *) {
  background-color: hsl(var(--secondary) / 0.1);
}
.dark\:bg-slate-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.dark\:bg-success\/10:is(.dark *) {
  background-color: hsl(var(--success) / 0.1);
}
.dark\:bg-success\/20:is(.dark *) {
  background-color: hsl(var(--success) / 0.2);
}
.dark\:bg-success\/5:is(.dark *) {
  background-color: hsl(var(--success) / 0.05);
}
.dark\:bg-yellow-900\/20:is(.dark *) {
  background-color: rgb(113 63 18 / 0.2);
}
.dark\:bg-yellow-950\/20:is(.dark *) {
  background-color: rgb(66 32 6 / 0.2);
}
.dark\:text-\[\#B8F9EE\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(184 249 238 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-brand-amber:is(.dark *) {
  color: hsl(var(--brand-amber));
}
.dark\:text-brand-amber\/50:is(.dark *) {
  color: hsl(var(--brand-amber) / 0.5);
}
.dark\:text-destructive:is(.dark *) {
  color: hsl(var(--destructive));
}
.dark\:text-destructive\/70:is(.dark *) {
  color: hsl(var(--destructive) / 0.7);
}
.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-info:is(.dark *) {
  color: hsl(var(--info));
}
.dark\:text-info\/70:is(.dark *) {
  color: hsl(var(--info) / 0.7);
}
.dark\:text-primary-foreground:is(.dark *) {
  color: hsl(var(--primary-foreground));
}
.dark\:text-purple-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.dark\:text-red-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.dark\:text-secondary:is(.dark *) {
  color: hsl(var(--secondary));
}
.dark\:text-success:is(.dark *) {
  color: hsl(var(--success));
}
.dark\:text-success\/70:is(.dark *) {
  color: hsl(var(--success) / 0.7);
}
.dark\:text-success\/80:is(.dark *) {
  color: hsl(var(--success) / 0.8);
}
.dark\:text-yellow-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.dark\:even\:bg-zinc-900:nth-child(even):is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-amber-950:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
}
@media (min-width: 360px) {

  .min-\[360px\]\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 380px) {

  .xs\:inline {
    display: inline;
  }

  .xs\:hidden {
    display: none;
  }

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

  .min-\[380px\]\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .min-\[380px\]\:flex-row {
    flex-direction: row;
  }

  .min-\[380px\]\:items-end {
    align-items: flex-end;
  }

  .min-\[380px\]\:pb-1 {
    padding-bottom: 0.25rem;
  }
}
@media (min-width: 420px) {

  .min-\[420px\]\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {

  .sm\:inset-x-auto {
    left: auto;
    right: auto;
  }

  .sm\:inset-y-0 {
    top: 0px;
    bottom: 0px;
  }

  .sm\:bottom-0 {
    bottom: 0px;
  }

  .sm\:bottom-5 {
    bottom: 1.25rem;
  }

  .sm\:bottom-\[70px\] {
    bottom: 70px;
  }

  .sm\:left-4 {
    left: 1rem;
  }

  .sm\:left-auto {
    left: auto;
  }

  .sm\:right-0 {
    right: 0px;
  }

  .sm\:right-4 {
    right: 1rem;
  }

  .sm\:right-5 {
    right: 1.25rem;
  }

  .sm\:top-4 {
    top: 1rem;
  }

  .sm\:top-auto {
    top: auto;
  }

  .sm\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .sm\:mb-12 {
    margin-bottom: 3rem;
  }

  .sm\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:mb-5 {
    margin-bottom: 1.25rem;
  }

  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:mb-8 {
    margin-bottom: 2rem;
  }

  .sm\:ml-4 {
    margin-left: 1rem;
  }

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

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

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-12 {
    margin-top: 3rem;
  }

  .sm\:mt-2 {
    margin-top: 0.5rem;
  }

  .sm\:block {
    display: block;
  }

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

  .sm\:inline {
    display: inline;
  }

  .sm\:\!flex {
    display: flex !important;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:\!grid {
    display: grid !important;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:\!hidden {
    display: none !important;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-16 {
    height: 4rem;
  }

  .sm\:h-4 {
    height: 1rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:h-56 {
    height: 14rem;
  }

  .sm\:h-6 {
    height: 1.5rem;
  }

  .sm\:h-8 {
    height: 2rem;
  }

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

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

  .sm\:h-auto {
    height: auto;
  }

  .sm\:h-full {
    height: 100%;
  }

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

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-16 {
    width: 4rem;
  }

  .sm\:w-28 {
    width: 7rem;
  }

  .sm\:w-4 {
    width: 1rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-44 {
    width: 11rem;
  }

  .sm\:w-48 {
    width: 12rem;
  }

  .sm\:w-5 {
    width: 1.25rem;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-6 {
    width: 1.5rem;
  }

  .sm\:w-8 {
    width: 2rem;
  }

  .sm\:w-96 {
    width: 24rem;
  }

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

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

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

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

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

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

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:min-w-24 {
    min-width: 6rem;
  }

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

  .sm\:\!max-w-\[640px\] {
    max-width: 640px !important;
  }

  .sm\:max-w-2xl {
    max-width: 42rem;
  }

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

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

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

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

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

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

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

  .sm\:max-w-lg {
    max-width: 32rem;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:flex-none {
    flex: none;
  }

  .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\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

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

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

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

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

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

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

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

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

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

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

  .sm\:gap-0 {
    gap: 0px;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:rounded-2xl {
    border-radius: 20px;
  }

  .sm\:rounded-lg {
    border-radius: 12px;
  }

  .sm\:rounded-none {
    border-radius: 0px;
  }

  .sm\:rounded-l-2xl {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }

  .sm\:p-2\.5 {
    padding: 0.625rem;
  }

  .sm\:p-3 {
    padding: 0.75rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  .sm\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

  .sm\:pb-28 {
    padding-bottom: 7rem;
  }

  .sm\:pb-3 {
    padding-bottom: 0.75rem;
  }

  .sm\:pb-4 {
    padding-bottom: 1rem;
  }

  .sm\:pb-8 {
    padding-bottom: 2rem;
  }

  .sm\:pl-12 {
    padding-left: 3rem;
  }

  .sm\:pr-6 {
    padding-right: 1.5rem;
  }

  .sm\:pt-2 {
    padding-top: 0.5rem;
  }

  .sm\:pt-4 {
    padding-top: 1rem;
  }

  .sm\:pt-6 {
    padding-top: 1.5rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-center {
    text-align: center;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-\[1\.75rem\] {
    font-size: 1.75rem;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .sm\:opacity-0 {
    opacity: 0;
  }

  .group:hover .sm\:group-hover\:opacity-100 {
    opacity: 1;
  }

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}
@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:bottom-24 {
    bottom: 6rem;
  }

  .md\:bottom-6 {
    bottom: 1.5rem;
  }

  .md\:right-6 {
    right: 1.5rem;
  }

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

  .md\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .md\:-mt-6 {
    margin-top: -1.5rem;
  }

  .md\:mb-4 {
    margin-bottom: 1rem;
  }

  .md\:mb-5 {
    margin-bottom: 1.25rem;
  }

  .md\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .md\:mb-8 {
    margin-bottom: 2rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-32 {
    height: 8rem;
  }

  .md\:h-4 {
    height: 1rem;
  }

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

  .md\:w-32 {
    width: 8rem;
  }

  .md\:w-4 {
    width: 1rem;
  }

  .md\:w-48 {
    width: 12rem;
  }

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

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

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

  .md\:flex-initial {
    flex: 0 1 auto;
  }

  .md\:basis-0 {
    flex-basis: 0px;
  }

  .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-\[minmax\(0\2c 1\.4fr\)_minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto;
  }

  .md\:grid-cols-\[minmax\(0\2c 10rem\)_1fr_3rem\] {
    grid-template-columns: minmax(0,10rem) 1fr 3rem;
  }

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

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

  .md\:gap-2 {
    gap: 0.5rem;
  }

  .md\:gap-3 {
    gap: 0.75rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  }

  .md\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }

  .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .md\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  }

  .md\:border-0 {
    border-width: 0px;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .md\:pb-0 {
    padding-bottom: 0px;
  }

  .md\:pb-12 {
    padding-bottom: 3rem;
  }

  .md\:pt-5 {
    padding-top: 1.25rem;
  }

  .md\:pt-6 {
    padding-top: 1.5rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:opacity-0 {
    opacity: 0;
  }

  .after\:md\:hidden::after {
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }

  .peer[data-state="collapsed"][data-variant="inset"] ~ .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2 {
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 16px;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
@media (min-width: 1024px) {

  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-2 {
    top: 0.5rem;
  }

  .lg\:top-4 {
    top: 1rem;
  }

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

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

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

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

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

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

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

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

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

  .lg\:w-full {
    width: 100%;
  }

  .lg\:\!max-w-\[760px\] {
    max-width: 760px !important;
  }

  .lg\:max-w-md {
    max-width: 28rem;
  }

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

  .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-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

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

  .lg\:grid-cols-\[14rem_1fr\] {
    grid-template-columns: 14rem 1fr;
  }

  .lg\:grid-cols-\[1fr_380px\] {
    grid-template-columns: 1fr 380px;
  }

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

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

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

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .lg\:pl-4 {
    padding-left: 1rem;
  }

  .lg\:pt-0 {
    padding-top: 0px;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1280px) {

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

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

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

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media print {

  .print\:block {
    display: block;
  }

  .print\:flex {
    display: flex;
  }

  .print\:grid {
    display: grid;
  }

  .print\:hidden {
    display: none;
  }

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

  .print\:overflow-visible {
    overflow: visible;
  }
}
.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\>\*\]\:shrink-0>* {
  flex-shrink: 0;
}
.\[\&\>button\]\:hidden>button {
  display: none;
}
.\[\&\>div\]\:min-w-0>div {
  min-width: 0px;
}
.\[\&\>div\]\:bg-orange-600>div {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.\[\&\>div\]\:bg-success\/90>div {
  background-color: hsl(var(--success) / 0.9);
}
.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}
.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}
.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}
.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}
.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}
.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}
.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}
.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}
.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}
.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}
.\[\&\>svg\]\:text-\[\#0EA5E9\]>svg {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.\[\&\>svg\]\:text-destructive>svg {
  color: hsl(var(--destructive));
}
.\[\&\>svg\]\:text-foreground>svg {
  color: hsl(var(--foreground));
}
.\[\&\>svg\]\:text-info>svg {
  color: hsl(var(--info));
}
.\[\&\>svg\]\:text-muted-foreground>svg {
  color: hsl(var(--muted-foreground));
}
.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: hsl(var(--sidebar-accent-foreground));
}
.\[\&\>svg\]\:text-success>svg {
  color: hsl(var(--success));
}
.\[\&\>svg\]\:text-warning-foreground>svg {
  color: hsl(var(--warning-foreground));
}
.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: hsl(var(--muted-foreground));
}
.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke='#ccc'] {
  stroke: hsl(var(--border) / 0.5);
}
.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: hsl(var(--border));
}
.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-layer\]\:outline-none .recharts-layer {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: hsl(var(--border));
}
.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: hsl(var(--muted));
}
.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: hsl(var(--muted));
}
.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: hsl(var(--border));
}
.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-sector\]\:outline-none .recharts-sector {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: hsl(var(--muted-foreground));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}
[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}
[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}
[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}
[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}
[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}
[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}
/* ============================================================
   KANFY — Global Visual Redesign v2.0
   Selector-level overrides that apply the --th-* design tokens
   to existing structural elements (no class changes in JSX).
   Imported in main.tsx after index.css.
   ============================================================ */

/* ── 1. Page Background ──────────────────────────────────── */
body {
  /* Goes through the theme token so light is cream and dark is ink.
     Was var(--th-navy-light) directly, which pinned the page to one
     literal colour regardless of mode. */
  background-color: hsl(var(--background));
}

/* ── 2. Header — Nav bar ─────────────────────────────────── */
/* Was a fixed navy gradient with white type forced on everything inside,
   which pinned the nav to one appearance in both themes. The brand nav is
   cream with a hairline border on light and near-black teal on dark, so
   this follows --bg-nav and lets the text tokens do the rest. */
header[role="banner"] {
  background: hsl(var(--bg-nav));
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: 0 1px 3px hsl(var(--kanfy-ink) / 0.06);
}

header[role="banner"] nav[aria-label="Main navigation"] a,
header[role="banner"] nav[aria-label="Main navigation"] button,
header[role="banner"] nav[aria-label="Main navigation"] span {
  color: hsl(var(--foreground));
}

header[role="banner"] nav[aria-label="Main navigation"] a:hover,
header[role="banner"] nav[aria-label="Main navigation"] button:hover {
  color: hsl(var(--foreground));
  background-color: hsl(var(--secondary));
}

/* Logo / emphasis text in the header follows the text token rather than
   being forced white.
   This is deliberately broad and load-bearing: several header controls (the
   language switcher among them) would otherwise render near-white on cream at
   ~1:1. Do NOT narrow it with :not(button) — that unmasks those. Controls that
   paint their own background must therefore also set their own colour inline,
   so they outrank this rule; see the "Get Started" CTA in Header.tsx. */
header[role="banner"] [class*="font-bold"],
header[role="banner"] [class*="font-semibold"] {
  color: hsl(var(--foreground));
}

/* ── 3. Hero Section ─────────────────────────────────────── */
section[aria-label="Find trusted helpers for your home"] h1 {
  color: #fff;
  text-shadow: 0 2px 12px rgba(15, 45, 78, 0.40);
}

section[aria-label="Find trusted helpers for your home"] h1 .text-primary {
  color: var(--th-teal-light);
  text-shadow: none;
}

section[aria-label="Find trusted helpers for your home"] p {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* ── 4. Stats Bar — ink in BOTH modes ────────────────────── */
/* Deliberately does not follow the theme: a fully cream page has no floor
   and ends weakly, and the ink strip is what makes light and dark read as
   the same site. Was #fff, which also meant a white band on the dark page. */
section[aria-label="Platform statistics"] {
  background: hsl(var(--kanfy-ink));
  border-bottom: 1px solid hsl(var(--kanfy-border-dark));
}

section[aria-label="Platform statistics"] .text-xl {
  color: hsl(var(--kanfy-cream));
  font-weight: 600;
}

section[aria-label="Platform statistics"] .text-muted-foreground,
section[aria-label="Platform statistics"] p {
  color: hsl(var(--kanfy-sec-ink));
}

/* ── 5. CTA Buttons — Primary Clay (action colour) ─────────── */
/* button.bg-primary resolves to hsl(var(--primary)) = clay #D9663D. Do not
   override it here — clay is the one thing that must look identical in
   both themes so the action is learned once. */

/* ── 6. Section Headings ─────────────────────────────────── */
/* Was pinned to var(--th-navy). Once that remapped to ink, every heading
   without its own text class became ink-on-ink in dark mode — invisible.
   Follows the text token now. */
main h1,
main h2 {
  color: hsl(var(--foreground));
}

main h3 {
  color: hsl(var(--foreground));
}

/* ── 7. Service Category Cards — Rainbow Top Borders ─────── */
section[aria-labelledby="services-heading"] > div > div > *:nth-child(8n + 1) { border-top: 3px solid var(--th-cat-child);  }
section[aria-labelledby="services-heading"] > div > div > *:nth-child(8n + 2) { border-top: 3px solid var(--th-cat-clean);  }
section[aria-labelledby="services-heading"] > div > div > *:nth-child(8n + 3) { border-top: 3px solid var(--th-cat-tutor);  }
section[aria-labelledby="services-heading"] > div > div > *:nth-child(8n + 4) { border-top: 3px solid var(--th-cat-sec);    }
section[aria-labelledby="services-heading"] > div > div > *:nth-child(8n + 5) { border-top: 3px solid var(--th-cat-elder);  }
section[aria-labelledby="services-heading"] > div > div > *:nth-child(8n + 6) { border-top: 3px solid var(--th-cat-maint);  }
section[aria-labelledby="services-heading"] > div > div > *:nth-child(8n + 7) { border-top: 3px solid var(--th-cat-pet);    }
section[aria-labelledby="services-heading"] > div > div > *:nth-child(8n + 8) { border-top: 3px solid var(--th-cat-repair); }

/* ── 8. Card Surfaces ────────────────────────────────────── */
/* Was a hard #fff, which painted white cards onto the ink page in dark
   mode. White is the light-mode card; dark mode uses teal. */
.bg-card {
  background-color: hsl(var(--card));
}

/* ── 9. Bottom Navigation — Navy + Teal Active ───────────── */
nav[aria-label="Bottom navigation"] {
  background: var(--th-navy);
  border-top-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 -4px 24px rgba(15, 45, 78, 0.28);
}

nav[aria-label="Bottom navigation"] a,
nav[aria-label="Bottom navigation"] button,
nav[aria-label="Bottom navigation"] span {
  color: rgba(255, 255, 255, 0.55);
}

nav[aria-label="Bottom navigation"] [aria-current="page"],
nav[aria-label="Bottom navigation"] [aria-current="page"] span,
nav[aria-label="Bottom navigation"] [aria-current="page"] svg {
  color: var(--th-teal);
}

nav[aria-label="Bottom navigation"] [aria-current="page"]::after {
  background-color: var(--th-teal);
}

/* ── 10. Footer — Navy Dark ──────────────────────────────── */
footer.bg-background {
  background: var(--th-navy);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.80);
}

footer.bg-background h3,
footer.bg-background h4,
footer.bg-background .text-foreground {
  color: #fff;
}

footer.bg-background p,
footer.bg-background .text-muted-foreground,
footer.bg-background a {
  color: rgba(255, 255, 255, 0.65);
}

footer.bg-background a:hover {
  color: var(--th-teal);
}

footer.bg-background .border-t,
footer.bg-background .border-b {
  border-color: rgba(255, 255, 255, 0.10);
}

footer.bg-background .bg-gradient-trust {
  background: var(--th-grad-teal);
}

/* ── 11. Admin Metric Cards — Coloured Left Borders ──────── */

/* ── 12. Progress Bar — Teal Gradient ───────────────────── */
[role="progressbar"] > div {
  background: var(--th-grad-progress);
}

/* ── 13. Status Badges ──────────────────────────────────── */
[class*="status-approved"]  { background-color: #DCFCE7; color: #166534; }
[class*="status-pending"]   { background-color: #FEF9C3; color: #854D0E; }
[class*="status-rejected"]  { background-color: #FEE2E2; color: #991B1B; }
[class*="status-suspended"] { background-color: var(--th-amber-bg); color: #92400E; }
[class*="status-completed"] { background-color: #DBEAFE; color: #1E40AF; }
[class*="status-cancelled"] { background-color: #F1F5F9; color: #475569; }

/* ── 14. Trust Badges ───────────────────────────────────── */
.bg-trust,
[class*="trust-light"] {
  background-color: hsl(var(--kanfy-teal-tint));
  color: hsl(var(--kanfy-teal));
}

/* ── 15. Input Focus Ring — Teal ─────────────────────────── */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.30);
  border-color: hsl(var(--ring));
}

/* ── 16. Star Ratings — Gold ─────────────────────────────── */
.fill-yellow-400,
[class*="fill-yellow"] {
  fill: var(--th-amber);
}
.text-yellow-400,
[class*="text-yellow-4"] {
  color: var(--th-amber);
}

/* ── 17. Toggle Switches — Teal ─────────────────────────── */
button[role="switch"][aria-checked="true"] {
  background: linear-gradient(90deg, var(--th-teal-dark), var(--th-teal));
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.3);
}

/* ── 18. Section Background Alternation ─────────────────── */
/* :not([class*="bg-"]) — only fills in a default for sections that don't
   declare their own background utility. Without it this unconditionally
   overrode any section's explicit bg-* class whose position happened to
   land on the matching parity (e.g. the homepage hero's solid
   bg-brand-navy, silently replaced with a pale --th-navy-light because
   it's main's first/odd child) — a real regression, not a style choice,
   since main > section:nth-child(odd)'s specificity (0,1,2) beats a
   single-class selector like .bg-brand-navy (0,1,0) regardless of source
   order. Most other pages' bg-gradient-* sections happened to visually
   survive this only because background-image paints over background-color,
   masking the same underlying override.

   Values go through the theme tokens rather than a literal #fff and a
   literal pale blue, so the alternation follows light/dark. */
main > section:not([class*="bg-"]):nth-child(even) {
  background-color: hsl(var(--card));
}

main > section:not([class*="bg-"]):nth-child(odd) {
  background-color: hsl(var(--background));
}

/* ============================================================
   MOBILE TRUNCATION FIXES
   ============================================================ */

/* ── FIX 1: Hero H1 too small on mobile ─────────────────── */
section h1.text-xl {
  font-size: 2rem !important;
  line-height: 1.15 !important;
}
@media (min-width: 640px) {
  section h1.text-xl { font-size: 3rem !important; }
}
@media (min-width: 768px) {
  section h1.text-xl { font-size: 3.75rem !important; }
}

/* ── FIX 2: Pricing section H2 too small on mobile ──────── */
section h2.text-xl {
  font-size: 1.5rem !important;
}

/* ── FIX 3: Hero chip strip — scroll fade hint ───────────── */
.overflow-x-auto.-mx-4 {
  position: relative;
}
@media (max-width: 639px) {
  .overflow-x-auto.-mx-4::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3));
    pointer-events: none;
    border-radius: 0 999px 999px 0;
  }
}

/* ── FIX 4: Hero H1 tighter letter-spacing on narrow screens */
@media (max-width: 639px) {
  section .max-w-3xl h1 {
    letter-spacing: -0.02em;
  }
}

/* ── FIX 5: Trust/Why-Choose H2/H3 — responsive font scale ─ */
@media (max-width: 639px) {
  section h2.text-3xl {
    font-size: 1.625rem !important;
    line-height: 1.2 !important;
  }
  section h3.text-3xl {
    font-size: 1.5rem !important;
  }
}

/* ── FIX 6: 2-col service grid — no clipping on 360px ───── */
@media (max-width: 380px) {
  .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem !important;
  }
  .grid.grid-cols-2 > * {
    min-width: 0;
    overflow: hidden;
  }
}

/* ── FIX 7: Hero search bar — stack properly below 480px ─── */
@media (max-width: 480px) {
  section[aria-label="Find trusted helpers for your home"] .rounded-2xl.bg-background\/90 {
    padding: 0.625rem !important;
  }
  section[aria-label="Find trusted helpers for your home"] .rounded-2xl input {
    min-width: 0;
    font-size: 1rem;
  }
}

/* ── FIX 8: Stats bar — no overflow on 380px ────────────── */
@media (max-width: 380px) {
  .grid.grid-cols-2.sm\:grid-cols-4 {
    gap: 0.75rem !important;
  }
  .grid.grid-cols-2.sm\:grid-cols-4 .text-2xl,
  .grid.grid-cols-2.sm\:grid-cols-4 .text-3xl {
    font-size: 1.25rem !important;
  }
}


/* ============================================================
DARK MODE OVERRIDES FOR REDESIGN.CSS
Ensures all hardcoded light-mode values in this file are
reversed when the .dark class is active on <html>.
============================================================ */

/* ── 4. Stats Bar — dark: background becomes card dark ──── */
.dark section[aria-label="Platform statistics"] {
  background: hsl(var(--card)) !important;
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.dark section[aria-label="Platform statistics"] .text-xl {
  color: hsl(142 71% 55%) !important;
}

/* ── 6. Section Headings — dark: use foreground colour ──── */
.dark main h1,
.dark main h2 {
  color: hsl(var(--foreground)) !important;
}
.dark main h3 {
  color: hsl(var(--card-foreground)) !important;
}

/* ── 8. Card Surfaces — dark: use card variable ─────────── */
.dark .bg-card {
  background-color: hsl(var(--card)) !important;
}

/* ── 10. Footer — dark: keep navy (it works) ────────────── */
/* Footer already has navy background so no change needed */

/* ── 13. Status Badges — dark: boost contrast ───────────── */
.dark [class*="status-approved"] { background-color: hsl(142 30% 15%) !important; color: hsl(142 71% 65%) !important; }
.dark [class*="status-pending"] { background-color: hsl(38 40% 15%) !important; color: hsl(38 92% 65%) !important; }
.dark [class*="status-rejected"] { background-color: hsl(0 40% 15%) !important; color: hsl(0 72% 70%) !important; }
.dark [class*="status-suspended"] { background-color: hsl(38 30% 12%) !important; color: hsl(38 80% 65%) !important; }
.dark [class*="status-completed"] { background-color: hsl(214 30% 15%) !important; color: hsl(214 91% 70%) !important; }
.dark [class*="status-cancelled"] { background-color: hsl(215 20% 18%) !important; color: hsl(215 16% 60%) !important; }

/* ── 14. Trust Badges — dark ───────────────────────────── */
.dark .bg-trust,
.dark [class*="trust-light"] {
  background-color: hsl(174 62% 15%) !important;
  color: hsl(174 62% 60%) !important;
}

/* ── 18. Section Background Alternation — dark mode ─────── */
/* In dark mode, alternate sections use dark card background, not white.
   Same :not([class*="bg-"]) exclusion as the light-mode rule above — this
   variant used !important, so without the exclusion it unconditionally
   beat any section's own explicit background in dark mode too. */
.dark main > section:not([class*="bg-"]):nth-child(even) {
  background-color: hsl(var(--card)) !important;
}
.dark main > section:not([class*="bg-"]):nth-child(odd) {
  background-color: hsl(var(--background)) !important;
}

/* ── body background in dark mode ───────────────────────── */
.dark body {
  background-color: hsl(var(--background)) !important;
}