*, ::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: Inter, 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: Roboto Mono, Courier New, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

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

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

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

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    /* Shadcn/ui fallback tokens (OKLCH) - Light Mode */
    --background: oklch(0.98 0.002 264);
    --foreground: oklch(0.15 0.01 264);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.15 0.01 264);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.15 0.01 264);
    --primary: oklch(0.35 0.08 264);
    --primary-foreground: oklch(0.98 0.002 264);
    --secondary: oklch(0.92 0.01 264);
    --secondary-foreground: oklch(0.15 0.01 264);
    --muted: oklch(0.92 0.01 264);
    --muted-foreground: oklch(0.45 0.02 264);
    --accent: oklch(0.88 0.02 264);
    --accent-foreground: oklch(0.15 0.01 264);
    --destructive: oklch(0.55 0.18 25);
    --destructive-foreground: oklch(0.98 0.002 264);
    --border: oklch(0.88 0.01 264);
    --input: oklch(0.88 0.01 264);
    --ring: oklch(0.35 0.08 264);
    --chart-1: oklch(0.55 0.15 264);
    --chart-2: oklch(0.65 0.12 150);
    --chart-3: oklch(0.7 0.14 60);
    --chart-4: oklch(0.6 0.16 300);
    --chart-5: oklch(0.65 0.14 30);
    --radius: 0.5rem;

    /* Global Design Tokens (shared across mobile + desktop) */
    --radius-card: 20px;
    --radius-input: 12px;
    --radius-pill: 10px;
    --border-width: 1px;

    /* Font families — display for terminal/amount typography, body for UI */
    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-body: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Courier New", monospace;
    --spacing-card-padding: 20px;
    --spacing-list-gap: 12px;

    /* ── Spacing & hierarchy system (additive, preserves existing tokens) ── */
    /* Section rhythm — consistent vertical pacing between dashboard zones */
    --spacing-section-y: 14px;
    --spacing-section-y-tight: 10px;
    --spacing-section-break: 32px;
    --spacing-card-gap: 12px;
    --spacing-card-gap-lg: 16px;
    /* Inner card padding — unified across Home + Wallet for consistent sizing */
    --spacing-card-pad: 16px;
    --spacing-card-pad-lg: 20px;
    /* Action cluster spacing — thumb-reach action bar */
    --spacing-action-gap: 8px;
    --spacing-action-pad: 12px;
    /* Balance typography scale — prominent portfolio/wallet values */
    --balance-size-sm: 1.75rem;
    --balance-size-md: 2.25rem;
    --balance-size-lg: 2.625rem;
    --balance-size-xl: 3.25rem;
    --balance-line-height: 1.05;
    --balance-letter-spacing: -0.03em;
    /* Summary card sizing — consistent dimensions across Home + Wallet */
    --summary-card-min-h: 88px;
    --summary-card-pad-y: 14px;
    /* Action bar — fixed bottom-aligned thumb reach on mobile */
    --action-bar-height: 64px;
    --action-bar-pad: 12px;

    /* Bottom navigation height — dock removed (single-screen wallet).
       Kept at 0 so no reserved spacing remains where the dock used to be. */
    --bottom-nav-height: 0px;

    /* Compact mode defaults (desktop) */
    --compact-header-padding: 12px;
    --compact-toggle-height: 44px;
    --compact-pill-spacing: 8px;
    --compact-card-padding: 12px;

    --eth-glow: oklch(0.5 0.18 220 / 0.1);
    --eth-accent: oklch(0.55 0.2 220);

    --trading-bg: oklch(0.1 0.005 270);
    --trading-border: oklch(0.18 0.005 270);
    --trading-border-subtle: oklch(0.12 0.002 270);
    --trading-negative: oklch(0.55 0.18 25);
    --trading-positive: oklch(0.6 0.13 160);
    --trading-success: oklch(0.6 0.13 160);
    --trading-surface: oklch(0.16 0.008 270);
    --trading-surface-hover: oklch(0.19 0.005 270);
    --trading-text-muted: oklch(0.5 0.01 270);
    --trading-text-primary: oklch(0.96 0.002 264);
    --trading-text-secondary: oklch(0.65 0.025 250);

    --card-flip-bg: linear-gradient(
      135deg,
      #ffffff 0%,
      #f0f4ff 50%,
      #e8f0fe 100%
    );
    --card-flip-lavender: oklch(0.72 0.13 265);
    --card-flip-cyan: oklch(0.85 0.12 195);
    --card-flip-blue-reflect: rgba(147, 197, 253, 0.3);
    --card-flip-text: #1a1a2e;
    --card-flip-text-secondary: #6b7280;
    --card-flip-border: rgba(139, 156, 244, 0.25);
    --card-flip-shadow: 0 25px 50px -12px rgba(100, 130, 230, 0.2);
    --card-flip-badge-bg: rgba(139, 156, 244, 0.12);
    --card-flip-badge-text: #5b6fd8;

    --paper-base: #f8f7f4;
    --paper-alt: #f5efe4;
    --paper-edge: #ede5d8;
    --paper-text-primary: #1c1c1c;
    --paper-text-secondary: #5c5247;
    --paper-text-muted: #8c7e72;
    --paper-icp: #7b61ff;
    --paper-btc: #f7931a;
    --paper-eth: #4a9eff;
    --paper-arb: #28a8e0;

    /* ── BTC receive-address preparing status ────────────────────────────
       Compact amber chip shown on the BTC asset card while its receive
       address is still being resolved. Amber matches the BTC orange family
       (--paper-btc) and reads as "in progress" without alarming. */
    --preparing-bg: oklch(0.92 0.09 75 / 0.16);
    --preparing-border: oklch(0.78 0.13 70 / 0.4);
    --preparing-text: oklch(0.72 0.13 70);
    --preparing-dot: oklch(0.78 0.14 70);

    --metric-card-bg: rgba(17, 18, 24, 0.92);
    --metric-card-border: rgba(255, 255, 255, 0.07);
    --metric-card-glow: rgba(255, 255, 255, 0.04);
    --intelligence-row-hover: rgba(255, 255, 255, 0.03);
    --activity-dot-color: rgba(70, 223, 177, 0.8);

    --refinery-bg: #0a0b0a;
    --refinery-concrete: #1a1c1a;
    --refinery-steel: #232623;
    --refinery-gunmetal: #1c1f1c;
    --refinery-glass: rgba(255, 255, 255, 0.04);
    --refinery-glass-heavy: rgba(255, 255, 255, 0.07);
    --refinery-seam: rgba(255, 255, 255, 0.08);
    --refinery-green: #a8d860;
    --refinery-green-dim: #6a9440;
    --refinery-green-glow: rgba(168, 216, 96, 0.18);
    --refinery-green-fog: rgba(168, 216, 96, 0.06);
    --refinery-purple: #6b4f7a;
    --refinery-purple-deep: #3d2e47;
    --refinery-purple-glow: rgba(107, 79, 122, 0.15);
    --refinery-amber: #d4a020;
    --refinery-border: rgba(168, 216, 96, 0.15);
    --refinery-border-steel: rgba(255, 255, 255, 0.1);
    --refinery-shadow: 0 12px 48px rgba(0, 0, 0, 0.85), 0 2px 8px
      rgba(0, 0, 0, 0.7);
    --refinery-reactor-core: radial-gradient(
      circle at 50% 50%,
      rgba(107, 79, 122, 0.3) 0%,
      rgba(168, 216, 96, 0.12) 45%,
      rgba(26, 28, 26, 0.95) 100%
    );

    --eth-cold-bg: oklch(0.08 0.002 240);
    --eth-card-base: oklch(0.14 0.006 250);
    --eth-card-border: oklch(0.28 0.08 210);
    --eth-glass-light: oklch(0.92 0.004 220);
    --eth-ice-primary: oklch(0.7 0.12 210);
    --eth-ice-accent: oklch(0.82 0.09 215);
    --eth-glow-soft: oklch(0.65 0.14 215 / 0.12);
    --eth-glow-intense: oklch(0.75 0.16 210 / 0.18);
    --eth-glass-overlay: rgba(200, 228, 255, 0.05);
    --eth-glass-reflect: rgba(255, 255, 255, 0.08);
    --eth-shelf-line: rgba(255, 255, 255, 0.04);
    --eth-text-primary: oklch(0.96 0.002 240);
    --eth-text-secondary: oklch(0.78 0.01 230);
    --eth-frost-gradient: linear-gradient(
      135deg,
      rgba(200, 228, 255, 0.08) 0%,
      rgba(180, 210, 240, 0.04) 100%
    );
  }

  [data-theme="dark"] {
    /* Shadcn/ui fallback tokens (OKLCH) - Dark Mode - Wallet Premium */
    --background: oklch(0.1 0.005 270);
    --foreground: oklch(0.96 0.002 264);
    --card: oklch(0.13 0.005 270);
    --card-foreground: oklch(0.96 0.002 264);
    --popover: oklch(0.17 0.022 250);
    --popover-foreground: oklch(0.96 0.002 264);
    --primary: oklch(0.6 0.13 160);
    --primary-foreground: oklch(0.1 0.005 270);
    --secondary: oklch(0.16 0.005 270);
    --secondary-foreground: oklch(0.96 0.002 264);
    --muted: oklch(0.18 0.005 270);
    --muted-foreground: oklch(0.65 0.025 250);
    --accent: oklch(0.6 0.13 160);
    --accent-foreground: oklch(0.1 0.005 270);
    --destructive: oklch(0.55 0.18 25);
    --destructive-foreground: oklch(0.96 0.002 264);
    --border: oklch(0.18 0.012 290);
    --input: oklch(0.16 0.008 270);
    --ring: oklch(0.6 0.13 160);
    --chart-1: oklch(0.6 0.13 160);
    --chart-2: oklch(0.7 0.12 150);
    --chart-3: oklch(0.75 0.14 60);
    --chart-4: oklch(0.65 0.16 300);
    --chart-5: oklch(0.7 0.14 30);

    /* Elevated surface token for dark mode — visibly lighter than bg-card */
    --surface-elevated: oklch(0.19 0.005 270);

    --eth-glow: oklch(0.55 0.22 220 / 0.18);
    --eth-accent: oklch(0.65 0.22 220);

    /* Semantic asset colors — color only for meaning */
    --color-connected: var(--accent-green);
    --color-icp: oklch(0.65 0.18 300);
    --color-eth: oklch(0.65 0.15 250);
    --color-btc: oklch(0.7 0.15 60);

    /* ICP → ETH swap terminal — blue #3B82F6 accent.
       Sibling of the BTC → ICP terminal: same dark surface language,
       blue used for the CTA, active chips, and highlights only. */
    --terminal-accent: oklch(0.62 0.19 255);
    --terminal-accent-strong: oklch(0.56 0.2 255);
    --terminal-accent-soft: oklch(0.62 0.19 255 / 0.14);
    --terminal-accent-foreground: oklch(0.99 0 0);
    --terminal-surface: oklch(0.16 0.008 270);
    --terminal-surface-hover: oklch(0.19 0.005 270);
    --terminal-border: oklch(0.18 0.005 270);
    --terminal-text-muted: oklch(0.5 0.01 270);

    /* BTC receive-address preparing status — dark mode amber chip */
    --preparing-bg: oklch(0.78 0.13 70 / 0.14);
    --preparing-border: oklch(0.78 0.14 70 / 0.35);
    --preparing-text: oklch(0.82 0.13 75);
    --preparing-dot: oklch(0.85 0.14 75);
  }

  /* ── Light Mode Theme Colors (default / :root) ── */
  :root {
    --bg-page: #f5f5f7;
    --bg-card: #ffffff;
    --bg-input: #f0f0f2;
    --bg-surface-secondary: #e8e8ec;
    --text-primary: #0a0f1e;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --accent-green: #16a34a;
    --accent-red: #dc2626;

    /* Legacy variables for backward compatibility */
    --color-page-bg: #f5f5f7;
    --color-card-bg: #ffffff;
    --color-card-border: rgba(15, 20, 40, 0.06);
    --color-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 1px
      rgba(0, 0, 0, 0.05);
    --color-header-bg: #ffffff;
    --color-text-primary: #0a0f1e;
    --color-text-secondary: #6b7280;
    --color-text-muted: rgba(10, 15, 30, 0.45);
    --color-positive: #16a34a;
    --color-negative: #dc2626;
    --color-input-bg: #f0f0f2;
    --color-input-border: #e5e7eb;
    --color-divider: #e5e7eb;

    /* Market page specific */
    --market-page-bg: #f5f5f7;
    --market-panel-bg: #ffffff;
    --market-border: #e5e7eb;
    --market-text: #0a0f1e;
    --market-text-muted: #6b7280;

    /* AccountChip tokens — light mode */
    --chip-bg: rgba(0, 0, 0, 0.05);
    --chip-border: rgba(0, 0, 0, 0.1);
    --chip-text: #0a0f1e;
    --chip-text-muted: rgba(10, 15, 30, 0.55);
    --chip-bg-hover: rgba(0, 0, 0, 0.1);
    --chip-bg-active: rgba(0, 0, 0, 0.15);
    --chip-signout-text: #dc2626;
  }

  /* ── Dark Mode Theme Colors ── */
  [data-theme="dark"],
  .theme-dark {
    --bg-page: #070809;
    --bg-card: #111218;
    --bg-input: #14151c;
    --bg-surface-secondary: #0b0b0f;
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --border-color: rgba(180, 160, 255, 0.04);
    --accent-green: #46dfb1;
    --accent-red: #ff6b6b;

    /* Legacy variables for backward compatibility */
    --color-page-bg: #070809;
    --color-card-bg: #111218;
    --color-card-border: rgba(180, 160, 255, 0.04);
    --color-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 1px
      rgba(255, 255, 255, 0.03);
    --color-header-bg: #070809;
    --color-text-primary: #ffffff;
    --color-text-secondary: #9ca3af;
    --color-text-muted: rgba(245, 247, 255, 0.55);
    --color-positive: #46dfb1;
    --color-negative: #ff6b6b;
    --color-input-bg: #14151c;
    --color-input-border: rgba(180, 160, 255, 0.04);
    --color-divider: rgba(180, 160, 255, 0.04);

    /* Market page specific */
    --market-page-bg: #0a0f1e;
    --market-panel-bg: #131d2e;
    --market-border: rgba(255, 255, 255, 0.08);
    --market-text: #ffffff;
    --market-text-muted: #9ca3af;

    /* AccountChip tokens — dark mode: elevated surface, visible border, bright text */
    --chip-bg: #1a1a22;
    --chip-border: rgba(180, 160, 255, 0.15);
    --chip-text: #f5f7ff;
    --chip-text-muted: rgba(245, 247, 255, 0.55);
    --chip-bg-hover: #22222e;
    --chip-bg-active: #14141c;
    --chip-signout-text: #ff6b6b;

    --eth-glow: oklch(0.55 0.22 220 / 0.18);
    --eth-accent: oklch(0.65 0.22 220);
  }

  /* Mobile-specific dark mode overrides (ONLY for screens under 768px) */
  @media (max-width: 768px) {
    [data-theme="dark"],
    .theme-dark {
      /* Navy background instead of pure black */
      --mobile-bg: oklch(0.11 0.008 270);
      --mobile-card-bg: oklch(0.15 0.006 270);

      /* High contrast text colors for mobile dark mode */
      --mobile-text-primary: #f5f7ff;
      --mobile-text-secondary: rgba(245, 247, 255, 0.72);
      --mobile-text-muted: rgba(245, 247, 255, 0.55);

      /* Card styling */
      --mobile-card-border: rgba(180, 160, 255, 0.06);

      --bg-page: oklch(0.11 0.008 270);
      --bg-card: oklch(0.15 0.006 270);
      --text-primary: #f5f7ff;
      --text-secondary: rgba(245, 247, 255, 0.72);

      --color-page-bg: oklch(0.11 0.008 270);
      --color-card-bg: oklch(0.15 0.006 270);
      --color-text-primary: #f5f7ff;
      --color-text-secondary: rgba(245, 247, 255, 0.72);
    }
  }

  /* Compact mode for small mobile heights (iPhone SE, etc.) */
  @media (max-height: 700px) {
    :root {
      --compact-header-padding: 8px;
      --compact-toggle-height: 38px;
      --compact-pill-spacing: 4px;
      --compact-card-padding: 8px;
    }

    .compact-header-row {
      padding-top: var(--compact-header-padding) !important;
      padding-bottom: var(--compact-header-padding) !important;
    }

    .compact-toggle {
      height: var(--compact-toggle-height);
    }

    .trade-panel-compact {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
  }

  /* Extra compact mode for very small heights */
  @media (max-height: 650px) {
    :root {
      --compact-header-padding: 6px;
      --compact-toggle-height: 36px;
      --compact-pill-spacing: 3px;
      --compact-card-padding: 6px;
    }
  }
  * {
  border-color: oklch(var(--border));
}
  body {
  background-color: oklch(var(--background));
  color: oklch(var(--foreground));
    background-color: var(--bg-page, #070809);
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-20 {
  bottom: 5rem;
}
.bottom-\[-5px\] {
  bottom: -5px;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-4 {
  left: 1rem;
}
.left-\[-5px\] {
  left: -5px;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.right-\[-5px\] {
  right: -5px;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-5 {
  top: 1.25rem;
}
.top-\[-5px\] {
  top: -5px;
}
.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-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[9998\] {
  z-index: 9998;
}
.z-\[9999\] {
  z-index: 9999;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-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-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.-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-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-2 {
  margin-right: 0.5rem;
}
.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-6 {
  margin-top: 1.5rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.block {
  display: block;
}
.inline-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-1\/2 {
  height: 50%;
}
.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-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.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-\[100px\] {
  height: 100px;
}
.h-\[3px\] {
  height: 3px;
}
.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-screen {
  height: 100vh;
}
.h-svh {
  height: 100svh;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[220px\] {
  min-height: 220px;
}
.min-h-\[24px\] {
  min-height: 24px;
}
.min-h-\[72px\] {
  min-height: 72px;
}
.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-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-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[90vw\] {
  width: 90vw;
}
.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-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-\[140px\] {
  max-width: 140px;
}
.max-w-\[420px\] {
  max-width: 420px;
}
.max-w-\[430px\] {
  max-width: 430px;
}
.max-w-\[60\%\] {
  max-width: 60%;
}
.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-sm {
  max-width: 24rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

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

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-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-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-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-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-green-900\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(20 83 45 / 0.1);
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.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-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-3xl {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-700\/30 {
  border-color: rgb(29 78 216 / 0.3);
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-green-700\/40 {
  border-color: rgb(21 128 61 / 0.4);
}
.border-green-900\/20 {
  border-color: rgb(20 83 45 / 0.2);
}
.border-green-900\/25 {
  border-color: rgb(20 83 45 / 0.25);
}
.border-green-900\/30 {
  border-color: rgb(20 83 45 / 0.3);
}
.border-input {
  border-color: oklch(var(--input));
}
.border-orange-500\/30 {
  border-color: rgb(249 115 22 / 0.3);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-yellow-500\/30 {
  border-color: rgb(234 179 8 / 0.3);
}
.border-zinc-700 {
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
}
.border-zinc-800 {
  --tw-border-opacity: 1;
  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-purple-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#1a3a1a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(26 58 26 / var(--tw-bg-opacity, 1));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/95 {
  background-color: rgb(0 0 0 / 0.95);
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-950\/40 {
  background-color: rgb(23 37 84 / 0.4);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-gray-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
}
.bg-green-900\/15 {
  background-color: rgb(20 83 45 / 0.15);
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.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-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-purple-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-red-950\/30 {
  background-color: rgb(69 10 10 / 0.3);
}
.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-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}
.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-950\/20 {
  background-color: rgb(66 32 6 / 0.2);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.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-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-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-10 {
  padding-bottom: 2.5rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-4 {
  padding-right: 1rem;
}
.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-2 {
  padding-top: 0.5rem;
}
.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-mono {
  font-family: Roboto Mono, Courier New, monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[42px\] {
  font-size: 42px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.125rem;
  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;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.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-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.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-400\/60 {
  color: rgb(251 191 36 / 0.6);
}
.text-amber-400\/70 {
  color: rgb(251 191 36 / 0.7);
}
.text-amber-400\/80 {
  color: rgb(251 191 36 / 0.8);
}
.text-amber-400\/90 {
  color: rgb(251 191 36 / 0.9);
}
.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-blue-400\/60 {
  color: rgb(96 165 250 / 0.6);
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-300\/80 {
  color: rgb(134 239 172 / 0.8);
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-400\/30 {
  color: rgb(74 222 128 / 0.3);
}
.text-green-400\/40 {
  color: rgb(74 222 128 / 0.4);
}
.text-green-400\/50 {
  color: rgb(74 222 128 / 0.5);
}
.text-green-400\/60 {
  color: rgb(74 222 128 / 0.6);
}
.text-green-400\/80 {
  color: rgb(74 222 128 / 0.8);
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / 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\/60 {
  color: rgb(192 132 252 / 0.6);
}
.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-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.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\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.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));
}
.text-yellow-400\/80 {
  color: rgb(250 204 21 / 0.8);
}
.text-zinc-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-zinc-500 {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.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;
}
.placeholder-gray-600::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(75 85 99 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-600::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(75 85 99 / var(--tw-placeholder-opacity, 1));
}
.placeholder-white\/20::-moz-placeholder {
  color: rgb(255 255 255 / 0.2);
}
.placeholder-white\/20::placeholder {
  color: rgb(255 255 255 / 0.2);
}
.opacity-0 {
  opacity: 0;
}
.opacity-35 {
  opacity: 0.35;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.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-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-terminal {
  --tw-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 12px 40px var(--tw-shadow-color), 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-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-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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-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;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.ease-in {
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.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;
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* FRONT face — paper-based Portfolio ID card style */
/* ─────────────────────────────────────────────────────────────────────────── */
.eth-flip-card-front {
    background: linear-gradient(145deg, #f7f8ff 0%, #edf0ff 60%, #dce3ff 100%);
    border: 1px solid var(--paper-edge);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(80, 100, 200, 0.2), inset 0 1px 0
      rgba(255, 255, 255, 0.88), 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 28px
      rgba(0, 0, 0, 0.09);
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
/* Paper grain texture */
.eth-flip-card-front::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E")
      repeat;
    opacity: 0.032;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
  }
/* Gloss overlay */
.eth-flip-card-front::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
/* Sheen stripe — used ONLY inside the front face */
.eth-card-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 30%,
      rgba(255, 255, 255, 0.12) 45%,
      transparent 60%
    );
    z-index: 0;
  }
/* ── Bitcoin flip card ──────────────────────────────────────────────────── */
/* FRONT face — paper-based Portfolio ID card style */
.btc-flip-card-front {
    background: radial-gradient(
      ellipse at center,
      #fff8ee 0%,
      #fdf0d5 40%,
      #fde3b0 70%,
      #f9c56a 100%
    );
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 120, 0.9),
      inset 0 -1px 0 rgba(180, 80, 0, 0.35),
      inset 1px 0 0 rgba(247, 147, 26, 0.42),
      inset -1px 0 0 rgba(247, 147, 26, 0.42),
      0 0 0 1px rgba(247, 147, 26, 0.52),
      0 0 10px 2px rgba(247, 147, 26, 0.14),
      0 2px 8px rgba(0, 0, 0, 0.06),
      0 8px 28px rgba(0, 0, 0, 0.09);
    animation: btcEdgePulse 8s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
/* Paper grain texture */
.btc-flip-card-front::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E")
      repeat;
    opacity: 0.032;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
  }
/* Gloss overlay */
.btc-flip-card-front::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
/* Sheen stripe — used ONLY inside the front face */
.btc-card-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 30%,
      rgba(255, 255, 255, 0.14) 45%,
      transparent 60%
    );
    z-index: 0;
  }
/* Bitcoin rainbow gradient accent bar — top edge, front face only */
.btc-card-rainbow-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 1rem 1rem 0 0;
    background: linear-gradient(90deg, #c96a00 0%, #f7931a 50%, #ffd280 100%);
    opacity: 0.8;
    z-index: 2;
    pointer-events: none;
  }
/* Ethereum rainbow gradient accent bar — top edge, front face only */
.eth-card-rainbow-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 1rem 1rem 0 0;
    background: linear-gradient(
      90deg,
      #3b4bc8 0%,
      #5b6fd8 35%,
      #8b9cf4 70%,
      #b8c4ff 100%
    );
    opacity: 0.8;
    z-index: 2;
    pointer-events: none;
  }
/* FRONT face — paper-based Portfolio ID card style */
.icp-flip-card-front {
    background: linear-gradient(145deg, #faf9fb 0%, #f0ecfa 60%, #e8e0f5 100%);
    border: 1px solid var(--paper-edge);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(122, 90, 170, 0.18), inset 0 1px 0
      rgba(255, 255, 255, 0.88), 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 28px
      rgba(0, 0, 0, 0.09);
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
/* Paper grain texture */
.icp-flip-card-front::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E")
      repeat;
    opacity: 0.032;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
  }
/* Gloss overlay */
.icp-flip-card-front::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
/* Sheen stripe — used ONLY inside the front face */
.icp-card-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 30%,
      rgba(255, 255, 255, 0.1) 45%,
      transparent 60%
    );
    z-index: 0;
  }
/* Rainbow gradient accent bar — top edge, front face only */
.icp-card-rainbow-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 1rem 1rem 0 0;
    background: linear-gradient(
      90deg,
      #522785 0%,
      #29abe2 40%,
      #46dfb1 70%,
      #ed7e3b 100%
    );
    opacity: 0.8;
    z-index: 2;
    pointer-events: none;
  }
@keyframes dashboardFadeUp {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
@keyframes metricPulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 var(--metric-card-glow), 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    50% {
      box-shadow: 0 0 8px 1px var(--metric-card-glow), 0 4px 12px
        rgba(0, 0, 0, 0.2);
    }
  }
.animate-dashboard-fade-up {
    animation: dashboardFadeUp 500ms ease-out forwards;
  }
.animate-metric-pulse {
    animation: metricPulse 3s ease-in-out infinite;
  }
.eth-cold-page {
    background: var(--eth-cold-bg);
    color: var(--eth-text-primary);
  }
.eth-reserve-card {
    background: linear-gradient(
      135deg,
      var(--eth-card-base) 0%,
      oklch(0.15 0.008 245) 100%
    );
    border: 1px solid var(--eth-card-border);
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(200, 228, 255, 0.08), inset 0 1px 2px
      rgba(255, 255, 255, 0.06), 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 1px
      rgba(200, 228, 255, 0.12);
    position: relative;
    overflow: hidden;
  }
.eth-reserve-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22%3E%3Cfilter id=%22frost%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.4%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%222%22/%3E%3C/filter%3E%3Crect width=%22120%22 height=%22120%22 filter=%22url(%23frost)%22 opacity=%220.08%22/%3E%3C/svg%3E")
      repeat;
    opacity: 0.12;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
  }
.eth-reserve-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(200, 228, 255, 0.04) 40%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }
.eth-secured-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(200, 228, 255, 0.08);
    border: 1px solid rgba(200, 228, 255, 0.16);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--eth-ice-accent);
    text-transform: none;
  }
.eth-balance-section {
    position: relative;
    z-index: 2;
    text-align: center;
  }
.eth-reserve-balance-label {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--eth-text-secondary);
    margin-bottom: 8px;
    opacity: 0.75;
  }
.eth-reserve-balance-value {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--eth-ice-primary);
    line-height: 1.1;
    margin-bottom: 12px;
  }
.eth-action-button-primary {
    background: linear-gradient(
      135deg,
      rgba(200, 228, 255, 0.12) 0%,
      rgba(180, 210, 240, 0.08) 100%
    );
    border: 1px solid rgba(200, 228, 255, 0.2);
    border-radius: 16px;
    padding: 14px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--eth-ice-accent);
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(100, 150, 200, 0.15), inset 0 1px 0
      rgba(255, 255, 255, 0.1);
  }
.eth-action-button-primary:hover {
    background: linear-gradient(
      135deg,
      rgba(200, 228, 255, 0.18) 0%,
      rgba(180, 210, 240, 0.12) 100%
    );
    border-color: rgba(200, 228, 255, 0.28);
    box-shadow: 0 12px 36px rgba(100, 150, 200, 0.22), inset 0 1px 0
      rgba(255, 255, 255, 0.14);
  }
.eth-action-button-secondary {
    background: transparent;
    border: 1px solid rgba(200, 228, 255, 0.12);
    border-radius: 16px;
    padding: 12px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--eth-text-secondary);
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.25s ease;
  }
.eth-action-button-secondary:hover {
    background: rgba(200, 228, 255, 0.06);
    border-color: rgba(200, 228, 255, 0.18);
    color: var(--eth-ice-primary);
  }
.eth-shelf-lines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 88px,
      var(--eth-shelf-line) 88px,
      var(--eth-shelf-line) 89px
    );
    pointer-events: none;
    opacity: 0.08;
    border-radius: inherit;
  }
.tabular-nums {
    font-variant-numeric: tabular-nums;
  }
/* ── Balance typography — prominent portfolio/wallet values ── */
.balance-display {
    font-weight: 700;
    letter-spacing: var(--balance-letter-spacing);
    line-height: var(--balance-line-height);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
  }
.balance-display-sm {
    font-size: var(--balance-size-sm);
  }
.balance-display-md {
    font-size: var(--balance-size-md);
  }
.balance-display-lg {
    font-size: var(--balance-size-lg);
  }
.balance-display-xl {
    font-size: var(--balance-size-xl);
  }
/* Hero portfolio value on Home — dashboard focal point */
.balance-hero {
    font-size: var(--balance-size-xl);
    font-weight: 700;
    letter-spacing: var(--balance-letter-spacing);
    line-height: var(--balance-line-height);
    font-variant-numeric: tabular-nums;
  }
/* Wallet balance — slightly smaller than hero, still prominent */
.balance-wallet {
    font-size: var(--balance-size-lg);
    font-weight: 700;
    letter-spacing: var(--balance-letter-spacing);
    line-height: var(--balance-line-height);
    font-variant-numeric: tabular-nums;
  }
/* ── Section rhythm — consistent vertical pacing ── */
.section-rhythm {
    padding-top: var(--spacing-section-y);
    padding-bottom: var(--spacing-section-y);
  }
.section-rhythm-tight {
    padding-top: var(--spacing-section-y-tight);
    padding-bottom: var(--spacing-section-y-tight);
  }
.section-gap {
    gap: var(--spacing-card-gap);
  }
.section-gap-lg {
    gap: var(--spacing-card-gap-lg);
  }
/* ── Consistent card sizing across Home + Wallet ── */
.card-pad {
    padding: var(--spacing-card-pad);
  }
.card-pad-lg {
    padding: var(--spacing-card-pad-lg);
  }
.summary-card {
    min-height: var(--summary-card-min-h);
    padding-top: var(--summary-card-pad-y);
    padding-bottom: var(--summary-card-pad-y);
  }
/* Equal-height asset/summary cards for visual consistency */
.card-equal {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
.card-equal > * {
    flex-shrink: 0;
  }
.card-equal > .card-grow {
    flex: 1 1 auto;
    min-height: 0;
  }
/* ── Thumb-reach action bar — fixed bottom-aligned on mobile ──
     The bottom dock is removed, so the action bar now sits flush at the
     real bottom edge, clearing only the device safe-area inset. */
.action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: var(--spacing-action-gap);
    padding: var(--spacing-action-pad);
    padding-bottom: calc(
      var(--spacing-action-pad) +
      env(safe-area-inset-bottom, 0px)
    );
    min-height: var(--action-bar-height);
    background: linear-gradient(
      to top,
      var(--bg-page) 70%,
      color-mix(in oklch, var(--bg-page) 60%, transparent) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
.action-bar > * {
    flex: 1 1 0;
    min-width: 0;
  }
/* Inline action cluster — non-fixed, used inside cards/sections */
.action-cluster {
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: var(--spacing-action-gap);
    padding: var(--spacing-action-pad) 0;
  }
.action-cluster > * {
    flex: 1 1 0;
    min-width: 0;
  }
/* ── Single-screen focused wallet layout (no bottom dock) ──
     The wallet opens directly into the dashboard after login with no
     bottom navigation. These utilities reclaim the freed screen space so
     content and asset cards flow cleanly to the bottom edge. */
.wallet-shell {
    min-height: 100dvh;
    padding-bottom: calc(
      var(--spacing-section-break) +
      env(safe-area-inset-bottom, 0px)
    );
  }
/* Full-width content — no reserved dock spacing, edge-to-edge on mobile */
.wallet-content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
/* Reclaim the space formerly reserved for the bottom dock */
.no-bottom-dock {
    padding-bottom: 0;
  }
/* Safe-area aware bottom padding for fixed/absolute elements */
.dock-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
/* Mobile-specific utility classes */
@media (max-width: 768px) {
    .mobile-text-primary {
      color: var(--mobile-text-primary, var(--text-primary));
    }

    .mobile-text-secondary {
      color: var(--mobile-text-secondary, var(--text-secondary));
    }

    .mobile-text-muted {
      color: var(--mobile-text-muted, var(--color-text-muted));
    }

    /* Tighten section rhythm on mobile to reduce scrolling */
    .section-rhythm {
      padding-top: var(--spacing-section-y-tight);
      padding-bottom: var(--spacing-section-y-tight);
    }
    /* Slightly smaller hero balance on small screens, still prominent */
    .balance-hero {
      font-size: var(--balance-size-lg);
    }
    .balance-wallet {
      font-size: var(--balance-size-md);
    }
  }
/* Honor reduced motion for balance/section utilities (no motion here, but keep parity) */
@media (prefers-reduced-motion: reduce) {
    .balance-display,
    .balance-hero,
    .balance-wallet {
      transition: none;
    }
  }
/* ── Swap screen: reusable asset selector row ── */
/* Full-width selectable asset row (icon + name + ticker + indicator) */
.asset-select-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-card, 20px);
    background: var(--bg-card, #111218);
    border: 1px solid var(--border-color, rgba(180, 160, 255, 0.04));
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
.asset-select-row:hover {
    background: var(--bg-surface-secondary, #0b0b0f);
  }
/* Selected state — visible purple ICP accent border + soft glow */
.asset-select-row.is-selected {
    border-color: color-mix(
      in oklch,
      var(--color-icp, oklch(0.65 0.18 300)) 55%,
      transparent
    );
    background: linear-gradient(
      180deg,
      color-mix(
          in oklch,
          var(--color-icp, oklch(0.65 0.18 300)) 8%,
          var(--bg-card, #111218)
        )
        0%,
      var(--bg-card, #111218) 100%
    );
  }
/* Asset glyph/icon chip */
.asset-select-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--bg-surface-secondary, #0b0b0f);
    border: 1px solid var(--border-color, rgba(180, 160, 255, 0.04));
    font-weight: 700;
  }
/* Selection indicator — chevron (unselected) / check (selected) */
.asset-select-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: var(--text-secondary, #9ca3af);
    transition: color 200ms ease;
  }
.asset-select-row.is-selected .asset-select-indicator {
    color: var(--color-icp, oklch(0.65 0.18 300));
  }
/* ── ICP → ETH swap terminal: blue accent CTA ─────────────────────── */
/* Primary "Preview Swap" action — blue #3B82F6 fill, white text.
     Mirrors the BTC → ICP terminal CTA so both terminals read as siblings. */
.terminal-accent-btn {
    background: var(--terminal-accent);
    color: var(--terminal-accent-foreground);
    border: 1px solid var(--terminal-accent-strong);
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background-color 200ms ease, transform 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
.terminal-accent-btn:hover {
    background: var(--terminal-accent-strong);
  }
.terminal-accent-btn:active {
    transform: scale(0.97);
  }
/* Quick-percentage chip (25/50/75/MAX) — soft blue tint, active filled */
.terminal-chip {
    background: var(--terminal-accent-soft);
    color: var(--terminal-accent);
    border: 1px solid var(--terminal-border);
    border-radius: 999px;
    font-weight: 600;
    transition: background-color 200ms ease, color 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
.terminal-chip.is-active {
    background: var(--terminal-accent);
    color: var(--terminal-accent-foreground);
    border-color: var(--terminal-accent);
  }
/* ── BTC receive-address preparing status chip ────────────────────────
     Compact amber pill shown on the BTC asset card while its receive
     address is still being resolved. Non-blocking: the rest of the wallet
     stays fully usable. Amber dot pulses gently to signal "in progress". */
.preparing-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--preparing-bg);
    border: 1px solid var(--preparing-border);
    color: var(--preparing-text);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
.preparing-chip .preparing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--preparing-dot);
    flex-shrink: 0;
    animation: preparing-pulse 1.6s ease-in-out infinite;
  }
@keyframes preparing-pulse {
    0%,
    100% {
      opacity: 0.35;
      transform: scale(0.85);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
  }
@media (prefers-reduced-motion: reduce) {
    .preparing-chip .preparing-dot {
      animation: none;
      opacity: 0.7;
    }
  }
.asset-row-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    transition: opacity 200ms ease, transform 200ms ease;
  }
.asset-row-compact:active {
    transform: scale(0.98);
  }
.settings-group {
    background: rgba(17, 18, 24, 0.6);
    border-radius: 14px;
    overflow: hidden;
  }
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 200ms ease;
  }
.settings-row:last-child {
    border-bottom: none;
  }
.settings-row:active {
    background: rgba(255, 255, 255, 0.03);
  }
.nav-active {
    opacity: 1;
    filter: brightness(1.3);
    transition: filter 200ms ease, opacity 200ms ease;
  }
.btn-press {
    transition: transform 200ms ease;
  }
.btn-press:active {
    transform: scale(0.97);
  }
.card-soft {
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
.card-glow-subtle {
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.03), 0 2px 8px rgba(0, 0, 0, 0.4);
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}
.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

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

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

/* ── Swap Terminal LED scan-light border ────────────────────────────────── */
@keyframes swap-led-scan {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 400% 0%;
  }
}
/* ── Swap Terminal LED border class ─────────────────────────────────────── */
.swap-terminal-led {
  position: relative;
}
.swap-terminal-led::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 25%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 75%
  );
  background-size: 400% 100%;
  animation: swap-led-scan 3.5s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* ── Success step slide-up entrance animation ───────────────────────────── */
@keyframes success-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.success-step-entrance {
  animation: success-slide-up 200ms ease-out both;
}

/* ── Portfolio allocation bar shimmer ────────────────────────────────────── */
@keyframes bar-shimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

.alloc-bar-fill {
  background-size: 200% 100%;
  animation: bar-shimmer 2.5s linear infinite;
}

/* ── Net Worth ambient drift ─────────────────────────────────────────────── */
@keyframes ambient-drift {
  0% {
    background-position: 0% 50%;
    opacity: 0.05;
  }
  25% {
    background-position: 50% 100%;
    opacity: 0.07;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.06;
  }
  75% {
    background-position: 50% 0%;
    opacity: 0.08;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0.05;
  }
}

.net-worth-ambient {
  position: relative;
}

.net-worth-ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
      ellipse at 20% 50%,
      rgba(139, 92, 246, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 30%,
      rgba(245, 158, 11, 0.06) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 80%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  background-size: 300% 300%;
  animation: ambient-drift 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  border-radius: 1rem;
}

@keyframes ckusdcPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}

/* Logo text styling - Inter font with bold weight and refined spacing */
.logo-text {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* AccountChip interactive states — driven by CSS variables so both themes work */
.account-chip-signin:hover:not(:disabled),
.account-chip-user:hover {
  background-color: var(--chip-bg-hover) !important;
}

.account-chip-signin:active:not(:disabled),
.account-chip-user:active {
  background-color: var(--chip-bg-active) !important;
}

.account-chip-menu-item:hover,
.account-chip-menu-item:focus {
  background-color: var(--chip-bg) !important;
}

.account-chip-signout-item:hover,
.account-chip-signout-item:focus {
  background-color: rgba(239, 68, 68, 0.08) !important;
}

/* Subtle pulse animation for live status indicator */
@keyframes subtle-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.04);
  }
}

@keyframes live-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.15);
  }
}

.animate-subtle-pulse {
  animation: subtle-pulse 3s ease-in-out infinite;
}

.animate-live-dot {
  animation: live-dot-pulse 2.5s ease-in-out infinite;
}

/* Card tab animations — floating gradient drift + shimmer wave */
@keyframes cardGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes cardShimmer {
  0% {
    transform: translateX(-100%);
  }
  15% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* ── Card color reveal animation ─────────────────────────────────────── */
@keyframes cardRevealGlow {
  0% {
    box-shadow: 0 0 0 0 transparent, 0 4px 24px rgba(0, 0, 0, 0.5);
  }
  20% {
    box-shadow: 0 0 28px 6px rgba(255, 255, 255, 0.1), 0 4px 24px
      rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0 transparent, 0 4px 24px rgba(0, 0, 0, 0.5);
  }
}

/* ── Spending Card section fade-in animation ─────────────────────────── */
@keyframes spendingCardFadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.spending-card-section-enter {
  animation: spendingCardFadeIn 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered transaction item fade-in */
@keyframes txItemFadeIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tx-item-stagger {
  opacity: 0;
  animation: txItemFadeIn 280ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Mint Card Modal Animations ─────────────────────────────────────── */

/* Success card reveal: fade in from blur, float up, soft glow, scale */
@keyframes mintCardFadeIn {
  0% {
    opacity: 0;
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes mintCardFloatUp {
  0% {
    transform: translateY(24px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes mintCardScaleIn {
  0% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1.02);
  }
}

@keyframes mintCardGlowPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(70, 223, 177, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 24px 8px rgba(70, 223, 177, 0.15), 0 8px 32px
      rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(70, 223, 177, 0), 0 8px 32px rgba(0, 0, 0, 0.3);
  }
}

/* Muting pulse for minting state */
@keyframes mintingPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.08);
  }
}

/* Modal backdrop dim */
@keyframes mintModalDim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Slide-to-confirm snap animation */
@keyframes slideToConfirmSnap {
  0% {
    transform: translateX(var(--current-x, 0));
  }
  100% {
    transform: translateX(100%);
  }
}

.mint-card-success {
  animation:
    mintCardFadeIn 200ms ease-out forwards,
    mintCardFloatUp 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards,
    mintCardScaleIn 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards,
    mintCardGlowPulse 1400ms ease-out forwards;
  animation-delay: 0ms, 100ms, 100ms, 200ms;
}

.mint-card-minting {
  animation: mintingPulse 1.2s ease-in-out infinite;
}

.mint-modal-backdrop {
  animation: mintModalDim 200ms ease-out forwards;
}

.slide-confirm-snap {
  animation: slideToConfirmSnap 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

@keyframes eth-shimmer {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.82;
    filter: brightness(1.15);
  }
}

.animate-eth-shimmer {
  animation: eth-shimmer 1.8s ease-in-out infinite;
}

@keyframes etch {
  0% {
    opacity: 0;
    transform: scaleX(0.95) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scaleX(1) translateY(0);
  }
}

/* Slow ambient light sweep — soft luminance drift across card surface */
@keyframes cardAmbientSweep {
  0% {
    transform: translateX(-120%) skewX(-15deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(280%) skewX(-15deg);
    opacity: 0;
  }
}

/* Edge glow pulse — very faint perimeter breath */
@keyframes cardEdgeGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 4px 24px rgba(0, 0, 0, 0.5);
    opacity: 0.08;
  }
  50% {
    box-shadow: 0 0 18px 2px rgba(255, 255, 255, 0.06), 0 4px 24px
      rgba(0, 0, 0, 0.5);
    opacity: 0.18;
  }
}

/* Depth shimmer — ultra-thin diagonal highlight, like light catching metal */
@keyframes cardDepthShimmer {
  0% {
    transform: translateX(-200%) rotate(25deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(400%) rotate(25deg);
    opacity: 0;
  }
}

/* Live dot breath — slow infrastructural pulse */
@keyframes cardLiveDot {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(93, 223, 255, 0);
  }
  40% {
    opacity: 0.65;
    transform: scale(1.15);
    box-shadow: 0 0 6px rgba(93, 223, 255, 0.5);
  }
  70% {
    opacity: 0.45;
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(93, 223, 255, 0.08);
  }
}

/* Stat value count-up: smooth reveal with slight upward drift */
@keyframes cardStatReveal {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stat value update: gentle fade-swap */
@keyframes cardStatUpdate {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.card-live-dot {
  animation: cardLiveDot 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.card-stat-reveal {
  animation: cardStatReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

.card-stat-update {
  animation: cardStatUpdate 0.5s ease-out forwards;
}

/* ─── PnL Curve: live dot pulse animations ──────────────────────────────── */

@keyframes pnlDotPulse {
  0%,
  100% {
    opacity: 0.35;
    r: 5;
  }
  50% {
    opacity: 0.7;
    r: 7;
  }
}

@keyframes pnlDotInnerPulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

.pnl-dot-outer {
  animation: pnlDotPulse 2.2s ease-in-out infinite;
}

.pnl-dot-inner {
  animation: pnlDotInnerPulse 2.2s ease-in-out infinite;
}

/* ─── Front card live PnL curve animations ─────────────────────────────── */

@keyframes pnlCurveDrift {
  0% {
    transform: translateX(-3px) scaleY(0.97);
    opacity: 0.55;
  }
  50% {
    transform: translateX(3px) scaleY(1.03);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-3px) scaleY(0.97);
    opacity: 0.55;
  }
}

.pnl-front-curve {
  animation: pnlCurveDrift 5s ease-in-out infinite;
  transform-origin: center;
}

.pnl-front-dot {
  animation: pnlDotPulse 2.5s ease-in-out infinite;
}

/* ─── Card Performance Layout — Premium clean card front ───────────────────── */

/* Clean single-zone performance card */
.card-front-performance {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 22px 16px;
  box-sizing: border-box;
  min-height: 200px;
}

/* PERFORMANCE label — top of card */
.card-perf-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 500;
  text-transform: none;
  opacity: 0.55;
  line-height: 1;
}

/* Lifetime PnL — dominant focal point */
.card-perf-pnl {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 8px;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
}

/* Thin etched divider */
.card-perf-divider {
  height: 1px;
  width: 100%;
  margin: 8px 0;
  flex-shrink: 0;
}

/* 2×2 bottom metrics grid */
.card-perf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 0;
  flex: 1;
  align-content: center;
}

/* Each metric cell */
.card-perf-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-perf-metric-value {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.card-perf-metric-label {
  font-size: 8.5px;
  letter-spacing: 0.10em;
  text-transform: none;
  font-weight: 500;
  line-height: 1;
  margin-top: 1px;
}

/* Tiny sync pulse dot — bottom-right */
.card-perf-live-dot {
  position: absolute;
  bottom: 14px;
  right: 16px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Card System-ID Credential Layout (legacy — kept for flip/back CSS) ────── */

/* Telemetry shimmer: slow horizontal light travel along a 1px line */
@keyframes cardTelemetryShimmer {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(300%);
    opacity: 0;
  }
}

/* Three-zone credential card front */
.card-front-sysid {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 14px 14px 12px;
  gap: 0;
  min-height: 200px;
  box-sizing: border-box;
}

/* Corner registration marks — precision document feel */
.card-corner-mark {
  position: absolute;
  width: 6px;
  height: 6px;
  opacity: 0.14;
  pointer-events: none;
  z-index: 3;
}

.card-corner-tl {
  top: 8px;
  left: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 1px solid rgba(255, 255, 255, 0.9);
}

.card-corner-tr {
  top: 8px;
  right: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.9);
}

.card-corner-bl {
  bottom: 8px;
  left: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 1px solid rgba(255, 255, 255, 0.9);
}

.card-corner-br {
  bottom: 8px;
  right: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.9);
}

/* Vertical divider between zones */
.card-divider-v {
  width: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 4px 0;
  flex-shrink: 0;
  align-self: stretch;
}

/* Thin horizontal rule */
.card-h-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 6px 0 5px;
  width: 100%;
}

/* ── LEFT ZONE ── */
.card-zone-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 44px;
  flex-shrink: 0;
  padding-right: 9px;
  gap: 0;
}

/* Ghost identity mark */
.card-identity-mark {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.06);
  line-height: 1;
  letter-spacing: -0.04em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-top: 2px;
}

/* Active status row */
.card-status-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: auto;
  margin-bottom: auto;
}

/* Telemetry line wrapper */
.card-telemetry-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  margin-top: auto;
}

.card-telemetry-line {
  position: relative;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  width: 100%;
  border-radius: 1px;
}

.card-telemetry-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 185, 255, 0.55) 50%,
    transparent 100%
  );
  animation: cardTelemetryShimmer 9s linear infinite;
  animation-delay: -3s;
}

.card-telemetry-label {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 6.5px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 500;
}

/* Shared mono label style */
.card-label-mono {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 7px;
  letter-spacing: 0.13em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  line-height: 1.2;
}

/* ── CENTER ZONE ── */
.card-zone-center {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 10px;
  min-width: 0;
}

/* Ghost section header */
.card-zone-header {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 7px;
  letter-spacing: 0.22em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.22);
  font-weight: 500;
  margin: 0 0 4px;
  line-height: 1;
}

/* Stats key-value grid */
.card-stats-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 8px;
       column-gap: 8px;
  row-gap: 4px;
  align-items: baseline;
}

/* Stat label — monospace terminal */
.card-stat-label-mono {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 8px;
  letter-spacing: 0.10em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

/* Stat value */
.card-stat-value {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: right;
}

/* Active position row */
.card-active-position {
  margin-top: auto;
}

.card-active-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

/* ── RIGHT ZONE ── */
.card-zone-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 86px;
  flex-shrink: 0;
  padding-left: 9px;
  gap: 0;
  justify-content: flex-start;
}

/* Right zone field row */
.card-right-field {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  margin-bottom: 5px;
}

/* SYS ID value — machine-generated monospace */
.card-sysid-value {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Generic right zone value */
.card-right-value {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.3;
  word-break: break-all;
}

/* Verified badge */
.card-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.card-verified-badge span {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 7px;
  letter-spacing: 0.12em;
  color: rgba(70, 223, 170, 0.55);
  font-weight: 600;
  text-transform: uppercase;
}

/* ─── Matte Black card back — soft LED sign animations ─────────────────── */
/* ─── Matte Black card FRONT — emissive OLED text rendering ───────────── */

/* Subtle luminance fluctuation: text feels softly powered from within */
@keyframes textEmissivePulse {
  0%,
  100% {
    opacity: 1;
    text-shadow: 0 0 6px rgba(240, 240, 245, 0.2), 0 0 12px
      rgba(240, 240, 245, 0.07);
  }
  50% {
    opacity: 0.93;
    text-shadow: 0 0 8px rgba(240, 240, 245, 0.24), 0 0 16px
      rgba(240, 240, 245, 0.08), 0 0 24px rgba(240, 240, 245, 0.03);
  }
}

/* Apply to Matte Black card value text — animated emissive bloom, staggered per metric */
.matte-value-emissive {
  animation: textEmissivePulse 9s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(240, 240, 245, 0.2), 0 0 12px
    rgba(240, 240, 245, 0.07);
}

/* Bloom layer: gently expands and brightens, very slow */
@keyframes logoBloom {
  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

/* Logo image: slow soft breath — opacity shifts between 0.20 and 0.28 */
@keyframes logoBreath {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.28;
  }
}

/* ── Matte Black Card: Energy Line Progress System ─────────────────────────── */

/* Idle track breathing — slow 3.5s glow pulse while no active flip */
@keyframes energyPulse {
  0%,
  100% {
    opacity: 0.05;
    box-shadow: 0 0 0px rgba(200, 190, 255, 0);
  }
  50% {
    opacity: 0.14;
    box-shadow: 0 0 6px 1px rgba(200, 190, 255, 0.08);
  }
}

/* Traveling pulse — bright tip dot traverses the active portion of the line */
@keyframes travelPulse {
  0% {
    left: 0%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 0.85;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Near-completion glow intensify — track line brightens as progress > 0.75 */
@keyframes glowIntensify {
  0%,
  100% {
    box-shadow: 0 0 4px 1px rgba(180, 220, 255, 0.12), 0 0 10px 2px
      rgba(160, 200, 240, 0.06);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(180, 220, 255, 0.22), 0 0 18px 4px
      rgba(140, 180, 240, 0.1);
  }
}

/* Teal pulse tip — animated highlight on the traveling dot */
@keyframes tealTipPulse {
  0%,
  100% {
    box-shadow: 0 0 3px 1px rgba(80, 220, 200, 0.3);
    opacity: 0.9;
  }
  50% {
    box-shadow: 0 0 6px 2px rgba(80, 220, 200, 0.55);
    opacity: 1;
  }
}

/* Signal flow shimmer — energy moving left-to-right through active fill line */
@keyframes signalFlow {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Glow point breathing — bright dot on lavender progress line, subtle 4s pulse */
@keyframes glowPointBreath {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* Active node pulse — tighter technological feel when flip is active */
@keyframes activeNodePulse {
  0%,
  100% {
    box-shadow: 0 0 4px 2px rgba(210, 190, 255, 0.8), 0 0 8px 3px
      rgba(190, 170, 255, 0.26);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 5px 2.5px rgba(220, 205, 255, 0.9), 0 0 10px 4px
      rgba(200, 180, 255, 0.3);
    transform: translate(-50%, -50%) scale(1.18);
  }
}

/* Lavender line ambient drift — soft horizontal shimmer on active state */
@keyframes lavenderLineDrift {
  from {
    background-position: 0% 50%;
    opacity: 0.55;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.62;
  }
  to {
    background-position: 0% 50%;
    opacity: 0.55;
  }
}

/* Node breath — active flip, standard progress */
@keyframes nodeBreath {
  0%,
  100% {
    box-shadow: 0 0 4px 2px rgba(210, 190, 255, 0.8), 0 0 8px 3px
      rgba(190, 170, 255, 0.26);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 5px 2.5px rgba(220, 205, 255, 0.92), 0 0 10px 4px
      rgba(200, 180, 255, 0.32);
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* Node breath — near complete (>75%), teal-tinted */
@keyframes nodeBreathNear {
  0%,
  100% {
    box-shadow: 0 0 5px 2px rgba(140, 220, 210, 0.8), 0 0 9px 4px
      rgba(120, 200, 190, 0.28);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 6px 2.5px rgba(160, 235, 225, 0.92), 0 0 11px 5px
      rgba(130, 210, 200, 0.34);
    transform: translate(-50%, -50%) scale(1.22);
  }
}

/* Node idle — no active flip, very slow dim pulse */
@keyframes nodeIdle {
  0%,
  100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Live price breathing — extremely subtle opacity pulse for "live" feel */
@keyframes activeFlipPriceLive {
  0%,
  100% {
    opacity: 0.98;
  }
  50% {
    opacity: 1;
  }
}

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

.dark {
  --trading-bg: oklch(0.1 0.005 270);
  --trading-border: oklch(0.18 0.005 270);
  --trading-border-subtle: oklch(0.12 0.002 270);
  --trading-negative: oklch(0.55 0.18 25);
  --trading-positive: oklch(0.6 0.13 160);
  --trading-success: oklch(0.6 0.13 160);
  --trading-surface: oklch(0.16 0.008 270);
  --trading-surface-hover: oklch(0.19 0.005 270);
  --trading-text-muted: oklch(0.5 0.01 270);
  --trading-text-primary: oklch(0.96 0.002 264);
  --trading-text-secondary: oklch(0.65 0.025 250);

  --metric-card-bg: rgba(17, 18, 24, 0.92);
  --metric-card-border: rgba(255, 255, 255, 0.07);
  --metric-card-glow: rgba(255, 255, 255, 0.04);
  --intelligence-row-hover: rgba(255, 255, 255, 0.03);
  --activity-dot-color: rgba(70, 223, 177, 0.8);

  --eth-cold-bg: oklch(0.08 0.002 240);
  --eth-card-base: oklch(0.14 0.006 250);
  --eth-card-border: oklch(0.28 0.08 210);
  --eth-glass-light: oklch(0.92 0.004 220);
  --eth-ice-primary: oklch(0.7 0.12 210);
  --eth-ice-accent: oklch(0.82 0.09 215);
  --eth-glow-soft: oklch(0.65 0.14 215 / 0.12);
  --eth-glow-intense: oklch(0.75 0.16 210 / 0.18);
  --eth-glass-overlay: rgba(200, 228, 255, 0.05);
  --eth-glass-reflect: rgba(255, 255, 255, 0.08);
  --eth-shelf-line: rgba(255, 255, 255, 0.04);
  --eth-text-primary: oklch(0.96 0.002 240);
  --eth-text-secondary: oklch(0.78 0.01 230);
  --eth-frost-gradient: linear-gradient(
    135deg,
    rgba(200, 228, 255, 0.08) 0%,
    rgba(180, 210, 240, 0.04) 100%
  );
}

@theme {
  --trading-bg: oklch(0.1 0.005 270);
  --trading-border: oklch(0.18 0.005 270);
  --trading-border-subtle: oklch(0.12 0.002 270);
  --trading-negative: oklch(0.55 0.18 25);
  --trading-positive: oklch(0.6 0.13 160);
  --trading-success: oklch(0.6 0.13 160);
  --trading-surface: oklch(0.16 0.008 270);
  --trading-surface-hover: oklch(0.19 0.005 270);
  --trading-text-muted: oklch(0.5 0.01 270);
  --trading-text-primary: oklch(0.96 0.002 264);
  --trading-text-secondary: oklch(0.65 0.025 250);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ═══════════════════════════════════════════════════════════════
   OG PORTFOLIO CARD — Premium Paper Aesthetic
   ═══════════════════════════════════════════════════════════════ */

.og-portfolio-card {
  width: 100%;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.og-portfolio-card:focus-visible .og-card-inner {
  box-shadow: 0 0 0 2px var(--paper-edge), 0 12px 40px rgba(0, 0, 0, 0.14);
}

.og-card-inner {
  position: relative;
  width: 100%;
  height: 285px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 8px 32px rgba(0, 0, 0, 0.1), 0
    1px 0 rgba(255, 255, 255, 0.9) inset;
  background-color: var(--paper-base);
  padding: 1.125rem 1.125rem 0.875rem;
  overflow: hidden;
  /* Subtle warm edge glow to simulate paper held to light */
  box-shadow: inset 0 0 0 1px var(--paper-edge), inset 0 1px 0
    rgba(255, 255, 255, 0.75);
}

/* Paper grain — near-invisible texture using SVG noise */
.og-paper-grain {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 150px 150px;
  mix-blend-mode: multiply;
}

/* Allocation bar track */
.og-allocation-bar {
  width: 64px;
  height: 3px;
  background: var(--paper-edge);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.og-allocation-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
  opacity: 0.85;
}

/* Stamp label at card bottom */
.og-paper-stamp {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid var(--paper-edge);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: none;
  color: var(--paper-text-muted);
  background: transparent;
  font-family: Georgia, serif;
}

/* ── Portfolio Card Front Layout ─────────────────────────────────────── */

/* Gloss highlight — thin top edge sheen */
.og-card-gloss {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.og-card-gloss::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 55%;
  border-radius: 0 16px 0 0;
  background: radial-gradient(
    ellipse at top right,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  pointer-events: none;
}

/* Horizontal flex: avatar + right content */
/* Document layout — vertical flex column, left-aligned */
.og-doc-layout {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 0;
}

/* Top row: avatar + name side by side */
.og-doc-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

/* Avatar in document layout */
.og-doc-avatar {
  flex-shrink: 0;
  width: 86px;
  height: 86px;
  border-radius: 8px;
  background-color: #e8e4de;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Name next to avatar */
.og-doc-name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: none;
  color: #2c2825;
  line-height: 1.15;
  margin: 0;
}

/* Subtitle under name */
.og-doc-role {
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #a89e94;
  margin: 3px 0 0;
  line-height: 1.2;
}

/* Identity block wrapper */
.og-doc-identity {
  display: flex;
  flex-direction: column;
}

/* Middle section: stacked value blocks */
.og-doc-middle {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  flex: 1;
  width: 100%;
}

/* Two-column info layout */
.og-doc-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
}

/* Individual label + value block */
.og-doc-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

/* Label — small, muted, secondary */
.og-doc-label {
  font-size: 0.5rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.22em;
  color: #9a8e84;
  margin: 0 0 1px;
  line-height: 1.3;
}

/* Primary value — large, prominent */
.og-doc-value-primary {
  font-size: 1.45rem;
  font-weight: 600;
  color: #1a1714;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

/* Secondary value — medium, prominent */
.og-doc-value-secondary {
  font-size: 0.95rem;
  font-weight: 500;
  color: #2c2825;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}

/* Bottom meta row */
.og-doc-bottom {
  padding-top: 0.4rem;
  padding-bottom: 2px;
}

/* Meta text lines */
.og-doc-meta {
  font-size: 0.52rem;
  color: #8c7e72;
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Avatar frame */
.og-avatar-frame {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: #e8e4de;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Right content column */
.og-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

/* Name */
.og-card-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--paper-text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  line-height: 1.2;
}

/* Primary value block */
.og-value-block {
  margin-bottom: 8px;
}

.og-value-primary {
  font-size: 23px;
  font-weight: 700;
  color: var(--paper-text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 2px;
}

.og-value-secondary {
  font-size: 15px;
  font-weight: 600;
  color: var(--paper-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 2px;
}

/* Shared label style */
.og-value-label {
  font-size: 9.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--paper-text-muted);
  margin: 0;
  line-height: 1.3;
}

/* USDC block */
.og-usdc-block {
  margin-bottom: auto;
}

/* Bottom meta row */
.og-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 2px;
}

.og-meta-text {
  font-size: 9.5px;
  color: var(--paper-text-muted);
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Green live dot */
.og-live-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #22c55e;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
}

/* OG Wallet watermark */
.og-card-watermark {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 9px;
  font-weight: 400;
  color: #c8c0b4;
  letter-spacing: 0.06em;
  pointer-events: none;
  z-index: 2;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.og-security-layer {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cline x1='0' y1='10' x2='10' y2='0' stroke='rgba(100%2C80%2C60%2C0.035)' stroke-width='0.3'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 10px 10px;
  opacity: 1;
  mix-blend-mode: multiply;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD SECTIONS — Dark Glass Panels
   ═══════════════════════════════════════════════════════════════ */

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

@keyframes metricPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(70, 223, 177, 0);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(70, 223, 177, 0.12);
  }
}

@keyframes liveDotPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.35);
  }
}

.animate-dashboard-fade-up {
  animation: dashboardFadeUp 500ms ease-out both;
}

.animate-metric-pulse {
  animation: metricPulse 3s ease-in-out infinite;
}

.animate-live-dot {
  animation: liveDotPulse 2s ease-in-out infinite;
}

/* Dashboard glass card base */
.dash-glass-card {
  background: var(--metric-card-bg);
  border: 1px solid var(--metric-card-border);
  border-radius: 12px;
  overflow: hidden;
}

/* Intelligence row hover */
.dash-intel-row {
  transition: background-color 180ms ease;
}
.dash-intel-row:hover {
  background-color: var(--intelligence-row-hover);
}

/* Ultra-subtle micro-pattern layer: fine dots, discovered not seen */
.og-micro-pattern {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='1' cy='1' r='0.4' fill='rgba(90%2C70%2C50%2C0.25)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 8px 8px;
  opacity: 0.085;
  mix-blend-mode: multiply;
}

/* Watermark geometry SVG — large faint shapes behind content */
.og-watermark-geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  border-radius: 16px;
  overflow: hidden;
}

@keyframes dotPulse {
  0% {
    box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.3);
  }
  100% {
    box-shadow: inherit;
  }
}

.og-browser-frame {
  width: 100%;
  height: calc(100vh - 88px);
  border: none;
  background: #050509;
}

/* ── Page transition animations ─────────────────────────────────────────── */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.page-slide-in {
  animation: slideInFromRight 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.page-slide-out {
  animation: slideOutToRight 300ms ease-in both;
}

/* OG Card Entrance Animation */
@keyframes ogCardEntrance {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.og-card-entrance {
  animation: ogCardEntrance 260ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .og-card-entrance {
    animation: none;

    /* ── Tactical lever animations ─────────────────────────────────── */
    @keyframes leverDepress {
      0% {
        transform: translateY(0) rotate(0deg);
      }
      35% {
        transform: translateY(8px) rotate(3deg);
      }
      70% {
        transform: translateY(-3px) rotate(-1deg);
      }
      100% {
        transform: translateY(0) rotate(0deg);
      }
    }
    .og-lever-rest {
      transform: translateY(0);
    }
    .og-lever-pulled {
      animation: leverDepress 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @media (prefers-reduced-motion: reduce) {
      .og-lever-pulled {
        animation: none;
      }
    }

    /* ── Slot-machine card shuffle ──────────────────────────────────── */
    @keyframes slotShuffle {
      0% {
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0);
      }
      18% {
        opacity: 0.55;
        filter: blur(3px);
        transform: translateY(-6px);
      }
      45% {
        opacity: 0.8;
        filter: blur(1.5px);
        transform: translateY(4px);
      }
      70% {
        opacity: 0.95;
        filter: blur(0.5px);
        transform: translateY(-2px);
      }
      100% {
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0);
      }
    }
    .og-slot-shuffle {
      animation: slotShuffle 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
      background: transparent;
    }
    @media (prefers-reduced-motion: reduce) {
      .og-slot-shuffle {
        animation: none;
      }
    }
  }
}

/* ===== Asset Identity Card — Asset Pages ===== */
.asset-identity-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 20px 18px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  border: 1px solid var(--paper-edge, #ede5d8);
}
.asset-id-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  z-index: 3;
}
.asset-id-grain {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.033;
  mix-blend-mode: multiply;
}
.asset-id-gloss {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  border-radius: 16px 16px 0 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.asset-id-top {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 4px;
}
.asset-id-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}
.asset-id-icon-wrap img,
.asset-id-icon-wrap svg {
  width: 48px !important;
  height: 48px !important;
  -o-object-fit: contain;
     object-fit: contain;
}
.asset-id-badge {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 4px;
}
.asset-id-center {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0;
}
.asset-id-address-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
  opacity: 0.8;
}
.asset-id-address {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: "SF Mono", "Fira Code", monospace;
  text-align: center;
  line-height: 1.6;
  word-break: break-all;
  max-width: 92%;
}
.asset-id-bottom {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asset-id-copy-btn {
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.asset-id-copy-btn:hover {
  opacity: 0.82;
}
.asset-id-copy-btn:active {
  transform: scale(0.98);
}
.asset-id-copy-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.asset-id-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.asset-id-username {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.8;
}
.asset-id-og-brand {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.45;
  text-transform: none;
}

@keyframes og-live-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 5px #22c55e;
  }
  50% {
    opacity: 0.4;
    box-shadow: 0 0 2px #22c55e;
  }
}

/* ── BTC arcade card keyframes ── */
@keyframes arcadeCardPulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(247, 147, 26, 0.25), 0 0 12px 2px
      rgba(247, 147, 26, 0.12), 0 4px 24px rgba(0, 0, 0, 0.45);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(247, 147, 26, 0.45), 0 0 20px 5px
      rgba(247, 147, 26, 0.22), 0 4px 24px rgba(0, 0, 0, 0.45);
  }
}

@keyframes btcScanDrift {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}

@keyframes btcBadgeSettle {
  0% {
    transform: scale(1.15);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.95);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes cardContentIn {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

@keyframes btn-press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

/* ── Password Gate — full-screen lock screen ─────────────────────────────── */
.password-gate-card {
  width: 100%;
  max-width: 360px;
  padding: 32px 28px 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, #121218 0%, #0b0b0f 100%);
  border: 1px solid rgba(180, 160, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 24px 64px
    rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.06);
  text-align: center;
  animation: password-gate-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.password-gate-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.28);
  color: #a78bfa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.password-gate-eyebrow {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 247, 255, 0.45);
  margin: 0 0 6px;
}

.password-gate-title {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f5f7ff;
  margin: 0 0 8px;
}

.password-gate-subtitle {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(245, 247, 255, 0.6);
  margin: 0 0 24px;
}

.password-gate-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.password-gate-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  background: #14151c;
  border: 1px solid rgba(180, 160, 255, 0.16);
  color: #f5f7ff;
  font-size: 1rem;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.password-gate-input::-moz-placeholder {
  color: rgba(245, 247, 255, 0.35);
}

.password-gate-input::placeholder {
  color: rgba(245, 247, 255, 0.35);
}

.password-gate-input:focus {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.password-gate-input[aria-invalid="true"] {
  border-color: rgba(255, 107, 107, 0.6);
}

.password-gate-error {
  font-size: 0.8125rem;
  color: #ff6b6b;
  text-align: left;
  margin: 0;
}

.password-gate-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.4);
  background: linear-gradient(180deg, #7c5cf0 0%, #6a48e0 100%);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.password-gate-submit:hover {
  background: linear-gradient(180deg, #8a6cf5 0%, #7553e8 100%);
  box-shadow: 0 8px 24px rgba(124, 92, 240, 0.28);
}

.password-gate-submit:active {
  transform: scale(0.98);
}

.password-gate-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35);
}

.password-gate-hint {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(245, 247, 255, 0.35);
  margin: 20px 0 0;
}

@keyframes password-gate-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .password-gate-card {
    animation: none;
  }
}

.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\:opacity-20::-moz-placeholder {
  opacity: 0.2;
}

.placeholder\:opacity-20::placeholder {
  opacity: 0.2;
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

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

.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.hover\:border-green-600\/60:hover {
  border-color: rgb(22 163 74 / 0.6);
}

.hover\:border-green-700\/40:hover {
  border-color: rgb(21 128 61 / 0.4);
}

.hover\:border-orange-500\/60:hover {
  border-color: rgb(249 115 22 / 0.6);
}

.hover\:border-zinc-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 91 / var(--tw-border-opacity, 1));
}

.hover\:border-zinc-700:hover {
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
}

.hover\:bg-\[\#1f4a1f\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 74 31 / var(--tw-bg-opacity, 1));
}

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

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

.hover\:bg-green-900\/15:hover {
  background-color: rgb(20 83 45 / 0.15);
}

.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-500\/10:hover {
  background-color: rgb(249 115 22 / 0.1);
}

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

.hover\:bg-purple-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500\/30:hover {
  background-color: rgb(239 68 68 / 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-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}

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

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

.hover\:text-gray-100:hover {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.hover\:text-green-300:hover {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

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

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

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-white\/60:hover {
  color: rgb(255 255 255 / 0.6);
}

.hover\:text-white\/80:hover {
  color: rgb(255 255 255 / 0.8);
}

.hover\:text-zinc-300:hover {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

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

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.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\: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\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}

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

.focus\:border-blue-500\/50:focus {
  border-color: rgb(59 130 246 / 0.5);
}

.focus\:border-green-600\/50:focus {
  border-color: rgb(22 163 74 / 0.5);
}

.focus\:border-orange-500\/50:focus {
  border-color: rgb(249 115 22 / 0.5);
}

.focus\:border-white\/60:focus {
  border-color: rgb(255 255 255 / 0.6);
}

.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-1:focus-visible {
  outline-width: 1px;
}

.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}

.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-4:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}

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

.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.active\:scale-90:active {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

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

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

.active\:opacity-100:active {
  opacity: 1;
}

.active\:opacity-50:active {
  opacity: 0.5;
}

.active\:opacity-60:active {
  opacity: 0.6;
}

.active\:opacity-70:active {
  opacity: 0.7;
}

.active\:opacity-80:active {
  opacity: 0.8;
}

.active\:opacity-90:active {
  opacity: 0.9;
}

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

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

.disabled\:opacity-20:disabled {
  opacity: 0.2;
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}

.group\/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\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: oklch(var(--sidebar-accent));
}

.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
}

.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}

.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}

.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

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

.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}

.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
}

.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
}

.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
}

.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
  color: oklch(var(--destructive) / 0.9);
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
}

.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: oklch(var(--sidebar-accent));
}

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
}

.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: calc(var(--radius) - 2px);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}

.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
  background-color: oklch(var(--sidebar));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}

.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}

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

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

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

.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}

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

.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}

.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
}

.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}

.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
}

.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}

@media (min-width: 640px) {

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:rounded-3xl {
    border-radius: 1.5rem;
  }

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

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

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

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

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

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

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

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

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

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

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

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

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

.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

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