*, ::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: "Geist Mono";
    --radius: 0.625rem;

    --background: 0.985 0.006 220;
    --foreground: 0.18 0.018 225;
    --card: 1.0 0.003 220;
    --card-foreground: 0.18 0.018 225;
    --popover: 1.0 0.003 220;
    --popover-foreground: 0.18 0.018 225;

    --primary: 0.46 0.13 215;
    --primary-foreground: 0.985 0.006 220;

    --secondary: 0.95 0.012 220;
    --secondary-foreground: 0.28 0.02 220;
    --muted: 0.955 0.01 220;
    --muted-foreground: 0.5 0.014 220;

    --accent: 0.74 0.16 70;
    --accent-foreground: 0.2 0.04 70;

    --destructive: 0.55 0.22 25;
    --destructive-foreground: 0.985 0.006 25;

    --success: 0.6 0.16 150;
    --success-foreground: 0.985 0.006 150;
    --warning: 0.72 0.15 85;
    --warning-foreground: 0.2 0.04 85;

    --border: 0.9 0.012 220;
    --input: 0.9 0.012 220;
    --ring: 0.46 0.13 215;

    --crypto: 0.58 0.19 285;
    --crypto-foreground: 0.985 0.006 220;

    --chart-1: 0.46 0.13 215;
    --chart-2: 0.74 0.16 70;
    --chart-3: 0.6 0.16 150;
    --chart-4: 0.62 0.2 280;
    --chart-5: 0.65 0.18 25;

    /* Exchange-rate chart — three crypto→€ line colors + chrome.
       BTC = amber-gold (the euro warmth voice), ETH = indigo-violet
       (the --crypto voice), USDT = stable green. All tuned for AA+
       contrast on both --card and --background. */
    --chart-btc: 0.7 0.17 70;
    --chart-btc-foreground: 0.22 0.05 70;
    --chart-eth: 0.55 0.2 285;
    --chart-eth-foreground: 0.985 0.006 285;
    --chart-usdt: 0.6 0.16 150;
    --chart-usdt-foreground: 0.985 0.006 150;

    /* Chart chrome — grid, axis, crosshair. Cool, low-chroma, recede. */
    --chart-grid: 0.9 0.012 220;
    --chart-axis: 0.5 0.014 220;
    --chart-crosshair: 0.46 0.13 215;

    /* Period switcher (1D/1W/1M) — pill group on the chart card. */
    --chart-period: 0.95 0.012 220;
    --chart-period-foreground: 0.4 0.018 220;
    --chart-period-active: 0.46 0.13 215;
    --chart-period-active-foreground: 0.985 0.006 220;
    --chart-period-active-border: 0.46 0.13 215;

    /* Tooltip — elevated surface above the chart, follows the popover
       voice but with a tighter, denser feel for tabular rate rows. */
    --chart-tooltip: 1.0 0.003 220;
    --chart-tooltip-foreground: 0.18 0.018 225;
    --chart-tooltip-border: 0.88 0.014 220;
    --chart-tooltip-muted: 0.5 0.014 220;

    /* Trend arrows — up/down/flat voices for the legend + tooltip. Up
       reuses the success green, down reuses the destructive red, flat
       reuses the muted axis voice. */
    --chart-trend-up: 0.6 0.16 150;
    --chart-trend-down: 0.55 0.22 25;
    --chart-trend-flat: 0.5 0.014 220;

    /* ============================================================
        CANDLESTICK CHART — professional TradingView/Binance-style
        OHLC bars (BTC/ETH/USDT → €). Rebuilt for a real exchange
        look: thick clearly-defined candle bodies + wicks, deep
        dark-blue/near-black chart background in dark mode, light
        professional grey in light mode, prominent digital price
        header, right-side euro price axis, blinking LIVE dot.
        Up = bright green (#22c55e voice), down = bright red
        (#ef4444 voice), both tuned for AA+ contrast on the chart
        background in both themes.
        ============================================================ */
    /* Candle bodies — up (close ≥ open) and down (close < open).
       Brighter, more saturated greens/reds than the muted ticker
       voices so candles read as real exchange candles. */
    --candle-up: 0.62 0.19 145;
    --candle-up-foreground: 0.985 0.006 145;
    --candle-down: 0.58 0.24 25;
    --candle-down-foreground: 0.985 0.006 25;
    /* Wicks — same hue as the body, slightly lower chroma so the
       high/low lines read as part of the candle without competing
       with the body. */
    --candle-wick-up: 0.55 0.17 145;
    --candle-wick-down: 0.52 0.22 25;
    /* Chart chrome — grid, axis labels, chart background. Light
       mode uses a light professional grey (#f8fafc voice) with
       subtle thin grid lines that recede. */
    --candle-grid: 0.9 0.012 220;
    --candle-axis: 0.45 0.016 220;
    --candle-background: 0.97 0.006 240;
    --candle-plot-bg: 0.985 0.004 240;
    --candle-border: 0.86 0.012 220;
    --candle-axis-tick: 0.7 0.012 220;
    --candle-axis-baseline: 0.7 0.012 220;
    /* Crypto selector tabs — pill group above the chart. Reuses the
        period-switcher voices for consistency. */
    --candle-tab: 0.95 0.012 220;
    --candle-tab-foreground: 0.4 0.018 220;
    --candle-tab-active: 0.46 0.13 215;
    --candle-tab-active-foreground: 0.985 0.006 220;
    --candle-tab-active-border: 0.46 0.13 215;
    /* Price header — prominent digital readout above the chart.
       Foreground uses the chart background's contrast voice. */
    --candle-header-foreground: 0.18 0.018 225;
    --candle-header-muted: 0.5 0.014 220;
    /* Trend badge — up/down/flat voices for the header pill. */
    --candle-trend-up: 0.62 0.19 145;
    --candle-trend-down: 0.58 0.24 25;
    --candle-trend-flat: 0.5 0.014 220;

    /* ============================================================
        NEW 3D HERO COINS — "Domed Beveled Coin" style.
        Distinctly different from the previous cylinder coins (which
        used front-face + back-face + N rim segments). The new coin
        is a single domed disc with a glossy convex face, a beveled
        metallic ring edge, and an embossed symbol. Depth comes from
        layered radial + conic gradients, NOT from translateZ pairs.
        BTC = warm gold, EUR = cool silver.
        ============================================================ */
    /* Gold coin (Bitcoin) — warm metallic radial + conic rim. */
    --coin-btc-face: 0.82 0.13 75;
    --coin-btc-face-bright: 0.92 0.1 85;
    --coin-btc-face-deep: 0.62 0.15 65;
    --coin-btc-rim: 0.72 0.16 70;
    --coin-btc-rim-bright: 0.88 0.12 80;
    --coin-btc-rim-deep: 0.5 0.14 55;
    --coin-btc-symbol: 0.32 0.08 60;
    --coin-btc-glow: 0.74 0.16 70;

    /* Silver coin (Euro) — cool metallic radial + conic rim. */
    --coin-eur-face: 0.86 0.008 240;
    --coin-eur-face-bright: 0.96 0.004 240;
    --coin-eur-face-deep: 0.66 0.012 235;
    --coin-eur-rim: 0.76 0.012 235;
    --coin-eur-rim-bright: 0.92 0.006 240;
    --coin-eur-rim-deep: 0.54 0.014 230;
    --coin-eur-symbol: 0.3 0.012 235;
    --coin-eur-glow: 0.72 0.014 235;

    /* Hero container — wider (more landscape) and vertically shorter
       so the coin illustration sits compactly right under the nav.
       max-height verlaagd van 18vh naar 15vh zodat de illustratie
       verticaal iets minder ruimte inneemt (per gebruikersverzoek). */
    --hero-aspect-ratio: 16 / 5;
    --hero-max-height: 15vh;

    /* Ticker cards — three small live ticker cards directly below the
       hero. Sparkline + large monospace digital price + trend arrow.
       Green for rising, red for falling. Subtle pulse/glow to draw
       attention. */
    --ticker-card: 1.0 0.003 220;
    --ticker-card-foreground: 0.18 0.018 225;
    --ticker-card-border: 0.88 0.014 220;
    --ticker-up: 0.6 0.16 150;
    --ticker-up-foreground: 0.985 0.006 150;
    --ticker-down: 0.55 0.22 25;
    --ticker-down-foreground: 0.985 0.006 25;
    --ticker-spark-up: 0.6 0.16 150;
    --ticker-spark-down: 0.55 0.22 25;

    --sidebar: 0.97 0.008 220;
    --sidebar-foreground: 0.18 0.018 225;
    --sidebar-primary: 0.46 0.13 215;
    --sidebar-primary-foreground: 0.985 0.006 220;
    --sidebar-accent: 0.93 0.02 70;
    --sidebar-accent-foreground: 0.2 0.04 70;
    --sidebar-border: 0.9 0.012 220;
    --sidebar-ring: 0.46 0.13 215;

    --gradient-primary: linear-gradient(
      135deg,
      oklch(0.46 0.13 215) 0%,
      oklch(0.42 0.11 200) 100%
    );
    --gradient-accent: linear-gradient(
      135deg,
      oklch(0.74 0.16 70) 0%,
      oklch(0.78 0.14 85) 100%
    );
    --gradient-crypto: linear-gradient(
      135deg,
      oklch(0.58 0.19 285) 0%,
      oklch(0.52 0.21 300) 100%
    );
    --gradient-hero: radial-gradient(
        ellipse at top right,
        oklch(0.74 0.16 70 / 0.12) 0%,
        oklch(0.985 0.006 220) 55%
      ),
      linear-gradient(
        180deg,
        oklch(0.985 0.006 220) 0%,
        oklch(0.97 0.01 220) 100%
      );
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dark {
    --background: 0.155 0.018 225;
    --foreground: 0.95 0.008 220;
    --card: 0.19 0.02 225;
    --card-foreground: 0.95 0.008 220;
    --popover: 0.19 0.02 225;
    --popover-foreground: 0.95 0.008 220;

    --primary: 0.72 0.13 200;
    --primary-foreground: 0.155 0.018 225;

    --secondary: 0.23 0.022 225;
    --secondary-foreground: 0.85 0.01 220;
    --muted: 0.23 0.022 225;
    --muted-foreground: 0.55 0.014 220;

    --accent: 0.78 0.15 75;
    --accent-foreground: 0.155 0.018 75;

    --destructive: 0.62 0.2 25;
    --destructive-foreground: 0.155 0.018 25;

    --success: 0.65 0.16 150;
    --success-foreground: 0.155 0.018 150;
    --warning: 0.75 0.15 85;
    --warning-foreground: 0.155 0.018 85;

    --border: 0.28 0.022 225;
    --input: 0.28 0.022 225;
    --ring: 0.72 0.13 200;

    --crypto: 0.62 0.2 285;
    --crypto-foreground: 0.985 0.006 220;

    --chart-1: 0.72 0.13 200;
    --chart-2: 0.78 0.15 75;
    --chart-3: 0.65 0.16 150;
    --chart-4: 0.7 0.2 280;
    --chart-5: 0.68 0.18 25;

    /* Exchange-rate chart — dark-mode line colors. L raised so each
       line stays vivid against the dark card; hues kept stable with
       light mode for instant recognition. */
    --chart-btc: 0.78 0.16 75;
    --chart-btc-foreground: 0.155 0.018 75;
    --chart-eth: 0.62 0.2 285;
    --chart-eth-foreground: 0.155 0.018 285;
    --chart-usdt: 0.66 0.16 150;
    --chart-usdt-foreground: 0.155 0.018 150;

    /* Chart chrome — dark grid/axis recede further; crosshair uses the
       brighter dark primary so the hover line reads clearly. */
    --chart-grid: 0.28 0.022 225;
    --chart-axis: 0.6 0.016 220;
    --chart-crosshair: 0.72 0.13 200;

    /* Period switcher — dark pill group. */
    --chart-period: 0.23 0.022 225;
    --chart-period-foreground: 0.75 0.012 220;
    --chart-period-active: 0.72 0.13 200;
    --chart-period-active-foreground: 0.155 0.018 225;
    --chart-period-active-border: 0.72 0.13 200;

    /* Tooltip — dark elevated surface, brighter text + muted rows. */
    --chart-tooltip: 0.19 0.02 225;
    --chart-tooltip-foreground: 0.95 0.008 220;
    --chart-tooltip-border: 0.32 0.022 225;
    --chart-tooltip-muted: 0.6 0.014 220;

    /* Trend arrows — dark-mode voices (brighter L for contrast on dark card). */
    --chart-trend-up: 0.65 0.16 150;
    --chart-trend-down: 0.62 0.2 25;
    --chart-trend-flat: 0.6 0.016 220;

    /* CANDLESTICK CHART — dark-mode tokens. Deep dark-blue/near-black
       chart background (#0a0e17 / #0d1117 voice) like TradingView/
       Binance night mode. Up/down bodies and wicks stay vivid and
       saturated against the dark plot; grid lines are very subtle so
       they recede without competing with the candles. */
    --candle-up: 0.68 0.2 145;
    --candle-up-foreground: 0.155 0.018 145;
    --candle-down: 0.62 0.25 25;
    --candle-down-foreground: 0.155 0.018 25;
    --candle-wick-up: 0.6 0.18 145;
    --candle-wick-down: 0.56 0.22 25;
    --candle-grid: 0.26 0.02 230;
    --candle-axis: 0.62 0.018 220;
    --candle-background: 0.16 0.025 235;
    --candle-plot-bg: 0.14 0.028 235;
    --candle-border: 0.3 0.025 230;
    --candle-axis-tick: 0.5 0.016 220;
    --candle-axis-baseline: 0.4 0.018 225;
    --candle-tab: 0.23 0.022 225;
    --candle-tab-foreground: 0.75 0.012 220;
    --candle-tab-active: 0.72 0.13 200;
    --candle-tab-active-foreground: 0.155 0.018 225;
    --candle-tab-active-border: 0.72 0.13 200;
    --candle-header-foreground: 0.95 0.008 220;
    --candle-header-muted: 0.6 0.014 220;
    --candle-trend-up: 0.68 0.2 145;
    --candle-trend-down: 0.62 0.25 25;
    --candle-trend-flat: 0.6 0.016 220;

    /* NEW 3D hero coins — dark-mode metallics. L raised so the domed
       faces stay luminous against the dark hero card; hues kept stable
       with light mode for instant BTC/EUR recognition. */
    --coin-btc-face: 0.78 0.14 75;
    --coin-btc-face-bright: 0.9 0.11 85;
    --coin-btc-face-deep: 0.5 0.16 60;
    --coin-btc-rim: 0.68 0.17 70;
    --coin-btc-rim-bright: 0.86 0.13 80;
    --coin-btc-rim-deep: 0.4 0.14 50;
    --coin-btc-symbol: 0.2 0.06 55;
    --coin-btc-glow: 0.78 0.15 75;

    --coin-eur-face: 0.82 0.01 240;
    --coin-eur-face-bright: 0.94 0.005 240;
    --coin-eur-face-deep: 0.54 0.014 235;
    --coin-eur-rim: 0.72 0.014 235;
    --coin-eur-rim-bright: 0.9 0.008 240;
    --coin-eur-rim-deep: 0.44 0.016 230;
    --coin-eur-symbol: 0.2 0.012 235;
    --coin-eur-glow: 0.78 0.016 240;

    /* Ticker cards — dark-mode surfaces. */
    --ticker-card: 0.19 0.02 225;
    --ticker-card-foreground: 0.95 0.008 220;
    --ticker-card-border: 0.32 0.022 225;
    --ticker-up: 0.65 0.16 150;
    --ticker-up-foreground: 0.155 0.018 150;
    --ticker-down: 0.62 0.2 25;
    --ticker-down-foreground: 0.155 0.018 25;
    --ticker-spark-up: 0.66 0.16 150;
    --ticker-spark-down: 0.62 0.2 25;

    --sidebar: 0.19 0.02 225;
    --sidebar-foreground: 0.95 0.008 220;
    --sidebar-primary: 0.72 0.13 200;
    --sidebar-primary-foreground: 0.155 0.018 225;
    --sidebar-accent: 0.25 0.03 75;
    --sidebar-accent-foreground: 0.85 0.02 75;
    --sidebar-border: 0.28 0.022 225;
    --sidebar-ring: 0.72 0.13 200;

    --gradient-primary: linear-gradient(
      135deg,
      oklch(0.72 0.13 200) 0%,
      oklch(0.68 0.12 215) 100%
    );
    --gradient-accent: linear-gradient(
      135deg,
      oklch(0.78 0.15 75) 0%,
      oklch(0.8 0.13 85) 100%
    );
    --gradient-crypto: linear-gradient(
      135deg,
      oklch(0.62 0.2 285) 0%,
      oklch(0.56 0.22 300) 100%
    );
    --gradient-hero: radial-gradient(
        ellipse at top right,
        oklch(0.78 0.15 75 / 0.14) 0%,
        oklch(0.155 0.018 225) 55%
      ),
      linear-gradient(
        180deg,
        oklch(0.155 0.018 225) 0%,
        oklch(0.18 0.02 225) 100%
      );
  }

  * {
  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;
    /* Vlotte overgang bij theme-toggle (next-themes + ThemeToggle.tsx
       bestaan al). Korte 200ms overgang op achtergrond/voorgrondkleur
       zodat de donkere-modus toggle zacht wisselt. Gated door
       prefers-reduced-motion: reduce hieronder (dan instant). */
    transition: background-color 200ms ease-out, color 200ms ease-out,
      border-color 200ms ease-out;
}
  /* Reduced-motion: de vlotte kleur-overgang uitschakelen — instant
     wissel zonder animatie, in dezelfde stijl als de bestaande guards. */
  @media (prefers-reduced-motion: reduce) {
    body {
      transition: none;
    }
  }
.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;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-12 {
  right: -3rem;
}
.-top-0\.5 {
  top: -0.125rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-\[10\%\] {
  bottom: 10%;
}
.bottom-\[12\%\] {
  bottom: 12%;
}
.bottom-\[8\%\] {
  bottom: 8%;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-\[14\%\] {
  left: 14%;
}
.left-\[16\%\] {
  left: 16%;
}
.left-\[18\%\] {
  left: 18%;
}
.left-\[4\%\] {
  left: 4%;
}
.left-\[5\%\] {
  left: 5%;
}
.left-\[50\%\] {
  left: 50%;
}
.left-\[6\%\] {
  left: 6%;
}
.left-\[7\%\] {
  left: 7%;
}
.left-\[8\%\] {
  left: 8%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-\[10\%\] {
  right: 10%;
}
.right-\[14\%\] {
  right: 14%;
}
.right-\[16\%\] {
  right: 16%;
}
.right-\[5\%\] {
  right: 5%;
}
.right-\[6\%\] {
  right: 6%;
}
.right-\[8\%\] {
  right: 8%;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-6 {
  top: 1.5rem;
}
.top-\[12\%\] {
  top: 12%;
}
.top-\[14\%\] {
  top: 14%;
}
.top-\[16\%\] {
  top: 16%;
}
.top-\[18\%\] {
  top: 18%;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[20\%\] {
  top: 20%;
}
.top-\[22\%\] {
  top: 22%;
}
.top-\[24\%\] {
  top: 24%;
}
.top-\[30\%\] {
  top: 30%;
}
.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-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.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-4 {
  margin-top: -1rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.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-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.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;
}
.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;
}
.hidden {
  display: none;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.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-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-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.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-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-24 {
  height: 6rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.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-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.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-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[70vh\] {
  min-height: 70vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.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-11 {
  min-width: 2.75rem;
}
.min-w-5 {
  min-width: 1.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-5xl {
  max-width: 64rem;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.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-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 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 ticker-arrow-travel {

  0% {
    transform: translateX(0) translateY(-50%);
  }

  100% {
    transform: translateX(100%) translateY(-50%);
  }
}
.animate-ticker-arrow-travel {
  animation: ticker-arrow-travel 3.2s linear infinite;
}
.cursor-default {
  cursor: default;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: 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-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.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;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.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\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.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-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.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-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.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-border {
  border-color: oklch(var(--border));
}
.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\/30 {
  border-color: oklch(var(--primary) / 0.3);
}
.border-primary\/40 {
  border-color: oklch(var(--primary) / 0.4);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-success {
  --tw-border-opacity: 1;
  border-color: oklch(var(--success) / var(--tw-border-opacity, 1));
}
.border-success\/30 {
  border-color: oklch(var(--success) / 0.3);
}
.border-transparent {
  border-color: transparent;
}
.border-warning\/30 {
  border-color: oklch(var(--warning) / 0.3);
}
.border-warning\/40 {
  border-color: oklch(var(--warning) / 0.4);
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-primary {
  --tw-border-opacity: 1;
  border-top-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-t-primary-foreground {
  border-top-color: oklch(var(--primary-foreground));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-accent\/15 {
  background-color: oklch(var(--accent) / 0.15);
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.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-destructive\/5 {
  background-color: oklch(var(--destructive) / 0.05);
}
.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\/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\/10 {
  background-color: oklch(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.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\/10 {
  background-color: oklch(var(--success) / 0.1);
}
.bg-success\/15 {
  background-color: oklch(var(--success) / 0.15);
}
.bg-success\/5 {
  background-color: oklch(var(--success) / 0.05);
}
.bg-transparent {
  background-color: transparent;
}
.bg-warning\/10 {
  background-color: oklch(var(--warning) / 0.1);
}
.bg-warning\/15 {
  background-color: oklch(var(--warning) / 0.15);
}
.bg-warning\/5 {
  background-color: oklch(var(--warning) / 0.05);
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.from-muted\/60 {
  --tw-gradient-from: oklch(var(--muted) / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.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-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.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-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.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;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.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-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.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-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.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-muted-foreground\/50 {
  color: oklch(var(--muted-foreground) / 0.5);
}
.text-muted-foreground\/70 {
  color: oklch(var(--muted-foreground) / 0.7);
}
.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-success\/60 {
  color: oklch(var(--success) / 0.6);
}
.text-warning {
  --tw-text-opacity: 1;
  color: oklch(var(--warning) / var(--tw-text-opacity, 1));
}
.text-warning-foreground {
  color: oklch(var(--warning-foreground));
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-70 {
  opacity: 0.7;
}
.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-3d-glow {
  --tw-shadow: 0 0 0 1px oklch(0.74 0.16 70 / 0.18), 0 18px 40px -12px oklch(0.74 0.16 70 / 0.22), 0 8px 20px -6px oklch(0.58 0.19 285 / 0.18);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 18px 40px -12px var(--tw-shadow-color), 0 8px 20px -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-\[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_0_0_2px_oklch\(var\(--card\)\)\] {
  --tw-shadow: 0 0 0 2px oklch(var(--card));
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow: 0 2px 8px -2px oklch(0.46 0.13 215 / 0.08), 0 1px 3px 0 oklch(0.46 0.13 215 / 0.05);
  --tw-shadow-colored: 0 2px 8px -2px var(--tw-shadow-color), 0 1px 3px 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-elevated {
  --tw-shadow: 0 10px 30px -12px oklch(0.46 0.13 215 / 0.18), 0 4px 12px -4px oklch(0.46 0.13 215 / 0.1);
  --tw-shadow-colored: 0 10px 30px -12px var(--tw-shadow-color), 0 4px 12px -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-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.46 0.13 215 / 0.08), 0 1px 2px -1px oklch(0.46 0.13 215 / 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-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);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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;
}
.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 {
  --tw-enter-opacity: 0;
}
.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;
}
.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);
}
.transform-3d {
  transform-style: preserve-3d;
}
.transition-smooth {
    transition: var(--transition-smooth);
  }
.bg-gradient-primary {
    background-image: var(--gradient-primary);
  }
.bg-gradient-accent {
    background-image: var(--gradient-accent);
  }
.bg-hero {
    background-image: var(--gradient-hero);
  }
.text-gradient-primary {
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-crypto {
    background-image: var(--gradient-crypto);
  }
.btn-crypto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius);
    background-image: var(--gradient-crypto);
    color: oklch(var(--crypto-foreground));
    font-weight: 600;
    box-shadow: 0 4px 12px -4px oklch(0.58 0.19 285 / 0.35), 0 1px 3px 0
      oklch(0.58 0.19 285 / 0.2);
    transition: var(--transition-smooth);
  }
.btn-crypto:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 8px 20px -6px oklch(0.58 0.19 285 / 0.45), 0 2px 6px -1px
      oklch(0.58 0.19 285 / 0.25);
  }
.btn-crypto:focus-visible {
    outline: 2px solid oklch(var(--crypto) / 0.6);
    outline-offset: 2px;
  }
/* ============================================================
      HERO TEXT SHIELD — keeps headline/subcopy readable above the
      hero illustration. A subtle solid semi-transparent panel behind
      text blocks (no blur, no text-shadow) so the type stays crisp.
      ============================================================ */
.hero-text-shield {
    position: relative;
  }
.hero-text-shield::before {
    content: "";
    position: absolute;
    inset: -10% -20%;
    z-index: -1;
    background: oklch(var(--background) / 0.45);
    border-radius: 9999px;
    pointer-events: none;
  }
/* ============================================================
      HERO 3D STAGE / CARD / FLOAT / BADGE
      (per DESIGN.md — 3D-behandeling van de Bitcoin→Euro hero).
      De keyframes (hero-float, glow-pulse) en shadow-tokens
      (shadow-3d-deep, shadow-3d-glow) staan in tailwind.config.js.
      ============================================================ */
/* 3D-podium: perspective 1200px, origin 50% 35% (per DESIGN.md) */
.hero-3d-stage {
    perspective: 1200px;
    perspective-origin: 50% 35%;
  }
/* 3D-kaart: rotateX/rotateY-tilt + hero-float + diepe gloed-schaduw.
      De achtergrond is een PURE CSS radiale gloed/verlop-backdrop
      (geen PNG, geen munt-imagery); de overlay-munten draaien erboven.
      transform-style preserve-3d houdt de kind-rotaties (coin-spin-fast
      etc.) correct in de perspective. */
.hero-3d-card {
    transform-style: preserve-3d;
    transform: rotateX(10deg) rotateY(-13deg);
    animation: hero-float 7s ease-in-out infinite;
    box-shadow:
      0 0 0 1px oklch(0.74 0.16 70 / 0.18),
      0 24px 48px -16px oklch(0.46 0.13 215 / 0.28),
      0 12px 24px -8px oklch(0.46 0.13 215 / 0.16),
      0 18px 40px -12px oklch(0.74 0.16 70 / 0.22),
      0 8px 20px -6px oklch(0.58 0.19 285 / 0.18);
    will-change: transform;
  }
/* Zwevende BTC→€ sample-kaart, translateZ(60px) (per DESIGN.md) */
.hero-3d-float {
    transform: translateZ(60px);
  }
/* Globe-badge, translateZ(80px) (per DESIGN.md) */
.hero-3d-badge {
    transform: translateZ(80px);
  }
/* ============================================================
      3D COIN GEOMETRY — echte cilindermunten met Z-diepte.
      .coin-3d is de preserve-3d container; .coin-face zijn de
      front/back vlakken (translateZ ±DEPTH/2); .coin-rim is de
      container voor de N rim-segmenten die samen de cilinderwand
      (de metalen rand) vormen. .coin-rim-segment is één dun vlak
      op positie i·360/N rondom de Y-as. Alleen zichtbaar wanneer
      de munt near edge-on staat — geeft de munt echte dikte.
      ============================================================ */
.coin-3d {
    transform-style: preserve-3d;
  }
.coin-face {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
.coin-rim {
    transform-style: preserve-3d;
  }
.coin-rim-segment {
    /* Elk segment staat op rotateY(i·360/N) translateZ(RADIUS) —
       zie rimSegmentStyle() in HeroScene.tsx. Hier alleen de
       visuele basis: afgerond, dun, metaalverloop via inline
       background. margin-left/-top halen het centrum naar het
       midden van de coin-rim container. */
    margin-left: -1px;
    border-radius: 1px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.35);
  }
/* Reduced-motion: 3D-tilt en zweefanimatie uitschakelen — de CSS-
      gloed-backdrop en de twee statische CSS-3D munten blijven zichtbaar,
      alleen de beweging valt weg. Also flattens the new domed coin rim
      bevel, the new layered holo-coin wobble + specular shimmer, and
      stops the five traveling arrows + ticker glow pulses. */
@media (prefers-reduced-motion: reduce) {
    .hero-3d-card {
      transform: none;
      animation: none;
    }
    .coin-domed-rim {
      transform: none;
    }
    .coin-holo {
      animation: none !important;
    }
    .coin-holo-specular {
      animation: none !important;
      opacity: 0.5;
    }
    .ticker-arrow {
      animation: none;
    }
    .ticker-card-up::before,
    .ticker-card-down::before {
      animation: none;
    }
  }
/* ============================================================
      NEW HERO — WIDER 3D CARD
      Wider (more landscape) and vertically shorter than the previous
      aspect-[4/3] maxHeight 32vh. aspect 16/5, max-height 15vh (was
      18vh — iets compacter onder de nav). Pure CSS radial-gradient
      backdrop (no PNG layer) so only the two layered coins + five
      traveling arrows remain visible.
      ============================================================ */
.hero-3d-card-wide {
    aspect-ratio: var(--hero-aspect-ratio);
    max-height: var(--hero-max-height);
    overflow: hidden;
  }
/* ============================================================
      NEW 3D COIN — "DOMED BEVELED COIN"
      Distinctly different from the previous cylinder coins. The new
      coin is a single domed disc: a glossy convex face built from a
      radial highlight gradient, a beveled metallic ring edge built
      from a conic-gradient ring, and an embossed symbol. Depth comes
      from layered gradients + an outer rim ring (rotateX bevel hint),
      NOT from translateZ front/back pairs or N rim segments.
      .coin-domed is the positioning wrapper; .coin-domed-face is the
      glossy disc; .coin-domed-rim is the beveled ring; .coin-domed-
      symbol is the embossed ₿ / € glyph.
      ============================================================ */
.coin-domed {
    position: relative;
    transform-style: preserve-3d;
    border-radius: 9999px;
  }
/* Glossy convex face — radial highlight upper-left, deep edge
     lower-right, suggests a domed surface. No back face needed. */
.coin-domed-face {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: radial-gradient(
      circle at 32% 28%,
      oklch(var(--coin-face-bright)) 0%,
      oklch(var(--coin-face)) 38%,
      oklch(var(--coin-face-deep)) 100%
    );
    box-shadow:
      inset 0 0 0 1px oklch(var(--coin-face-deep) / 0.4),
      inset 0 -8% 18% -8% oklch(var(--coin-face-deep) / 0.55),
      inset 0 8% 14% -6% oklch(1 0 0 / 0.5),
      0 10px 24px -10px oklch(var(--coin-glow) / 0.5);
  }
/* Beveled metallic ring edge — a conic-gradient ring sits just
     inside the disc rim, suggesting a milled/reeded edge without
     building N rim segments. rotateX gives a bevel hint. */
.coin-domed-rim {
    position: absolute;
    inset: 6%;
    border-radius: 9999px;
    background: conic-gradient(
      from 0deg,
      oklch(var(--coin-rim-bright)) 0deg,
      oklch(var(--coin-rim-deep)) 90deg,
      oklch(var(--coin-rim-bright)) 180deg,
      oklch(var(--coin-rim-deep)) 270deg,
      oklch(var(--coin-rim-bright)) 360deg
    );
    transform: translateZ(0.5px) rotateX(8deg);
    box-shadow: inset 0 0 0 2px oklch(var(--coin-rim-deep) / 0.5), inset 0 0 6px
      oklch(var(--coin-rim-deep) / 0.4);
  }
/* Embossed symbol — sits on top of the face, slight inset shadow
     gives a struck-coin feel. */
.coin-domed-symbol {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: oklch(var(--coin-symbol));
    text-shadow: 0 1px 0 oklch(1 0 0 / 0.35), 0 -1px 0
      oklch(var(--coin-face-deep) / 0.4);
    transform: translateZ(1px);
  }
/* BTC coin — gold metallics. */
.coin-domed-btc {
    --coin-face: var(--coin-btc-face);
    --coin-face-bright: var(--coin-btc-face-bright);
    --coin-face-deep: var(--coin-btc-face-deep);
    --coin-rim: var(--coin-btc-rim);
    --coin-rim-bright: var(--coin-btc-rim-bright);
    --coin-rim-deep: var(--coin-btc-rim-deep);
    --coin-symbol: var(--coin-btc-symbol);
    --coin-glow: var(--coin-btc-glow);
  }
/* EUR coin — silver metallics. */
.coin-domed-eur {
    --coin-face: var(--coin-eur-face);
    --coin-face-bright: var(--coin-eur-face-bright);
    --coin-face-deep: var(--coin-eur-face-deep);
    --coin-rim: var(--coin-eur-rim);
    --coin-rim-bright: var(--coin-eur-rim-bright);
    --coin-rim-deep: var(--coin-eur-rim-deep);
    --coin-symbol: var(--coin-eur-symbol);
    --coin-glow: var(--coin-eur-glow);
  }
/* ============================================================
      NEW 3D COIN — "LAYERED HOLOGRAPHIC COIN" (v2)
      Vervanging voor de "Domed Beveled Coin". Visueel ECHT anders:
      in plaats van één domed schijf is deze munt opgebouwd uit
      MEERDERE zichtbare 3D-lagen met echte translateZ-diepte, een
      milled/reeded rand met veel conic-stops, een recessed annulair
      veld, een verhoogde symbool-schijf, een bewegende specular
      boog-hooglicht (shimmer), en een subtiele 3D-wobble (rotateX/
      rotateY oscillatie, geen volledige spin) zodat de gelaagde
      diepte zichtbaar wordt. De munt "ademt" in 3D.
      ============================================================ */
/* Wrapper — preserve-3d voor de translateZ-lagen + zachte wobble. */
.coin-holo {
    position: relative;
    transform-style: preserve-3d;
    border-radius: 9999px;
    animation: coin-holo-wobble 6s ease-in-out infinite;
    will-change: transform;
  }
/* 1. Reflectie-gloed onder de munt — zachte halo op de card.
     Ligt onder alle lagen (geen translateZ), iets groter dan de munt. */
.coin-holo-halo {
    position: absolute;
    inset: -12%;
    border-radius: 9999px;
    background: radial-gradient(
      circle at 50% 55%,
      oklch(var(--coin-glow) / 0.45) 0%,
      oklch(var(--coin-glow) / 0.18) 45%,
      transparent 72%
    );
    filter: blur(6px);
    transform: translateZ(-2px);
    z-index: 0;
  }
/* 2. De gekartelde rand — 4 concentrische ring-lagen op oplopende
     translateZ-diepte (0/2/4/6px) vormen samen de milled edge en
     geven de munt voelbare dikte. Elke ring is een conic-gradient
     met veel stops voor de reeded/knurled textuur. */
.coin-holo-stack {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    transform-style: preserve-3d;
    z-index: 1;
  }
.coin-holo-stack-ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: conic-gradient(
      from 0deg,
      oklch(var(--coin-rim-bright)) 0deg,
      oklch(var(--coin-rim-deep)) 12deg,
      oklch(var(--coin-rim-bright)) 24deg,
      oklch(var(--coin-rim-deep)) 36deg,
      oklch(var(--coin-rim-bright)) 48deg,
      oklch(var(--coin-rim-deep)) 60deg,
      oklch(var(--coin-rim-bright)) 72deg,
      oklch(var(--coin-rim-deep)) 84deg,
      oklch(var(--coin-rim-bright)) 96deg,
      oklch(var(--coin-rim-deep)) 108deg,
      oklch(var(--coin-rim-bright)) 120deg,
      oklch(var(--coin-rim-deep)) 132deg,
      oklch(var(--coin-rim-bright)) 144deg,
      oklch(var(--coin-rim-deep)) 156deg,
      oklch(var(--coin-rim-bright)) 168deg,
      oklch(var(--coin-rim-deep)) 180deg,
      oklch(var(--coin-rim-bright)) 192deg,
      oklch(var(--coin-rim-deep)) 204deg,
      oklch(var(--coin-rim-bright)) 216deg,
      oklch(var(--coin-rim-deep)) 228deg,
      oklch(var(--coin-rim-bright)) 240deg,
      oklch(var(--coin-rim-deep)) 252deg,
      oklch(var(--coin-rim-bright)) 264deg,
      oklch(var(--coin-rim-deep)) 276deg,
      oklch(var(--coin-rim-bright)) 288deg,
      oklch(var(--coin-rim-deep)) 300deg,
      oklch(var(--coin-rim-bright)) 312deg,
      oklch(var(--coin-rim-deep)) 324deg,
      oklch(var(--coin-rim-bright)) 336deg,
      oklch(var(--coin-rim-deep)) 348deg,
      oklch(var(--coin-rim-bright)) 360deg
    );
    box-shadow: inset 0 0 0 1px oklch(var(--coin-rim-deep) / 0.6), inset 0 0 8px
      oklch(var(--coin-rim-deep) / 0.45);
  }
.coin-holo-stack-ring-1 {
    transform: translateZ(0px);
  }
.coin-holo-stack-ring-2 {
    transform: translateZ(2px);
  }
.coin-holo-stack-ring-3 {
    transform: translateZ(4px);
  }
.coin-holo-stack-ring-4 {
    transform: translateZ(6px);
  }
/* 3. Recessed annulair veld — donkerder ring tussen rand en
     symboolplaat, geeft diepte (lijkt uitgesneden). Iets kleiner
     dan de stack, op translateZ 7px (net boven de rand). */
.coin-holo-field {
    position: absolute;
    inset: 11%;
    border-radius: 9999px;
    background: radial-gradient(
      circle at 38% 32%,
      oklch(var(--coin-face-deep) / 0.85) 0%,
      oklch(var(--coin-face-deep) / 1) 70%
    );
    box-shadow: inset 0 0 0 1px oklch(var(--coin-rim-deep) / 0.7), inset 0 2px
      6px oklch(0 0 0 / 0.35), inset 0 -2px 6px oklch(0 0 0 / 0.25);
    transform: translateZ(7px);
    z-index: 2;
  }
/* 4. Verhoogde symbool-schijf — eigen radial highlight, zit bovenop
     het field op translateZ 8px. Dit is het "verhoogde plateau" dat
     het symbool draagt. */
.coin-holo-plate {
    position: absolute;
    inset: 17%;
    border-radius: 9999px;
    background: radial-gradient(
      circle at 32% 28%,
      oklch(var(--coin-face-bright)) 0%,
      oklch(var(--coin-face)) 42%,
      oklch(var(--coin-face-deep)) 100%
    );
    box-shadow:
      inset 0 0 0 1px oklch(var(--coin-face-deep) / 0.4),
      inset 0 -6% 16% -8% oklch(var(--coin-face-deep) / 0.55),
      inset 0 6% 12% -6% oklch(1 0 0 / 0.55),
      0 4px 10px -4px oklch(0 0 0 / 0.3);
    transform: translateZ(8px);
    z-index: 3;
  }
/* 5. Bewegende specular boog-hooglicht — een witte, aflopende boog
     die over het vlak veegt (shimmer) voor een "live metallic" feel.
     Ligt boven de plate, onder het symbool. */
.coin-holo-specular {
    position: absolute;
    inset: 14%;
    border-radius: 9999px;
    background: linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      oklch(1 0 0 / 0.55) 48%,
      oklch(1 0 0 / 0.85) 50%,
      oklch(1 0 0 / 0.55) 52%,
      transparent 62%,
      transparent 100%
    );
    mix-blend-mode: screen;
    opacity: 0.7;
    transform: translateZ(9px);
    z-index: 4;
    background-size: 280% 280%;
    background-position: 130% 130%;
    animation: coin-holo-shimmer 4.5s ease-in-out infinite;
  }
/* 6. Diep gegraveerd symbool — struck-coin feel via inset shadow.
     Ligt bovenaan op translateZ 10px. */
.coin-holo-symbol {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: oklch(var(--coin-symbol));
    text-shadow: 0 1px 0 oklch(1 0 0 / 0.4), 0 -1px 0
      oklch(var(--coin-face-deep) / 0.5), 0 2px 3px oklch(0 0 0 / 0.35);
    transform: translateZ(10px);
    z-index: 5;
  }
/* BTC coin — gold metallics (hergebruikt de bestaande --coin-btc-* tokens). */
.coin-holo-btc {
    --coin-face: var(--coin-btc-face);
    --coin-face-bright: var(--coin-btc-face-bright);
    --coin-face-deep: var(--coin-btc-face-deep);
    --coin-rim: var(--coin-btc-rim);
    --coin-rim-bright: var(--coin-btc-rim-bright);
    --coin-rim-deep: var(--coin-btc-rim-deep);
    --coin-symbol: var(--coin-btc-symbol);
    --coin-glow: var(--coin-btc-glow);
  }
/* EUR coin — silver metallics (hergebruikt de bestaande --coin-eur-* tokens). */
.coin-holo-eur {
    --coin-face: var(--coin-eur-face);
    --coin-face-bright: var(--coin-eur-face-bright);
    --coin-face-deep: var(--coin-eur-face-deep);
    --coin-rim: var(--coin-eur-rim);
    --coin-rim-bright: var(--coin-eur-rim-bright);
    --coin-rim-deep: var(--coin-eur-rim-deep);
    --coin-symbol: var(--coin-eur-symbol);
    --coin-glow: var(--coin-eur-glow);
  }
/* Subtiele 3D-wobble — rotateX/rotateY oscillatie (geen volledige
     spin) zodat de gelaagde diepte van de munt zichtbaar wordt. De
     munt "ademt" in 3D. Guarded by prefers-reduced-motion (zie boven). */
@keyframes coin-holo-wobble {
    0%,
    100% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
      transform: rotateX(-6deg) rotateY(8deg);
    }
    50% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    75% {
      transform: rotateX(6deg) rotateY(-8deg);
    }
  }
/* Specular shimmer — het hooglicht veegt diagonaal over het vlak. */
@keyframes coin-holo-shimmer {
    0% {
      background-position: 130% 130%;
      opacity: 0.35;
    }
    45% {
      opacity: 0.85;
    }
    55% {
      opacity: 0.85;
    }
    100% {
      background-position: -30% -30%;
      opacity: 0.35;
    }
  }
/* ============================================================
      THREE HORIZONTALLY-MOVING ARROWS — BTC → EUR path
      The arrows translate left→right along the path (NOT rotating
      around an axis). Staggered delays so the three arrows flow in
      sequence. The keyframe (ticker-arrow-travel) lives in
      tailwind.config.js; here only the path track + arrow base.
      ============================================================ */
.ticker-arrow-track {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
.ticker-arrow {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    will-change: transform;
  }
/* ============================================================
      LIVE TICKER CARDS — three small cards directly below the hero.
      Each: small sparkline + large digital price (mono) + trend arrow
      (▲/▼). Green for rising, red for falling. Subtle pulse/glow.
      ============================================================ */
.ticker-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    background: oklch(var(--ticker-card));
    border: 1px solid oklch(var(--ticker-card-border));
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 6px 18px -10px
      oklch(0.46 0.13 215 / 0.18), 0 2px 6px -3px oklch(0.46 0.13 215 / 0.1);
    overflow: hidden;
    transition: var(--transition-smooth);
  }
.ticker-card:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.05) inset, 0 12px 28px -12px
      oklch(0.46 0.13 215 / 0.24), 0 4px 10px -4px oklch(0.46 0.13 215 / 0.14);
  }
/* Subtle directional glow — green for rising, red for falling.
     The glow sits as a soft top-edge accent that pulses gently. */
.ticker-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      oklch(var(--ticker-glow, var(--ticker-up)) / 0.6),
      transparent
    );
    opacity: 0.7;
  }
.ticker-card-up {
    --ticker-glow: var(--ticker-up);
  }
.ticker-card-down {
    --ticker-glow: var(--ticker-down);
  }
.ticker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
.ticker-symbol {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: oklch(var(--ticker-card-foreground));
  }
.ticker-spark {
    width: 100%;
    height: 2.25rem;
    display: block;
  }
.ticker-price {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: oklch(var(--ticker-card-foreground));
    font-variant-numeric: tabular-nums;
  }
.ticker-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
.ticker-trend-up {
    color: oklch(var(--ticker-up));
  }
.ticker-trend-down {
    color: oklch(var(--ticker-down));
  }
/* LIVE badge — small mono pill in the accent voice that pulses gently
     to signal a live data feed. Sits in the ticker card header next to
     the symbol. Guarded by prefers-reduced-motion: no-preference so the
     pulse only runs for users who accept motion. */
.ticker-live {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--accent));
    background: oklch(var(--accent) / 0.12);
    border: 1px solid oklch(var(--accent) / 0.28);
    line-height: 1;
  }
.ticker-live::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: oklch(var(--accent));
    flex-shrink: 0;
  }
@media (prefers-reduced-motion: no-preference) {
    .ticker-live {
      animation: ticker-live-pulse 2.4s ease-in-out infinite;
    }
  }
@keyframes ticker-live-pulse {
    0%,
    100% {
      opacity: 0.7;
      box-shadow: 0 0 0 0 oklch(var(--accent) / 0);
    }
    50% {
      opacity: 1;
      box-shadow: 0 0 0 3px oklch(var(--accent) / 0.12);
    }
  }
/* Subtle pulse/glow on the trend arrow to draw attention. */
@media (prefers-reduced-motion: no-preference) {
    .ticker-card-up::before {
      animation: ticker-glow 2.6s ease-in-out infinite;
    }
    .ticker-card-down::before {
      animation: ticker-glow 2.6s ease-in-out infinite;
      animation-delay: 1.3s;
    }
  }
@keyframes ticker-glow {
    0%,
    100% {
      opacity: 0.45;
    }
    50% {
      opacity: 0.9;
    }
  }
/* ============================================================
      EXCHANGE-RATE CHART SECTION
      BTC / ETH / USDT → € line chart, sits between the hero and the
      value-props. Tokens above drive colors; utilities below give the
      period switcher, tooltip, and grid their distinct voices.
      ============================================================ */
/* Period switcher pill group — 1D / 1W / 1M.
     Idle pills are quiet; the active pill inverts to primary. */
.chart-period-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 9999px;
    background: oklch(var(--chart-period));
    border: 1px solid oklch(var(--border));
  }
.chart-period-btn {
    border-radius: 9999px;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--chart-period-foreground));
    background: transparent;
    border: 1px solid transparent;
    transition: var(--transition-smooth);
  }
.chart-period-btn:hover {
    color: oklch(var(--foreground));
  }
.chart-period-btn[data-active="true"] {
    background: oklch(var(--chart-period-active));
    color: oklch(var(--chart-period-active-foreground));
    border-color: oklch(var(--chart-period-active-border));
    box-shadow: 0 2px 8px -2px oklch(var(--chart-period-active) / 0.35);
  }
.chart-period-btn:focus-visible {
    outline: 2px solid oklch(var(--chart-period-active) / 0.6);
    outline-offset: 2px;
  }
/* Chart tooltip — denser than the generic popover, built for
     tabular rate rows (crypto · rate · delta). */
.chart-tooltip {
    background: oklch(var(--chart-tooltip));
    color: oklch(var(--chart-tooltip-foreground));
    border: 1px solid oklch(var(--chart-tooltip-border));
    border-radius: var(--radius);
    box-shadow: 0 10px 30px -12px oklch(0.46 0.13 215 / 0.22), 0 4px 12px -4px
      oklch(0.46 0.13 215 / 0.12);
    padding: 0.625rem 0.75rem;
    min-width: 11rem;
  }
.chart-tooltip-date {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(var(--chart-tooltip-muted));
    margin-bottom: 0.375rem;
  }
.chart-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.125rem 0;
  }
.chart-tooltip-swatch {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
  }
.chart-tooltip-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: oklch(var(--chart-tooltip-foreground));
  }
.chart-tooltip-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: oklch(var(--chart-tooltip-foreground));
    font-variant-numeric: tabular-nums;
  }
/* Recharts grid/axis/crosshair hooks — these CSS variables are
     consumed by the chart.tsx wrapper via inline style on recharts
     components that can't take Tailwind classes. */
.chart-surface {
    --recharts-cartesian-grid-stroke: oklch(var(--chart-grid));
    --recharts-axis-tick-fill: oklch(var(--chart-axis));
    --recharts-cursor-fill: oklch(var(--chart-crosshair) / 0.08);
    --recharts-cursor-stroke: oklch(var(--chart-crosshair) / 0.5);
  }
/* Line draw-in animation for the chart series — staggered by series
     so BTC, ETH, USDT trace in sequence on period change. */
@media (prefers-reduced-motion: no-preference) {
    .chart-line-draw {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: chart-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
  }
@keyframes chart-draw {
    from {
      stroke-dashoffset: 1;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
/* ============================================================
      PREMIUM CHART UPGRADES
      Gradient-filled areas, glowing strokes, a refined legend with
      current € value + animated trend arrows, and a polished card
      surface with depth. All driven by the existing --chart-* tokens
      so dark mode and theming keep working.
      ============================================================ */
/* Polished card surface — subtle layered glow + inner highlight that
     gives the chart depth without competing with the data. Sits on top
     of the existing .chart-surface token hooks. */
.chart-surface-premium {
    position: relative;
    background-image: radial-gradient(
        ellipse 80% 60% at 50% 0%,
        oklch(var(--chart-btc) / 0.06) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 60% 50% at 100% 100%,
        oklch(var(--chart-eth) / 0.05) 0%,
        transparent 70%
      );
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 10px 30px -16px
      oklch(0.46 0.13 215 / 0.18), 0 4px 12px -6px oklch(0.46 0.13 215 / 0.1);
  }
.dark .chart-surface-premium {
    background-image: radial-gradient(
        ellipse 80% 60% at 50% 0%,
        oklch(var(--chart-btc) / 0.1) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 60% 50% at 100% 100%,
        oklch(var(--chart-eth) / 0.08) 0%,
        transparent 70%
      );
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.05) inset, 0 14px 36px -18px
      oklch(0 0 0 / 0.5), 0 6px 16px -8px oklch(0.46 0.13 215 / 0.18);
  }
/* Soft glow on the area strokes — applied via the recharts <Area>
     className. Uses the SVG filter defined inline in the chart defs. */
.chart-line-glow {
    filter: url(#chart-line-glow);
  }
/* Custom legend row — sits above the chart, one entry per crypto with
     a color swatch, localized name, current € value, and an animated
     trend arrow. Replaces the default recharts legend for a richer,
     more "wow" presentation. */
.chart-legend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    padding: 0 0.5rem 1rem;
  }
.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background: oklch(var(--muted) / 0.5);
    border: 1px solid oklch(var(--border) / 0.7);
    transition: var(--transition-smooth);
  }
.chart-legend-item:hover {
    background: oklch(var(--muted) / 0.8);
    border-color: oklch(var(--border));
  }
.chart-legend-swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px oklch(var(--card) / 0.8), 0 0 8px 0
      var(--swatch-glow, transparent);
  }
.chart-legend-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(var(--foreground));
    letter-spacing: 0.01em;
  }
.chart-legend-value {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(var(--foreground));
    font-variant-numeric: tabular-nums;
  }
/* Trend arrows — up/down/flat. Up arrow gets a gentle bounce, down
     arrow a subtle pulse, flat a quiet fade-in. All guarded by
     prefers-reduced-motion. */
.chart-trend-arrow {
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    flex-shrink: 0;
  }
.chart-trend-arrow-sm {
    font-size: 0.625rem;
    width: 0.875rem;
    height: 0.875rem;
  }
.chart-trend-up {
    color: oklch(var(--chart-trend-up));
    background: oklch(var(--chart-trend-up) / 0.14);
  }
.chart-trend-down {
    color: oklch(var(--chart-trend-down));
    background: oklch(var(--chart-trend-down) / 0.14);
  }
.chart-trend-flat {
    color: oklch(var(--chart-trend-flat));
    background: oklch(var(--chart-trend-flat) / 0.1);
  }
@media (prefers-reduced-motion: no-preference) {
    .chart-trend-up {
      animation: chart-trend-bounce 1.6s ease-in-out infinite;
    }
    .chart-trend-down {
      animation: chart-trend-pulse 1.8s ease-in-out infinite;
    }
  }
@keyframes chart-trend-bounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.125rem);
    }
  }
@keyframes chart-trend-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.55;
    }
  }
/* ============================================================
      CANDLESTICK CHART — professional TradingView/Binance-style
      OHLC bars (BTC/ETH/USDT → €). Rebuilt for a real exchange
      look: a framed chart card with a prominent digital price
      header (crypto name + big price + trend badge), a deep
      dark-blue/near-black plot surface in dark mode, thick clearly
      defined candle bodies + wicks, a right-side euro price axis,
      and a bottom minute time axis. All colors driven by the
      --candle-* tokens above so light/dark themes stay readable.
      ============================================================ */
/* Chart frame — the outer card that wraps the price header and the
     plot surface. Uses the candle background token so the whole frame
     reads as one professional exchange panel, distinct from the page
     background. */
.candle-chart-frame {
    position: relative;
    background: oklch(var(--candle-background));
    border: 1px solid oklch(var(--candle-border));
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 10px 30px -16px
      oklch(0.46 0.13 215 / 0.18), 0 4px 12px -6px oklch(0.46 0.13 215 / 0.1);
  }
.dark .candle-chart-frame {
    box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.05) inset, 0 14px 36px -18px
      oklch(0 0 0 / 0.5), 0 6px 16px -8px oklch(0.46 0.13 215 / 0.18);
  }
/* Price header — prominent digital readout above the plot. Crypto
     name on the left, big mono price + trend badge on the right. */
.candle-price-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 0.875rem 1rem 0.75rem;
    border-bottom: 1px solid oklch(var(--candle-border));
  }
.candle-price-symbol {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    font-family: var(--font-display);
  }
.candle-price-symbol-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--candle-header-foreground));
  }
.candle-price-symbol-pair {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(var(--candle-header-muted));
  }
.candle-price-value-row {
    display: inline-flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
.candle-price-value {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: oklch(var(--candle-header-foreground));
  }
.candle-price-up {
    color: oklch(var(--candle-trend-up));
  }
.candle-price-down {
    color: oklch(var(--candle-trend-down));
  }
.candle-price-flat {
    color: oklch(var(--candle-header-foreground));
  }
/* Trend badge — small pill next to the price with ▲/▼ + label. */
.candle-trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
  }
.candle-trend-up {
    color: oklch(var(--candle-trend-up));
    background: oklch(var(--candle-trend-up) / 0.14);
  }
.candle-trend-down {
    color: oklch(var(--candle-trend-down));
    background: oklch(var(--candle-trend-down) / 0.14);
  }
.candle-trend-flat {
    color: oklch(var(--candle-trend-flat));
    background: oklch(var(--candle-trend-flat) / 0.12);
  }
.candle-trend-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
/* Chart card surface — the inner plot panel. Sits inside the frame
     below the price header. Subtle layered glow + inner highlight gives
     the plot depth without competing with the candles. */
.candle-surface {
    position: relative;
    padding: 0.5rem;
  }
/* SVG candle elements — body + wick. The component sets fill /
      stroke via these classes; the up/down variants pick the right
      token. Bodies are solid fills with a thin self-border for crisp
      edges; wicks are 1.5px lines that read as part of the candle. */
.candle-body-up {
    fill: oklch(var(--candle-up));
    stroke: oklch(var(--candle-wick-up));
  }
.candle-body-down {
    fill: oklch(var(--candle-down));
    stroke: oklch(var(--candle-wick-down));
  }
.candle-wick-up {
    stroke: oklch(var(--candle-wick-up));
  }
.candle-wick-down {
    stroke: oklch(var(--candle-wick-down));
  }
/* Plot background — the inner panel the candles sit on. Distinct
     from the frame so the plot reads as its own surface. */
.candle-plot-bg {
    fill: oklch(var(--candle-plot-bg));
  }
/* Grid lines — subtle, thin, non-intrusive. They recede so the
     candles stay the visual focus. */
.candle-grid-line {
    stroke: oklch(var(--candle-grid));
  }
/* Axis ticks — small tick marks on the right (price) and the
     baseline (time). */
.candle-axis-tick {
    stroke: oklch(var(--candle-axis-tick));
  }
.candle-axis-baseline {
    stroke: oklch(var(--candle-axis-baseline));
  }
/* Price tick labels (right Y-axis, euros) — mono, tabular-nums. */
.candle-price-tick {
    fill: oklch(var(--candle-axis));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
/* Time tick labels (bottom X-axis, minutes) — mono, tabular-nums. */
.candle-time-tick {
    fill: oklch(var(--candle-axis));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
.candle-axis-label {
    fill: oklch(var(--candle-axis));
    font-family: var(--font-body);
  }
/* Crypto selector tab group — BTC / ETH / USDT pill group above
      the chart. Idle pills are quiet; the active pill inverts to
      primary. Mirrors .chart-period-group for consistency. */
.candle-tab-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 9999px;
    background: oklch(var(--candle-tab));
    border: 1px solid oklch(var(--candle-border));
  }
.candle-tab-btn {
    border-radius: 9999px;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--candle-tab-foreground));
    background: transparent;
    border: 1px solid transparent;
    transition: var(--transition-smooth);
  }
.candle-tab-btn:hover {
    color: oklch(var(--foreground));
  }
.candle-tab-btn[data-active="true"] {
    background: oklch(var(--candle-tab-active));
    color: oklch(var(--candle-tab-active-foreground));
    border-color: oklch(var(--candle-tab-active-border));
    box-shadow: 0 2px 8px -2px oklch(var(--candle-tab-active) / 0.35);
  }
.candle-tab-btn:focus-visible {
    outline: 2px solid oklch(var(--candle-tab-active) / 0.6);
    outline-offset: 2px;
  }
/* Live badge reused on the candlestick card header — mirrors the
      ticker LIVE pill so the live-refresh signal is consistent.
      Includes a blinking green dot to signal a live data feed. */
.candle-live {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--candle-trend-up));
    background: oklch(var(--candle-trend-up) / 0.12);
    border: 1px solid oklch(var(--candle-trend-up) / 0.3);
    line-height: 1;
  }
.candle-live::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: oklch(var(--candle-trend-up));
    flex-shrink: 0;
  }
@media (prefers-reduced-motion: no-preference) {
    .candle-live {
      animation: candle-live-blink 1.6s ease-in-out infinite;
    }
  }
@keyframes candle-live-blink {
    0%,
    100% {
      opacity: 0.65;
      box-shadow: 0 0 0 0 oklch(var(--candle-trend-up) / 0);
    }
    50% {
      opacity: 1;
      box-shadow: 0 0 0 4px oklch(var(--candle-trend-up) / 0.18);
    }
  }
/* ============================================================
      BEWEGINGSLAAG — 5 PUNTEN (uitbreiding op bestaande laag)
      Puur visueel: geen nieuwe functionaliteit, data of logica.
      Alle 5 punten lezen CSS-variabelen die door kleine
      event-listeners (pointermove) worden gezet; de utilities
      zelf doen geen logica. Bestaande motion/react entrance-
      animaties, CSS-3D hero, holo-munten, tickers en chart-
      animaties blijven onaangetast — dit is een aanvullende
      laag, geen vervanging. Alle 5 punten zijn guarded door
      prefers-reduced-motion: reduce (zie het blok onderaan).
      ============================================================ */
/* Default CSS-variabelen voor de bewegingslaag. --cursor-x/y en
     --tilt-x/y defaulten naar 50% (gecentreerd) zodat de gloed
     vóór de eerste pointermove netjes in het midden zit. --mag-x/y
     defaulten naar 0 (geen magnetische offset). */
:root {
    --cursor-x: 50%;
    --cursor-y: 50%;
    --tilt-x: 50%;
    --tilt-y: 50%;
    --mag-x: 0px;
    --mag-y: 0px;
  }
/* ----------------------------------------------------------
     1. SCROLL-REVEAL — inhoud verschijnt vloeiend tijdens scrollen.
     .scroll-reveal start onzichtbaar + 16px naar beneden;
     .scroll-reveal.is-visible vervaagt naar zichtbaar + 0 offset.
     600ms ease-out, consistent met de bestaande fade-up entrance.
     ---------------------------------------------------------- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
    will-change: opacity, transform;
  }
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
/* ----------------------------------------------------------
     2. 3D-TILT KAARTEN — kaarten kantelen zacht naar de cursor
     (rotateX/rotateY) met een zachte gloed-overlay die de cursor
     volgt via --tilt-x/--tilt-y. transform-style preserve-3d
     houdt kind-lagen correct. 200ms ease-out voor een vlotte,
     niet-trage tilt. .tilt-card-glow is een pointer-events:none
     overlay met een kleine radial-gradient in de amber/accent
     stem. Layout/structuur blijft ongewijzigd — puur visueel.
     ---------------------------------------------------------- */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 200ms ease-out;
    will-change: transform;
  }
.tilt-card-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
      circle 180px at var(--tilt-x) var(--tilt-y),
      oklch(var(--accent) / 0.18) 0%,
      oklch(var(--accent) / 0.06) 35%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 200ms ease-out;
    mix-blend-mode: soft-light;
    z-index: 1;
  }
.tilt-card:hover .tilt-card-glow {
    opacity: 1;
  }
/* ----------------------------------------------------------
     3. MAGNETISCHE KNOPPEN — alle primaire knoppen (Betaal nu,
     Verstuur, login, registreer, admin-acties) trekken licht
     naar de cursor via --mag-x/--mag-y. Max ~6px translate,
     150ms ease-out. data-ocid hooks en onClick-handlers blijven
     volledig onaangetast — dit is puur een transform op het
     element, geen gedragswijziging.
     ---------------------------------------------------------- */
.magnetic-btn {
    transition: transform 150ms ease-out;
    will-change: transform;
    transform: translate(var(--mag-x), var(--mag-y));
  }
/* ----------------------------------------------------------
     4. CURSOR-GLOW OVERLAY — vaste, lichte lichtvlek-overlay die
     de muis volgt op alle pagina's (inclusief dashboard/admin).
     Fixed, full-viewport, pointer-events:none, mix-blend-mode
     soft-light. Kleine radial-gradient (~280px) in de amber/accent
     stem, lage opacity, werkt in licht EN donker omdat --accent
     in beide themes een goede L heeft. z-index hoog (40) maar
     onder dialogs/modals (Radix portals zitten op z-index 50+).
     Geen zware blur, geen grote gradient — performant.
     ---------------------------------------------------------- */
.cursor-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    mix-blend-mode: soft-light;
    background: radial-gradient(
      circle 280px at var(--cursor-x) var(--cursor-y),
      oklch(var(--accent) / 0.22) 0%,
      oklch(var(--accent) / 0.08) 40%,
      transparent 70%
    );
  }
/* ----------------------------------------------------------
     5. DONKERE-MODUS TOGGLE — BESTAAT AL (next-themes +
     ThemeToggle.tsx). Niet opnieuw bouwen. De vlotte kleur-
     overgang op body staat hierboven in @layer base. Hier geen
     extra utility nodig.
     ---------------------------------------------------------- */
/* ============================================================
      BEWEGINGSLAAG — REDUCED-MOTION GUARDS
      In dezelfde stijl als de bestaande guards voor .hero-3d-card,
      .coin-holo, .ticker-arrow, .ticker-card. Bij
      prefers-reduced-motion: reduce worden alle 5 bewegingspunten
      een no-op: scroll-reveal is direct zichtbaar, tilt-card staat
      stil zonder gloed, magnetic-btn heeft geen offset, cursor-glow
      wordt display:none. Functionele flows (betalingen, login, admin)
      blijven volledig werken — alleen de beweging valt weg.
      ============================================================ */
@media (prefers-reduced-motion: reduce) {
    /* 1. Scroll-reveal — direct zichtbaar, geen transform. */
    .scroll-reveal,
    .scroll-reveal.is-visible {
      opacity: 1;
      transform: none;
      transition: none;
    }
    /* 2. 3D-tilt — statische kaart, geen gloed-overlay. */
    .tilt-card {
      transform: none;
      transition: none;
    }
    .tilt-card-glow,
    .tilt-card:hover .tilt-card-glow {
      display: none;
    }
    /* 3. Magnetische knop — geen offset, geen transitie. */
    .magnetic-btn {
      transform: none;
      transition: none;
    }
    /* 4. Cursor-glow — overlay volledig uit. */
    .cursor-glow {
      display: none;
    }
  }
/* ============================================================
      TOUCH-HIT UTILITY — 44px invisible hit area on mobile
      Referenced by Checkbox / RadioGroupItem / Switch (and any
      other small control that adds the `touch-hit` class). The
      visual element size is UNCHANGED — only an invisible
      ::before pseudo-element enlarges the tappable area to
      44×44 px (WCAG 2.5.5) on touch devices (below md / 768px).
      On md+ the ::before collapses to 0 so desktop hit areas
      stay tight and don't overlap neighbouring controls.
      pointer-events:none on ::before so it never intercepts the
      real pointer events on the control itself; the control's
      own click handler still fires. position:relative on the
      host so the absolute ::before anchors to it.
      ============================================================ */
.touch-hit {
    position: relative;
  }
@media (max-width: 767px) {
    .touch-hit::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      pointer-events: none;
      z-index: 0;
      border-radius: 9999px;
    }
  }
/* ============================================================
      FLUID TYPOGRAPHY — clamp-based font scaling
      Headings, body, and monospace prices stay readable from
      320px (small phones) up to 4K. Each utility uses clamp()
      with a min, a preferred viewport-relative size, and a max
      so type grows smoothly without media-query jumps. The
      preferred size scales with the smaller viewport dimension
      (vw) so landscape phones and narrow desktops both behave.
      These are OPT-IN utilities — existing text classes are
      untouched; pages add these where fluid scaling is wanted.
      ============================================================ */
.text-fluid-display {
    font-size: clamp(2rem, 1.5rem + 3.2vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
.text-fluid-h1 {
    font-size: clamp(1.75rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
.text-fluid-h2 {
    font-size: clamp(1.5rem, 1.25rem + 1.8vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
  }
.text-fluid-h3 {
    font-size: clamp(1.25rem, 1.1rem + 1.2vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
.text-fluid-h4 {
    font-size: clamp(1.125rem, 1.05rem + 0.6vw, 1.375rem);
    line-height: 1.25;
    letter-spacing: -0.005em;
  }
.text-fluid-body {
    font-size: clamp(0.9375rem, 0.9rem + 0.4vw, 1.0625rem);
    line-height: 1.6;
  }
.text-fluid-body-lg {
    font-size: clamp(1rem, 0.95rem + 0.5vw, 1.1875rem);
    line-height: 1.6;
  }
.text-fluid-small {
    font-size: clamp(0.8125rem, 0.8rem + 0.2vw, 0.875rem);
    line-height: 1.5;
  }
/* Monospace prices — tabular-nums so digits align in tables
     and ticker cards. Scales from a readable mobile size up to
     a prominent desktop size. */
.text-fluid-mono-price {
    font-family: var(--font-mono);
    font-size: clamp(1.25rem, 1.1rem + 1.6vw, 2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
.text-fluid-mono-price-lg {
    font-family: var(--font-mono);
    font-size: clamp(1.75rem, 1.4rem + 2.8vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
/* ============================================================
      LONG-TEXT BREAK UTILITIES
      Long unbroken strings (API keys, webhook URLs, long
      descriptions, base64 blobs) break or scroll horizontally
      without breaking layout. Use .break-words for soft breaks,
      .overflow-wrap-anywhere for hard breaks anywhere, and
      .min-w-0 on flex/grid children so they can shrink below
      their content's intrinsic width (Tailwind already ships
      min-w-0; this is a reminder + a few compound helpers).
      ============================================================ */
.break-words {
    overflow-wrap: break-word;
    word-break: break-word;
  }
.overflow-wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
.break-all-long {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
/* Horizontal-scroll helper for very long single-line tokens
     (webhook URLs, JWTs) where breaking is undesirable — wraps
     the element in a scroll container instead. */
.scroll-x-long {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
/* Flex/grid child that must shrink to fit — pair with .min-w-0
     on the same element (Tailwind's min-w-0). This helper adds
     the overflow-wrap so the shrunk child still wraps its text. */
.min-w-0-wrap {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
/* ============================================================
      SAFE-AREA PADDING UTILITIES
      On mobile browsers with notches/home indicators (iPhone X+,
      some Android), content can disappear under the browser
      chrome. These utilities add env(safe-area-inset-*) padding
      so content stays visible. They're opt-in; Layout's <main>
      uses .safe-area-pad-y by default. env() falls back to 0 on
      devices without safe areas, so desktop is unaffected.
      ============================================================ */
.safe-area-pad-y {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
.safe-area-pad-x {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
.safe-area-pad {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
/* Margin variants for fixed/sticky elements (header, footer,
     bottom bars) that need to push themselves clear of the
     notch/home indicator rather than pad their content. */
.safe-area-mt {
    margin-top: env(safe-area-inset-top);
  }
.safe-area-mb {
    margin-bottom: env(safe-area-inset-bottom);
  }
/* Bottom-only padding for fixed bottom action bars (e.g. a
      sticky "Pay now" bar) so the bar sits above the home
      indicator. */
.safe-area-pad-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
/* ============================================================
      3D GLASS ICONS — "iPhone-glas" met ambilight-gloed
      Herbruikbaar 3D-glas-icooncomponent (GlassIcon3D): een afgerond
      vierkant met backdrop-blur, semi-transparante glaslaag, innerlijke
      highlight (top-left), zachte buitenste ambilight-gloed die de
      omgeving licht kleurt, en een 3D-perspectief-tilt. Ondersteunt
      size (sm/md/lg/xl) en color/glow props. Hergebruikt bestaande
      OKLCH tokens (--primary, --accent, --crypto, --success, --warning,
      --chart-eth, --chart-btc, --chart-usdt) via de --gi-* variabele-
      interface. Alle animaties zijn guarded door prefers-reduced-motion.
      ============================================================ */
/* Default --gi-* interface — overschreven door .glass-icon-3d--<color>. */
:root {
    --gi-color: var(--primary);
    --gi-color-bright: var(--primary);
    --gi-glow: var(--primary);
  }
/* 3D-stage: perspective voor de tilt. Kleinere perspective dan de
     hero (600px) zodat de tilt op kleine icoontjes subtieler leest. */
.glass-icon-3d-stage {
    perspective: 600px;
    perspective-origin: 50% 50%;
  }
/* Het glas-icoon zelf — afgerond vierkant, semi-transparante glaslaag
     met backdrop-blur, innerlijke highlight, ambilight-gloed eromheen,
     en een zachte 3D-tilt (rotateX/rotateY) die de diepte suggereert.
     transform-style preserve-3d houdt kind-lagen (highlight, gloed)
     correct in de perspective. */
.glass-icon-3d {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(8deg) rotateY(-10deg);
    border-radius: 28%;
    background: linear-gradient(
      135deg,
      oklch(1 0 0 / 0.18) 0%,
      oklch(1 0 0 / 0.06) 45%,
      oklch(var(--gi-color) / 0.12) 100%
    );
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid oklch(1 0 0 / 0.22);
    /* innerlijke highlight (top) */ box-shadow:
      inset 0 1px 0 0 oklch(1 0 0 / 0.45),
      /* innerlijke schaduw (bottom) */ inset 0 -2px 6px -2px oklch(
        0 0 0 / 0.18
      ),
      /* ambilight buitenste gloed — kleurt de omgeving licht */
      0 0 0 1px oklch(var(--gi-glow) / 0.18),
      0 0 18px -2px oklch(var(--gi-glow) / 0.45),
      0 0 36px -6px oklch(var(--gi-glow) / 0.35),
      0 8px 20px -8px oklch(0 0 0 / 0.25);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms
      cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
/* Innerlijke highlight-boog — een witte, aflopende boog die over het
     glas loopt (iPhone-glas-specular). Ligt boven de glaslaag, onder
     het icoon. translateZ(1px) houdt het boven de achtergrond. */
.glass-icon-3d-highlight {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      135deg,
      oklch(1 0 0 / 0.55) 0%,
      oklch(1 0 0 / 0.18) 30%,
      transparent 55%
    );
    mix-blend-mode: screen;
    opacity: 0.85;
    transform: translateZ(1px);
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
/* Ambilight-gloed-halo — een zachte, grotere radial-gradient die
     achter het icoon ligt en de omgeving licht kleurt (zoals Philips
     Ambilight). Ligt onder het glas (translateZ -1px), iets groter dan
     het icoon. */
.glass-icon-3d-ambient {
    position: absolute;
    inset: -25%;
    border-radius: 9999px;
    background: radial-gradient(
      circle at 50% 50%,
      oklch(var(--gi-glow) / 0.35) 0%,
      oklch(var(--gi-glow) / 0.12) 45%,
      transparent 72%
    );
    filter: blur(8px);
    transform: translateZ(-1px);
    z-index: -1;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), inset 300ms
      cubic-bezier(0.4, 0, 0.2, 1);
  }
/* Het lucide-icoon zelf — zit bovenop de glaslaag en de highlight,
     in de --gi-color stem. translateZ(2px) houdt het boven alles. */
.glass-icon-3d-icon {
    position: relative;
    z-index: 2;
    transform: translateZ(2px);
    color: oklch(var(--gi-color-bright));
    filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.25));
  }
/* --- Size variants --- sm/md/lg/xl bepalen de afmetingen van het
     glas-icoon en de grootte van het lucide-icoon erin. */
.glass-icon-3d--sm {
    width: 2.25rem;
    height: 2.25rem;
  }
.glass-icon-3d--sm .glass-icon-3d-icon {
    width: 1rem;
    height: 1rem;
  }
.glass-icon-3d--md {
    width: 3rem;
    height: 3rem;
  }
.glass-icon-3d--md .glass-icon-3d-icon {
    width: 1.375rem;
    height: 1.375rem;
  }
.glass-icon-3d--lg {
    width: 4rem;
    height: 4rem;
  }
.glass-icon-3d--lg .glass-icon-3d-icon {
    width: 1.875rem;
    height: 1.875rem;
  }
.glass-icon-3d--xl {
    width: 5.5rem;
    height: 5.5rem;
  }
.glass-icon-3d--xl .glass-icon-3d-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
/* --- Color/glow variants --- zetten de --gi-* interface variabelen
     naar de bestaande OKLCH tokens. Elke variant heeft een heldere
     "bright" stem voor het icoon en een "glow" stem voor de ambilight. */
.glass-icon-3d--primary {
    --gi-color: var(--primary);
    --gi-color-bright: var(--primary);
    --gi-glow: var(--primary);
  }
.glass-icon-3d--accent {
    --gi-color: var(--accent);
    --gi-color-bright: var(--accent);
    --gi-glow: var(--accent);
  }
.glass-icon-3d--crypto {
    --gi-color: var(--crypto);
    --gi-color-bright: var(--crypto);
    --gi-glow: var(--crypto);
  }
.glass-icon-3d--success {
    --gi-color: var(--success);
    --gi-color-bright: var(--success);
    --gi-glow: var(--success);
  }
.glass-icon-3d--warning {
    --gi-color: var(--warning);
    --gi-color-bright: var(--warning);
    --gi-glow: var(--warning);
  }
.glass-icon-3d--btc {
    --gi-color: var(--chart-btc);
    --gi-color-bright: var(--chart-btc);
    --gi-glow: var(--chart-btc);
  }
.glass-icon-3d--eth {
    --gi-color: var(--chart-eth);
    --gi-color-bright: var(--chart-eth);
    --gi-glow: var(--chart-eth);
  }
.glass-icon-3d--usdt {
    --gi-color: var(--chart-usdt);
    --gi-color-bright: var(--chart-usdt);
    --gi-glow: var(--chart-usdt);
  }
/* --- Hover-tilt intensivering --- bij hover kantelt het icoon
      iets verder, de ambilight-gloed wordt feller, en het icoon
      schaalt subtiel omhoog (1.06) voor een elegant "lift"-gevoel.
      Guarded door prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {
    .glass-icon-3d-stage:hover .glass-icon-3d {
      transform: rotateX(14deg) rotateY(-16deg) scale(1.06);
      box-shadow:
        inset 0 1px 0 0 oklch(1 0 0 / 0.6),
        inset 0 -2px 6px -2px oklch(0 0 0 / 0.22),
        0 0 0 1px oklch(var(--gi-glow) / 0.32),
        0 0 30px -2px oklch(var(--gi-glow) / 0.7),
        0 0 60px -8px oklch(var(--gi-glow) / 0.5),
        0 14px 32px -10px oklch(0 0 0 / 0.32);
    }
    /* Ambilight-halo wordt bij hover feller en iets groter — de
       omgeving rond het icoon gloeit zacht mee. */
    .glass-icon-3d-stage:hover .glass-icon-3d-ambient {
      opacity: 1;
      inset: -32%;
      background: radial-gradient(
        circle at 50% 50%,
        oklch(var(--gi-glow) / 0.5) 0%,
        oklch(var(--gi-glow) / 0.18) 45%,
        transparent 75%
      );
    }
    /* Highlight-boog wordt bij hover iets helderder — de
       glas-specular reageert op de "lift". */
    .glass-icon-3d-stage:hover .glass-icon-3d-highlight {
      opacity: 1;
    }
  }
/* --- Subtiele zweefanimatie --- het icoon zweeft zacht op en neer
     om de 3D-diepte te benadrukken. Staggered via inline
     animation-delay. Guarded door prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    .glass-icon-3d-float {
      animation: glass-icon-3d-float 5s ease-in-out infinite;
    }
  }
@keyframes glass-icon-3d-float {
    0%,
    100% {
      transform: rotateX(8deg) rotateY(-10deg) translateY(0);
    }
    50% {
      transform: rotateX(6deg) rotateY(-8deg) translateY(-4px);
    }
  }
/* --- Reduced-motion guard --- bij prefers-reduced-motion: reduce
     staan de tilt en de zweefanimatie uit; het icoon is statisch
     maar de glaslaag, highlight en ambilight-gloed blijven zichtbaar
     (geen beweging, wel de visuele glas-stijl). */
@media (prefers-reduced-motion: reduce) {
    .glass-icon-3d {
      transform: none;
      transition: none;
    }
    .glass-icon-3d-float {
      animation: none;
    }
    .glass-icon-3d-stage:hover .glass-icon-3d {
      transform: none;
    }
    .glass-icon-3d-stage:hover .glass-icon-3d-ambient,
    .glass-icon-3d-stage:hover .glass-icon-3d-highlight {
      opacity: 0.85;
      inset: -25%;
    }
  }
/* ============================================================
      SECTION COLOR PALETTES — elke landingspagina-sectie krijgt
      een eigen accent-kleurpalet via een data-section attribuut op
      de <section>. Een zachte, zeer subtiel getinte achtergrond-
      gloed (radial-gradient, lage opacity) legt een eigen kleur-
      identiteit over de sectie zonder de bestaande achtergrond te
      overschrijven. De gloed gebruikt de bestaande OKLCH tokens
      (--primary, --accent, --crypto, --success, --chart-btc, etc.)
      zodat light/dark mode beide correct blijven. De pseudo-element
      ligt achter de content (z-index -1) en is pointer-events:none.
      ============================================================ */
[data-section] {
    position: relative;
    isolation: isolate;
  }
[data-section]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
  }
/* Hero — warme goud/accent gloed (BTC→EUR, de "transactie"-stem). */
[data-section="hero"]::before {
    background: radial-gradient(
      ellipse 70% 60% at 50% 0%,
      oklch(var(--chart-btc) / 0.06) 0%,
      transparent 70%
    );
  }
.dark [data-section="hero"]::before {
    background: radial-gradient(
      ellipse 70% 60% at 50% 0%,
      oklch(var(--chart-btc) / 0.1) 0%,
      transparent 70%
    );
  }
/* Live candlestick chart — koel primary/blauw (data, vertrouwen). */
[data-section="chart"]::before {
    background: radial-gradient(
      ellipse 80% 50% at 50% 0%,
      oklch(var(--primary) / 0.05) 0%,
      transparent 70%
    );
  }
.dark [data-section="chart"]::before {
    background: radial-gradient(
      ellipse 80% 50% at 50% 0%,
      oklch(var(--primary) / 0.08) 0%,
      transparent 70%
    );
  }
/* Value props — accent/amber (snelheid, waarde, de "wow"-stem). */
[data-section="value-props"]::before {
    background: radial-gradient(
      ellipse 70% 50% at 50% 0%,
      oklch(var(--accent) / 0.05) 0%,
      transparent 70%
    );
  }
.dark [data-section="value-props"]::before {
    background: radial-gradient(
      ellipse 70% 50% at 50% 0%,
      oklch(var(--accent) / 0.08) 0%,
      transparent 70%
    );
  }
/* Business steps — primary/blauw (professioneel, betrouwbaar). */
[data-section="business-steps"]::before {
    background: radial-gradient(
      ellipse 70% 50% at 50% 0%,
      oklch(var(--primary) / 0.05) 0%,
      transparent 70%
    );
  }
.dark [data-section="business-steps"]::before {
    background: radial-gradient(
      ellipse 70% 50% at 50% 0%,
      oklch(var(--primary) / 0.08) 0%,
      transparent 70%
    );
  }
/* Customer steps — crypto/violet (modern, digitaal, klant-ervaring). */
[data-section="customer-steps"]::before {
    background: radial-gradient(
      ellipse 70% 50% at 50% 0%,
      oklch(var(--crypto) / 0.05) 0%,
      transparent 70%
    );
  }
.dark [data-section="customer-steps"]::before {
    background: radial-gradient(
      ellipse 70% 50% at 50% 0%,
      oklch(var(--crypto) / 0.08) 0%,
      transparent 70%
    );
  }
/* NOWPayments — crypto/violet + chart-btc/goud (crypto-betalingsstem). */
[data-section="nowpayments"]::before {
    background: radial-gradient(
        ellipse 60% 50% at 30% 0%,
        oklch(var(--crypto) / 0.05) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 50% 40% at 75% 100%,
        oklch(var(--chart-btc) / 0.04) 0%,
        transparent 70%
      );
  }
.dark [data-section="nowpayments"]::before {
    background: radial-gradient(
        ellipse 60% 50% at 30% 0%,
        oklch(var(--crypto) / 0.09) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 50% 40% at 75% 100%,
        oklch(var(--chart-btc) / 0.07) 0%,
        transparent 70%
      );
  }
/* Final CTA — success/groen + accent/amber (actie, vertrouwen,
     afronding — de "doe het nu"-stem). */
[data-section="final-cta"]::before {
    background: radial-gradient(
        ellipse 60% 50% at 50% 0%,
        oklch(var(--success) / 0.05) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 50% 40% at 80% 100%,
        oklch(var(--accent) / 0.04) 0%,
        transparent 70%
      );
  }
.dark [data-section="final-cta"]::before {
    background: radial-gradient(
        ellipse 60% 50% at 50% 0%,
        oklch(var(--success) / 0.08) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 50% 40% at 80% 100%,
        oklch(var(--accent) / 0.07) 0%,
        transparent 70%
      );
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

@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: "Geist Mono";
  src: url("/assets/fonts/GeistMono.woff2") format("woff2");
  font-display: swap;
}

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

.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\:border-primary\/40:hover {
  border-color: oklch(var(--primary) / 0.4);
}

.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.hover\:bg-accent\/90:hover {
  background-color: oklch(var(--accent) / 0.9);
}

.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\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}

.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}

.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}

.hover\:text-destructive:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.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-elevated:hover {
  --tw-shadow: 0 10px 30px -12px oklch(0.46 0.13 215 / 0.18), 0 4px 12px -4px oklch(0.46 0.13 215 / 0.1);
  --tw-shadow-colored: 0 10px 30px -12px var(--tw-shadow-color), 0 4px 12px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\: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\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}

.focus\:z-10:focus {
  z-index: 10;
}

.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}

.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-visible\:z-10:focus-visible {
  z-index: 10;
}

.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

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

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

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  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-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-11[data-size="default"] {
  height: 2.75rem;
}

.data-\[size\=sm\]\:h-11[data-size="sm"] {
  height: 2.75rem;
}

.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\=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-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\=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-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\/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\/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));
}

.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}

.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.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\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:gap-10 {
    gap: 2.5rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .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\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

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

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

  .md\:h-10 {
    height: 2.5rem;
  }

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

  .md\:h-9 {
    height: 2.25rem;
  }

  .md\:h-\[calc\(100\%-1px\)\] {
    height: calc(100% - 1px);
  }

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

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

  .md\:min-w-10 {
    min-width: 2.5rem;
  }

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

  .md\:min-w-9 {
    min-width: 2.25rem;
  }

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

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

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

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

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

  .md\:p-\[3px\] {
    padding: 3px;
  }

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

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

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

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

  .md\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

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

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

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

  .md\:data-\[size\=default\]\:h-9[data-size="default"] {
    height: 2.25rem;
  }

  .md\:data-\[size\=sm\]\:h-8[data-size="sm"] {
    height: 2rem;
  }

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

  .lg\:grid-cols-\[1fr_1\.2fr\] {
    grid-template-columns: 1fr 1.2fr;
  }

  .lg\:grid-cols-\[1fr_1\.4fr\] {
    grid-template-columns: 1fr 1.4fr;
  }

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

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

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

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

.\[\&\: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-destructive>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-primary>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
}

.\[\&\>svg\]\:text-success>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--success) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-warning>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--warning) / var(--tw-text-opacity, 1));
}

.\[\&\>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));
}