*, ::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: Sora, Geist, ui-sans-serif, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

code,
kbd,
samp,
pre {
  font-family: Geist Mono, JetBrains Mono, ui-monospace, 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 {
    --radius: 0.5rem;

    /* TEDY font stack — display / body / mono */
    --font-display: "Space Grotesk", "Sora", ui-sans-serif, system-ui,
      sans-serif;
    --font-body: "DM Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

    /* TEDY Dark Theme — softened amber/gold, calmer contrast, higher text
       readability. Orange dominance preserved but chroma reduced ~30% so
       accents no longer glare against the dark canvas. Surface lightness
       lifted slightly off pure black for a softer, conventional dashboard
       feel. Secondary text tokens raised well above the old 0.48 floor. */
    --background: 0.1 0 0;
    --foreground: 0.97 0 0;
    --card: 0.13 0 0;
    --card-foreground: 0.97 0 0;
    --popover: 0.15 0 0;
    --popover-foreground: 0.97 0 0;
    --primary: 0.68 0.11 55;
    --primary-foreground: 0.1 0 0;
    --secondary: 0.17 0 0;
    --secondary-foreground: 0.9 0 0;
    --muted: 0.16 0 0;
    --muted-foreground: 0.62 0 0;
    --accent: 0.68 0.11 55;
    --accent-foreground: 0.1 0 0;
    --destructive: 0.55 0.22 25;
    --destructive-foreground: 0.97 0 0;
    --border: 0.22 0 0;
    --input: 0.2 0 0;
    --ring: 0.68 0.11 55;

    /* custom semantic tokens */
    --orange: 0.68 0.11 55;
    --orange-dim: 0.58 0.09 55;
    --green: 0.58 0.18 142;
    --red: 0.55 0.22 25;
    --surface-1: 0.13 0 0;
    --surface-2: 0.16 0 0;
    --surface-3: 0.2 0 0;
    --text-dim: 0.62 0 0;
    --text-medium: 0.72 0 0;

    /* Wallet UI tokens — extend softened amber/gold dark theme */
    --wallet-card: 0.15 0 0;
    --wallet-card-hover: 0.18 0 0;
    --wallet-installed: 0.58 0.18 142;
    --wallet-installed-foreground: 0.1 0 0;
    --wallet-pending: 0.75 0.1 70;
    --locked-glow: 0.68 0.13 55;
    --hold-warning: 0.72 0.11 60;
    --hold-warning-foreground: 0.12 0 0;

    /* ===== Wallet Detail panel tokens — ADDITIVE, extend TEDY dark theme =====
       Activity action color semantics + filter chip + panel surface tokens.
       BUY/DEPOSIT/RECEIVED = green (inflow), SELL/WITHDRAW/SENT = red
       (outflow), ADD/REMOVE LIQUIDITY + CREATED TOKEN = amber/orange.
       All raw OKLCH L C H, consumed via oklch(var(--token) / <alpha>). */
    --wd-panel: 0.14 0 0; /* dialog body surface */
    --wd-panel-header: 0.12 0 0; /* sticky panel header surface */
    --wd-row: 0.13 0 0; /* activity row surface */
    --wd-row-hover: 0.17 0 0; /* activity row hover surface */
    --wd-row-border: 0.22 0 0; /* row separator border */
    --wd-chip: 0.16 0 0; /* inactive filter chip surface */
    --wd-chip-hover: 0.19 0 0; /* inactive chip hover */
    --wd-chip-active: 0.68 0.11 55; /* active chip amber */
    --wd-chip-active-foreground: 0.1 0 0; /* active chip text (dark on amber) */
    --wd-buy: 0.792 0.209 151.711; /* BUY — green (matches AA deposit) */
    --wd-sell: 0.704 0.191 22.216; /* SELL — red (matches AA withdraw) */
    --wd-created: 0.75 0.12 75; /* CREATED TOKEN — soft gold */

    /* Per-action badge colors — aligned to Activity Address ACTION_CONFIG
       (Tailwind slate/emerald/green/red/orange/purple/pink 400 text on a
       500/15 bg with a 500/30 border). Each pair stores the 400 text shade
       and the 500 base shade used for the translucent bg/border. */
    --wd-transfer: 0.704 0.04 256.788; /* slate-400 */
    --wd-transfer-bg: 0.554 0.046 257.417; /* slate-500 */
    --wd-receive: 0.765 0.177 163.223; /* emerald-400 */
    --wd-receive-bg: 0.696 0.17 162.48; /* emerald-500 */
    --wd-deposit: 0.792 0.209 151.711; /* green-400 */
    --wd-deposit-bg: 0.723 0.219 149.579; /* green-500 */
    --wd-withdraw: 0.704 0.191 22.216; /* red-400 */
    --wd-withdraw-bg: 0.637 0.237 25.331; /* red-500 */
    --wd-send: 0.75 0.183 55.934; /* orange-400 */
    --wd-send-bg: 0.705 0.213 47.604; /* orange-500 */
    --wd-add: 0.714 0.203 305.504; /* purple-400 */
    --wd-add-bg: 0.627 0.265 303.9; /* purple-500 */
    --wd-remove: 0.718 0.202 349.761; /* pink-400 */
    --wd-remove-bg: 0.656 0.241 354.308; /* pink-500 */

    /* ===== PnL (Profit & Loss) feature tokens — ADDITIVE, extend TEDY dark
       theme. Reuses the app's existing positive/negative semantics:
       --green (0.58 0.18 142) for positive PnL, --red (0.55 0.22 25) for
       negative PnL. These tokens only tune the premium summary surfaces and
       pill treatments; the core green/red values stay the shared tokens so
       PnL reads identically to the rest of the app. Raw OKLCH L C H. ===== */
    --pnl-card: 0.14 0 0; /* Portfolio PnL summary card surface */
    --pnl-card-border: 0.24 0 0; /* summary card border */
    --pnl-hero-bg: 0.16 0 0; /* Total PnL hero band surface */
    --pnl-hero-accent: 0.68 0.11 55; /* amber accent strip on hero band */
    --pnl-metric-tile: 0.13 0 0; /* per-metric tile surface */
    --pnl-row: 0.13 0 0; /* per-token breakdown row surface */
    --pnl-row-hover: 0.17 0 0; /* per-token row hover */
    --pnl-row-border: 0.22 0 0; /* row separator border */
    --pnl-positive: 0.58 0.18 142; /* positive PnL (matches --green) */
    --pnl-negative: 0.55 0.22 25; /* negative PnL (matches --red) */
    --pnl-flat: 0.62 0 0; /* zero / neutral PnL (matches --text-dim) */

    /* ===== Holder-tag + premium wallet tokens — ADDITIVE, extend TEDY dark
       theme. Tedy Master = premium gold (top 5 holders), Tedy Army = green
       (balance >= 50000 TEDY). Raw OKLCH L C H, consumed via
       oklch(var(--token) / <alpha>). ===== */
    --master-gold: 0.82 0.16 80; /* master gold text / core */
    --master-gold-bright: 0.87 0.15 85; /* master gold highlight */
    --master-gold-deep: 0.72 0.16 70; /* master gold gradient deep stop */
    --master-gold-border: 0.85 0.14 85; /* master gold border */
    --master-gold-glow: 0.78 0.18 70; /* master gold glow */
    --army-green: 0.62 0.19 142; /* army green core (brighter than --green) */
    --army-green-bright: 0.72 0.2 150; /* army green highlight */
    --army-green-border: 0.68 0.18 148; /* army green border */
    --army-green-glow: 0.58 0.18 142; /* army green glow */

    --chart-1: 0.68 0.11 55;
    --chart-2: 0.58 0.18 142;
    --chart-3: 0.55 0.22 25;
    --chart-4: 0.55 0.15 240;
    --chart-5: 0.73 0.08 75;

    --sidebar: 0.13 0 0;
    --sidebar-foreground: 0.97 0 0;
    --sidebar-primary: 0.68 0.11 55;
    --sidebar-primary-foreground: 0.1 0 0;
    --sidebar-accent: 0.17 0 0;
    --sidebar-accent-foreground: 0.9 0 0;
    --sidebar-border: 0.22 0 0;
    --sidebar-ring: 0.68 0.11 55;

    /* ===== Stats Dashboard tokens — extend softened amber/gold dark theme ===== */
    --stat-ribbon: 0.16 0 0;
    --stat-ribbon-hover: 0.19 0 0;
    --stat-accent-bar: 0.68 0.11 55;
    --stat-value-glow: 0.68 0.11 55;
    --stat-skeleton: 0.18 0 0;
    --stat-skeleton-shine: 0.24 0 0;
    --stat-live-dot: 0.68 0.11 55;

    /* ===== Modular KPI-grid + Platform-stats tokens =====
       --stat-card is a solid calm surface (no mascot overlay) so cards read
       as clean conventional dashboard tiles. Border + hover lift keep them
       legible without decorative background imagery. */
    --stat-card: 0.13 0 0;
    --stat-card-hover: 0.16 0 0;
    --stat-card-border: 0.24 0 0;
    --stat-icon-bg: 0.68 0.11 55;
    --stat-deposit: 0.58 0.18 142;
    --stat-withdraw: 0.55 0.22 25;
    --stat-btc: 0.68 0.11 55;

    /* ===== TEDY V2 Lively Pass — softened amber/gold glow system =====
       Layered radial gradient glow tokens for hero backgrounds and
       per-card accent glows. Chroma reduced ~30% from the original vivid
       values so glows stay warm but never glare. All values raw OKLCH L C H,
       consumed via oklch(var(--token) / <alpha>) so opacity stays render-time. */
    --stat-glow-amber: 0.7 0.09 65; /* restrained warm amber glow (BTC Balance) */
    --stat-glow-orange: 0.68 0.1 55; /* calmer orange glow (Volume) */
    --stat-glow-green: 0.6 0.15 142; /* deposit glow */
    --stat-glow-red: 0.58 0.18 25; /* withdraw glow */

    /* Per-family sparkline colors — stroke + faint area fill */
    --stat-sparkline-amber-stroke: 0.72 0.13 65;
    --stat-sparkline-amber-fill: 0.72 0.13 65;
    --stat-sparkline-orange-stroke: 0.7 0.14 55;
    --stat-sparkline-orange-fill: 0.7 0.14 55;
    --stat-sparkline-green-stroke: 0.62 0.19 142;
    --stat-sparkline-green-fill: 0.62 0.19 142;
    --stat-sparkline-red-stroke: 0.6 0.23 25;
    --stat-sparkline-red-fill: 0.6 0.23 25;

    /* ===== TEDY V2 Landing Page — softened amber/gold glow system =====
       Layered radial gradient glow tokens for the hero background
       and per-card accent glows. Chroma reduced so the hero feels calm
       rather than glaring. All raw OKLCH L C H, consumed via
       oklch(var(--token) / <alpha>) so opacity stays render-time. */
    --hero-glow-amber: 0.7 0.09 65; /* restrained warm amber hero orb */
    --hero-glow-orange: 0.68 0.1 55; /* calmer orange hero orb */
    --hero-glow-gold: 0.73 0.08 75; /* soft gold hero orb */
    --card-glow-amber: 0.7 0.09 65; /* card hover amber glow */
    --card-glow-amber-strong: 0.72 0.1 60; /* stronger amber for KPI cards */
    --hero-text-glow: 0.7 0.09 65; /* hero headline text-shadow */
    --landing-border-amber: 0.66 0.09 55; /* thin amber card border */
    --landing-surface: 0.12 0 0; /* landing section surface */
    --landing-surface-alt: 0.14 0 0; /* alternating section surface */
    --landing-pinned-row: 0.17 0.015 55; /* TEDY pinned table row */
    --landing-cta-glow: 0.7 0.09 65; /* CTA button glow */

    /* ===== Base body text size — raised for readability =====
       Conventional dark-theme dashboards sit at 16px; TEDY V2 moves to
       17px so dense tables, KPI numbers, and nav labels stay crisp without
       users reaching for zoom. Consumed by the body rule below. */
    --font-size-base: 1.0625rem; /* 17px */
    --font-size-base-line: 1.65; /* relaxed line-height for the larger size */

    /* ===== Global Desktop Responsive Layout tokens — ADDITIVE =====
       Desktop = full-width horizontal / multi-column; Mobile = single-column
       vertical (unchanged). Responsive horizontal padding 16px->32px and a
       full-viewport container with NO restrictive max-width on dashboard
       surfaces. Raw values consumed by the .tedy-* layout utilities below. */
    --layout-pad: 1rem; /* 16px mobile */
    --layout-pad-md: 1.25rem; /* 20px tablet */
    --layout-pad-lg: 1.5rem; /* 24px desktop */
    --layout-pad-xl: 2rem; /* 32px wide/ultrawide desktop */
    --layout-gap: 1rem; /* default grid/flex gap */
    --layout-gap-lg: 1.5rem; /* large desktop gap */
    --layout-max: none; /* no restrictive max-width on dashboard containers */
    --sidebar-w: 280px; /* desktop sidebar fixed width */
    --grid-min: 16rem; /* default min column width for auto-fit/fill grids */
    --modal-w: 56rem; /* desktop proportional modal width */
  }

  * {
  border-color: oklch(var(--border));
    box-sizing: border-box;
}

  html {
    color-scheme: dark;
    scroll-behavior: smooth;
  }

  body {
  background-color: oklch(var(--background));
  color: oklch(var(--foreground));
    font-family: var(--font-body, "DM Sans"), "Geist", ui-sans-serif, system-ui,
      sans-serif;
    font-size: var(--font-size-base, 1.0625rem);
    line-height: var(--font-size-base-line, 1.65);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

  /* Scrollbar styling — visible & branded (softened amber) */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: oklch(0.16 0 0);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb {
    background: oklch(0.5 0.09 55);
    border-radius: 4px;
    border: 1px solid oklch(0.16 0 0);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: oklch(0.68 0.13 55);
  }
  ::-webkit-scrollbar-corner {
    background: oklch(0.16 0 0);
  }

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: oklch(0.5 0.09 55) oklch(0.16 0 0);
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
@media (min-width: 1600px) {

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

  .container {
    max-width: 1920px;
  }
}
.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;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-bottom-32 {
  bottom: -8rem;
}
.-left-12 {
  left: -3rem;
}
.-left-24 {
  left: -6rem;
}
.-right-12 {
  right: -3rem;
}
.-right-24 {
  right: -6rem;
}
.-top-12 {
  top: -3rem;
}
.-top-24 {
  top: -6rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-24 {
  bottom: 6rem;
}
.bottom-36 {
  bottom: 9rem;
}
.bottom-48 {
  bottom: 12rem;
}
.bottom-60 {
  bottom: 15rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-0\.5 {
  right: 0.125rem;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-5 {
  top: 1.25rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[9987\] {
  z-index: 9987;
}
.z-\[9988\] {
  z-index: 9988;
}
.z-\[9989\] {
  z-index: 9989;
}
.z-\[9990\] {
  z-index: 9990;
}
.z-\[9993\] {
  z-index: 9993;
}
.z-\[9994\] {
  z-index: 9994;
}
.z-\[9995\] {
  z-index: 9995;
}
.z-\[9996\] {
  z-index: 9996;
}
.z-\[9997\] {
  z-index: 9997;
}
.z-\[9999\] {
  z-index: 9999;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.m-0 {
  margin: 0px;
}
.-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-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.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;
}
.-mb-1 {
  margin-bottom: -0.25rem;
}
.-ml-0 {
  margin-left: -0px;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.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-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 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[260px\] {
  height: 260px;
}
.h-\[280px\] {
  height: 280px;
}
.h-\[28rem\] {
  height: 28rem;
}
.h-\[300px\] {
  height: 300px;
}
.h-\[320px\] {
  height: 320px;
}
.h-\[32rem\] {
  height: 32rem;
}
.h-\[60px\] {
  height: 60px;
}
.h-\[72px\] {
  height: 72px;
}
.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-40 {
  max-height: 10rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-\[280px\] {
  max-height: 280px;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[640px\] {
  max-height: 640px;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90svh\] {
  max-height: 90svh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[11rem\] {
  min-height: 11rem;
}
.min-h-\[36px\] {
  min-height: 36px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.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-\[10\%\] {
  width: 10%;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[11\%\] {
  width: 11%;
}
.w-\[12\%\] {
  width: 12%;
}
.w-\[14\%\] {
  width: 14%;
}
.w-\[18\%\] {
  width: 18%;
}
.w-\[24\%\] {
  width: 24%;
}
.w-\[26\%\] {
  width: 26%;
}
.w-\[28\%\] {
  width: 28%;
}
.w-\[28rem\] {
  width: 28rem;
}
.w-\[32rem\] {
  width: 32rem;
}
.w-\[9\%\] {
  width: 9%;
}
.w-\[95vw\] {
  width: 95vw;
}
.w-\[calc\(100\%-2rem\)\] {
  width: calc(100% - 2rem);
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[380px\] {
  min-width: 380px;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[520px\] {
  min-width: 520px;
}
.min-w-\[560px\] {
  min-width: 560px;
}
.min-w-\[580px\] {
  min-width: 580px;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[900px\] {
  min-width: 900px;
}
.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-4xl {
  max-width: 56rem;
}
.max-w-\[100px\] {
  max-width: 100px;
}
.max-w-\[110px\] {
  max-width: 110px;
}
.max-w-\[1200px\] {
  max-width: 1200px;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[140px\] {
  max-width: 140px;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[7rem\] {
  max-width: 7rem;
}
.max-w-\[80px\] {
  max-width: 80px;
}
.max-w-\[90px\] {
  max-width: 90px;
}
.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-screen-2xl {
  max-width: 1536px;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.table-fixed {
  table-layout: fixed;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes bounce {

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

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

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-hero-fade-up {
  animation: hero-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ping {

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

  50% {
    opacity: 0.4;
  }

  0%, 100% {
    opacity: 1;
  }
}
.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;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.touch-manipulation {
  touch-action: manipulation;
}
.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-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-cols-\[2rem_1fr\] {
  grid-template-columns: 2rem 1fr;
}
.grid-cols-\[3rem_1fr_8rem_7rem_5rem\] {
  grid-template-columns: 3rem 1fr 8rem 7rem 5rem;
}
.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;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.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;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.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-0 {
  border-width: 0px;
}
.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-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-amber-400\/50 {
  border-color: rgb(251 191 36 / 0.5);
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-blue-400\/10 {
  border-color: rgb(96 165 250 / 0.1);
}
.border-blue-400\/20 {
  border-color: rgb(96 165 250 / 0.2);
}
.border-blue-400\/40 {
  border-color: rgb(96 165 250 / 0.4);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-cyan-500\/40 {
  border-color: rgb(6 182 212 / 0.4);
}
.border-destructive\/30 {
  border-color: oklch(var(--destructive) / 0.3);
}
.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-gray-500\/50 {
  border-color: rgb(107 114 128 / 0.5);
}
.border-green-400\/40 {
  border-color: rgb(74 222 128 / 0.4);
}
.border-green-500\/25 {
  border-color: rgb(34 197 94 / 0.25);
}
.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}
.border-green-500\/40 {
  border-color: rgb(34 197 94 / 0.4);
}
.border-input {
  border-color: oklch(var(--input));
}
.border-orange {
  border-color: oklch(var(--orange));
}
.border-pink-500\/40 {
  border-color: rgb(236 72 153 / 0.4);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-purple-500\/30 {
  border-color: rgb(168 85 247 / 0.3);
}
.border-red-400\/40 {
  border-color: rgb(248 113 113 / 0.4);
}
.border-rose-500\/30 {
  border-color: rgb(244 63 94 / 0.3);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-sky-500\/30 {
  border-color: rgb(14 165 233 / 0.3);
}
.border-transparent {
  border-color: transparent;
}
.border-violet-400\/40 {
  border-color: rgb(167 139 250 / 0.4);
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-yellow-400\/30 {
  border-color: rgb(250 204 21 / 0.3);
}
.border-yellow-400\/40 {
  border-color: rgb(250 204 21 / 0.4);
}
.border-yellow-500\/40 {
  border-color: rgb(234 179 8 / 0.4);
}
.border-l-amber-400\/60 {
  border-left-color: rgb(251 191 36 / 0.6);
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-orange {
  border-top-color: oklch(var(--orange));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}
.bg-amber-500\/5 {
  background-color: rgb(245 158 11 / 0.05);
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/85 {
  background-color: rgb(0 0 0 / 0.85);
}
.bg-black\/90 {
  background-color: rgb(0 0 0 / 0.9);
}
.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-400\/20 {
  background-color: rgb(96 165 250 / 0.2);
}
.bg-blue-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}
.bg-blue-900\/50 {
  background-color: rgb(30 58 138 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-cyan-400\/15 {
  background-color: rgb(34 211 238 / 0.15);
}
.bg-cyan-500\/20 {
  background-color: rgb(6 182 212 / 0.2);
}
.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-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-gray-900\/80 {
  background-color: rgb(17 24 39 / 0.8);
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-400\/20 {
  background-color: rgb(74 222 128 / 0.2);
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-orange {
  background-color: oklch(var(--orange));
}
.bg-pink-500\/20 {
  background-color: rgb(236 72 153 / 0.2);
}
.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\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-purple-500\/15 {
  background-color: rgb(168 85 247 / 0.15);
}
.bg-purple-500\/20 {
  background-color: rgb(168 85 247 / 0.2);
}
.bg-red-400\/20 {
  background-color: rgb(248 113 113 / 0.2);
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-rose-500\/15 {
  background-color: rgb(244 63 94 / 0.15);
}
.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-sky-500\/15 {
  background-color: rgb(14 165 233 / 0.15);
}
.bg-surface-1 {
  background-color: oklch(var(--surface-1));
}
.bg-surface-2 {
  background-color: oklch(var(--surface-2));
}
.bg-surface-3 {
  background-color: oklch(var(--surface-3));
}
.bg-tedy-green {
  background-color: oklch(var(--green));
}
.bg-text-dim {
  background-color: oklch(var(--text-dim));
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400\/10 {
  background-color: rgb(250 204 21 / 0.1);
}
.bg-yellow-400\/20 {
  background-color: rgb(250 204 21 / 0.2);
}
.bg-yellow-500\/20 {
  background-color: rgb(234 179 8 / 0.2);
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-green-950\/40 {
  --tw-gradient-from: rgb(5 46 22 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 46 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-surface-1 {
  --tw-gradient-to: oklch(var(--surface-1)) var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.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-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.\!px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.\!py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.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-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pl-0 {
  padding-left: 0px;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-7 {
  padding-right: 1.75rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-body {
  font-family: "DM Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
}
.font-display {
  font-family: "Space Grotesk", "Sora", ui-sans-serif, system-ui, sans-serif;
}
.font-mono {
  font-family: Geist Mono, JetBrains Mono, ui-monospace, monospace;
}
.font-sans {
  font-family: Sora, Geist, ui-sans-serif, system-ui, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[9px\] {
  font-size: 9px;
}
.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;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-300\/80 {
  color: rgb(252 211 77 / 0.8);
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-background {
  color: oklch(var(--background));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-cyan-300 {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-cyan-400\/90 {
  color: rgb(34 211 238 / 0.9);
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-orange {
  color: oklch(var(--orange));
}
.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-sky-400 {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.text-tedy-green {
  color: oklch(var(--green));
}
.text-tedy-red {
  color: oklch(var(--red));
}
.text-text-dim {
  color: oklch(var(--text-dim));
}
.text-text-medium {
  color: oklch(var(--text-medium));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.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-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 0 0 1px oklch(var(--orange) / 0.08);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color), 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-glow-sm {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.25), 0 0 0 1px oklch(var(--orange) / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color), 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-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-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);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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);
}
.drop-shadow-\[0_0_6px_rgba\(253\2c 224\2c 71\2c 0\.9\)\] {
  --tw-drop-shadow: drop-shadow(0 0 6px rgba(253,224,71,0.9));
  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-\[0_0_6px_rgba\(74\2c 222\2c 128\2c 0\.9\)\] {
  --tw-drop-shadow: drop-shadow(0 0 6px rgba(74,222,128,0.9));
  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);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-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-150 {
  transition-duration: 150ms;
}
.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-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-90 {
  --tw-enter-scale: .9;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.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);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  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: 200ms;
  animation-duration: 200ms;
    font-family: var(--font-body, "DM Sans"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
}
.btn:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
/* Primary — solid amber fill, dark text, subtle lift on hover */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  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: 200ms;
  animation-duration: 200ms;
    font-family: var(--font-body, "DM Sans"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
}
.btn-primary:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
.btn-primary {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border: 1px solid transparent;
  }
.btn-primary:hover {
    background: oklch(calc(var(--primary) + 0.03) 0.11 55);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  }
.btn-primary:active {
    background: oklch(calc(var(--primary) - 0.03) 0.11 55);
  }
/* Secondary — quiet raised surface, medium text */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  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: 200ms;
  animation-duration: 200ms;
    font-family: var(--font-body, "DM Sans"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
}
.btn-secondary:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
.btn-secondary {
    background: oklch(var(--secondary));
    color: oklch(var(--secondary-foreground));
    border: 1px solid oklch(var(--border));
  }
.btn-secondary:hover {
    background: oklch(var(--surface-3));
    border-color: oklch(var(--orange) / 0.35);
  }
.btn-secondary:active {
    background: oklch(var(--surface-2));
  }
/* Ghost — transparent, text-only, amber text on hover */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  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: 200ms;
  animation-duration: 200ms;
    font-family: var(--font-body, "DM Sans"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
}
.btn-ghost:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.btn-ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
.btn-ghost {
    background: transparent;
    color: oklch(var(--text-medium));
    border: 1px solid transparent;
  }
.btn-ghost:hover {
    background: oklch(var(--surface-2) / 0.6);
    color: oklch(var(--foreground));
  }
.btn-ghost:active {
    background: oklch(var(--surface-2));
  }
/* ===== Type & contrast hierarchy helpers =====
     Stronger visual hierarchy through size/weight/color rather than
     card borders or shadows. Uppercase tracked labels, tabular mono
     numerics, and explicit dim/medium text tiers. ===== */
.text-hero {
    font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: oklch(var(--foreground));
  }
.text-section {
    font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
  }
.text-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: oklch(var(--text-medium));
  }
.text-numeric {
    font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
.text-dim {
    color: oklch(var(--text-dim));
  }
.text-medium {
    color: oklch(var(--text-medium));
  }
.text-strong {
    color: oklch(var(--foreground));
    font-weight: 600;
  }
/* Positive / negative data accents — restrained, not loud badges */
.text-positive {
    color: oklch(var(--green));
  }
.text-negative {
    color: oklch(var(--red));
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

/* ===== Bundled font faces — TEDY V2 Stats Dashboard ===== */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  font-style: normal;
}

/* ===== Consistent button system — primary / secondary / ghost =====
   A single calm, refined button language shared across the app.
   No heavy glows — hierarchy comes from fill, border, and text weight.
   All states (hover/focus/active/disabled) are defined here so buttons
   read identically everywhere. ===== */

@keyframes scanline {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(calc(100vw + 100px));
  }
}

@keyframes bounce-x {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

.animate-bounce-x {
  animation: bounce-x 0.9s ease-in-out infinite;
}

@keyframes bellRing {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

@keyframes salesTickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.sales-ticker-scroll {
  display: inline-flex;
  animation: salesTickerScroll 60s linear infinite;
  width: -moz-max-content;
  width: max-content;
}

.sales-ticker-scroll:hover {
  animation-play-state: paused;
}

@keyframes moversTickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.movers-ticker-scroll {
  display: inline-flex;
  animation: moversTickerScroll 30s linear infinite;
  width: -moz-max-content;
  width: max-content;
}

.movers-ticker-scroll:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .movers-ticker-scroll {
    animation: none;
  }
}

@keyframes portfolioGlow {
  0%,
  100% {
    text-shadow: 0 0 4px oklch(0.68 0.13 55), 0 0 8px oklch(0.68 0.13 55), 0 0
      12px oklch(0.68 0.13 55);
    color: oklch(0.74 0.13 60);
  }
  50% {
    text-shadow: 0 0 8px oklch(0.68 0.13 55), 0 0 18px oklch(0.68 0.13 55), 0 0
      28px oklch(0.68 0.13 55), 0 0 40px oklch(0.66 0.12 50);
    color: oklch(0.78 0.12 65);
  }
}

.portfolio-glow-text {
  animation: portfolioGlow 2s ease-in-out infinite;
  color: oklch(0.74 0.13 60);
}

/* ===== Wallet UI — mono address/numeric display uses existing mono stack ===== */
/* (JetBrains Mono already in tailwind.config.js fontFamily.mono fallback chain) */

/* ===== Wallet Connect button — pulsing amber ring ===== */
@keyframes walletConnectPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 oklch(0.68 0.13 55 / 0.4), 0 0 12px
      oklch(0.68 0.13 55 / 0.18);
  }
  50% {
    box-shadow: 0 0 0 6px oklch(0.68 0.13 55 / 0), 0 0 18px
      oklch(0.68 0.13 55 / 0.3);
  }
}

.wallet-connect-pulse {
  animation: walletConnectPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ===== Locked Activity Address screen — mascot glow + halo REMOVED =====
   Per user request the locked-mascot-glow animation and the radial amber
   .locked-halo background have been removed. The Activity Address screen
   now uses a clean, conventional locked-state treatment (calm card surface
   + clear CTA) with no decorative teddy bear glow. The mascot survives only
   in the header logo. The class names are kept as no-op stubs so any
   remaining markup referencing them renders without error. */
.locked-mascot-glow {
  animation: none;
}
.locked-halo {
  background: transparent;
}

/* ===== Wallet card hover — amber border lift ===== */
.wallet-card {
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow
    0.2s ease;
}
.wallet-card:hover {
  border-color: oklch(0.68 0.13 55 / 0.5);
  box-shadow: 0 0 0 1px oklch(0.68 0.13 55 / 0.2), 0 0 14px
    oklch(0.68 0.13 55 / 0.08);
}

/* ===== Balance spinner — amber ring rotate ===== */
@keyframes balanceSpin {
  to {
    transform: rotate(360deg);
  }
}
.balance-spinner {
  animation: balanceSpin 0.8s linear infinite;
  border-top-color: oklch(0.68 0.13 55);
}

/* ============================================================
   Stats Dashboard — TEDY Ribbon Terminal
   Vertical stacked metric ribbon, NOT a 2x2 grid.
   ============================================================ */

/* Metric ribbon row — full-width horizontal tile with left amber accent bar */
.stat-ribbon {
  position: relative;
  background: oklch(var(--stat-ribbon));
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow
    0.2s ease;
  overflow: hidden;
}
/* Left amber accent bar — the signature TEDY ribbon cue */
.stat-ribbon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: oklch(var(--stat-accent-bar));
  opacity: 0.7;
  transition: opacity 0.2s ease, width 0.2s ease;
}
.stat-ribbon:hover {
  background: oklch(var(--stat-ribbon-hover));
  border-color: oklch(0.68 0.13 55 / 0.45);
  box-shadow: 0 0 0 1px oklch(0.68 0.13 55 / 0.18), 0 0 16px
    oklch(0.68 0.13 55 / 0.08);
}
.stat-ribbon:hover::before {
  opacity: 1;
  width: 4px;
}

/* Large mono numeric value — subtle amber glow on hover */
.stat-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: text-shadow 0.2s ease;
}
.stat-ribbon:hover .stat-value {
  text-shadow: 0 0 12px oklch(var(--stat-value-glow) / 0.35);
}

/* Metric label — uppercase tracked, dim */
.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(var(--text-medium));
}

/* Live "auto-refresh 3s" indicator — pulsing amber dot */
@keyframes statLivePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 oklch(var(--stat-live-dot) / 0.5);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 5px oklch(var(--stat-live-dot) / 0);
    opacity: 0.7;
  }
}
.stat-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: oklch(var(--stat-live-dot));
  animation: statLivePulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Skeleton shimmer tile — same ribbon shape, sweeping shine */
@keyframes statShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.stat-skeleton {
  background: linear-gradient(
    90deg,
    oklch(var(--stat-skeleton)) 0%,
    oklch(var(--stat-skeleton-shine)) 50%,
    oklch(var(--stat-skeleton)) 100%
  );
  background-size: 200% 100%;
  animation: statShimmer 1.6s ease-in-out infinite;
  border-radius: calc(var(--radius) - 4px);
}

/* Error state — friendly TEDY retry prompt */
.stat-error-card {
  background: oklch(var(--stat-ribbon));
  border: 1px solid oklch(var(--red) / 0.35);
  border-radius: var(--radius);
}

/* Ribbon stagger entrance — cascades rows top-to-bottom */
@keyframes statRibbonEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.stat-ribbon-enter {
  animation: statRibbonEnter 0.4s ease-out both;
}

/* ============================================================
   Modular KPI-grid + Platform-stats — TEDY V2 competitor-style
   ============================================================ */

/* KPI metric card — top modular grid (4/2/1 cols responsive) */
.stat-kpi-card {
  position: relative;
  background: oklch(var(--stat-card));
  border: 1px solid oklch(var(--stat-card-border));
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow
    0.25s ease, transform 0.2s ease;
  overflow: hidden;
}
.stat-kpi-card:hover {
  background: oklch(var(--stat-card-hover));
  border-color: oklch(0.68 0.13 55 / 0.45);
  box-shadow: 0 0 0 1px oklch(0.68 0.13 55 / 0.18), 0 8px 24px
    oklch(0.68 0.13 55 / 0.08);
  transform: translateY(-2px);
}
/* Top accent line — KPI signature */
.stat-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    oklch(var(--stat-icon-bg) / 0.7) 0%,
    oklch(var(--stat-icon-bg) / 0) 80%
  );
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.stat-kpi-card:hover::before {
  opacity: 1;
}
/* Honey/teddy bear banner background overlay — REMOVED per user request.
   Cards now use a clean, solid calm surface (oklch(var(--stat-card))) with
   no decorative mascot imagery, matching conventional dark-theme dashboard
   aesthetics. The ::after pseudo-element is fully retired here; the former
   .stat-kpi-card > * lift rule is no longer needed and has been removed. */

/* Platform stats card — Deposit vs Withdraw 24H, larger surface */
.stat-platform-card {
  position: relative;
  background: oklch(var(--stat-card));
  border: 1px solid oklch(var(--stat-card-border));
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow
    0.25s ease;
  overflow: hidden;
}
.stat-platform-card:hover {
  background: oklch(var(--stat-card-hover));
  border-color: oklch(0.68 0.13 55 / 0.4);
  box-shadow: 0 0 0 1px oklch(0.68 0.13 55 / 0.15), 0 6px 20px
    oklch(0.68 0.13 55 / 0.06);
}

/* Trend indicator — ONLY for Deposit vs Withdraw platform stats */
.stat-trend-up {
  color: oklch(var(--stat-deposit));
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.stat-trend-down {
  color: oklch(var(--stat-withdraw));
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* KPI card cascade entrance — staggered top-to-bottom */
@keyframes statCardEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.stat-card-enter {
  animation: statCardEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Trend pulse — gentle nudge on the ▲▼ indicator */
@keyframes statTrendPulse {
  0%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.85;
    transform: translateY(-1px);
  }
}
.stat-trend-pulse {
  animation: statTrendPulse 2s ease-in-out infinite;
}

/* ============================================================
   V2 KPI chart cards — 2x2 grid of large chart cards
   (BTC Balance area, Total Volume 24H bar, Deposit area,
   Withdraw area). Extends the neon-line family with area
   gradient fills and bar styling.
   ============================================================ */

/* Large chart card — bigger surface than .stat-kpi-card, used for the
   4 primary chart cards in the 2x2 grid. */
.stat-chart-card {
  position: relative;
  background: oklch(var(--stat-card));
  border: 1px solid oklch(var(--stat-card-border));
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow
    0.25s ease, transform 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.stat-chart-card:hover {
  background: oklch(var(--stat-card-hover));
  transform: translateY(-2px);
}
/* NOTE: The honey/teddy bear banner background overlay
   (.stat-chart-card::before) has been REMOVED per user request — cards
   stay clean and solid (oklch(var(--stat-card))) with no decorative
   mascot imagery, matching conventional dark-theme dashboard aesthetics.
   The ::before pseudo-element is fully retired here; the former
   .stat-chart-card > * lift rule is no longer needed. Per-card accent
   token overrides remain below for hover glow variants. */
/* Per-card accent token overrides — set on the card root. */
.stat-chart-card-amber {
  --stat-card-accent: var(--stat-btc);
}
.stat-chart-card-orange {
  --stat-card-accent: var(--orange);
}
.stat-chart-card-green {
  --stat-card-accent: var(--stat-deposit);
}
.stat-chart-card-red {
  --stat-card-accent: var(--stat-withdraw);
}

/* Header value — heavy weight, mono numerics, large. */
.stat-chart-card-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  color: oklch(var(--foreground));
}

/* Percentage change pill — green up / red down. */
.stat-change-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.stat-change-pill-up {
  color: oklch(var(--stat-deposit));
  background: oklch(var(--stat-deposit) / 0.12);
  border-color: oklch(var(--stat-deposit) / 0.35);
}
.stat-change-pill-down {
  color: oklch(var(--stat-withdraw));
  background: oklch(var(--stat-withdraw) / 0.12);
  border-color: oklch(var(--stat-withdraw) / 0.35);
}
.stat-change-pill-flat {
  color: oklch(var(--text-medium));
  background: oklch(var(--surface-2));
  border-color: oklch(var(--stat-card-border));
}

/* Footer secondary-metric row — 3 equal stat-pairs. */
.stat-chart-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid oklch(var(--stat-card-border));
}
/* 2-column footer — used by chart cards whose footer was trimmed to two
   stat-pairs (e.g. Volume 24H: Highest Hour + Avg / Hour). Overrides the
   default 3-column grid so the two pairs fill the row without a gap. */
.stat-chart-footer-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 1-column footer — used by chart cards whose footer was trimmed to a single
   stat-pair (e.g. Deposit / Withdraw 24H: Net Flow (24H)). Centers the lone
   pair so the row reads as intentional rather than a missing column. */
.stat-chart-footer-1col {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.stat-chart-footer-pair {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.stat-chart-footer-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.625rem;
  color: oklch(var(--text-dim));
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-chart-footer-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 600;
  color: oklch(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-chart-footer-value-up {
  color: oklch(var(--stat-deposit));
}
.stat-chart-footer-value-down {
  color: oklch(var(--stat-withdraw));
}

/* Plain KPI card (chartless) — compact, balanced row below the 2x2 grid. */
.stat-plain-card {
  position: relative;
  background: oklch(var(--stat-card));
  border: 1px solid oklch(var(--stat-card-border));
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow
    0.25s ease, transform 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.stat-plain-card:hover {
  background: oklch(var(--stat-card-hover));
  border-color: oklch(0.68 0.13 55 / 0.4);
  box-shadow: 0 0 0 1px oklch(0.68 0.13 55 / 0.15), 0 6px 20px
    oklch(0.68 0.13 55 / 0.06);
  transform: translateY(-2px);
}
/* NOTE: The honey/teddy bear banner background overlay
   (.stat-plain-card::before) has been REMOVED per user request — cards
   stay clean and solid (oklch(var(--stat-card))) with no decorative
   mascot imagery, matching .stat-chart-card and conventional dark-theme
   dashboard aesthetics. The ::before pseudo-element is fully retired
   here; the former .stat-plain-card > * lift rule is no longer needed. */

/* +N delta badge — shown on plain KPI cards (Total Users / Tokens /
   Ascended) when the value increased since the previous poll. Compact
   green pill with up-arrow, mono numerics. Hidden when delta <= 0. */
.stat-delta-plus {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  color: oklch(var(--stat-deposit));
  background: oklch(var(--stat-deposit) / 0.12);
  border: 1px solid oklch(var(--stat-deposit) / 0.35);
  white-space: nowrap;
  line-height: 1.2;
}
@keyframes statDeltaPop {
  0% {
    opacity: 0;
    transform: translateY(2px) scale(0.92);
  }
  60% {
    transform: translateY(0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.stat-delta-plus-enter {
  animation: statDeltaPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .stat-delta-plus-enter {
    animation: none;
  }
}

/* Roadmap tab entrance — gentle fade + rise */
@keyframes roadmapFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.roadmap-fade-in {
  animation: roadmapFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .roadmap-fade-in {
    animation: none;
  }
}

/* ============================================================
   TEDY V2 — Progress tab timeline redesign.
   Vertical timeline with connector line, milestone cards,
   progress ring, staggered entrance. Uses OKLCH tokens.
   ============================================================ */

/* Staggered entrance for timeline items — fade + slide-up.
   Each item sets --tl-i inline for its delay. */
@keyframes timelineItemEnter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.timeline-item {
  opacity: 0;
  animation: timelineItemEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--tl-i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  .timeline-item {
    opacity: 1;
    animation: none;
  }
}

/* Section header entrance — slightly stronger rise. */
@keyframes timelineSectionEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.timeline-section {
  opacity: 0;
  animation: timelineSectionEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.timeline-section--done {
  animation-delay: 80ms;
}
.timeline-section--planned {
  animation-delay: 160ms;
}
.timeline-section--fee {
  animation-delay: 240ms;
}
@media (prefers-reduced-motion: reduce) {
  .timeline-section {
    opacity: 1;
    animation: none;
  }
}

/* The vertical connector line running through milestone nodes.
   Drawn as a pseudo-element on the rail column so it sits behind
   the node dots. */
.timeline-rail {
  position: relative;
}
.timeline-rail::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    oklch(var(--green) / 0.45),
    oklch(var(--orange) / 0.35)
  );
  pointer-events: none;
}
@media (min-width: 768px) {
  .timeline-rail::before {
    left: 23px;
  }
}

/* Milestone node — the colored dot/icon sitting on the rail. */
.timeline-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  flex-shrink: 0;
  border: 2px solid oklch(var(--surface-2));
  box-shadow: 0 0 0 3px oklch(var(--background));
}
.timeline-node--done {
  background: oklch(var(--green) / 0.16);
  color: oklch(var(--green));
  border-color: oklch(var(--green) / 0.5);
}
.timeline-node--planned {
  background: oklch(var(--orange) / 0.16);
  color: oklch(var(--orange));
  border-color: oklch(var(--orange) / 0.5);
}
@media (min-width: 768px) {
  .timeline-node {
    width: 48px;
    height: 48px;
  }
}

/* Milestone card — sits to the right of the rail. Hover lifts and
   glows the border with the section accent. */
.timeline-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid oklch(var(--border) / 0.7);
  background: oklch(var(--surface-1) / 0.9);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s
    ease, box-shadow 0.2s ease, background 0.2s ease;
}
.timeline-card:hover {
  transform: translateY(-3px);
  background: oklch(var(--surface-2));
}
.timeline-card--done:hover {
  border-color: oklch(var(--green) / 0.6);
  box-shadow: 0 8px 24px -10px oklch(var(--green) / 0.35), 0 0 0 1px
    oklch(var(--green) / 0.25);
}
.timeline-card--planned:hover {
  border-color: oklch(var(--orange) / 0.6);
  box-shadow: 0 8px 24px -10px oklch(var(--orange) / 0.4), 0 0 0 1px
    oklch(var(--orange) / 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .timeline-card {
    transition: none;
  }
  .timeline-card:hover {
    transform: none;
  }
}

/* Section header pill — large colored icon with gradient accent. */
.timeline-section-head {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 12px;
  border-radius: 9999px;
  border: 1px solid oklch(var(--border) / 0.7);
  background: oklch(var(--surface-1) / 0.9);
}
.timeline-section-head--done {
  border-color: oklch(var(--green) / 0.4);
  background: linear-gradient(
    90deg,
    oklch(var(--green) / 0.12),
    oklch(var(--surface-1) / 0.9) 70%
  );
}
.timeline-section-head--planned {
  border-color: oklch(var(--orange) / 0.4);
  background: linear-gradient(
    90deg,
    oklch(var(--orange) / 0.12),
    oklch(var(--surface-1) / 0.9) 70%
  );
}
.timeline-section-head--fee {
  border-color: oklch(var(--orange) / 0.45);
  background: linear-gradient(
    90deg,
    oklch(var(--orange) / 0.14),
    oklch(var(--surface-2) / 0.95) 70%
  );
}
.timeline-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.timeline-section-icon--done {
  background: oklch(var(--green) / 0.18);
  color: oklch(var(--green));
}
.timeline-section-icon--planned {
  background: oklch(var(--orange) / 0.18);
  color: oklch(var(--orange));
}
.timeline-section-icon--fee {
  background: oklch(var(--orange) / 0.2);
  color: oklch(var(--orange));
}

/* Progress ring — conic gradient ring showing overall completion.
   The fill is set inline via --tl-progress (0..100). */
.timeline-progress-ring {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: conic-gradient(
    oklch(var(--orange) / 0.85) calc(var(--tl-progress, 0) * 1%),
    oklch(var(--surface-2)) 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.timeline-progress-ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 9999px;
  background: oklch(var(--surface-1));
}
.timeline-progress-ring > span {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  color: oklch(var(--foreground));
}

/* Progress bar — horizontal fill under the summary. */
.timeline-progress-bar {
  position: relative;
  height: 8px;
  border-radius: 9999px;
  background: oklch(var(--surface-2));
  overflow: hidden;
}
.timeline-progress-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    oklch(var(--green) / 0.85),
    oklch(var(--orange) / 0.85)
  );
  width: calc(var(--tl-progress, 0) * 1%);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .timeline-progress-bar-fill {
    transition: none;
  }
}

/* Fee policy premium cards — breathable two-card layout. */
.timeline-fee-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid oklch(var(--orange) / 0.35);
  background: linear-gradient(
    160deg,
    oklch(var(--surface-2) / 0.95),
    oklch(var(--surface-1) / 0.95)
  );
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s
    ease, box-shadow 0.2s ease;
}
.timeline-fee-card:hover {
  transform: translateY(-3px);
  border-color: oklch(var(--orange) / 0.6);
  box-shadow: 0 10px 28px -12px oklch(var(--orange) / 0.4), 0 0 0 1px
    oklch(var(--orange) / 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .timeline-fee-card:hover {
    transform: none;
  }
}
.timeline-fee-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: oklch(var(--orange) / 0.16);
  color: oklch(var(--orange));
  flex-shrink: 0;
}

/* Status badge — small pill on milestone cards. */
.timeline-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.timeline-badge--done {
  background: oklch(var(--green) / 0.16);
  color: oklch(var(--green));
}
.timeline-badge--planned {
  background: oklch(var(--orange) / 0.16);
  color: oklch(var(--orange));
}

/* ============================================================
   TEDY V2 Lively Pass — hero, sparkline, per-card glow,
   value transition, tab transition. Extends existing keyframes
   and .stat-chart-card-* families. No new libraries.
   ============================================================ */

/* ===== Live-dot pulse ring — extends statLivePulse with a second
   expanding ring for a more pronounced "live" heartbeat. ===== */
@keyframes statLiveRing {
  0% {
    box-shadow: 0 0 0 0 oklch(var(--stat-live-dot) / 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px oklch(var(--stat-live-dot) / 0);
  }
  100% {
    box-shadow: 0 0 0 0 oklch(var(--stat-live-dot) / 0);
  }
}
.stat-live-dot-ring {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: oklch(var(--stat-live-dot));
  animation: statLivePulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite,
    statLiveRing 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .stat-live-dot-ring {
    animation: none;
  }
}

/* ===== Smooth value transition — subtle fade/slide on number update.
   Apply to the numeric value wrapper; toggle a `stat-value-swap` class
   (or re-mount the node) on poll to trigger. No count-up, just a
   gentle 0.18s opacity+translate so the new value arrives softly. ===== */
@keyframes valueSwap {
  0% {
    opacity: 0.35;
    transform: translateY(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.stat-value-swap {
  animation: valueSwap 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .stat-value-swap {
    animation: none;
  }
}

/* ===== Smooth sub-tab transition — opacity/transform on switch.
   Apply to the tab panel container; the active panel gets
   `.tab-transition-enter` on mount/activation. ===== */
@keyframes tabFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tab-transition {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.tab-transition-enter {
  animation: tabFade 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .tab-transition-enter {
    animation: none;
  }
}

/* ===== Per-card glow hover variants — extend
   .stat-chart-card-amber/-orange/-green/-red with matching
   box-shadow glows on hover. Color-family aware, never garish. ===== */
.stat-chart-card-amber:hover {
  border-color: oklch(var(--stat-glow-amber) / 0.55);
  box-shadow: 0 0 0 1px oklch(var(--stat-glow-amber) / 0.25), 0 8px 28px
    oklch(var(--stat-glow-amber) / 0.14), inset 0 0 24px
    oklch(var(--stat-glow-amber) / 0.05);
}
.stat-chart-card-orange:hover {
  border-color: oklch(var(--stat-glow-orange) / 0.55);
  box-shadow: 0 0 0 1px oklch(var(--stat-glow-orange) / 0.25), 0 8px 28px
    oklch(var(--stat-glow-orange) / 0.14), inset 0 0 24px
    oklch(var(--stat-glow-orange) / 0.05);
}
.stat-chart-card-green:hover {
  border-color: oklch(var(--stat-glow-green) / 0.55);
  box-shadow: 0 0 0 1px oklch(var(--stat-glow-green) / 0.25), 0 8px 28px
    oklch(var(--stat-glow-green) / 0.14), inset 0 0 24px
    oklch(var(--stat-glow-green) / 0.05);
}
.stat-chart-card-red:hover {
  border-color: oklch(var(--stat-glow-red) / 0.55);
  box-shadow: 0 0 0 1px oklch(var(--stat-glow-red) / 0.25), 0 8px 28px
    oklch(var(--stat-glow-red) / 0.14), inset 0 0 24px
    oklch(var(--stat-glow-red) / 0.05);
}

/* ===== Sparkline mini-chart container — ~48px tall, color-family
   aware via --stat-sparkline-stroke / --stat-sparkline-fill overrides
   set by the per-family classes below. recharts draws inside; the
   container clips and pads. ===== */
.stat-sparkline {
  position: relative;
  width: 100%;
  height: 48px;
  margin-top: 0.25rem;
  overflow: visible;
}
.stat-sparkline .recharts-surface {
  overflow: visible;
}
.stat-sparkline .recharts-wrapper {
  width: 100% !important;
  height: 100% !important;
}

/* Per-family sparkline color overrides — set on the sparkline
   container alongside .stat-sparkline. The recharts <Area>/<Line>
   stroke + fill should reference these tokens via inline style or
   the chart's stroke/fill props. */
.stat-sparkline-amber {
  --stat-sparkline-stroke: var(--stat-sparkline-amber-stroke);
  --stat-sparkline-fill: var(--stat-sparkline-amber-fill);
}
.stat-sparkline-orange {
  --stat-sparkline-stroke: var(--stat-sparkline-orange-stroke);
  --stat-sparkline-fill: var(--stat-sparkline-orange-fill);
}
.stat-sparkline-green {
  --stat-sparkline-stroke: var(--stat-sparkline-green-stroke);
  --stat-sparkline-fill: var(--stat-sparkline-green-fill);
}
.stat-sparkline-red {
  --stat-sparkline-stroke: var(--stat-sparkline-red-stroke);
  --stat-sparkline-fill: var(--stat-sparkline-red-fill);
}

/* Sparkline area gradient fill — faint, color-family aware.
    The recharts <defs> linearGradient should stop at
    oklch(var(--stat-sparkline-fill) / 0.22) -> transparent. */
.stat-sparkline-area-fill {
  fill: oklch(var(--stat-sparkline-fill) / 0.18);
}
.stat-sparkline-line {
  stroke: oklch(var(--stat-sparkline-stroke));
  stroke-width: 1.5;
  fill: none;
}

/* ============================================================
   Stats Dashboard — Visual Polish Layer
   Adds layered ambient glows, gradient accent bars, sheen sweeps,
   luminous sparklines, gradient title, and refined icon chips.
   All effects honor prefers-reduced-motion. TEDY amber/gold/orange
   palette only; dark-only theme preserved.
   ============================================================ */

/* ── Per-card ambient aura — a soft radial glow layered behind card
   content but above the solid surface. Drawn as a ::before pseudo on
   the .stat-card-aura-{family} class so it sits beneath the sheen and
   content. The glow is intentionally subtle (low alpha) so cards stay
   readable; it intensifies slightly on hover via the card's existing
   hover box-shadow. ── */
.stat-card-aura-amber,
.stat-card-aura-orange,
.stat-card-aura-green,
.stat-card-aura-red {
  position: relative;
}
.stat-card-aura-amber::before,
.stat-card-aura-orange::before,
.stat-card-aura-green::before,
.stat-card-aura-red::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.stat-card-aura-amber::before {
  background: radial-gradient(
    ellipse at 30% 0%,
    oklch(var(--stat-glow-amber) / 0.14) 0%,
    transparent 55%
  );
}
.stat-card-aura-orange::before {
  background: radial-gradient(
    ellipse at 30% 0%,
    oklch(var(--stat-glow-orange) / 0.14) 0%,
    transparent 55%
  );
}
.stat-card-aura-green::before {
  background: radial-gradient(
    ellipse at 30% 0%,
    oklch(var(--stat-glow-green) / 0.14) 0%,
    transparent 55%
  );
}
.stat-card-aura-red::before {
  background: radial-gradient(
    ellipse at 30% 0%,
    oklch(var(--stat-glow-red) / 0.14) 0%,
    transparent 55%
  );
}
/* Lift the aura on hover so the card feels alive. */
.stat-card-aura-amber:hover::before,
.stat-card-aura-orange:hover::before,
.stat-card-aura-green:hover::before,
.stat-card-aura-red:hover::before {
  opacity: 0.85;
}
/* Ensure card content sits above the aura layer. */
.stat-chart-card
  > :not(.stat-card-accent-bar):not(.stat-card-sheen):not(::before),
.stat-plain-card
  > :not(.stat-card-accent-bar):not(.stat-card-sheen):not(::before) {
  position: relative;
  z-index: 1;
}

/* ── Gradient top accent bar — replaces the flat border-top with a
   family-matched gradient sweep that intensifies on hover. Sits at
   z-index 2 so it stays above the aura. ── */
.stat-card-accent-bar {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  z-index: 2;
  opacity: 0.7;
  transition: opacity 0.25s ease, height 0.25s ease;
  pointer-events: none;
}
.stat-chart-card-amber .stat-card-accent-bar,
.stat-card-aura-amber .stat-card-accent-bar {
  background: linear-gradient(
    90deg,
    oklch(var(--stat-glow-amber) / 0.9) 0%,
    oklch(var(--stat-glow-amber) / 0.3) 60%,
    transparent 100%
  );
}
.stat-chart-card-orange .stat-card-accent-bar,
.stat-card-aura-orange .stat-card-accent-bar {
  background: linear-gradient(
    90deg,
    oklch(var(--stat-glow-orange) / 0.9) 0%,
    oklch(var(--stat-glow-orange) / 0.3) 60%,
    transparent 100%
  );
}
.stat-chart-card-green .stat-card-accent-bar,
.stat-card-aura-green .stat-card-accent-bar {
  background: linear-gradient(
    90deg,
    oklch(var(--stat-glow-green) / 0.9) 0%,
    oklch(var(--stat-glow-green) / 0.3) 60%,
    transparent 100%
  );
}
.stat-chart-card-red .stat-card-accent-bar,
.stat-card-aura-red .stat-card-accent-bar {
  background: linear-gradient(
    90deg,
    oklch(var(--stat-glow-red) / 0.9) 0%,
    oklch(var(--stat-glow-red) / 0.3) 60%,
    transparent 100%
  );
}
.stat-chart-card:hover .stat-card-accent-bar,
.stat-plain-card:hover .stat-card-accent-bar {
  opacity: 1;
  height: 3px;
}

/* ── Sheen sweep — a single diagonal light sweep that plays once on
   card mount (paired with .stat-card-enter). Subtle, premium, never
   loops. Honors prefers-reduced-motion. ── */
.stat-card-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.stat-card-sheen::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    oklch(1 0 0 / 0.06) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: statSheenSweep 1.1s ease-out 0.2s both;
}
@keyframes statSheenSweep {
  0% {
    left: -75%;
  }
  60% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stat-card-sheen::after {
    animation: none;
    display: none;
  }
}

/* ── Luminous sparkline — soft drop-shadow glow matching the family
   so the line reads as luminous against the dark card surface. Applied
   via .stat-sparkline-glow-{family} on the sparkline container; the
   recharts SVG inherits the filter through the wrapper. ── */
.stat-sparkline-glow-amber .recharts-area-area,
.stat-sparkline-glow-amber .recharts-area-curve {
  filter: drop-shadow(0 0 3px oklch(var(--stat-sparkline-amber-stroke) / 0.45));
}
.stat-sparkline-glow-orange .recharts-area-area,
.stat-sparkline-glow-orange .recharts-area-curve {
  filter: drop-shadow(0 0 3px oklch(var(--stat-sparkline-orange-stroke) / 0.45));
}
.stat-sparkline-glow-green .recharts-area-area,
.stat-sparkline-glow-green .recharts-area-curve {
  filter: drop-shadow(0 0 3px oklch(var(--stat-sparkline-green-stroke) / 0.45));
}
.stat-sparkline-glow-red .recharts-area-area,
.stat-sparkline-glow-red .recharts-area-curve {
  filter: drop-shadow(0 0 3px oklch(var(--stat-sparkline-red-stroke) / 0.45));
}

/* ── Refined icon chips — family-matched gradient backgrounds with a
   subtle inset highlight so the icon reads as a polished glass tile
   rather than a flat tinted square. ── */
.stat-icon-chip-amber {
  background: linear-gradient(
    135deg,
    oklch(var(--stat-glow-amber) / 0.22) 0%,
    oklch(var(--stat-glow-amber) / 0.08) 100%
  );
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06);
}
.stat-icon-chip-orange {
  background: linear-gradient(
    135deg,
    oklch(var(--stat-glow-orange) / 0.22) 0%,
    oklch(var(--stat-glow-orange) / 0.08) 100%
  );
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06);
}
.stat-icon-chip-green {
  background: linear-gradient(
    135deg,
    oklch(var(--stat-glow-green) / 0.22) 0%,
    oklch(var(--stat-glow-green) / 0.08) 100%
  );
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06);
}
.stat-icon-chip-red {
  background: linear-gradient(
    135deg,
    oklch(var(--stat-glow-red) / 0.22) 0%,
    oklch(var(--stat-glow-red) / 0.08) 100%
  );
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06);
}

/* ── Gradient title — amber→gold sweep for the dashboard header. Uses
   background-clip: text so the headline reads as a single warm gradient
   rather than flat white. Falls back to foreground color if clip is
   unsupported. ── */
.stat-title-gradient {
  background: linear-gradient(
    90deg,
    oklch(0.85 0.14 70) 0%,
    oklch(0.78 0.16 65) 50%,
    oklch(0.82 0.12 80) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Fallback for browsers without background-clip:text — keep the title
   readable in the foreground color. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat-title-gradient {
    -webkit-text-fill-color: currentColor;
    color: oklch(var(--foreground));
    background: none;
  }
}

/* ── Change pill hover glow — family-matched soft glow on hover so the
   pills feel responsive. ── */
.stat-change-pill-up:hover {
  box-shadow: 0 0 10px oklch(var(--stat-deposit) / 0.3);
}
.stat-change-pill-down:hover {
  box-shadow: 0 0 10px oklch(var(--stat-withdraw) / 0.3);
}

/* ── Enhanced card depth — layered shadows for a premium lift on hover.
   Extends the existing .stat-chart-card:hover and .stat-plain-card:hover
   without overriding their color work. ── */
.stat-chart-card:hover,
.stat-plain-card:hover {
  box-shadow:
    0 0 0 1px oklch(var(--stat-card-accent, var(--orange)) / 0.3),
    0 10px 30px -8px oklch(0 0 0 / 0.5), 0 4px 14px -4px oklch(0 0 0 / 0.35),
    inset 0 1px 0 oklch(1 0 0 / 0.04);
}

/* ── Mobile: keep the aura and accent bar subtle on narrow cards so they
   don't overwhelm the small surface. ── */
@media (max-width: 640px) {
  .stat-card-aura-amber::before,
  .stat-card-aura-orange::before,
  .stat-card-aura-green::before,
  .stat-card-aura-red::before {
    opacity: 0.4;
  }
}

/* ============================================================
   Mobile responsive — keep all statistics text fully visible on
   narrow screens. Long BTC values, footer labels, and the Net
   Flow dominance sub-label must wrap/size down rather than clip.
   ============================================================ */
@media (max-width: 640px) {
  /* Chart-card header value — long BTC amounts (e.g. "0.00123456 BTC")
     shrink from 1.625rem so they fit a 2-col mobile grid without
     clipping. break-all + leading-tight already on the span. This rule
     now also governs plain KPI cards, whose value spans share the
     .stat-chart-card-value class so all Statistics cards stay the same
     size on every breakpoint. */
  .stat-chart-card-value {
    font-size: 1.1rem;
  }

  /* Footer label + value — relax the desktop ellipsis so footer text
     wraps instead of being cut off on narrow cards. */
  .stat-chart-footer-label {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: clip;
    line-height: 1.15;
  }
  .stat-chart-footer-value {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    text-overflow: clip;
    line-height: 1.15;
  }

  /* Net Flow dominance sub-label — small, muted, centered under the
     signed net flow value. Wraps so the localized phrase ("Deposit
     leads" / "Withdraw leads" / "Balanced") is never truncated. */
  .stat-net-flow-sublabel {
    font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    color: oklch(var(--text-dim));
    text-align: center;
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    margin-top: 0.125rem;
  }
}

/* Desktop default for the Net Flow dominance sub-label — small, muted,
   centered. The mobile override above relaxes wrapping; this base rule
   keeps the sub-label readable on wider screens too. */
.stat-net-flow-sublabel {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(var(--text-dim));
  text-align: center;
  display: block;
  width: 100%;
  line-height: 1.2;
  margin-top: 0.125rem;
}

/* ============================================================
   Landing page — TEDY V2 home view.
   Uses the OKLCH amber/gold tokens already defined in :root
   (--hero-glow-amber, --card-glow-amber, --landing-border-amber,
   --landing-surface, --landing-cta-glow, --hero-text-glow, etc.).
   Tailwind shadows (hero-glow, landing-card-glow, landing-kpi-glow,
   landing-cta-glow, landing-cta-outline-glow) and animations
   (hero-fade-up, hero-orb-drift, landing-card-stagger,
   landing-pulse-soft, landing-cta-shine) are already registered in
   tailwind.config.js.
   ============================================================ */

/* Hero section — near-black surface with room for the decorative orbs. */
.landing-hero {
  background: radial-gradient(
      ellipse at 50% 0%,
      oklch(var(--hero-glow-amber) / 0.08) 0%,
      transparent 60%
    ), oklch(var(--landing-surface));
  border-bottom: 1px solid oklch(var(--landing-border-amber) / 0.18);
}

/* Decorative blurred gradient orb — pointer-events-none in JSX. */
.landing-hero-orb {
  filter: blur(60px);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero-orb {
    animation: none !important;
  }
}

/* Hero headline — Space Grotesk via --font-display, amber text glow. */
.landing-hero-title {
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  letter-spacing: -0.02em;
}

/* Primary CTA — softened amber fill with a calmer glow + animated shine
   sweep. Chroma reduced so the button reads as warm amber, not glaring
   neon orange, against the dark canvas. */
.landing-cta-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    oklch(0.74 0.14 60) 0%,
    oklch(0.7 0.13 65) 100%
  );
  box-shadow: var(
    --tw-shadow-landing-cta-glow,
    0 0 20px oklch(0.72 0.13 65 / 0.35),
    0 0 40px oklch(0.72 0.13 65 / 0.12)
  );
  border: 1px solid oklch(var(--landing-border-amber) / 0.6);
}
.landing-cta-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    oklch(1 0 0 / 0.18) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: landing-cta-shine 3s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .landing-cta-primary::after {
    animation: none;
  }
}

/* Outline CTA — amber border + soft glow, transparent fill. */
.landing-cta-outline {
  background: transparent;
  border: 1px solid oklch(var(--landing-border-amber) / 0.55);
  box-shadow: 0 0 0 1px oklch(var(--landing-cta-glow) / 0.5), 0 0 16px
    oklch(var(--landing-cta-glow) / 0.2);
}
.landing-cta-outline:hover {
  background: oklch(var(--card-glow-amber) / 0.08);
  border-color: oklch(var(--landing-border-amber) / 0.8);
}

/* Glassmorphism card — shared by KPI cards, feature cards, and placeholders.
   Thin amber border, translucent dark surface, subtle lighter shadow.
   "Rapi dan ringan" — softened density, more whitespace, unified styling. */
.landing-glass-card {
  background: oklch(var(--landing-surface) / 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid oklch(var(--landing-border-amber) / 0.22);
  border-radius: 14px;
  box-shadow: 0 2px 12px oklch(0 0 0 / 0.25), 0 0 0 1px
    oklch(var(--landing-border-amber) / 0.06);
}
.landing-glass-card:hover {
  border-color: oklch(var(--card-glow-amber) / 0.4);
  box-shadow: 0 2px 14px oklch(0 0 0 / 0.28), 0 0 0 1px
    oklch(var(--card-glow-amber) / 0.18), 0 4px 18px
    oklch(var(--card-glow-amber) / 0.08);
}
/* Honey/teddy bear banner background overlay — REMOVED per user request.
   The teddy mascot now survives only in the header logo. Landing glass
   cards use a clean translucent dark surface with a thin amber border and
   no decorative background imagery, matching conventional dark-theme
   dashboard aesthetics. The ::after pseudo-element is fully retired here;
   the former .landing-glass-card > * lift rule is no longer needed. */

/* KPI card — subtle amber accent on hover, distinct from generic glass card.
   Lighter density: no inset glow, softer outer shadow, refined border lift. */
.landing-kpi-card:hover {
  border-color: oklch(var(--card-glow-amber-strong) / 0.42);
  box-shadow: 0 2px 14px oklch(0 0 0 / 0.3), 0 0 0 1px
    oklch(var(--card-glow-amber-strong) / 0.22), 0 6px 22px
    oklch(var(--card-glow-amber-strong) / 0.1);
}

/* Section title — uppercase display font, subtle amber tint. */
.landing-section-title {
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  color: oklch(0.85 0.02 65);
}

/* Live indicator dot — amber, soft pulse. */
.landing-live-dot {
  background: oklch(var(--card-glow-amber) / 0.9);
  box-shadow: 0 0 8px oklch(var(--card-glow-amber) / 0.6);
  animation: landing-pulse-soft 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .landing-live-dot {
    animation: none;
  }
}

/* Pinned/featured table row — subtle amber tint for future TopTokensTable. */
.landing-table-row-pinned {
  background: oklch(var(--landing-pinned-row, 0.14 0.02 65) / 0.5);
  border-left: 2px solid oklch(var(--landing-border-amber) / 0.7);
}

/* "View all" / "Coming soon" link — muted amber, hover brightens. */
.landing-view-all {
  color: oklch(var(--card-glow-amber) / 0.7);
  transition: color 0.2s ease;
}
.landing-view-all:hover {
  color: oklch(var(--card-glow-amber) / 1);
}

/* Mobile: keep hero orbs from overflowing horizontally. */
@media (max-width: 640px) {
  .landing-hero-orb {
    opacity: 0.4;
  }
}

/* ─── Hero chart card (TEDY live candlestick) ────────────────────────────── */

/* Chart canvas container — min-height prevents layout shift while LWC loads. */
.hero-chart-canvas {
  min-height: 320px;
  width: 100%;
}

/* Card spacing — unified with KPI cards: consistent radius ~14px and
   consistent padding across hero chart + holders + KPI cards ("rapi dan ringan").
   Tighter desktop padding reduces visual density without losing legibility. */
.hero-chart-card {
  padding: 1.25rem;
  border-radius: 14px;
}
@media (min-width: 640px) {
  .hero-chart-card {
    padding: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .hero-chart-card {
    padding: 1.5rem;
  }
}

/* Amber spinner keyframe — used by chart loading state. */
@keyframes hero-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Price flash on live update — green pulse for up, red pulse for down.
   Only animates opacity + transform (never layout). */
.hero-price-flash-up,
.hero-price-flash-down {
  animation: hero-price-flash 0.6s ease-out;
}
.hero-price-flash-up {
  animation-name: hero-price-flash-up;
}
.hero-price-flash-down {
  animation-name: hero-price-flash-down;
}
@keyframes hero-price-flash-up {
  0% {
    color: oklch(var(--card-glow-amber) / 1);
    text-shadow: 0 0 12px oklch(var(--card-glow-amber) / 0.6);
  }
  100% {
    text-shadow: 0 0 0 transparent;
  }
}
@keyframes hero-price-flash-down {
  0% {
    color: oklch(0.6 0.2 25);
    text-shadow: 0 0 12px oklch(0.6 0.2 25 / 0.6);
  }
  100% {
    text-shadow: 0 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-price-flash-up,
  .hero-price-flash-down {
    animation: none;
  }
}

/* ─── Hero TEDY Holders section ─────────────────────────────────────────── */

/* Holders card — unified with .hero-chart-card spacing + radius for
   consistent card styling across the hero row ("rapi dan ringan"). */
.hero-holders-card {
  padding: 1.25rem;
  border-radius: 14px;
}
@media (min-width: 640px) {
  .hero-holders-card {
    padding: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .hero-holders-card {
    padding: 1.5rem;
  }
}

/* Holder row hover — subtle amber lift, never animates layout properties. */
.hero-holder-row {
  transition: background-color 0.15s ease;
}

/* TEDY MASTER badge — gold gradient, top 5 holders. */
.hero-badge-master {
  color: oklch(0.16 0.02 65);
  background: linear-gradient(
    135deg,
    oklch(0.82 0.16 80) 0%,
    oklch(0.78 0.18 70) 100%
  );
  border: 1px solid oklch(0.85 0.14 85 / 0.6);
  box-shadow: 0 0 8px oklch(0.78 0.18 70 / 0.35);
}

/* TEDY ARMY badge — amber outline, balance >= 50000 TEDY. */
.hero-badge-army {
  color: oklch(0.82 0.16 75);
  background: oklch(var(--card-glow-amber) / 0.12);
  border: 1px solid oklch(var(--card-glow-amber) / 0.45);
}

/* ─── Holder username colors ──────────────────────────────────────────────
   Per user instruction: gold for Tedy Master, green for Tedy Army.
   Applied to the clickable username in the TEDY Holders list
   (HeroSection.tsx). Gold matches the hero-badge-master gradient family;
   green uses the existing --green token (0.58 0.18 142) so it reads as
   the Tedy Army brand color, distinct from the amber/gold master color. */

.text-tedy-master-name {
  color: oklch(0.82 0.16 80);
}
.text-tedy-army-name {
  color: oklch(var(--green));
}

/* Softened variants — used for the truncated address span next to a
   colored username so the address reads as a secondary detail in the
   same color family without competing with the bold username. Alpha
   0.8 keeps it legible on the dark landing surface while clearly
   softer than the full-strength name color above. */
.text-tedy-master-name-soft {
  color: oklch(0.82 0.16 80 / 0.8);
}
.text-tedy-army-name-soft {
  color: oklch(var(--green) / 0.8);
}

/* Holder percentage progress bar — fill width is set inline; the bar
   itself only animates width via transition on the fill, which is a
   layout-bearing property, so we keep it off and respect reduced motion. */
.hero-holder-bar-fill {
  transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero-holder-bar-fill {
    transition: none;
  }
}

/* ============================================================
   Wallet Detail panel — ADDITIVE, extends TEDY dark theme.
   Opened from the 'Click for details' hint on the Total Wallet
   P&L card. Uses existing shadcn Dialog + OKLCH surface tokens.
   Action color semantics: inflow (BUY/DEPOSIT/RECEIVED) = green,
   outflow (SELL/WITHDRAW/SENT) = red, LIQUIDITY + CREATED = amber.
   ============================================================ */

/* Panel body — layered above the shadcn Dialog surface. */
.wd-panel {
  background: oklch(var(--wd-panel));
  border: 1px solid oklch(var(--border));
  border-radius: 14px;
  overflow: hidden;
}

/* Sticky header — wallet address + summary stats, distinct surface. */
.wd-header {
  background: oklch(var(--wd-panel-header));
  border-bottom: 1px solid oklch(var(--wd-row-border));
  padding: 1rem 1.25rem 0.875rem;
}

/* Wallet address — mono, dim, truncates on narrow screens. */
.wd-address {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: oklch(var(--text-dim));
  letter-spacing: 0.01em;
}

/* Summary stat block — label + mono value. */
.wd-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.625rem;
  color: oklch(var(--text-dim));
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}
.wd-stat-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  font-weight: 600;
  color: oklch(var(--foreground));
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.wd-stat-value-up {
  color: oklch(var(--green));
}
.wd-stat-value-down {
  color: oklch(var(--red));
}

/* Summary stat card — subtle raised tile for each stat. */
.wd-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  background: oklch(var(--wd-chip));
  border: 1px solid oklch(var(--wd-row-border));
  min-width: 7.5rem;
}

/* Filter row — horizontally scrollable chip group (ALL / TRADES /
   LIQUIDITY / TRANSFERS / TOKEN). */
.wd-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.wd-filters::-webkit-scrollbar {
  display: none;
}
.wd-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: oklch(var(--text-medium));
  background: oklch(var(--wd-chip));
  border: 1px solid oklch(var(--wd-row-border));
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s
    ease;
  white-space: nowrap;
  cursor: pointer;
}
.wd-chip:hover {
  background: oklch(var(--wd-chip-hover));
  border-color: oklch(var(--orange) / 0.4);
}
.wd-chip-active {
  color: oklch(var(--wd-chip-active-foreground));
  background: oklch(var(--wd-chip-active));
  border-color: oklch(var(--wd-chip-active));
}

/* Activity list — flows within the single scrolling panel region. The
   DialogContent owns the vertical scroll (overflow-y-auto), so the list
   itself must NOT scroll internally — otherwise a nested scrollbar appears
   and the tall Portfolio PnL breakdown above stays unreachable. */
.wd-list {
  display: flex;
  flex-direction: column;
}
/* Tokens tab content — replaces the activity list when the Tokens filter is
   active. Padded so the collapsible per-token PnL rows breathe within the
   single scrolling panel region (no nested scrollbar). */
.wd-tokens {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}
.wd-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.8125rem 1.25rem;
  background: oklch(var(--wd-row));
  border-bottom: 1px solid oklch(var(--wd-row-border));
  transition: background-color 0.15s ease;
}
.wd-row:hover {
  background: oklch(var(--wd-row-hover));
}
.wd-row:last-child {
  border-bottom: none;
}

/* Action type badge — color-coded by semantics. */
.wd-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: 9999px;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
/* Each action badge mirrors the Activity Address ACTION_CONFIG palette:
   text = 400 shade, background = 500/15, border = 500/30. */
.wd-action-buy {
  color: oklch(var(--wd-buy));
  background: oklch(var(--wd-deposit-bg) / 0.15);
  border: 1px solid oklch(var(--wd-deposit-bg) / 0.3);
}
.wd-action-sell {
  color: oklch(var(--wd-sell));
  background: oklch(var(--wd-withdraw-bg) / 0.15);
  border: 1px solid oklch(var(--wd-withdraw-bg) / 0.3);
}
.wd-action-deposit {
  color: oklch(var(--wd-deposit));
  background: oklch(var(--wd-deposit-bg) / 0.15);
  border: 1px solid oklch(var(--wd-deposit-bg) / 0.3);
}
.wd-action-withdraw {
  color: oklch(var(--wd-withdraw));
  background: oklch(var(--wd-withdraw-bg) / 0.15);
  border: 1px solid oklch(var(--wd-withdraw-bg) / 0.3);
}
.wd-action-receive {
  color: oklch(var(--wd-receive));
  background: oklch(var(--wd-receive-bg) / 0.15);
  border: 1px solid oklch(var(--wd-receive-bg) / 0.3);
}
.wd-action-send {
  color: oklch(var(--wd-send));
  background: oklch(var(--wd-send-bg) / 0.15);
  border: 1px solid oklch(var(--wd-send-bg) / 0.3);
}
.wd-action-transfer {
  color: oklch(var(--wd-transfer));
  background: oklch(var(--wd-transfer-bg) / 0.15);
  border: 1px solid oklch(var(--wd-transfer-bg) / 0.3);
}
.wd-action-add {
  color: oklch(var(--wd-add));
  background: oklch(var(--wd-add-bg) / 0.15);
  border: 1px solid oklch(var(--wd-add-bg) / 0.3);
}
.wd-action-remove {
  color: oklch(var(--wd-remove));
  background: oklch(var(--wd-remove-bg) / 0.15);
  border: 1px solid oklch(var(--wd-remove-bg) / 0.3);
}
.wd-action-created {
  color: oklch(var(--wd-created));
  background: oklch(var(--wd-created) / 0.15);
  border: 1px solid oklch(var(--wd-created) / 0.3);
}

/* Row content — ticker, amounts, values, counterparty, timestamp. */
.wd-ticker {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.8125rem;
  color: oklch(var(--foreground));
}
.wd-amount {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: oklch(var(--text-medium));
}
.wd-btc-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(var(--foreground));
}
.wd-usd-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: oklch(var(--text-dim));
}
.wd-counterparty {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  color: oklch(var(--text-dim));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wd-time {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  color: oklch(var(--text-dim));
  white-space: nowrap;
  flex-shrink: 0;
}

/* Empty state — calm centered message. */
.wd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  text-align: center;
  color: oklch(var(--text-dim));
}

/* ============================================================
   TEDY V2 — Holder tags + premium wallet treatment.
   ADDITIVE, extends the dark TEDY theme. Reusable classes that
   can be applied in the Trades tab, wallet detail panel, wallet
   profile header, per-token PnL card, and Activity Address feed.
   Tedy Master = premium gold (top 5 holders), Tedy Army = green
   (balance >= 50000 TEDY). All honor prefers-reduced-motion.
   ============================================================ */

/* ── Blinking keyframes — the signature "kelap-kelip" (blink) ──
   Master blinks gold (shimmer sweep + glow pulse); Army blinks
   green (glow pulse + soft opacity). Both stay legible (never drop
   below ~0.55 opacity) and are disabled for reduced motion. ── */

/* Gold blink — shimmer highlight sweeps + gold glow breathing. */
@keyframes tedyMasterBlink {
  0%,
  100% {
    box-shadow: 0 0 4px oklch(var(--master-gold-glow) / 0.4), 0 0 12px
      oklch(var(--master-gold-glow) / 0.18);
    background-position: 0% 50%;
  }
  50% {
    box-shadow: 0 0 10px oklch(var(--master-gold-glow) / 0.75), 0 0 24px
      oklch(var(--master-gold-glow) / 0.35);
    background-position: 100% 50%;
  }
}

/* Green blink — green glow breathing + soft opacity pulse. */
@keyframes tedyArmyBlink {
  0%,
  100% {
    box-shadow: 0 0 4px oklch(var(--army-green-glow) / 0.35), 0 0 10px
      oklch(var(--army-green-glow) / 0.15);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 10px oklch(var(--army-green-glow) / 0.7), 0 0 20px
      oklch(var(--army-green-glow) / 0.3);
    opacity: 0.82;
  }
}

/* ── Reusable holder-tag base — compact pill badge ──
   Drop anywhere: trade rows, wallet headers, profile, PnL cards.
   Renders a small uppercase label (TEDY MASTER / TEDY ARMY). */
.holder-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Small crown/star glyph dot before the label (optional via ::before). */
.holder-tag::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* ── Tedy Master tag — premium gold gradient fill + gold blink ── */
.holder-tag-master {
  color: oklch(0.14 0.02 65);
  background: linear-gradient(
    135deg,
    oklch(var(--master-gold-bright)) 0%,
    oklch(var(--master-gold)) 45%,
    oklch(var(--master-gold-deep)) 100%
  );
  background-size: 200% 200%;
  border: 1px solid oklch(var(--master-gold-border) / 0.7);
  animation: tedyMasterBlink 1.8s ease-in-out infinite;
}
.holder-tag-master::before {
  background: oklch(0.14 0.02 65 / 0.55);
}

/* ── Tedy Army tag — green fill + green blink ── */
.holder-tag-army {
  color: oklch(0.06 0.04 150);
  background: linear-gradient(
    135deg,
    oklch(var(--army-green-bright)) 0%,
    oklch(var(--army-green)) 100%
  );
  border: 1px solid oklch(var(--army-green-border) / 0.7);
  animation: tedyArmyBlink 1.8s ease-in-out infinite;
}
.holder-tag-army::before {
  background: oklch(0.06 0.04 150 / 0.55);
}

/* ── Premium header wallet tag — refined, polished, not stiff ──
   Applied to the TEDY MASTER / TEDY ARMY pill inside the compact header
   wallet card. Softer gradient, subtle inner highlight, gentle breathing
   glow, and a slow shimmer sweep so it reads as premium jewelry rather
   than a rigid badge. Kept small and low-contrast so it never crowds the
   truncated address beside it. */
.header-holder-tag {
  position: relative;
  overflow: hidden;
  padding: 0.1875rem 0.625rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18), 0 1px 2px oklch(0 0 0 / 0.25);
  animation: headerTagBreath 3.2s ease-in-out infinite;
}
/* Soft shimmer sweep across the pill — smooth, not a hard blink. */
.header-holder-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 20%,
    oklch(1 0 0 / 0.28) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: headerTagShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
.header-holder-tag.holder-tag-master {
  background: linear-gradient(
    135deg,
    oklch(var(--master-gold-bright)) 0%,
    oklch(var(--master-gold)) 50%,
    oklch(var(--master-gold-deep)) 100%
  );
  border: 1px solid oklch(var(--master-gold-border) / 0.85);
  color: oklch(0.14 0.02 65);
}
.header-holder-tag.holder-tag-army {
  background: linear-gradient(
    135deg,
    oklch(var(--army-green-bright)) 0%,
    oklch(var(--army-green)) 100%
  );
  border: 1px solid oklch(var(--army-green-border) / 0.85);
  color: oklch(0.06 0.04 150);
}
/* Gentle breathing glow — refined, not a hard blink. */
@keyframes headerTagBreath {
  0%,
  100% {
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18), 0 1px 2px oklch(0 0 0 / 0.25);
  }
  50% {
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 0 8px
      oklch(var(--master-gold-glow) / 0.35), 0 1px 2px oklch(0 0 0 / 0.25);
  }
}
@keyframes headerTagShimmer {
  0% {
    background-position: 200% 0;
  }
  60%,
  100% {
    background-position: -200% 0;
  }
}

/* ── Premium Tedy Master wallet — gold gradient border + gold glow ──
   Applied to the wallet card / header surface for top-5 holders.
   Gold gradient border via a padded ::before ring, gold glow shadow,
   and gold header accents. Keeps content readable on the dark surface. */
.wd-master {
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(oklch(var(--wd-panel)), oklch(var(--wd-panel)))
    padding-box,
    linear-gradient(
      135deg,
      oklch(var(--master-gold-bright)) 0%,
      oklch(var(--master-gold)) 40%,
      oklch(var(--master-gold-deep)) 70%,
      oklch(var(--master-gold-bright)) 100%
    )
    border-box;
  background-size: 100% 100%, 300% 300%;
  box-shadow: 0 0 0 1px oklch(var(--master-gold-glow) / 0.25), 0 0 22px
    oklch(var(--master-gold-glow) / 0.22), 0 0 48px
    oklch(var(--master-gold-glow) / 0.1);
  animation: tedyMasterBlink 3.2s ease-in-out infinite;
}
/* Gold header accent — the wallet header strip reads as premium gold. */
.wd-master .wd-header {
  background: linear-gradient(
    180deg,
    oklch(var(--master-gold) / 0.14),
    oklch(var(--wd-panel-header)) 70%
  );
  border-bottom: 1px solid oklch(var(--master-gold-border) / 0.4);
}
/* Gold address chip — the mono address glows gold for masters. */
.wd-master .wd-address {
  color: oklch(var(--master-gold));
}
/* Gold stat value — summary numbers pick up the gold accent. */
.wd-master .wd-stat-value {
  color: oklch(var(--master-gold));
}
.wd-master .wd-stat-card {
  border-color: oklch(var(--master-gold-border) / 0.35);
  background: oklch(var(--master-gold) / 0.06);
}

/* ── Tedy Army wallet — green accent, calmer than master gold ──
   Green border + green glow + green address chip for 50K+ holders. */
.wd-army {
  position: relative;
  border: 1px solid oklch(var(--army-green-border) / 0.5);
  box-shadow: 0 0 0 1px oklch(var(--army-green-glow) / 0.18), 0 0 18px
    oklch(var(--army-green-glow) / 0.16);
  animation: tedyArmyBlink 3.2s ease-in-out infinite;
}
.wd-army .wd-header {
  background: linear-gradient(
    180deg,
    oklch(var(--army-green) / 0.12),
    oklch(var(--wd-panel-header)) 70%
  );
  border-bottom: 1px solid oklch(var(--army-green-border) / 0.35);
}
.wd-army .wd-address {
  color: oklch(var(--army-green));
}
.wd-army .wd-stat-value {
  color: oklch(var(--army-green));
}

/* ── Reusable colored-name utilities for wallet/profile headers ──
   Mirrors the existing .text-tedy-master-name / .text-tedy-army-name
   but as standalone classes safe to apply on any wallet surface. */
.holder-name-master {
  color: oklch(var(--master-gold));
}
.holder-name-army {
  color: oklch(var(--army-green));
}

/* ── Respect reduced motion — stop the blink/shimmer, keep the
   static gold/green treatment so tags remain readable. ── */
@media (prefers-reduced-motion: reduce) {
  .holder-tag-master,
  .holder-tag-army,
  .wd-master,
  .wd-army,
  .header-holder-tag,
  .header-holder-tag::after {
    animation: none;
  }
  .holder-tag-master {
    background: linear-gradient(
      135deg,
      oklch(var(--master-gold-bright)) 0%,
      oklch(var(--master-gold)) 100%
    );
    background-size: auto;
  }
  .wd-master {
    background-size: 100% 100%, auto;
  }
}

/* ============================================================
   PnL (Profit & Loss) feature — Wallet Detail.
   ADDITIVE, extends the TEDY dark theme. Reuses the app's existing
   positive/negative color semantics (--green for positive, --red for
   negative), the solid card surface language, mono numerics, and
   uppercase tracked labels. No new design system — only PnL-specific
   layout classes. Premium Portfolio PnL summary card on top + per-token
   breakdown rows. Responsive: 5-metric row on desktop, 2-col grid on
   mobile. All honor prefers-reduced-motion.
   ============================================================ */

/* ── Portfolio PnL Summary card — the premium hero at the top of
   Wallet Detail. Solid calm surface with a thin amber-tinted border and
   a top accent strip, matching the .stat-kpi-card / .wd-panel family. ── */
.portfolio-pnl {
  position: relative;
  background: oklch(var(--pnl-card));
  border: 1px solid oklch(var(--pnl-card-border));
  border-radius: 14px;
  padding: 1.25rem;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.portfolio-pnl:hover {
  border-color: oklch(var(--pnl-hero-accent) / 0.45);
  box-shadow: 0 0 0 1px oklch(var(--pnl-hero-accent) / 0.18), 0 8px 24px
    oklch(var(--pnl-hero-accent) / 0.08);
}
/* Top accent strip — the signature TEDY amber cue. */
.portfolio-pnl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    oklch(var(--pnl-hero-accent) / 0.7) 0%,
    oklch(var(--pnl-hero-accent) / 0) 80%
  );
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.portfolio-pnl:hover::before {
  opacity: 1;
}

/* Card header row — title + loading/error hint. */
.portfolio-pnl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.portfolio-pnl-title {
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: oklch(var(--foreground));
}
.portfolio-pnl-title-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.625rem;
  color: oklch(var(--text-dim));
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}

/* ── Total PnL hero band — the large headline number. Color follows the
   sign: green when positive, red when negative, dim when flat. ── */
.portfolio-pnl-hero {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.125rem;
  border-radius: 12px;
  background: oklch(var(--pnl-hero-bg));
  border: 1px solid oklch(var(--pnl-card-border));
  margin-bottom: 1rem;
}
.portfolio-pnl-hero-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.625rem;
  color: oklch(var(--text-dim));
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}
.portfolio-pnl-hero-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: oklch(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Total PnL % pill next to the headline. */
.portfolio-pnl-hero-pct {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
  align-self: flex-start;
}

/* ── Positive / negative / flat color treatment — reuses the app's
   existing green/red semantics exactly. Applied to hero values, metric
   values, and per-token PnL figures. ── */
.pnl-positive {
  color: oklch(var(--pnl-positive));
}
.pnl-negative {
  color: oklch(var(--pnl-negative));
}
.pnl-flat {
  color: oklch(var(--pnl-flat));
}

/* PnL % pill variants — mirror the .stat-change-pill-up/down family. */
.pnl-pill-positive {
  color: oklch(var(--pnl-positive));
  background: oklch(var(--pnl-positive) / 0.12);
  border-color: oklch(var(--pnl-positive) / 0.35);
}
.pnl-pill-negative {
  color: oklch(var(--pnl-negative));
  background: oklch(var(--pnl-negative) / 0.12);
  border-color: oklch(var(--pnl-negative) / 0.35);
}
.pnl-pill-flat {
  color: oklch(var(--pnl-flat));
  background: oklch(var(--pnl-hero-bg));
  border-color: oklch(var(--pnl-card-border));
}

/* ── PnL metric grid — the 5 summary metrics under the hero:
   Total PnL % | Realized | Unrealized | Cost Basis | Current Value.
   Desktop: 5 equal columns in one row. Mobile: 2-column grid so nothing
   overflows (the 5th tile spans full width or wraps cleanly). ── */
.pnl-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}
@media (min-width: 768px) {
  .pnl-metric-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* Metric tile — compact raised tile, mirrors .wd-stat-card. */
.pnl-metric-tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  background: oklch(var(--pnl-metric-tile));
  border: 1px solid oklch(var(--pnl-card-border));
  min-width: 0;
}
.pnl-metric-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.5625rem;
  color: oklch(var(--text-dim));
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnl-metric-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 600;
  color: oklch(var(--foreground));
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Per-token PnL breakdown — a list of rows below the summary card.
   Each row: ticker + balance, then current price / avg entry / cost basis
   / realized / unrealized / total PnL, with PnL figures colored by sign. ── */
.pnl-breakdown {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pnl-breakdown-title {
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: oklch(var(--foreground));
  margin-bottom: 0.25rem;
}
.pnl-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.8125rem 1rem;
  background: oklch(var(--pnl-row));
  border: 1px solid oklch(var(--pnl-row-border));
  border-radius: 10px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pnl-row:hover {
  background: oklch(var(--pnl-row-hover));
  border-color: oklch(var(--pnl-hero-accent) / 0.35);
}
/* Token identity — name + ticker + balance on a single compact line so each
   collapsed row stays one line tall and long token lists read cleanly. */
.pnl-row-token {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  flex-shrink: 1;
}
.pnl-row-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: oklch(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnl-row-ticker {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.75rem;
  color: oklch(var(--text-medium));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.pnl-row-balance {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: oklch(var(--text-dim));
  white-space: nowrap;
  flex-shrink: 0;
}
.pnl-row-balance::before {
  content: "·";
  margin-right: 0.5rem;
  color: oklch(var(--text-dim) / 0.6);
}
/* Numeric column group — prices, cost basis, PnL figures. */
.pnl-row-metrics {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
  flex-shrink: 0;
}
.pnl-row-metric {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.pnl-row-metric-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.5rem;
  color: oklch(var(--text-dim));
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
}
.pnl-row-metric-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(var(--foreground));
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* PnL % pill on the right of each row. */
.pnl-row-pct {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Collapsible per-token rows — each token shows a compact summary row
   (name / ticker / balance + total PnL pill + chevron) that expands to the
   full metric detail on click. Reuses the existing .pnl-row visual language
   so colors and the approved TEDY design stay unchanged. ── */
.pnl-collapsible {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
/* The compact summary is a full-width button reusing .pnl-row styling. */
.pnl-row-trigger {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: oklch(var(--pnl-row));
  border: 1px solid oklch(var(--pnl-row-border));
  border-radius: 10px;
  padding: 0.8125rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pnl-row-trigger:hover {
  background: oklch(var(--pnl-row-hover));
  border-color: oklch(var(--pnl-hero-accent) / 0.35);
}
.pnl-row-trigger:focus-visible {
  outline: 2px solid oklch(var(--pnl-hero-accent) / 0.6);
  outline-offset: 2px;
}
/* Chevron affordance — rotates when the row is expanded. */
.pnl-row-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: oklch(var(--text-dim));
  transition: transform 0.2s ease;
}
.pnl-row-trigger[data-state="open"] .pnl-row-chevron {
  transform: rotate(180deg);
}
/* Expanded detail — the metric group fills the width and wraps cleanly. */
.pnl-row-detail {
  padding: 0.625rem 1rem 0.875rem;
  background: oklch(var(--pnl-row));
  border: 1px solid oklch(var(--pnl-row-border));
  border-radius: 10px;
}
.pnl-row-detail .pnl-row-metrics {
  margin-left: 0;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

/* ── Loading / empty / error states — reuse the calm TEDY messaging
   pattern (never show $0 while calculating). ── */
.pnl-loading,
.pnl-empty,
.pnl-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  text-align: center;
  color: oklch(var(--text-dim));
  font-size: 0.8125rem;
  border-radius: 10px;
  border: 1px dashed oklch(var(--pnl-card-border));
}
.pnl-error {
  color: oklch(var(--pnl-negative));
  border-color: oklch(var(--pnl-negative) / 0.35);
}

/* ── Responsive: on desktop the Total PnL hero band collapses to a single
   horizontal row (label left, headline + % pill right) so the tall Portfolio
   PnL card takes less vertical space and the panel reads more compactly. ── */
@media (min-width: 768px) {
  .portfolio-pnl-hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .portfolio-pnl-hero-pct {
    align-self: center;
  }
}

/* ── Responsive: on narrow screens the per-token row collapses to a
   stacked card so the many numeric columns never overflow. The token
   identity + PnL % stay on the first line; the metric group wraps to a
   2-col grid beneath. ── */
@media (max-width: 640px) {
  .portfolio-pnl {
    padding: 1rem;
  }
  .portfolio-pnl-hero-value {
    font-size: 1.375rem;
  }
  .pnl-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }
  .pnl-row-metrics {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-left: 0;
    width: 100%;
  }
  .pnl-row-pct {
    margin-left: auto;
  }
}

/* ── Respect reduced motion — PnL surfaces use only static color
   transitions; no decorative animation is added. ── */
@media (prefers-reduced-motion: reduce) {
  .portfolio-pnl,
  .pnl-row,
  .pnl-row-trigger,
  .pnl-row-chevron {
    transition: none;
  }
}

/* ============================================================
   TEDY V2 — Global Desktop Responsive Layout System
   ADDITIVE, extends the dark TEDY theme. Root-cause fix for the
   desktop UI rendering as a narrow centered column (max-w-screen-2xl
   1400px + mx-auto) that stacks content vertically like an enlarged
   mobile view.

   Desktop = full-width horizontal / multi-column.
   Mobile  = single-column vertical (unchanged).
   Every desktop improvement is gated behind min-width media queries
   so nothing leaks into mobile. Layout-only — no data/API changes.

   Consumed by applying the .tedy-* classes to the root shell
   (App.tsx), page containers, and card/list grids. The frontend
   agent wires these classes; this file owns the system.
   ============================================================ */

/* ── Full-viewport container — no restrictive max-width on dashboard
   surfaces. Responsive horizontal padding 16px -> 32px. Replaces the
   old max-w-screen-2xl mx-auto pattern on main content. ── */
.tedy-container {
  width: 100%;
  max-width: var(--layout-max, none);
  margin-inline: auto;
  padding-inline: var(--layout-pad, 1rem);
}
@media (min-width: 768px) {
  .tedy-container {
    padding-inline: var(--layout-pad-md, 1.25rem);
  }
}
@media (min-width: 1280px) {
  .tedy-container {
    padding-inline: var(--layout-pad-lg, 1.5rem);
  }
}
@media (min-width: 1600px) {
  .tedy-container {
    padding-inline: var(--layout-pad-xl, 2rem);
  }
}

/* ── Main content shell — fills the full available width, never capped.
   Use on <main> and page-level wrappers that previously used
   max-w-screen-2xl mx-auto. ── */
.tedy-main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* ── Sidebar + main layout on desktop — sidebar stays left (fixed
   width), main content fills the remaining space. flex-1 + min-width:0
   prevents the classic "mobile width after sidebar" bug. Mobile keeps
   the natural stacked (block) flow. ── */
@media (min-width: 1024px) {
  .tedy-layout-sidebar {
    display: flex;
    align-items: flex-start;
    gap: var(--layout-gap-lg, 1.5rem);
  }
  .tedy-layout-sidebar > .tedy-sidebar {
    flex: 0 0 var(--sidebar-w, 280px);
    min-width: 0;
  }
  .tedy-layout-sidebar > .tedy-main {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ── Reusable multi-column grid utilities.
   .tedy-grid        auto-fill + minmax (wraps to fit available width)
   .tedy-grid-fit    auto-fit + minmax (stretches to fill the row)
   Override the min column width per-use with --grid-min (default 16rem)
   so long lists (tokens, traders, activity, LP positions, search
   results) render side-by-side on desktop. Mobile stays 1 column. ── */
.tedy-grid {
  display: grid;
  gap: var(--layout-gap, 1rem);
  grid-template-columns: repeat(
      auto-fill,
      minmax(min(100%, var(--grid-min, 16rem)), 1fr)
    );
}
.tedy-grid-fit {
  display: grid;
  gap: var(--layout-gap, 1rem);
  grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--grid-min, 16rem)), 1fr)
    );
}
/* Fixed column counts at desktop — for sections that want a guaranteed
   number of columns (e.g. KPI tiles, stat cards, chart grids). ── */
@media (min-width: 1024px) {
  .tedy-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tedy-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tedy-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── Desktop-proportional modals & dialogs — width min(90vw, target)
   and max-height 90vh so long content scrolls instead of stretching the
   viewport. Keep header/summary fixed and let the list become the
   scrollable region. ── */
@media (min-width: 768px) {
  .tedy-modal {
    width: min(90vw, var(--modal-w, 56rem));
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ── Internal scroll panel — viewport-aware height for tall panels that
   should scroll internally on desktop (activity lists, LP positions,
   search results) instead of stretching the page vertically. ── */
@media (min-width: 1024px) {
  .tedy-scroll-panel {
    max-height: min(70vh, 40rem);
    overflow-y: auto;
  }
}

/* ── Horizontal-overflow guard for the app shell — clips any stray
   bleed at the edges without hiding vertical scroll. Layout-only. ── */
.tedy-main,
.tedy-container {
  overflow-x: clip;
}

/* ── Compact desktop density — keeps content from stretching too far
   vertically by tightening section gaps on wide screens. ── */
@media (min-width: 1280px) {
  .tedy-compact {
    gap: var(--layout-gap, 1rem);
  }
}
.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));
}
.placeholder\:text-text-dim::-moz-placeholder {
  color: oklch(var(--text-dim));
}
.placeholder\:text-text-dim::placeholder {
  color: oklch(var(--text-dim));
}
.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-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.03\]:hover {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-blue-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.hover\:border-orange:hover {
  border-color: oklch(var(--orange));
}
.hover\:bg-\[oklch\(var\(--card-glow-amber\)\/0\.04\)\]:hover {
  background-color: oklch(var(--card-glow-amber)/0.04);
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-500\/10:hover {
  background-color: rgb(245 158 11 / 0.1);
}
.hover\:bg-blue-400\/30:hover {
  background-color: rgb(96 165 250 / 0.3);
}
.hover\:bg-blue-500\/40:hover {
  background-color: rgb(59 130 246 / 0.4);
}
.hover\:bg-blue-800\/60:hover {
  background-color: rgb(30 64 175 / 0.6);
}
.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
.hover\:bg-green-400\/30:hover {
  background-color: rgb(74 222 128 / 0.3);
}
.hover\:bg-green-500\/30:hover {
  background-color: rgb(34 197 94 / 0.3);
}
.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
}
.hover\:bg-orange-dim:hover {
  background-color: oklch(var(--orange-dim));
}
.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
.hover\:bg-red-400\/30:hover {
  background-color: rgb(248 113 113 / 0.3);
}
.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}
.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}
.hover\:bg-surface-2:hover {
  background-color: oklch(var(--surface-2));
}
.hover\:bg-surface-3:hover {
  background-color: oklch(var(--surface-3));
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-yellow-400\/20:hover {
  background-color: rgb(250 204 21 / 0.2);
}
.hover\:bg-yellow-400\/30:hover {
  background-color: rgb(250 204 21 / 0.3);
}
.hover\:bg-yellow-500\/30:hover {
  background-color: rgb(234 179 8 / 0.3);
}
.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}
.hover\:text-blue-400:hover {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / 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-orange:hover {
  color: oklch(var(--orange));
}
.hover\:text-orange-dim:hover {
  color: oklch(var(--orange-dim));
}
.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}
.hover\:text-tedy-red:hover {
  color: oklch(var(--red));
}
.hover\:text-text-medium:hover {
  color: oklch(var(--text-medium));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-glow:hover {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 0 0 1px oklch(var(--orange) / 0.08);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color), 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\: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\:text-negative:hover {
    color: oklch(var(--red));
  }
.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\:border-orange:focus {
  border-color: oklch(var(--orange));
}
.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\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.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-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}
.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}
.focus-visible\:ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-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-orange:focus-visible {
  --tw-ring-color: oklch(var(--orange));
}
.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-0:focus-visible {
  --tw-ring-offset-width: 0px;
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: oklch(var(--background));
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\: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-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-orange {
  color: oklch(var(--orange));
}
.group\/user:hover .group-hover\/user\:underline {
  text-decoration-line: underline;
}
.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-9[data-size="default"] {
  height: 2.25rem;
}
.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}
.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}
.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}
.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}
.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}
.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}
.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}
.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {

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

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

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}
.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}
.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}
.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}
.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}
.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}
.data-\[active\=true\]\:border-ring[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.data-\[state\=active\]\:border-orange[data-state="active"] {
  border-color: oklch(var(--orange));
}
.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.data-\[state\=inactive\]\:border-transparent[data-state="inactive"] {
  border-color: transparent;
}
.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\=active\]\:bg-transparent[data-state="active"] {
  background-color: transparent;
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
}
.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}
.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}
.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
}
.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=active\]\:text-orange[data-state="active"] {
  color: oklch(var(--orange));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
}
.data-\[state\=inactive\]\:text-text-medium[data-state="inactive"] {
  color: oklch(var(--text-medium));
}
.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\=inactive\]\:hover\:text-foreground:hover[data-state="inactive"] {
  color: oklch(var(--foreground));
}
.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));
}
@media (prefers-reduced-motion: no-preference) {

  .motion-safe\:hover\:scale-\[1\.03\]:hover {
    --tw-scale-x: 1.03;
    --tw-scale-y: 1.03;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.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\:bottom-20 {
    bottom: 5rem;
  }

  .sm\:bottom-32 {
    bottom: 8rem;
  }

  .sm\:bottom-44 {
    bottom: 11rem;
  }

  .sm\:bottom-56 {
    bottom: 14rem;
  }

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

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table {
    display: table;
  }

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

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

  .sm\:max-w-\[min\(90vw\2c 56rem\)\] {
    max-width: min(90vw, 56rem);
  }

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

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

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

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

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

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

  .sm\:grid-cols-\[3rem_1fr_8rem_7rem_5rem\] {
    grid-template-columns: 3rem 1fr 8rem 7rem 5rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:text-\[0\.9375rem\] {
    font-size: 0.9375rem;
  }

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

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

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

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

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

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

  .md\:absolute {
    position: absolute;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

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

  .md\:hidden {
    display: none;
  }

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

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

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

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

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

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

  .md\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

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

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

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

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

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

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

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

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

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

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

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>button\]\:hidden>button {
  display: none;
}
.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}
.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}
.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}
.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}
.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}
.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}
.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}
.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}
.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}
.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}
.\[\&\>svg\]\:translate-y-0\.5>svg {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>svg\]\:text-current>svg {
  color: currentColor;
}
.\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: oklch(var(--muted-foreground) / 1);
}
.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}
[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}
[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}
[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}
[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}
[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}
a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}