@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-optical-sizing: auto;
}

*, ::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: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 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: var(--font-mono), 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;
}
  :root {
    --font-display: "Space Grotesk";
    --font-body: "DM Sans";
    --font-mono: "JetBrains Mono";
    --font-serif: "Fraunces";
    --radius: 0.875rem;

    /* Day mode — clean, bright, elegant. Warm cream with gold + emerald. */
    --background: 0.975 0.012 95;
    --foreground: 0.22 0.03 165;
    --card: 0.995 0.006 95;
    --card-foreground: 0.22 0.03 165;
    --popover: 0.995 0.006 95;
    --popover-foreground: 0.22 0.03 165;

    /* Primary = deep emerald green */
    --primary: 0.42 0.09 165;
    --primary-foreground: 0.98 0.01 95;

    /* Secondary / muted = soft warm stone */
    --secondary: 0.94 0.018 95;
    --secondary-foreground: 0.3 0.03 165;
    --muted: 0.94 0.018 95;
    --muted-foreground: 0.5 0.025 160;

    /* Accent = warm gold */
    --accent: 0.72 0.14 82;
    --accent-foreground: 0.2 0.04 70;

    --destructive: 0.55 0.2 25;
    --destructive-foreground: 0.98 0.01 25;

    --success: 0.55 0.13 160;
    --success-foreground: 0.98 0.01 160;
    --warning: 0.72 0.14 82;

    --border: 0.87 0.02 95;
    --input: 0.87 0.02 95;
    --ring: 0.72 0.14 82;

    /* Ambilight glow system — layered warm gold + emerald LED bloom */
    --glow-gold: 0 0 6px oklch(0.72 0.14 82 / 0.55), 0 0 24px
      oklch(0.72 0.14 82 / 0.4), 0 0 64px oklch(0.72 0.14 82 / 0.22);
    --glow-green: 0 0 6px oklch(0.42 0.09 165 / 0.45), 0 0 24px
      oklch(0.42 0.09 165 / 0.34), 0 0 64px oklch(0.42 0.09 165 / 0.18);
    --glow-soft: 0 10px 44px -10px oklch(0.72 0.14 82 / 0.3), 0 0 22px -6px
      oklch(0.72 0.14 82 / 0.22);
    --glow-edge: 0 0 0 1px oklch(0.72 0.14 82 / 0.3), 0 0 22px
      oklch(0.72 0.14 82 / 0.22);
    --glow-intense: 0 0 8px oklch(0.72 0.14 82 / 0.6), 0 0 30px
      oklch(0.72 0.14 82 / 0.45), 0 0 90px oklch(0.72 0.14 82 / 0.28);

    /* Ambient stage light */
    --stage-glow: radial-gradient(
      70% 55% at 50% 0%,
      oklch(0.72 0.14 82 / 0.14),
      transparent 70%
    );

    /* Glass surfaces */
    --glass-bg: oklch(0.995 0.006 95 / 0.72);
    --glass-border: oklch(0.72 0.14 82 / 0.24);
    --glass-blur: 18px;
    /* The hero designer panel uses a slightly crisper blur than the shared
       glass so the headline stays sharply readable through the surface. */
    --hero-panel-blur: 12px;
    --header-edge: oklch(0.72 0.14 82 / 0.45);

    --chart-1: 0.42 0.09 165;
    --chart-2: 0.72 0.14 82;
    --chart-3: 0.6 0.1 160;
    --chart-4: 0.58 0.12 25;
    --chart-5: 0.5 0.06 100;

    --sidebar: 0.995 0.006 95;
    --sidebar-foreground: 0.22 0.03 165;
    --sidebar-primary: 0.42 0.09 165;
    --sidebar-primary-foreground: 0.98 0.01 95;
    --sidebar-accent: 0.94 0.018 95;
    --sidebar-accent-foreground: 0.3 0.03 165;
    --sidebar-border: 0.87 0.02 95;
    --sidebar-ring: 0.72 0.14 82;

    --gradient-primary: linear-gradient(
      135deg,
      oklch(0.42 0.09 165),
      oklch(0.5 0.1 150)
    );
    --gradient-subtle: linear-gradient(
      180deg,
      oklch(0.99 0.008 95),
      oklch(0.955 0.016 95)
    );
    --gradient-gold: linear-gradient(
      135deg,
      oklch(0.86 0.13 88),
      oklch(0.7 0.14 78)
    );
    --gradient-hero: radial-gradient(
      120% 90% at 50% 0%,
      oklch(0.99 0.01 95),
      oklch(0.95 0.02 95)
    );
    --gradient-neon: linear-gradient(
      120deg,
      oklch(0.72 0.14 82),
      oklch(0.55 0.11 165),
      oklch(0.72 0.14 82)
    );

    /* Cinematic motion */
    --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --gold-dust: oklch(0.72 0.14 82 / 0.9);
    --gold-dust-soft: oklch(0.72 0.14 82 / 0.4);

    /* ---- Logistics map (day) ---- */
    --map-surface: 0.965 0.012 95;
    --map-grid: 0.9 0.014 95;
    --map-road: 0.86 0.016 95;
    --marker-driver: 0.42 0.09 165;
    --marker-driver-foreground: 0.98 0.01 95;
    --marker-customer: 0.72 0.14 82;
    --marker-customer-foreground: 0.2 0.04 70;
    /* Customer-account marker — a vivid royal blue, a third hue that is
       unmistakably apart from the gold route-stop pin (hue 82) and the emerald
       driver pill (hue 165). The glyph is a deep navy, not white, so the shop
       logo reads clearly on the bright royal-blue square instead of washing
       out. The ring is the wide contrasting border that separates the blue
       square from the light basemap. */
    --marker-customer-account: 0.5 0.17 255;
    --marker-customer-account-foreground: 0.16 0.04 258;
    --marker-customer-account-ring: 0.99 0.01 255;
    --marker-active: 0.5 0.12 160;
    --marker-done: 0.62 0.02 150;
    --route-line: 0.72 0.14 82;
    --route-line-done: 0.62 0.02 150;

    /* ---- Delivery tracking + delivery photo (day) ---- */
    /* The live driver marker on the customer's own tracking view reuses the
       emerald "moving now" language, with a gold halo so it reads as a bakery
       delivery rather than a generic map pin. */
    --track-live: 0.55 0.13 160;
    --track-live-ring: 0.72 0.14 82;
    --photo-frame: 0.9 0.016 95;
    --photo-frame-foreground: 0.5 0.025 160;

    /* ---- Ratings (admin-only, never alarm-red) ---- */
    --rating-star: 0.72 0.14 82;
    --rating-star-empty: 0.86 0.014 95;
    --rating-surface: 0.955 0.014 95;

    /* ---- Opening hours + holidays ---- */
    --hours-open: 0.55 0.13 160;
    --hours-closed: 0.5 0.025 160;
    --hours-holiday: 0.72 0.14 82;
    --notice-surface: 0.955 0.014 95;
    --notice-border: 0.87 0.02 95;

    /* ---- Emergency route sheet (paper, printable) ---- */
    --paper: 0.995 0.004 95;
    --paper-ink: 0.2 0.02 165;
    --paper-rule: 0.82 0.014 95;

    /* ---- Delivery fee / minimum order line ---- */
    --fee-line: 0.5 0.025 160;
    --fee-strong: 0.3 0.03 165;

    /* ---- Alhoceima motif (Moroccan / Mediterranean) ----
       A single terracotta-clay hue (hue 48) sits between the gold and the
       emerald without competing with either: it carries the zellige-style
       border rule and the footer band, so the Riff / Alhoceima warmth reads
       as an intentional third thread rather than a new palette. */
    --motif-clay: 0.62 0.11 48;
    --motif-clay-soft: 0.62 0.11 48 / 0.28;
    --motif-rule: 0.72 0.14 82 / 0.4;
    --motif-band: 0.955 0.02 60;
    --motif-band-foreground: 0.32 0.04 55;

    /* ---- Startup splash (logo + warm bakery wash, no text) ---- */
    --splash-bg: 0.975 0.014 88;
    --splash-glow: radial-gradient(
      60% 55% at 50% 42%,
      oklch(0.86 0.13 88 / 0.35),
      transparent 72%
    );
    --splash-ring: 0.72 0.14 82 / 0.55;

    /* ---- Bakery-in-operation bar (dashboard top strip) ---- */
    --ops-surface: 0.985 0.012 90;
    --ops-border: 0.87 0.02 80;
    --ops-oven: 0.62 0.11 48;
    --ops-bus: 0.55 0.13 160;
    --ops-today: 0.72 0.14 82;

    /* ---- Hero window palette (landing page) ----
       The big headline is a warm bright cream from the bakery palette, so it
       reads as fresh-baked ivory rather than plain white. The accent line keeps
       the rich bakery gold. The window frame is a gold neon line with a warm
       orange/brown undertone: a bright gold outer line over a deeper amber core,
       and the ambilight bloom reuses that same gold-to-amber combination. */
    --hero-heading: 0.97 0.035 88;
    --hero-frame-line: 0.78 0.15 78;
    --hero-frame-core: 0.62 0.13 62;
    --hero-frame-glow: 0.74 0.15 70;

    /* ---- Bread on a wooden board (order card) ---- */
    --board-wood: 0.55 0.06 62;
    --board-wood-edge: 0.42 0.05 55;
    --bread-crust: 0.72 0.11 68;
    --bread-crumb: 0.93 0.04 85;
    --board-shadow: 0 18px 40px -18px oklch(0.42 0.05 55 / 0.5);

    /* ---- Driver ride map (route fills, stops settle) ---- */
    --ride-track: 0.86 0.014 95;
    --ride-fill: 0.55 0.13 160;
    --ride-stop-done: 0.55 0.13 160;
    --ride-stop-next: 0.72 0.14 82;
    --ride-stop-pending: 0.8 0.014 95;

    /* ---- Today in the bakery (owner overview) ---- */
    --today-surface: 0.985 0.012 90;
    --today-figure: 0.42 0.09 165;
    --today-accent: 0.72 0.14 82;

    /* ---- Thank-you screen (order placed) ---- */
    --thanks-bg: 0.975 0.014 88;
    --thanks-glow: radial-gradient(
      65% 60% at 50% 38%,
      oklch(0.82 0.14 84 / 0.34),
      transparent 74%
    );
    --thanks-rise: 0.72 0.11 68;

    /* ---- WhatsApp share card (exported image) ---- */
    --share-card-bg: 0.99 0.008 90;
    --share-card-ink: 0.24 0.03 165;
    --share-card-rule: 0.72 0.14 82 / 0.5;
  }

  .dark {
    /* Night mode — the showpiece. Deep near-black green stage, glowing LED edges. */
    --background: 0.115 0.024 168;
    --foreground: 0.95 0.012 92;
    --card: 0.165 0.026 168;
    --card-foreground: 0.95 0.012 92;
    --popover: 0.175 0.026 168;
    --popover-foreground: 0.95 0.012 92;

    --primary: 0.78 0.15 82;
    --primary-foreground: 0.13 0.024 168;

    --secondary: 0.205 0.028 168;
    --secondary-foreground: 0.88 0.012 92;
    --muted: 0.205 0.028 168;
    --muted-foreground: 0.64 0.02 100;

    --accent: 0.78 0.15 82;
    --accent-foreground: 0.13 0.024 168;

    --destructive: 0.58 0.2 25;
    --destructive-foreground: 0.95 0.01 25;

    --success: 0.68 0.14 160;
    --success-foreground: 0.16 0.03 160;
    --warning: 0.78 0.15 85;

    --border: 0.26 0.03 168;
    --input: 0.26 0.03 168;
    --ring: 0.78 0.15 82;

    --glow-gold: 0 0 8px oklch(0.78 0.15 82 / 0.7), 0 0 30px
      oklch(0.78 0.15 82 / 0.5), 0 0 90px oklch(0.78 0.15 82 / 0.3);
    --glow-green: 0 0 8px oklch(0.58 0.12 165 / 0.6), 0 0 30px
      oklch(0.58 0.12 165 / 0.44), 0 0 90px oklch(0.58 0.12 165 / 0.26);
    --glow-soft: 0 12px 56px -10px oklch(0.78 0.15 82 / 0.44), 0 0 30px -8px
      oklch(0.78 0.15 82 / 0.3);
    --glow-edge: 0 0 0 1px oklch(0.78 0.15 82 / 0.42), 0 0 26px
      oklch(0.78 0.15 82 / 0.32);
    --glow-intense: 0 0 10px oklch(0.78 0.15 82 / 0.8), 0 0 40px
      oklch(0.78 0.15 82 / 0.55), 0 0 120px oklch(0.78 0.15 82 / 0.34);

    --stage-glow: radial-gradient(
      70% 55% at 50% 0%,
      oklch(0.78 0.15 82 / 0.16),
      transparent 70%
    );

    --glass-bg: oklch(0.19 0.028 168 / 0.55);
    --glass-border: oklch(0.78 0.15 82 / 0.32);
    --glass-blur: 22px;
    --hero-panel-blur: 14px;
    --header-edge: oklch(0.78 0.15 82 / 0.6);

    --chart-1: 0.78 0.15 82;
    --chart-2: 0.68 0.12 160;
    --chart-3: 0.62 0.1 100;
    --chart-4: 0.58 0.2 25;
    --chart-5: 0.5 0.08 168;

    --sidebar: 0.165 0.026 168;
    --sidebar-foreground: 0.95 0.012 92;
    --sidebar-primary: 0.78 0.15 82;
    --sidebar-primary-foreground: 0.13 0.024 168;
    --sidebar-accent: 0.205 0.028 168;
    --sidebar-accent-foreground: 0.88 0.012 92;
    --sidebar-border: 0.26 0.03 168;
    --sidebar-ring: 0.78 0.15 82;

    --gradient-primary: linear-gradient(
      135deg,
      oklch(0.78 0.15 82),
      oklch(0.58 0.11 70)
    );
    --gradient-subtle: linear-gradient(
      180deg,
      oklch(0.19 0.028 168),
      oklch(0.115 0.024 168)
    );
    --gradient-gold: linear-gradient(
      135deg,
      oklch(0.86 0.13 88),
      oklch(0.68 0.14 76)
    );
    --gradient-hero: radial-gradient(
      120% 90% at 50% 0%,
      oklch(0.21 0.032 168),
      oklch(0.1 0.024 168)
    );
    --gradient-neon: linear-gradient(
      120deg,
      oklch(0.86 0.13 88),
      oklch(0.6 0.12 165),
      oklch(0.86 0.13 88)
    );

    --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --gold-dust: oklch(0.82 0.14 84 / 0.95);
    --gold-dust-soft: oklch(0.82 0.14 84 / 0.45);

    /* ---- Logistics map (night) ---- */
    --map-surface: 0.145 0.024 168;
    --map-grid: 0.24 0.028 168;
    --map-road: 0.3 0.03 168;
    --marker-driver: 0.78 0.15 82;
    --marker-driver-foreground: 0.13 0.024 168;
    --marker-customer: 0.82 0.14 84;
    --marker-customer-foreground: 0.13 0.024 168;
    /* Night mode: a brighter royal blue that stays clearly readable against the
       dark map, with the near-black stage colour for the glyph. The near-white
       ring keeps the wide contrasting border in night mode too. */
    --marker-customer-account: 0.68 0.16 255;
    --marker-customer-account-foreground: 0.13 0.024 168;
    --marker-customer-account-ring: 0.99 0.01 255;
    --marker-active: 0.68 0.14 160;
    --marker-done: 0.44 0.02 160;
    --route-line: 0.78 0.15 82;
    --route-line-done: 0.44 0.02 160;

    /* ---- Delivery tracking + delivery photo (night) ---- */
    --track-live: 0.68 0.14 160;
    --track-live-ring: 0.78 0.15 82;
    --photo-frame: 0.26 0.03 168;
    --photo-frame-foreground: 0.64 0.02 100;

    /* ---- Ratings (admin-only, never alarm-red) ---- */
    --rating-star: 0.82 0.14 84;
    --rating-star-empty: 0.32 0.026 168;
    --rating-surface: 0.205 0.028 168;

    /* ---- Opening hours + holidays ---- */
    --hours-open: 0.68 0.14 160;
    --hours-closed: 0.64 0.02 100;
    --hours-holiday: 0.82 0.14 84;
    --notice-surface: 0.205 0.028 168;
    --notice-border: 0.26 0.03 168;

    /* ---- Emergency route sheet (paper, printable) ---- */
    --paper: 0.99 0.006 95;
    --paper-ink: 0.18 0.02 165;
    --paper-rule: 0.8 0.016 95;

    /* ---- Delivery fee / minimum order line ---- */
    --fee-line: 0.64 0.02 100;
    --fee-strong: 0.95 0.012 92;

    /* ---- Alhoceima motif (Moroccan / Mediterranean) ---- */
    --motif-clay: 0.74 0.12 52;
    --motif-clay-soft: 0.74 0.12 52 / 0.34;
    --motif-rule: 0.78 0.15 82 / 0.5;
    --motif-band: 0.19 0.03 52;
    --motif-band-foreground: 0.86 0.06 68;

    /* ---- Startup splash (logo + warm bakery wash, no text) ---- */
    --splash-bg: 0.115 0.024 168;
    --splash-glow: radial-gradient(
      60% 55% at 50% 42%,
      oklch(0.78 0.15 82 / 0.3),
      transparent 72%
    );
    --splash-ring: 0.78 0.15 82 / 0.6;

    /* ---- Bakery-in-operation bar (dashboard top strip) ---- */
    --ops-surface: 0.185 0.026 168;
    --ops-border: 0.28 0.03 168;
    --ops-oven: 0.74 0.12 52;
    --ops-bus: 0.68 0.14 160;
    --ops-today: 0.78 0.15 82;

    /* ---- Hero window palette (landing page, night mode) ----
       The same warm cream headline and gold-with-amber-undertone frame, lifted
       slightly so both stay crisp and high-contrast on the dark hero stage. */
    --hero-heading: 0.98 0.03 90;
    --hero-frame-line: 0.82 0.15 78;
    --hero-frame-core: 0.68 0.14 64;
    --hero-frame-glow: 0.8 0.15 72;

    /* ---- Bread on a wooden board (order card) ---- */
    --board-wood: 0.4 0.05 58;
    --board-wood-edge: 0.28 0.04 52;
    --bread-crust: 0.74 0.12 70;
    --bread-crumb: 0.9 0.05 84;
    --board-shadow: 0 20px 46px -18px oklch(0.05 0.01 60 / 0.7);

    /* ---- Driver ride map (route fills, stops settle) ---- */
    --ride-track: 0.26 0.03 168;
    --ride-fill: 0.68 0.14 160;
    --ride-stop-done: 0.68 0.14 160;
    --ride-stop-next: 0.78 0.15 82;
    --ride-stop-pending: 0.34 0.026 168;

    /* ---- Today in the bakery (owner overview) ---- */
    --today-surface: 0.185 0.026 168;
    --today-figure: 0.78 0.15 82;
    --today-accent: 0.78 0.15 82;

    /* ---- Thank-you screen (order placed) ---- */
    --thanks-bg: 0.115 0.024 168;
    --thanks-glow: radial-gradient(
      65% 60% at 50% 38%,
      oklch(0.78 0.15 82 / 0.3),
      transparent 74%
    );
    --thanks-rise: 0.78 0.12 70;

    /* ---- WhatsApp share card (exported image, always light paper) ---- */
    --share-card-bg: 0.99 0.008 90;
    --share-card-ink: 0.24 0.03 165;
    --share-card-rule: 0.72 0.14 82 / 0.5;
  }

  * {
  border-color: oklch(var(--border));
}
  body {
  background-color: oklch(var(--background));
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
}
.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-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-bottom-6 {
  bottom: -1.5rem;
}
.-left-12 {
  left: -3rem;
}
.-left-2 {
  left: -0.5rem;
}
.-left-24 {
  left: -6rem;
}
.-right-12 {
  right: -3rem;
}
.-right-16 {
  right: -4rem;
}
.-right-2 {
  right: -0.5rem;
}
.-top-12 {
  top: -3rem;
}
.-top-2 {
  top: -0.5rem;
}
.-top-6 {
  top: -1.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1\/4 {
  bottom: 25%;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-1\/3 {
  left: 33.333333%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-16 {
  right: 4rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-1\/4 {
  top: 25%;
}
.top-10 {
  top: 2.5rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-start-1 {
  grid-column-start: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-m-3 {
  margin: -0.75rem;
}
.-m-8 {
  margin: -2rem;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-3\.5 {
  margin-left: -0.875rem;
  margin-right: -0.875rem;
}
.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-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.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;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-3\.5 {
  margin-top: -0.875rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.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-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-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 {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-\[9\/16\] {
  aspect-ratio: 9/16;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-16 {
  width: 4rem;
  height: 4rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-48 {
  width: 12rem;
  height: 12rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-56 {
  width: 14rem;
  height: 14rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-72 {
  width: 18rem;
  height: 18rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-80 {
  width: 20rem;
  height: 20rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.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-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[18rem\] {
  height: 18rem;
}
.h-\[28rem\] {
  height: 28rem;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.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-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-32 {
  max-height: 8rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[45vh\] {
  max-height: 45vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[24rem\] {
  min-height: 24rem;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[70vh\] {
  min-height: 70vh;
}
.min-h-\[92vh\] {
  min-height: 92vh;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-12 {
  width: 3rem;
}
.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\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/5 {
  width: 80%;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[5\.5rem\] {
  width: 5.5rem;
}
.w-\[6\.5rem\] {
  width: 6.5rem;
}
.w-\[7\.5rem\] {
  width: 7.5rem;
}
.w-\[88vw\] {
  width: 88vw;
}
.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-10 {
  min-width: 2.5rem;
}
.min-w-11 {
  min-width: 2.75rem;
}
.min-w-14 {
  min-width: 3.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[85\%\] {
  max-width: 85%;
}
.max-w-\[92\%\] {
  max-width: 92%;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-none {
  flex: none;
}
.flex-shrink {
  flex-shrink: 1;
}
.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-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-\[-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-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-\[-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-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  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));
}
.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 ambient-shift {

  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.85;
  }

  50% {
    transform: translate3d(24px, -18px, 0) scale(1.12);
    opacity: 1;
  }
}
.animate-ambient-shift {
  animation: ambient-shift 16s ease-in-out infinite;
}
@keyframes bloom {

  0%, 100% {
    opacity: 0.4;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.85;
    transform: scale(1.04);
  }
}
.animate-bloom {
  animation: bloom 7s ease-in-out infinite;
}
@keyframes dust-float {

  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translateY(-120px) translateX(24px);
    opacity: 0;
  }
}
.animate-dust-float {
  animation: dust-float 9s ease-in infinite;
}
@keyframes float {

  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}
@keyframes led-breathe {

  0%, 100% {
    box-shadow: var(--glow-soft);
  }

  50% {
    box-shadow: var(--glow-gold);
  }
}
.animate-led-breathe {
  animation: led-breathe 5s ease-in-out infinite;
}
@keyframes marquee {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  animation: marquee 28s linear infinite;
}
@keyframes orb-drift {

  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(30px, -40px, 0) scale(1.15);
  }

  100% {
    transform: translate3d(-20px, 10px, 0) scale(0.95);
  }
}
.animate-orb-drift {
  animation: orb-drift 14s ease-in-out infinite;
}
@keyframes pulse {

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

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes word-reveal {

  from {
    transform: translateY(110%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-word-reveal {
  animation: word-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-cols-\[1fr_auto_auto_auto\] {
  grid-template-columns: 1fr auto auto auto;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.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-items-start {
  justify-items: start;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.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-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-5 {
  row-gap: 1.25rem;
}
.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-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-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * 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-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));
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: 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;
}
.overflow-x-clip {
  overflow-x: clip;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[0\.25rem\] {
  border-radius: 0.25rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-\[var\(--radius\)\] {
  border-radius: var(--radius);
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-bl-sm {
  border-bottom-left-radius: calc(var(--radius) - 4px);
}
.rounded-br-sm {
  border-bottom-right-radius: calc(var(--radius) - 4px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-accent {
  --tw-border-opacity: 1;
  border-color: oklch(var(--accent) / var(--tw-border-opacity, 1));
}
.border-accent\/25 {
  border-color: oklch(var(--accent) / 0.25);
}
.border-accent\/40 {
  border-color: oklch(var(--accent) / 0.4);
}
.border-accent\/50 {
  border-color: oklch(var(--accent) / 0.5);
}
.border-accent\/60 {
  border-color: oklch(var(--accent) / 0.6);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-current {
  border-color: currentColor;
}
.border-destructive\/30 {
  border-color: oklch(var(--destructive) / 0.3);
}
.border-input {
  border-color: oklch(var(--input));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/40 {
  border-color: oklch(var(--primary) / 0.4);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.\!bg-\[var\(--marker-customer-account\)\] {
  background-color: var(--marker-customer-account) !important;
}
.bg-\[\#25D366\] {
  --tw-bg-opacity: 1;
  background-color: rgb(37 211 102 / var(--tw-bg-opacity, 1));
}
.bg-\[var\(--marker-customer-account\)\] {
  background-color: var(--marker-customer-account);
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-accent\/10 {
  background-color: oklch(var(--accent) / 0.1);
}
.bg-accent\/15 {
  background-color: oklch(var(--accent) / 0.15);
}
.bg-accent\/25 {
  background-color: oklch(var(--accent) / 0.25);
}
.bg-accent\/5 {
  background-color: oklch(var(--accent) / 0.05);
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/90 {
  background-color: rgb(0 0 0 / 0.9);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-current {
  background-color: currentColor;
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive\/10 {
  background-color: oklch(var(--destructive) / 0.1);
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted-foreground\/60 {
  background-color: oklch(var(--muted-foreground) / 0.6);
}
.bg-muted\/30 {
  background-color: oklch(var(--muted) / 0.3);
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary-foreground {
  background-color: oklch(var(--primary-foreground));
}
.bg-primary\/15 {
  background-color: oklch(var(--primary) / 0.15);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-primary\/25 {
  background-color: oklch(var(--primary) / 0.25);
}
.bg-primary\/5 {
  background-color: oklch(var(--primary) / 0.05);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary\/40 {
  background-color: oklch(var(--secondary) / 0.4);
}
.bg-secondary\/60 {
  background-color: oklch(var(--secondary) / 0.6);
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-success {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--success) / var(--tw-bg-opacity, 1));
}
.bg-success\/15 {
  background-color: oklch(var(--success) / 0.15);
}
.bg-transparent {
  background-color: transparent;
}
.\!bg-\[linear-gradient\(155deg\2c oklch\(0\.74_0\.16_255\)_0\%\2c var\(--marker-customer-account\)_48\%\2c oklch\(0\.33_0\.13_258\)_100\%\)\] {
  background-image: linear-gradient(155deg,oklch(0.74 0.16 255) 0%,var(--marker-customer-account) 48%,oklch(0.33 0.13 258) 100%) !important;
}
.fill-accent {
  fill: oklch(var(--accent) / 1);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.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-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.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;
}
.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-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.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;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-3\.5 {
  padding-top: 0.875rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-body {
  font-family: var(--font-body), sans-serif;
}
.font-display {
  font-family: var(--font-display), serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.font-serif {
  font-family: var(--font-serif), Georgia, 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-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[0\.6875rem\] {
  font-size: 0.6875rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[clamp\(0\.5rem\2c 2\.4vw\2c 1\.25rem\)\] {
  font-size: clamp(0.5rem, 2.4vw, 1.25rem);
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.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-\[1\.05\] {
  line-height: 1.05;
}
.leading-none {
  line-height: 1;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.4em\] {
  letter-spacing: 0.4em;
}
.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-\[var\(--marker-customer-account-foreground\)\] {
  color: var(--marker-customer-account-foreground) !important;
}
.\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.text-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-accent\/40 {
  color: oklch(var(--accent) / 0.4);
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-success {
  --tw-text-opacity: 1;
  color: oklch(var(--success) / var(--tw-text-opacity, 1));
}
.text-success-foreground {
  color: oklch(var(--success-foreground));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.decoration-accent {
  text-decoration-color: oklch(var(--accent) / 1);
}
.decoration-accent\/50 {
  text-decoration-color: oklch(var(--accent) / 0.5);
}
.decoration-2 {
  text-decoration-thickness: 2px;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-primary {
  accent-color: oklch(var(--primary) / 1);
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.\!shadow-\[inset_0_1px_0_oklch\(0\.99_0\.01_255_\/_0\.9\)\2c inset_0_-3px_6px_oklch\(0\.22_0\.09_258_\/_0\.55\)\2c 0_0_0_2px_oklch\(0\.5_0\.17_255_\/_0\.55\)\2c 0_0_20px_5px_oklch\(0\.5_0\.17_255_\/_0\.4\)\] {
  --tw-shadow: inset 0 1px 0 oklch(0.99 0.01 255 / 0.9),inset 0 -3px 6px oklch(0.22 0.09 258 / 0.55),0 0 0 2px oklch(0.5 0.17 255 / 0.55),0 0 20px 5px oklch(0.5 0.17 255 / 0.4) !important;
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), inset 0 -3px 6px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color), 0 0 20px 5px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.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-\[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_1px_0_0_oklch\(0\.72_0\.14_82_\/_0\.12\)\] {
  --tw-shadow: 0 1px 0 0 oklch(0.72 0.14 82 / 0.12);
  --tw-shadow-colored: 0 1px 0 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-card {
  --tw-shadow: 0 1px 2px 0 oklch(0.22 0.03 165 / 0.04), 0 8px 24px -12px oklch(0.22 0.03 165 / 0.12);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color), 0 8px 24px -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-elevated {
  --tw-shadow: 0 10px 30px -12px oklch(0.22 0.03 165 / 0.18);
  --tw-shadow-colored: 0 10px 30px -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-glow-edge {
  --tw-shadow: var(--glow-edge);
  --tw-shadow-colored: var(--glow-edge);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow-gold {
  --tw-shadow: var(--glow-gold);
  --tw-shadow-colored: var(--glow-gold);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow-green {
  --tw-shadow: var(--glow-green);
  --tw-shadow-colored: var(--glow-green);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow-intense {
  --tw-shadow: var(--glow-intense);
  --tw-shadow-colored: var(--glow-intense);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow-soft {
  --tw-shadow: var(--glow-soft);
  --tw-shadow-colored: var(--glow-soft);
  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-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-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-subtle {
  --tw-shadow: 0 1px 3px 0 oklch(0.22 0.03 165 / 0.06), 0 1px 2px -1px oklch(0.22 0.03 165 / 0.06);
  --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-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 0 rgba(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-card {
  --tw-shadow-color: oklch(var(--card));
  --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-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-accent {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--accent) / var(--tw-ring-opacity, 1));
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-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);
}
.blur-3xl {
  --tw-blur: blur(64px);
  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-filter {
  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-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  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 opacity\] {
  transition-property: margin,opacity;
  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-none {
  transition-property: none;
}
.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;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.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);
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@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-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.duration-700 {
  animation-duration: 700ms;
}
.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);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
  .transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bg-gradient-primary {
    background-image: var(--gradient-primary);
  }

  .bg-gradient-subtle {
    background-image: var(--gradient-subtle);
  }

  .bg-gradient-neon {
    background-image: var(--gradient-neon);
  }

  .text-gradient-primary {
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* ---- Neon LED / Ambilight glow system ---- */
  .shadow-glow-gold {
    box-shadow: var(--glow-gold);
  }

  .shadow-glow-green {
    box-shadow: var(--glow-green);
  }

  .shadow-glow-soft {
    box-shadow: var(--glow-soft);
  }

  .shadow-glow-edge {
    box-shadow: var(--glow-edge);
  }

  .shadow-glow-intense {
    box-shadow: var(--glow-intense);
  }

  /* Glass surface: frosted, luminous, softly lit from within */
  .glass {
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid var(--glass-border);
  }

  .glass-card {
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--glow-soft);
  }

  /* Premium square designer window around the hero copy.
     Frame only: no filled background and no own colour surface, so the
     landing page's own background, motion and atmosphere stay visible
     straight through the window. The frame is a bright gold neon line with a
     warm orange/brown undertone — a gold outer line over a deeper amber core —
     and a soft ambilight bloom radiating outward in the same gold-to-amber
     combination, so the window reads as a warm bakery-lit edge. */
  .hero-panel {
    position: relative;
    isolation: isolate;
    background-color: transparent;
    border: 1.5px solid var(--hero-frame-line);
    border-radius: 0;
    box-shadow: 0 0 0 1px oklch(0.62 0.13 62 / 0.4), 0 0 10px
      oklch(0.78 0.15 78 / 0.55), 0 0 30px oklch(0.74 0.15 70 / 0.4), 0 0 70px
      oklch(0.62 0.13 62 / 0.24);
  }

  .dark .hero-panel {
    border-color: var(--hero-frame-line);
    box-shadow: 0 0 0 1px oklch(0.68 0.14 64 / 0.5), 0 0 12px
      oklch(0.82 0.15 78 / 0.7), 0 0 36px oklch(0.8 0.15 72 / 0.5), 0 0 90px
      oklch(0.68 0.14 64 / 0.32);
  }

  /* A soft ambilight bloom that bleeds outward from the frame, so the window
     reads as a lit edge rather than a flat outline. Purely a glow — it adds
     no fill and no new colour, and it follows the frame's gold-to-amber
     combination. */
  .hero-panel::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    box-shadow: 0 0 24px 4px oklch(0.74 0.15 70 / 0.28), 0 0 60px 12px
      oklch(0.62 0.13 62 / 0.16);
    pointer-events: none;
    z-index: -1;
  }

  .dark .hero-panel::after {
    box-shadow: 0 0 28px 5px oklch(0.8 0.15 72 / 0.34), 0 0 72px 16px
      oklch(0.68 0.14 64 / 0.2);
  }

  /* The big hero headline: a warm bright cream from the bakery palette, so it
     reads as fresh-baked ivory and stays crisp and high-contrast on the dark
     hero background. */
  .hero-heading-text {
    color: var(--hero-heading);
  }

  /* Floating 3D hero text: the copy lifts off the page with a layered drop
     shadow and a subtle depth tilt, so it reads as hovering in the air inside
     the window. Applies to both the big headline and the small line.

     The depth is built from many closely-spaced, low-opacity layers instead of
     a few hard offsets: each step adds only a little darkness, so the shadow
     accumulates into a soft, evenly distributed gradient with no hard edge and
     no blotchy banding. The layers stay tight near the glyphs (the crisp
     contact shadow) and fan out gently (the ambient lift), so the text reads as
     genuinely floating rather than stamped on. */
  .hero-float-text {
    transform: translateZ(0);
    text-shadow:
      0 1px 1px oklch(0.22 0.03 165 / 0.16), 0 2px 2px
      oklch(0.22 0.03 165 / 0.14), 0 3px 4px oklch(0.22 0.03 165 / 0.12), 0 5px
      7px oklch(0.22 0.03 165 / 0.1), 0 8px 12px oklch(0.22 0.03 165 / 0.09), 0
      12px 18px oklch(0.22 0.03 165 / 0.07), 0 18px 26px
      oklch(0.22 0.03 165 / 0.05);
  }

  .dark .hero-float-text {
    text-shadow:
      0 1px 1px oklch(0.05 0.01 168 / 0.3), 0 2px 2px
      oklch(0.05 0.01 168 / 0.26), 0 3px 4px oklch(0.05 0.01 168 / 0.22), 0 5px
      7px oklch(0.05 0.01 168 / 0.19), 0 8px 12px oklch(0.05 0.01 168 / 0.16), 0
      12px 18px oklch(0.05 0.01 168 / 0.13), 0 18px 26px
      oklch(0.05 0.01 168 / 0.1);
  }

  /* The gold accent line keeps its crisp, fully opaque gold (see .neon-text)
     and only gains a soft depth shadow beneath it — never a blurry halo. The
     depth shadow uses the frame's warm amber/brown undertone so the accent line
     and the window edge read as one warm bakery-lit combination. Like the
     headline, the depth is layered from many low-opacity steps so the accent
     line lifts off the background evenly without a hard or blotchy edge. */
  .hero-float-text .neon-text {
    text-shadow:
      0 1px 1px oklch(0.42 0.09 58 / 0.2), 0 2px 2px
      oklch(0.42 0.09 58 / 0.17), 0 3px 4px oklch(0.42 0.09 58 / 0.14), 0 5px
      7px oklch(0.42 0.09 58 / 0.12), 0 8px 12px oklch(0.42 0.09 58 / 0.1), 0
      12px 18px oklch(0.42 0.09 58 / 0.08);
  }

  /* Luminous edge for buttons, cards and interactive elements */
  .glow-edge {
    box-shadow: var(--glow-soft);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s
      cubic-bezier(0.4, 0, 0.2, 1);
  }

  .glow-edge:hover,
  .glow-edge:focus-visible {
    box-shadow: var(--glow-gold);
    transform: translateY(-2px);
  }

  /* Layered LED edge: a soft inner light + an animated gradient rim */
  .glow-edge {
    position: relative;
    isolation: isolate;
  }

  .glow-edge::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--gradient-neon);
    background-size: 220% 220%;
    -webkit-mask: linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    transition: opacity 0.3s var(--ease-cinematic);
    pointer-events: none;
    z-index: -1;
  }

  .glow-edge:hover::before,
  .glow-edge:focus-visible::before {
    opacity: 1;
    animation: edge-sweep 4s linear infinite;
  }

  /* Soft golden halo ring around the round bakery logo — mobile-safe */
  .logo-glow-ring {
    box-shadow: 0 0 0 1px oklch(0.72 0.14 82 / 0.6), var(--glow-gold);
    border-radius: 9999px;
    flex-shrink: 0;
  }

  .dark .logo-glow-ring {
    box-shadow: 0 0 0 1px oklch(0.82 0.15 84 / 0.7), var(--glow-gold);
  }

  /* Header brand video: circular, cropped, and never taller than its ring */
  video.logo-glow-ring {
    display: block;
    background-color: var(--card);
    -o-object-fit: cover;
       object-fit: cover;
    overflow: hidden;
  }

  /* Luminous bottom edge for the glass header */
  .header-edge {
    position: relative;
  }

  .header-edge::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--header-edge),
      transparent
    );
    box-shadow: 0 0 18px var(--header-edge);
    pointer-events: none;
  }

  /* Text that glows with the gold accent */
  .text-glow {
    text-shadow: 0 0 18px oklch(0.72 0.14 82 / 0.55), 0 0 44px
      oklch(0.72 0.14 82 / 0.3);
  }

  /* Kept as a no-op so the accent line stays crisp: no blurry gold halo. */
  .text-glow-strong {
    text-shadow: none;
  }

  /* Sharp, fully opaque gold accent headline text.
     No gradient clipping, no transparency and no drop-shadow, so the letters
     stay crisp and readable on the dark hero background. */
  .neon-text {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--accent);
    filter: none;
    text-shadow: none;
  }

  /* Ambilight ambient orbs bleeding from the edges */
  .ambilight {
    background: radial-gradient(
        40% 45% at 8% 12%,
        oklch(0.76 0.15 82 / 0.2),
        transparent 70%
      ),
      radial-gradient(
        45% 50% at 92% 20%,
        oklch(0.42 0.09 165 / 0.24),
        transparent 70%
      ),
      radial-gradient(
        50% 45% at 85% 90%,
        oklch(0.76 0.15 82 / 0.14),
        transparent 70%
      ),
      radial-gradient(
        40% 40% at 10% 85%,
        oklch(0.48 0.1 165 / 0.18),
        transparent 70%
      );
  }

  .dark .ambilight {
    background: radial-gradient(
        40% 45% at 8% 12%,
        oklch(0.78 0.15 82 / 0.34),
        transparent 70%
      ),
      radial-gradient(
        45% 50% at 92% 20%,
        oklch(0.58 0.12 165 / 0.46),
        transparent 70%
      ),
      radial-gradient(
        50% 45% at 85% 90%,
        oklch(0.78 0.15 82 / 0.26),
        transparent 70%
      ),
      radial-gradient(
        40% 40% at 10% 85%,
        oklch(0.62 0.12 165 / 0.34),
        transparent 70%
      );
  }

  /* Top stage light wash for the hero */
  .stage-glow {
    background-image: var(--stage-glow);
  }

  /* ---- Cinematic hero stage ---- */
  .bg-gradient-hero {
    background-image: var(--gradient-hero);
  }

  .bg-gradient-gold {
    background-image: var(--gradient-gold);
  }

  /* Floating ambilight light orbs (drift, parallax-ready) */
  .orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(28px);
    will-change: transform;
    pointer-events: none;
  }

  .orb-gold {
    background: radial-gradient(
      circle at 30% 30%,
      oklch(0.86 0.13 88 / 0.55),
      oklch(0.72 0.14 82 / 0.18) 55%,
      transparent 72%
    );
  }

  .orb-green {
    background: radial-gradient(
      circle at 30% 30%,
      oklch(0.55 0.11 165 / 0.5),
      oklch(0.42 0.09 165 / 0.18) 55%,
      transparent 72%
    );
  }

  /* Gold dust particles drifting in the light */
  .gold-dust {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--gold-dust);
    box-shadow: 0 0 8px 2px var(--gold-dust-soft);
    pointer-events: none;
    will-change: transform, opacity;
  }

  /* Word-by-word title reveal: each word is masked and slides up.
     `overflow-clip-margin` lets the floating 3D text shadow paint beyond the
     mask box once the word has settled, so the depth effect is not clipped. */
  .reveal-word {
    display: inline-block;
    overflow: hidden;
    overflow-clip-margin: 1.5rem;
    vertical-align: bottom;
  }

  .reveal-word > span {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    will-change: transform, opacity;
  }

  /* Magnetic button lift + glow */
  .magnetic {
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s
      var(--ease-cinematic);
  }

  /* 3D-tilt hero image wrapper — real perspective depth */
  .tilt-3d {
    transform-style: preserve-3d;
    perspective: 1200px;
    will-change: transform;
  }

  .tilt-3d > * {
    transform: translateZ(40px);
    transform-style: preserve-3d;
  }

  /* Interactive hover-tilt: lift + subtle 3D rotation */
  .tilt-hover {
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease-cinematic), box-shadow 0.5s
      var(--ease-cinematic);
  }

  .tilt-hover:hover {
    transform: perspective(1000px) rotateX(4deg) rotateY(-5deg) translateY(-8px)
      scale(1.02);
    box-shadow: var(--glow-intense);
  }

  /* Pulsing CTA ring */
  .pulse-ring {
    position: relative;
  }

  .pulse-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 oklch(0.72 0.14 82 / 0.5);
    animation: pulse-ring 2.4s var(--ease-cinematic) infinite;
    pointer-events: none;
  }

  /* ---- Chat launcher ---- */
  /* Keeps the floating assistant clear of the home indicator on notched
     phones while staying comfortably inside the viewport. The resting state
     is always fully visible: if the entrance animation never runs, the button
     is still shown rather than stuck at opacity 0. */
  .chat-launcher {
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    left: calc(1rem + env(safe-area-inset-left, 0px));
    opacity: 1;
    transform: none;
    /* A clearly blue, unmistakably button-like launcher. The blue is fixed
       (not the theme primary, which is gold in night mode) so the assistant
       button always reads as a blue action button in every theme. */
    background-color: oklch(0.55 0.19 255);
    color: oklch(0.99 0.01 255);
    border: 1px solid oklch(0.68 0.16 255 / 0.7);
    box-shadow: 0 0 0 1px oklch(0.55 0.19 255 / 0.35), 0 10px 30px -8px
      oklch(0.5 0.2 255 / 0.55), 0 0 26px -6px oklch(0.6 0.19 255 / 0.5);
  }

  .chat-launcher:hover,
  .chat-launcher:focus-visible {
    background-color: oklch(0.6 0.19 255);
    box-shadow: 0 0 0 1px oklch(0.6 0.19 255 / 0.5), 0 12px 34px -8px
      oklch(0.5 0.2 255 / 0.65), 0 0 34px -4px oklch(0.62 0.19 255 / 0.6);
  }

  @media (min-width: 640px) {
    .chat-launcher {
      bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
      left: calc(1.5rem + env(safe-area-inset-left, 0px));
    }
  }

  /* ---- Floating "Nieuwe bestelling" action (customer dashboard) ---- */
  /* The order action floats together with the AI-assistant launcher: it shares
     the launcher's left anchor and sits directly ABOVE it, so the two buttons
     travel as one cluster instead of the order button drifting off to the
     bottom-right. The vertical offset clears the launcher's own height (h-14 =
     3.5rem) plus a small gap, so the two never overlap on mobile or desktop.
     Both stay fixed to the viewport, so they remain visible while scrolling.

     `position: fixed` is declared here explicitly: the button also carries the
     `.glow-edge` utility, which sets `position: relative` for its LED rim. Both
     selectors have the same specificity, so source order decides — and this
     rule comes later in the utilities layer, so the button is genuinely fixed
     to the viewport instead of being pulled back into the page flow. `right`
     is reset to `auto` so the left anchor is the only horizontal constraint. */
  .account-order-fab {
    position: fixed;
    right: auto;
    bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
    left: calc(1rem + env(safe-area-inset-left, 0px));
  }

  @media (min-width: 640px) {
    .account-order-fab {
      bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px));
      left: calc(1.5rem + env(safe-area-inset-left, 0px));
    }
  }

  /* A soft, continuous blue attention pulse so the launcher is easy to spot
     without being distracting. */
  .chat-launcher::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 oklch(0.6 0.19 255 / 0.6);
    animation: pulse-ring 2.8s var(--ease-cinematic) infinite;
    pointer-events: none;
  }

  .dark .chat-launcher {
    background-color: oklch(0.6 0.19 255);
    color: oklch(0.99 0.01 255);
    border-color: oklch(0.72 0.16 255 / 0.75);
    box-shadow: 0 0 0 1px oklch(0.6 0.19 255 / 0.45), 0 12px 34px -8px
      oklch(0.5 0.2 255 / 0.7), 0 0 34px -4px oklch(0.66 0.19 255 / 0.6);
  }

  .dark .chat-launcher::after {
    box-shadow: 0 0 0 0 oklch(0.66 0.19 255 / 0.65);
  }

  /* Scroll-reveal base (opacity + rise) */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease-cinematic), transform 0.7s
      var(--ease-cinematic);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Hover-lift glass card */
  .hover-lift {
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s
      var(--ease-cinematic);
  }

  .hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: var(--glow-gold);
  }

  /* ---- Chat action cards (confirmation + result) ---- */
  /* Glassy, luminous card that carries a proposed or executed assistant
     action. Shares the ambilight language of the rest of the UI. */
  .action-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glow-soft);
  }

  /* A soft LED rim that brightens on hover/focus, matching .glow-edge. */
  .action-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--gradient-neon);
    background-size: 220% 220%;
    -webkit-mask: linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.45;
    transition: opacity 0.3s var(--ease-cinematic);
    pointer-events: none;
    z-index: -1;
  }

  .action-card:hover::before,
  .action-card:focus-within::before {
    opacity: 1;
    animation: edge-sweep 4s linear infinite;
  }

  /* Result variant: a settled, success-tinted card that no longer invites
     confirmation. */
  .action-card-result {
    border-color: oklch(0.68 0.14 160 / 0.45);
    box-shadow: 0 0 0 1px oklch(0.68 0.14 160 / 0.28), var(--glow-soft);
  }

  .action-card-result::before {
    background: linear-gradient(
      120deg,
      oklch(0.68 0.14 160),
      oklch(0.78 0.15 82),
      oklch(0.68 0.14 160)
    );
  }

  /* Header strip of an action card: a subtle luminous wash. */
  .action-card-header {
    background-image: linear-gradient(
      120deg,
      oklch(0.78 0.15 82 / 0.14),
      transparent 60%
    );
  }

  /* Invoice/quote line rows: hairline separators, right-aligned numbers. */
  .action-card-line {
    border-top: 1px solid var(--glass-border);
  }

  /* ---- Logistics map ---- */
  /* The map canvas: a calm, tinted surface that sits inside the ambilight
     language without competing with the glowing markers. */
  .map-canvas {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--map-surface);
    background-image: linear-gradient(var(--map-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 44px 44px;
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 0 60px -20px oklch(0.72 0.14 82 / 0.18);
  }

  .dark .map-canvas {
    box-shadow: inset 0 0 80px -20px oklch(0.78 0.15 82 / 0.22);
  }

  /* Address / driver markers: small round pins with a soft LED halo. */
  .map-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s
      var(--ease-cinematic);
  }

  .map-marker:hover,
  .map-marker:focus-visible {
    transform: translateY(-2px) scale(1.08);
  }

  /* Customer address pin — warm gold, the default unvisited stop. */
  .map-marker-customer {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--marker-customer);
    color: var(--marker-customer-foreground);
    border: 2px solid var(--card);
    box-shadow: 0 0 0 1px oklch(0.72 0.14 82 / 0.4), 0 0 12px
      oklch(0.72 0.14 82 / 0.5);
  }

  /* A customer account marker — a large rounded square in its own royal blue,
     so it reads as a different kind of place than both the round gold
     route-stop pin and the emerald driver pill at a glance. It is deliberately
     bigger than the other markers and carries a wide near-white contrasting
     border plus a soft blue halo, so it is easy to find on the OpenStreetMap
     background without squinting. */
  .map-marker-customer-account {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background-color: var(--marker-customer-account);
    color: var(--marker-customer-account-foreground);
    border: 3px solid var(--marker-customer-account-ring);
    box-shadow: 0 0 0 2px oklch(0.5 0.17 255 / 0.55), 0 0 20px 5px
      oklch(0.5 0.17 255 / 0.4);
  }

  /* Night mode: the customer-account marker keeps its royal blue and pins an
     explicit near-black glyph, so the shop icon stays readable on the bright
     blue square against the dark map. The wide near-white border and the soft
     blue halo keep the marker clearly visible on the dark basemap. */
  .dark .map-marker-customer-account {
    background-color: var(--marker-customer-account);
    color: oklch(0.13 0.024 168);
    border-color: var(--marker-customer-account-ring);
    box-shadow: 0 0 0 2px oklch(0.68 0.16 255 / 0.6), 0 0 24px 6px
      oklch(0.68 0.16 255 / 0.5);
  }

  /* The stop the driver is currently heading to — pulsing emerald. */
  .map-marker-active {
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--marker-active);
    color: var(--marker-driver-foreground);
    border: 2px solid var(--card);
    box-shadow: 0 0 0 1px oklch(0.5 0.12 160 / 0.5), 0 0 16px
      oklch(0.5 0.12 160 / 0.6);
    animation: marker-pulse 2.2s var(--ease-cinematic) infinite;
  }

  /* An address that has already been completed — settled and muted. */
  .map-marker-done {
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--marker-done);
    color: var(--card);
    border: 2px solid var(--card);
    opacity: 0.7;
  }

  /* The driver / active bus pin — shows the licence plate. It carries a roomy
     touch target (at least 44px tall) around the bus icon and the plate, so a
     single tap on either opens the large detail window. */
  .map-marker-driver {
    min-height: 2.75rem;
    padding: 0 0.875rem;
    gap: 0.5rem;
    border-radius: 9999px;
    background-color: var(--marker-driver);
    color: var(--marker-driver-foreground);
    border: 2px solid var(--card);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    box-shadow: 0 0 0 1px oklch(0.42 0.09 165 / 0.5), 0 0 18px
      oklch(0.42 0.09 165 / 0.55);
  }

  /* Night mode: the driver pin keeps the gold accent but pins its own
     background and text colour explicitly, so the icon and the licence plate
     stay clearly readable against the dark map instead of inheriting a
     low-contrast pair. The plate itself is forced to the near-black stage
     colour on the bright gold pill, which gives the highest contrast against
     the dark map while keeping the bakery's gold accent. */
  .dark .map-marker-driver {
    background-color: var(--marker-driver);
    color: oklch(0.13 0.024 168);
    border-color: oklch(0.13 0.024 168);
    box-shadow: 0 0 0 1px oklch(0.78 0.15 82 / 0.5), 0 0 20px
      oklch(0.78 0.15 82 / 0.6);
  }

  /* The licence plate text on the driver marker: a solid, opaque plate colour
     in every theme, so the kenteken never fades into the map behind it. */
  .map-marker-driver .map-marker-plate {
    color: inherit;
    font-weight: 700;
  }

  .dark .map-marker-driver .map-marker-plate {
    color: oklch(0.13 0.024 168);
  }

  /* Route line between stops — dashed gold, dimmed once completed. */
  .map-route-line {
    stroke: var(--route-line);
    stroke-width: 2;
    stroke-dasharray: 6 6;
    stroke-linecap: round;
    opacity: 0.75;
  }

  .map-route-line-done {
    stroke: var(--route-line-done);
    opacity: 0.5;
  }

  /* Address detail sheet opened by tapping a marker. */
  .map-address-sheet {
    border-radius: var(--radius);
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glow-soft);
  }

  /* ---- Interactive live map ---- */
  /* The pannable/zoomable viewport. The basemap and the marker layer are
     transformed together so panning and zooming stay in step. `touch-action:
     none` hands every touch gesture to the map: a one-finger drag pans and a
     two-finger pinch zooms, both handled in JS, so the browser never scrolls
     the page or applies its own page zoom while the visitor is on the map. */
  .map-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    overscroll-behavior: contain;
    will-change: transform;
  }

  .map-viewport:active {
    cursor: grabbing;
  }

  /* While a pinch gesture is in progress the cursor reads as a zoom control
     and the layer transitions are suppressed so the zoom tracks the fingers
     exactly instead of easing behind them. */
  .map-viewport[data-gesture="pinch"] {
    cursor: zoom-in;
  }

  .map-viewport[data-gesture="pinch"] .map-layer {
    transition: none;
  }

  /* The transformed layer that carries the tiles, route line and markers. */
  .map-layer {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
  }

  /* Smooth, cinematic easing for button and wheel zoom steps. A pinch gesture
     overrides this with `transition: none` so it stays finger-accurate. */
  .map-layer {
    transition: transform 0.28s var(--ease-cinematic);
  }

  /* The map canvas must never let a wheel or trackpad gesture scroll the page
     behind it: the wheel is the map's zoom control. */
  .map-canvas {
    overscroll-behavior: contain;
  }

  /* Floating zoom / recentre control cluster, in the bakery's glass language. */
  .map-controls {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    z-index: 10;
  }

  .map-control-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid var(--glass-border);
    color: var(--foreground);
    box-shadow: var(--glow-soft);
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s
      var(--ease-cinematic), color 0.25s var(--ease-cinematic);
  }

  .map-control-button:hover,
  .map-control-button:focus-visible {
    color: var(--accent);
    box-shadow: var(--glow-gold);
    transform: translateY(-1px);
  }

  .map-control-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--glow-soft);
  }

  /* The live driver marker: a pulsing emerald pin that reads as "moving now". */
  .map-marker-live {
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--marker-active);
    color: var(--marker-driver-foreground);
    border: 2px solid var(--card);
    box-shadow: 0 0 0 1px oklch(0.5 0.12 160 / 0.5), 0 0 18px
      oklch(0.5 0.12 160 / 0.65);
    animation: marker-pulse 2.2s var(--ease-cinematic) infinite;
  }

  /* ---- Navigation buttons (Waze / Google Maps) ---- */
  /* A compact pair of app-launch buttons on each driver stop. They stay
     visually subordinate to the primary "complete address" action. */
  .nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s
      var(--ease-cinematic), border-color 0.25s var(--ease-cinematic), color
      0.25s var(--ease-cinematic);
  }

  .nav-button:hover,
  .nav-button:focus-visible {
    transform: translateY(-1px);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--glow-soft);
  }

  /* Waze keeps its own brand blue; Google Maps its own green. */

  /* Ride progress: a quiet stepped indicator, never alarm-red. */
  .ride-progress-step {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
  }

  .ride-progress-step[data-state="done"] {
    color: var(--marker-active);
  }

  .ride-progress-step[data-state="current"] {
    color: var(--foreground);
    font-weight: 600;
  }

  /* ---------------------------------------------------------------------
     Simplified driver screen
     Large touch targets, high contrast and a calm progress indicator for
     low-literacy drivers. Built on the existing bakery tokens (gold accent,
     emerald success) so the driver view stays part of the same house style.
     --------------------------------------------------------------------- */

  /* A full-width, tall action button: the primary "Afgeleverd" and
     "Navigeren" controls. At least 64px tall so it is easy to hit while
     standing next to the bus. */
  .driver-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 4rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s
      var(--ease-cinematic), background-color 0.2s var(--ease-cinematic);
  }

  .driver-action:active {
    transform: translateY(1px) scale(0.995);
  }

  .driver-action:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
  }

  /* The single primary action: emerald success, high contrast. */
  .driver-action-primary {
    background-color: oklch(0.55 0.14 155);
    color: oklch(0.99 0.01 155);
    box-shadow: var(--glow-soft);
  }

  .driver-action-primary:hover {
    background-color: oklch(0.5 0.14 155);
  }

  /* The navigation action: gold accent, visually distinct from delivery. */
  .driver-action-navigate {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  .driver-action-navigate:hover {
    filter: brightness(1.05);
  }

  /* A calm, high-contrast progress bar for "hoeveel adressen nog". */
  .driver-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .driver-progress-track {
    height: 0.75rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    background-color: var(--muted);
  }

  .driver-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background-color: oklch(0.55 0.14 155);
    transition: width 0.4s var(--ease-cinematic);
  }

  .driver-progress-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
  }

  /* The current stop card: large, calm, high contrast. */
  .driver-stop-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    box-shadow: 0 1px 3px 0 oklch(0.22 0.03 165 / 0.06), 0 1px 2px -1px
      oklch(0.22 0.03 165 / 0.06);
  }

  .driver-stop-address {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--foreground);
    overflow-wrap: anywhere;
  }

  /* ---------------------------------------------------------------------
     Live delivery tracking (customer view)
     The customer's own tracking surface reuses the logistics map language:
     the same glass canvas, the same gold route line, and a pulsing emerald
     driver marker that only ever sits on the truly shared gps position.
     --------------------------------------------------------------------- */

  /* The customer's live driver marker: emerald core, gold halo. */
  .track-live-marker {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: var(--track-live);
    color: var(--marker-driver-foreground);
    border: 2px solid var(--card);
    box-shadow: 0 0 0 1px oklch(0.55 0.13 160 / 0.5), 0 0 18px
      oklch(0.72 0.14 82 / 0.55);
    animation: marker-pulse 2.2s var(--ease-cinematic) infinite;
  }

  .dark .track-live-marker {
    color: oklch(0.13 0.024 168);
    box-shadow: 0 0 0 1px oklch(0.68 0.14 160 / 0.55), 0 0 20px
      oklch(0.78 0.15 82 / 0.6);
  }

  /* The tracking status card under the map: glass, calm, stepped. */
  .track-status-card {
    border-radius: var(--radius);
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glow-soft);
  }

  /* The linked bus + driver chip on the tracking card. */
  .track-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 9999px;
    background-color: var(--muted);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
  }

  /* ---------------------------------------------------------------------
     Delivery photo (driver capture + customer/admin view)
     A framed, calm thumbnail. When no photo was taken the frame shows a
     quiet neutral placeholder — never an error.
     --------------------------------------------------------------------- */

  .delivery-photo {
    display: block;
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    background-color: var(--photo-frame);
    -o-object-fit: cover;
       object-fit: cover;
    box-shadow: var(--glow-soft);
  }

  .delivery-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    border-radius: var(--radius);
    border: 1px dashed var(--notice-border);
    background-color: var(--notice-surface);
    color: var(--photo-frame-foreground);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
  }

  /* ---------------------------------------------------------------------
     Star rating (admin-only surface, never shown to other customers)
     --------------------------------------------------------------------- */

  .rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    color: var(--rating-star);
  }

  .rating-star-empty {
    color: var(--rating-star-empty);
  }

  /* A large, tappable star button for the customer's own review. */
  .rating-star-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    color: var(--rating-star-empty);
    transition: transform 0.2s var(--ease-spring), color 0.2s
      var(--ease-cinematic);
  }

  .rating-star-button[data-filled="true"] {
    color: var(--rating-star);
  }

  .rating-star-button:hover,
  .rating-star-button:focus-visible {
    transform: translateY(-1px) scale(1.06);
    color: var(--rating-star);
  }

  .rating-surface {
    border-radius: var(--radius);
    background-color: var(--rating-surface);
    border: 1px solid var(--border);
  }

  /* ---------------------------------------------------------------------
     Opening hours + holidays
     --------------------------------------------------------------------- */

  .hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--notice-border);
    font-size: 0.9375rem;
  }

  .hours-row:last-child {
    border-bottom: none;
  }

  .hours-open {
    color: var(--hours-open);
    font-weight: 600;
    font-family: var(--font-mono);
  }

  .hours-closed {
    color: var(--hours-closed);
  }

  .hours-holiday {
    color: var(--hours-holiday);
    font-weight: 600;
  }

  /* A calm, neutral notice — closed hours, below minimum, no photo.
     Never alarm-red. */
  .calm-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    background-color: var(--notice-surface);
    border: 1px solid var(--notice-border);
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* ---------------------------------------------------------------------
     Delivery fee + minimum order line (order summary)
     --------------------------------------------------------------------- */

  .fee-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9375rem;
    color: var(--fee-line);
  }

  .fee-line-strong {
    color: var(--fee-strong);
    font-weight: 700;
    font-family: var(--font-mono);
  }

  /* ---------------------------------------------------------------------
     Emergency route sheet (paper, printable, works offline)
     --------------------------------------------------------------------- */

  .route-sheet {
    background-color: var(--paper);
    color: var(--paper-ink);
    border-radius: var(--radius);
    padding: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .route-sheet-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--paper-rule);
  }

  .route-sheet-row:last-child {
    border-bottom: none;
  }

  .route-sheet-index {
    font-weight: 700;
    color: var(--paper-ink);
  }

  .route-sheet-address {
    overflow-wrap: anywhere;
  }

  .route-sheet-postcode {
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  @media print {
    .route-sheet {
      box-shadow: none;
      border: none;
      border-radius: 0;
      padding: 0;
    }

    .route-sheet-row {
      -moz-column-break-inside: avoid;
           break-inside: avoid;
    }
  }

  /* ---------------------------------------------------------------------
     Alhoceima motif — Moroccan / Mediterranean warmth
     A single terracotta-clay thread (hue 48) that sits between the gold and
     the emerald. Used as a zellige-style rule along section borders and as a
     warm band across the footer, so the Riff heritage reads as an intentional
     design layer rather than decoration.
     --------------------------------------------------------------------- */

  .font-serif {
    font-family: var(--font-serif), Georgia, serif;
  }

  /* A repeating zellige tile rule: interlocking diamonds drawn with
     conic-gradients, tinted clay-to-gold. Sits on a 1px hairline so it reads
     as a woven border, not a heavy stripe. */
  .motif-rule {
    height: 10px;
    width: 100%;
    background-image: linear-gradient(
        45deg,
        var(--motif-clay-soft) 25%,
        transparent 25% 75%,
        var(--motif-clay-soft) 75%
      ),
      linear-gradient(
        -45deg,
        var(--motif-clay-soft) 25%,
        transparent 25% 75%,
        var(--motif-clay-soft) 75%
      );
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
    opacity: 0.85;
  }

  /* The footer band: a warm clay wash with a hairline motif rule on top. */
  .motif-band {
    background-color: var(--motif-band);
    color: var(--motif-band-foreground);
  }

  .motif-band::before {
    content: "";
    display: block;
    height: 10px;
    background-image: linear-gradient(
        45deg,
        var(--motif-rule) 25%,
        transparent 25% 75%,
        var(--motif-rule) 75%
      ),
      linear-gradient(
        -45deg,
        var(--motif-rule) 25%,
        transparent 25% 75%,
        var(--motif-rule) 75%
      );
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
  }

  /* A soft eight-point star (khatam) medallion used as a quiet corner mark. */
  .motif-star {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--motif-clay);
    clip-path: polygon(
      50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%
    );
    opacity: 0.9;
  }

  .splash-logo {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 9999px;
    -o-object-fit: cover;
       object-fit: cover;
    box-shadow: 0 0 0 1px var(--splash-ring), var(--glow-gold);
    animation: splash-breathe 2s var(--ease-cinematic) infinite;
  }

  /* ---------------------------------------------------------------------
     Bakery-in-operation bar
     A calm live strip at the top of the dashboard: orders in the oven, bus
     on the way, loaves today. Small moving icons, never alarm-red.
     --------------------------------------------------------------------- */

  .ops-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    background-color: var(--ops-surface);
    border: 1px solid var(--ops-border);
    box-shadow: var(--glow-soft);
  }

  .ops-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
  }

  .ops-icon-oven {
    color: var(--ops-oven);
    animation: ops-oven 2.6s var(--ease-cinematic) infinite;
  }

  .ops-icon-bus {
    color: var(--ops-bus);
    animation: ops-bus 3.4s var(--ease-cinematic) infinite;
  }

  .ops-icon-today {
    color: var(--ops-today);
    animation: ops-today 3s var(--ease-cinematic) infinite;
  }

  /* ---------------------------------------------------------------------
     Bread on a wooden board (order card)
     The order card is a real loaf on a wooden plank; los / pak / doos sit
     beside it as cutting boards. Choosing one animates into the cart.
     --------------------------------------------------------------------- */

  .bread-board-card {
    border-radius: var(--radius);
    background-color: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--glow-soft);
    padding: 1.25rem;
  }

  .bread-board {
    position: relative;
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
    background-image: linear-gradient(
      160deg,
      var(--board-wood),
      var(--board-wood-edge)
    );
    box-shadow: var(--board-shadow);
    overflow: hidden;
  }

  /* The real bread photo resting on the plank. */
  .bread-board-loaf {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    -o-object-fit: cover;
       object-fit: cover;
    box-shadow: 0 12px 28px -14px oklch(0.3 0.04 55 / 0.7);
  }

  /* The name and price caption pinned to the bottom of the plank. */
  .bread-board-caption {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    background-color: oklch(0.99 0.01 85 / 0.9);
    box-shadow: 0 4px 14px -8px oklch(0.3 0.04 55 / 0.6);
  }

  /* The cart the bread travels toward, sitting at the edge of the board. */
  .bread-board-cart {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--glow-gold);
    pointer-events: none;
  }

  /* The wooden grain: faint horizontal strokes over the plank. */
  .bread-board::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      92deg,
      oklch(0.99 0.01 85 / 0.06) 0 2px,
      transparent 2px 9px
    );
    pointer-events: none;
  }

  .bread-loaf {
    position: relative;
    border-radius: 9999px 9999px 40% 40%;
    background-image: linear-gradient(
      170deg,
      var(--bread-crust),
      oklch(0.62 0.1 62)
    );
    box-shadow: inset 0 -10px 24px -8px oklch(0.42 0.05 55 / 0.6), 0 10px 24px
      -12px oklch(0.3 0.04 55 / 0.6);
  }

  /* Scoring marks across the crust. */
  .bread-loaf::after {
    content: "";
    position: absolute;
    inset: 22% 18% auto 18%;
    height: 3px;
    border-radius: 9999px;
    background-image: repeating-linear-gradient(
      90deg,
      oklch(0.42 0.05 55 / 0.5) 0 14px,
      transparent 14px 26px
    );
  }

  /* A cutting board for each variant (los / pak / doos). */
  .cutting-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.75rem;
    border-radius: var(--radius);
    background-image: linear-gradient(
      160deg,
      var(--board-wood),
      var(--board-wood-edge)
    );
    color: var(--bread-crumb);
    border: 1px solid var(--board-wood-edge);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s
      var(--ease-cinematic);
  }

  .cutting-board:hover,
  .cutting-board:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--glow-gold);
  }

  .cutting-board[data-selected="true"] {
    box-shadow: var(--glow-intense);
    transform: translateY(-3px);
  }

  /* The fly-to-cart motion: a small loaf that arcs toward the cart badge. */
  .fly-to-cart {
    animation: fly-to-cart 0.7s var(--ease-cinematic) both;
  }

  /* The reveal hint: a calm, directly visible notice above the bread board that
     tells the customer the pack and box follow once the loose bread is chosen.
     It reads as a soft gold-edged note rather than a warning, matching the
     bakery's quiet, neutral tone. */
  .product-reveal-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius);
    border: 1px solid oklch(var(--accent));
    background-color: oklch(0.72 0.14 82 / 0.12);
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
  }

  .product-reveal-hint::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: oklch(var(--accent));
    box-shadow: var(--glow-gold);
  }

  /* The order controls (quantity field, add button, line total) keep clear of
     the fixed AI-assistant launcher on mobile: the launcher sits bottom-left,
     so the controls get extra bottom room and the page reserves space below
     them, so the button never covers the quantity field or the add action. */
  .product-order-controls {
    padding-bottom: 0.5rem;
  }

  @media (max-width: 639px) {
    .product-order-controls {
      padding-bottom: 5.5rem;
    }
  }

  /* ---------------------------------------------------------------------
     Driver ride map
     A real ride: the route line fills as stops are completed, finished
     stops settle green and upcoming stops stay grey.
     --------------------------------------------------------------------- */

  .ride-map {
    position: relative;
    border-radius: var(--radius);
    background-color: var(--map-surface);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glow-soft);
    overflow: hidden;
  }

  .ride-track {
    stroke: var(--ride-track);
    stroke-width: 6;
    stroke-linecap: round;
    fill: none;
  }

  .ride-fill {
    stroke: var(--ride-fill);
    stroke-width: 6;
    stroke-linecap: round;
    fill: none;
    transition: stroke-dashoffset 0.6s var(--ease-cinematic);
  }

  .ride-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 2px solid var(--card);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .ride-stop[data-state="done"] {
    background-color: var(--ride-stop-done);
    color: var(--card);
  }

  .ride-stop[data-state="next"] {
    background-color: var(--ride-stop-next);
    color: var(--marker-customer-foreground);
    box-shadow: 0 0 0 4px var(--motif-clay-soft);
    animation: marker-pulse 2.2s var(--ease-cinematic) infinite;
  }

  .ride-stop[data-state="pending"] {
    background-color: var(--ride-stop-pending);
    color: var(--muted-foreground);
  }

  /* The named stop rows under the route line: each address is recognisable by
     the customer's name and its state, never by a loose sequence number. */
  .ride-stop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
  }

  .ride-stop-row-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--foreground);
  }

  .ride-stop-row-state {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted-foreground);
  }

  .ride-stop-row[data-state="done"] {
    border-color: var(--ride-stop-done);
  }

  .ride-stop-row[data-state="done"] .ride-stop-row-state {
    color: var(--ride-stop-done);
  }

  .ride-stop-row[data-state="next"] {
    border-color: var(--ride-stop-next);
    box-shadow: 0 0 0 1px var(--ride-stop-next);
  }

  .ride-stop-row[data-state="next"] .ride-stop-row-state {
    color: var(--ride-stop-next);
  }

  /* ---------------------------------------------------------------------
     Today in the bakery (owner overview)
     Large figures on a calm warm surface: revenue today, orders, busiest
     hour and best customer.
     --------------------------------------------------------------------- */

  .today-panel {
    border-radius: var(--radius);
    background-color: var(--today-surface);
    border: 1px solid var(--border);
    box-shadow: var(--subtle, var(--glow-soft));
    padding: 1.25rem;
  }

  .today-figure {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 600;
    line-height: 1;
    color: var(--today-figure);
    letter-spacing: -0.01em;
  }

  .today-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }

  .today-accent {
    color: var(--today-accent);
  }

  /* ---------------------------------------------------------------------
     Thank-you screen (order placed)
     "Bedankt, je brood is in de maak" with a small rising loaf.
     --------------------------------------------------------------------- */

  .thanks-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 1.5rem;
    border-radius: var(--radius);
    background-color: var(--thanks-bg);
    background-image: var(--thanks-glow);
    text-align: center;
    overflow: hidden;
  }

  /* The little loaf that slowly rises, as if proofing. */
  .thanks-loaf {
    width: 4.5rem;
    height: 3rem;
    border-radius: 9999px 9999px 42% 42%;
    background-image: linear-gradient(
      170deg,
      var(--thanks-rise),
      oklch(0.6 0.1 62)
    );
    box-shadow: inset 0 -8px 18px -8px oklch(0.4 0.05 55 / 0.6);
    animation: thanks-rise 3.2s var(--ease-cinematic) infinite;
  }

  /* ---------------------------------------------------------------------
     WhatsApp share card
     A neat, always-light image with logo, order and thank-you text, ready
     to share. Rendered offscreen; the visible preview mirrors it.
     --------------------------------------------------------------------- */

  .share-card {
    width: 100%;
    max-width: 22rem;
    border-radius: var(--radius);
    background-color: var(--share-card-bg);
    color: var(--share-card-ink);
    border: 1px solid var(--share-card-rule);
    box-shadow: var(--glow-soft);
    padding: 1.5rem;
    text-align: center;
  }

  .share-card-rule {
    height: 8px;
    width: 100%;
    margin: 1rem 0;
    background-image: linear-gradient(
        45deg,
        var(--share-card-rule) 25%,
        transparent 25% 75%,
        var(--share-card-rule) 75%
      ),
      linear-gradient(
        -45deg,
        var(--share-card-rule) 25%,
        transparent 25% 75%,
        var(--share-card-rule) 75%
      );
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
    opacity: 0.7;
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .orb,
    .gold-dust,
    .reveal-word > span,
    .magnetic,
    .tilt-3d,
    .tilt-hover,
    .pulse-ring::after,
    .chat-launcher::after,
    .glow-edge::before,
    .action-card::before,
    .map-marker-active,
    .map-marker-live,
    .reveal,
    .splash-logo,
    .ops-icon-oven,
    .ops-icon-bus,
    .ops-icon-today,
    .fly-to-cart,
    .ride-stop[data-state="next"],
    .thanks-loaf,
    .animate-led-breathe,
    .animate-bloom,
    .animate-float,
    .animate-ambient-shift,
    .animate-word-reveal {
      animation: none !important;
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    }

    /* The launcher must be fully visible immediately under reduced motion,
       even if a motion library left an inline opacity/scale behind. */
    .chat-launcher {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
      transition: none !important;
    }
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}
.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground *::selection {
  color: oklch(var(--primary-foreground));
}
.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
}
.file\:inline-flex::file-selector-button {
  display: inline-flex;
}
.file\:h-7::file-selector-button {
  height: 1.75rem;
}
.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: oklch(var(--foreground));
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / 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-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));
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.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-ring:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.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\: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\:border-accent\/45:hover {
  border-color: oklch(var(--accent) / 0.45);
}
.hover\:border-accent\/60:hover {
  border-color: oklch(var(--accent) / 0.6);
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent\/10:hover {
  background-color: oklch(var(--accent) / 0.1);
}
.hover\:bg-accent\/15:hover {
  background-color: oklch(var(--accent) / 0.15);
}
.hover\:bg-accent\/25:hover {
  background-color: oklch(var(--accent) / 0.25);
}
.hover\:bg-accent\/5:hover {
  background-color: oklch(var(--accent) / 0.05);
}
.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted\/40:hover {
  background-color: oklch(var(--muted) / 0.4);
}
.hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
}
.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
.hover\:bg-secondary\/40:hover {
  background-color: oklch(var(--secondary) / 0.4);
}
.hover\:bg-secondary\/60:hover {
  background-color: oklch(var(--secondary) / 0.6);
}
.hover\:bg-secondary\/70:hover {
  background-color: oklch(var(--secondary) / 0.7);
}
.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}
.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}
.hover\:text-accent:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}
.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}
.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.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-glow-soft:hover {
  --tw-shadow: var(--glow-soft);
  --tw-shadow-colored: var(--glow-soft);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-4: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(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);
}

  .hover\:shadow-glow-soft:hover {
    box-shadow: var(--glow-soft);
  }
.hover\:\[animation-play-state\:paused\]:hover {
  animation-play-state: paused;
}
.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(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\:absolute:focus {
  position: absolute;
}
.focus\:left-4:focus {
  left: 1rem;
}
.focus\:top-4:focus {
  top: 1rem;
}
.focus\:z-10:focus {
  z-index: 10;
}
.focus\:z-50:focus {
  z-index: 50;
}
.focus\:rounded-md:focus {
  border-radius: calc(var(--radius) - 2px);
}
.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}
.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-semibold:focus {
  font-weight: 600;
}
.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}
.focus\:shadow-glow-gold:focus {
  --tw-shadow: var(--glow-gold);
  --tw-shadow-colored: var(--glow-gold);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.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-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
  .focus\:shadow-glow-gold:focus {
    box-shadow: var(--glow-gold);
  }
.focus-visible\:z-10:focus-visible {
  z-index: 10;
}
.focus-visible\:border-accent:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--accent) / var(--tw-border-opacity, 1));
}
.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.focus-visible\:bg-accent:focus-visible {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.focus-visible\:text-accent-foreground:focus-visible {
  color: oklch(var(--accent-foreground));
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}
.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}
.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-4: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(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);
}
.focus-visible\:ring-\[3px\]: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(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);
}
.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.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: oklch(var(--background));
}
.active\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
}
.active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.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:hover .group-hover\:-translate-y-px {
  --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));
}
.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\: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-accent\/15 {
  background-color: oklch(var(--accent) / 0.15);
}
.group:hover .group-hover\:text-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}
.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-50 {
  opacity: 0.5;
}
.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}
.has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}
.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}
.aria-pressed\:border-accent[aria-pressed="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--accent) / var(--tw-border-opacity, 1));
}
.aria-pressed\:text-accent[aria-pressed="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-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-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
}
.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
}
.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
}
.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
}
.data-\[active\=true\]\:z-10[data-active="true"] {
  z-index: 10;
}
.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
}
.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
}
.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}
.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
}
.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}
.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
}
.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}
.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}
.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}
.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}
.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}
.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}
.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}
.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}
.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\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  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));
}
@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-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}
.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}
.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}
.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}
.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}
.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}
.data-\[active\=true\]\:border-ring[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.data-\[state\=active\]\:border-accent[data-state="active"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--accent) / var(--tw-border-opacity, 1));
}
.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: oklch(var(--accent) / 0.5);
}
.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: oklch(var(--sidebar-accent));
}
.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=active\]\:bg-accent\/10[data-state="active"] {
  background-color: oklch(var(--accent) / 0.1);
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
}
.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}
.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}
.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
}
.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: oklch(var(--foreground));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.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-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-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --tw-shadow: 0 1px 2px 0 rgba(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-\[active\=true\]\:ring-\[3px\][data-active="true"] {
  --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);
}
.data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.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-\[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\=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-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
}
.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
}
.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
}
.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
  color: oklch(var(--destructive) / 0.9);
}
.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-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
}
.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: oklch(var(--sidebar-accent));
}
.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: oklch(var(--sidebar-accent-foreground));
}
.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
}
.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}
.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\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
}
.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 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\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\: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\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.group[data-state="active"] .group-data-\[state\=active\]\:bg-accent\/15 {
  background-color: oklch(var(--accent) / 0.15);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
}
.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
}
.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
}
.group[data-state="active"] .group-data-\[state\=active\]\:text-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}
.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\: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);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\: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\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --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);
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}
.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
  background-color: oklch(var(--sidebar));
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\: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;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\: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;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.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\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}
@media (prefers-reduced-motion: no-preference) {

  .motion-safe\: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));
  }

  .motion-safe\:animate-none {
    animation: none;
  }

  @keyframes spin {

    to {
      transform: rotate(360deg);
    }
  }

  .motion-safe\:animate-spin {
    animation: spin 1s linear infinite;
  }
}
.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}
.dark\:\!bg-\[linear-gradient\(155deg\2c oklch\(0\.84_0\.15_255\)_0\%\2c var\(--marker-customer-account\)_48\%\2c oklch\(0\.46_0\.15_258\)_100\%\)\]:is(.dark *) {
  background-image: linear-gradient(155deg,oklch(0.84 0.15 255) 0%,var(--marker-customer-account) 48%,oklch(0.46 0.15 258) 100%) !important;
}
.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.dark\:\!shadow-\[inset_0_1px_0_oklch\(0\.99_0\.01_255_\/_0\.92\)\2c inset_0_-3px_7px_oklch\(0\.2_0\.08_258_\/_0\.6\)\2c 0_0_0_2px_oklch\(0\.68_0\.16_255_\/_0\.6\)\2c 0_0_24px_6px_oklch\(0\.68_0\.16_255_\/_0\.5\)\]:is(.dark *) {
  --tw-shadow: inset 0 1px 0 oklch(0.99 0.01 255 / 0.92),inset 0 -3px 7px oklch(0.2 0.08 258 / 0.6),0 0 0 2px oklch(0.68 0.16 255 / 0.6),0 0 24px 6px oklch(0.68 0.16 255 / 0.5) !important;
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), inset 0 -3px 7px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color), 0 0 24px 6px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}
.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}
.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}
.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
}
.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}
.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
}
.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}
@media (min-width: 640px) {

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

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

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

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

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

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

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

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

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

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

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

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

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

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

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

  .sm\:size-9 {
    width: 2.25rem;
    height: 2.25rem;
  }

  .sm\:h-\[min\(38rem\2c 80vh\)\] {
    height: min(38rem, 80vh);
  }

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

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

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

  .sm\:w-80 {
    width: 20rem;
  }

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

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

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

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

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

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

  .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-\[1fr_auto_auto\] {
    grid-template-columns: 1fr auto auto;
  }

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

  .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-between {
    justify-content: space-between;
  }

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

  .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\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:border {
    border-width: 1px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
    max-width: 24rem;
  }
}
@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

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

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

  .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\:flex-row {
    flex-direction: row;
  }

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

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

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

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

  .md\:gap-1\.5 {
    gap: 0.375rem;
  }

  .md\:overflow-visible {
    overflow: visible;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

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

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

  .md\:px-12 {
    padding-left: 3rem;
    padding-right: 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-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

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

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

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

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

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

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

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

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

  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

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

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

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

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

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

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

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

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\: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);
  }
}
@media (min-width: 1024px) {

  .lg\:max-w-3xl {
    max-width: 48rem;
  }

  .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-\[1fr_380px\] {
    grid-template-columns: 1fr 380px;
  }

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

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

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_360px\] {
    grid-template-columns: minmax(0,1fr) 360px;
  }

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

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

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

  .lg\:justify-between {
    justify-content: space-between;
  }
}
@media (min-width: 1280px) {

  .xl\:max-w-4xl {
    max-width: 56rem;
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  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));
}
.\[\&\>button\]\:hidden>button {
  display: none;
}
.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}
.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}
.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}
.\[\&\>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\]\:translate-y-0\.5>svg {
  --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));
}
.\[\&\>svg\]\:text-current>svg {
  color: currentColor;
}
.\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
}
.\[\&\>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: oklch(var(--muted-foreground) / 1);
}
.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\[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] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_\[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\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_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=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-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}
a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}