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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

code,
kbd,
samp,
pre {
  font-family: Geist Mono, JetBrains Mono, ui-monospace, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

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

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

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

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --radius: 0.5rem;

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

    /* TEDY Dark Theme — softened amber/gold, calmer contrast, higher text
       readability. Orange dominance preserved but chroma reduced ~30% so
       accents no longer glare against the dark canvas. Surface lightness
       lifted slightly off pure black for a softer, conventional dashboard
       feel. Secondary text tokens raised well above the old 0.48 floor. */
    /* ===== TEDY404 "Fiery Terminal" — dark dashboard reference palette =====
       Deep near-black canvas (#0B0E14) with layered dark surfaces
       (#131823 / #171D2B / #1D2433), gold/amber primary (#F5A623),
       green (#00C853) for positive deltas, red (#FF5252) for negative,
       and a muted gray text hierarchy. All raw OKLCH L C H. */
    --background: 0.145 0.012 265;
    --foreground: 0.96 0.005 260;
    --card: 0.185 0.014 265;
    --card-foreground: 0.96 0.005 260;
    --popover: 0.21 0.016 265;
    --popover-foreground: 0.96 0.005 260;
    --primary: 0.76 0.15 68;
    --primary-foreground: 0.16 0.01 265;
    --secondary: 0.23 0.016 265;
    --secondary-foreground: 0.9 0.006 260;
    --muted: 0.22 0.014 265;
    --muted-foreground: 0.62 0.012 260;
    --accent: 0.76 0.15 68;
    --accent-foreground: 0.16 0.01 265;
    --destructive: 0.64 0.2 25;
    --destructive-foreground: 0.98 0.005 260;
    --border: 0.28 0.016 265;
    --input: 0.26 0.016 265;
    --ring: 0.76 0.15 68;

    /* custom semantic tokens */
    --orange: 0.76 0.15 68;
    --orange-dim: 0.66 0.13 66;
    --green: 0.72 0.19 148;
    --red: 0.64 0.2 25;
    --surface-1: 0.185 0.014 265;
    --surface-2: 0.22 0.016 265;
    --surface-3: 0.26 0.018 265;
    --text-dim: 0.58 0.012 260;
    --text-medium: 0.72 0.012 260;

    /* ===== TEDY404 Home reference tokens — ADDITIVE ===== */
    --ref-canvas: 0.145 0.012 265;
    --ref-surface: 0.185 0.014 265;
    --ref-surface-2: 0.22 0.016 265;
    --ref-surface-3: 0.26 0.018 265;
    --ref-gold: 0.76 0.15 68;
    --ref-gold-bright: 0.82 0.15 72;
    --ref-gold-deep: 0.68 0.14 62;
    --ref-green: 0.72 0.19 148;
    --ref-red: 0.64 0.2 25;
    --ref-text-dim: 0.58 0.012 260;
    --ref-text-medium: 0.72 0.012 260;
    --ref-border: 0.28 0.016 265;

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

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

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

    /* ===== PnL (Profit & Loss) feature tokens — ADDITIVE, extend TEDY dark
       theme. Reuses the app's existing positive/negative semantics:
       --green (0.58 0.18 142) for positive PnL, --red (0.55 0.22 25) for
       negative PnL. These tokens only tune the premium summary surfaces and
       pill treatments; the core green/red values stay the shared tokens so
       PnL reads identically to the rest of the app. Raw OKLCH L C H. ===== */
    --pnl-card: 0.19 0.014 265; /* Portfolio PnL summary card surface */
    --pnl-card-border: 0.28 0.016 265; /* summary card border */
    --pnl-hero-bg: 0.22 0.016 265; /* Total PnL hero band surface */
    --pnl-hero-accent: 0.76 0.15 68; /* gold accent strip on hero band */
    --pnl-metric-tile: 0.185 0.014 265; /* per-metric tile surface */
    --pnl-row: 0.185 0.014 265; /* per-token breakdown row surface */
    --pnl-row-hover: 0.23 0.016 265; /* per-token row hover */
    --pnl-row-border: 0.28 0.016 265; /* row separator border */
    --pnl-positive: 0.72 0.19 148; /* positive PnL (matches --green) */
    --pnl-negative: 0.64 0.2 25; /* negative PnL (matches --red) */
    --pnl-flat: 0.58 0.012 260; /* zero / neutral PnL (matches --text-dim) */

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

    --chart-1: 0.76 0.15 68;
    --chart-2: 0.72 0.19 148;
    --chart-3: 0.64 0.2 25;
    --chart-4: 0.6 0.15 250;
    --chart-5: 0.8 0.13 80;

    --sidebar: 0.17 0.013 265;
    --sidebar-foreground: 0.96 0.005 260;
    --sidebar-primary: 0.76 0.15 68;
    --sidebar-primary-foreground: 0.16 0.01 265;
    --sidebar-accent: 0.23 0.016 265;
    --sidebar-accent-foreground: 0.9 0.006 260;
    --sidebar-border: 0.28 0.016 265;
    --sidebar-ring: 0.76 0.15 68;

    /* ===== Stats Dashboard tokens — TEDY404 dark reference ===== */
    --stat-ribbon: 0.22 0.016 265;
    --stat-ribbon-hover: 0.26 0.018 265;
    --stat-accent-bar: 0.76 0.15 68;
    --stat-value-glow: 0.76 0.15 68;
    --stat-skeleton: 0.24 0.016 265;
    --stat-skeleton-shine: 0.3 0.018 265;
    --stat-live-dot: 0.72 0.19 148;

    /* ===== Modular KPI-grid + Platform-stats tokens =====
       --stat-card is a solid calm surface (no mascot overlay) so cards read
       as clean conventional dashboard tiles. Border + hover lift keep them
       legible without decorative background imagery. */
    --stat-card: 0.185 0.014 265;
    --stat-card-hover: 0.22 0.016 265;
    --stat-card-border: 0.28 0.016 265;
    --stat-icon-bg: 0.76 0.15 68;
    --stat-deposit: 0.72 0.19 148;
    --stat-withdraw: 0.64 0.2 25;
    --stat-btc: 0.76 0.15 68;

    /* ===== TEDY V2 Lively Pass — softened amber/gold glow system =====
       Layered radial gradient glow tokens for hero backgrounds and
       per-card accent glows. Chroma reduced ~30% from the original vivid
       values so glows stay warm but never glare. All values raw OKLCH L C H,
       consumed via oklch(var(--token) / <alpha>) so opacity stays render-time. */
    --stat-glow-amber: 0.78 0.14 70; /* gold glow (BTC Balance) */
    --stat-glow-orange: 0.76 0.15 68; /* gold glow (Volume) */
    --stat-glow-green: 0.72 0.19 148; /* deposit glow */
    --stat-glow-red: 0.64 0.2 25; /* withdraw glow */

    /* ===== TEDY V2 Landing Page — softened amber/gold glow system =====
       Layered radial gradient glow tokens for the hero background
       and per-card accent glows. Chroma reduced so the hero feels calm
       rather than glaring. All raw OKLCH L C H, consumed via
       oklch(var(--token) / <alpha>) so opacity stays render-time. */
    --hero-glow-amber: 0.78 0.14 70; /* gold hero orb */
    --hero-glow-orange: 0.76 0.15 68; /* gold hero orb */
    --hero-glow-gold: 0.8 0.13 80; /* soft gold hero orb */
    --card-glow-amber: 0.78 0.14 70; /* card hover gold glow */
    --card-glow-amber-strong: 0.8 0.15 70; /* stronger gold for KPI cards */
    --hero-text-glow: 0.8 0.14 72; /* hero headline text-shadow */
    --landing-border-amber: 0.72 0.13 68; /* thin gold card border */
    --landing-surface: 0.17 0.013 265; /* landing section surface */
    --landing-surface-alt: 0.19 0.014 265; /* alternating section surface */
    --landing-pinned-row: 0.26 0.03 70; /* TEDY pinned table row */
    --landing-cta-glow: 0.8 0.14 70; /* CTA button glow */

    /* ===== TEDY404 Home page — section tokens (ADDITIVE) =====
       Hero banner overlay, panel surfaces, gainers/holders/activity rows,
       bots promo card, and bottom CTA. Raw OKLCH L C H. */
    --home-hero-overlay: 0.12 0.014 265; /* dark scrim over hero image */
    --home-hero-scrim: 0.1 0.012 265; /* bottom fade scrim */
    --home-panel: 0.185 0.014 265; /* main panel surface */
    --home-panel-header: 0.21 0.016 265; /* panel header strip */
    --home-row: 0.185 0.014 265; /* list row surface */
    --home-row-hover: 0.23 0.017 265; /* list row hover */
    --home-row-border: 0.27 0.016 265; /* list row separator */
    --home-tab-active: 0.76 0.15 68; /* active tab fill */
    --home-tab-active-fg: 0.16 0.01 265; /* active tab text */
    --home-tab-idle: 0.22 0.016 265; /* idle tab surface */
    --home-promo: 0.76 0.15 68; /* bots promo card gold */
    --home-promo-deep: 0.6 0.15 55; /* bots promo gradient deep */
    --home-cta: 0.76 0.15 68; /* bottom CTA banner gold */
    --home-cta-deep: 0.58 0.15 52; /* bottom CTA gradient deep */
    --home-cta-fg: 0.16 0.01 265; /* CTA text on gold */
    --home-rank-gold: 0.82 0.15 78; /* rank #1 medal */
    --home-rank-silver: 0.78 0.02 260; /* rank #2 medal */
    --home-rank-bronze: 0.66 0.09 55; /* rank #3 medal */
    --home-badge-master: 0.82 0.16 80; /* MASTER badge gold */
    --home-badge-army: 0.72 0.19 148; /* ARMY badge green */

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

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

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

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

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

  /* Scrollbar styling — visible & branded (gold) */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: oklch(0.22 0.016 265);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb {
    background: oklch(0.5 0.1 68);
    border-radius: 4px;
    border: 1px solid oklch(0.22 0.016 265);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: oklch(0.76 0.15 68);
  }
  ::-webkit-scrollbar-corner {
    background: oklch(0.22 0.016 265);
  }

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: oklch(0.5 0.1 68) oklch(0.22 0.016 265);
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
@media (min-width: 1600px) {

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

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

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

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

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

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

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

  50% {
    opacity: 0.4;
  }

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

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.touch-manipulation {
  touch-action: manipulation;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-cols-\[2rem_1fr\] {
  grid-template-columns: 2rem 1fr;
}
.grid-cols-\[3rem_1fr_5\.5rem_7rem\] {
  grid-template-columns: 3rem 1fr 5.5rem 7rem;
}
.grid-cols-\[3rem_1fr_8rem_7rem_5rem\] {
  grid-template-columns: 3rem 1fr 8rem 7rem 5rem;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-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-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-amber-400\/50 {
  border-color: rgb(251 191 36 / 0.5);
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-blue-400\/10 {
  border-color: rgb(96 165 250 / 0.1);
}
.border-blue-400\/20 {
  border-color: rgb(96 165 250 / 0.2);
}
.border-blue-400\/40 {
  border-color: rgb(96 165 250 / 0.4);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-cyan-500\/40 {
  border-color: rgb(6 182 212 / 0.4);
}
.border-destructive\/30 {
  border-color: oklch(var(--destructive) / 0.3);
}
.border-destructive\/40 {
  border-color: oklch(var(--destructive) / 0.4);
}
.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-gray-500\/50 {
  border-color: rgb(107 114 128 / 0.5);
}
.border-green-400\/40 {
  border-color: rgb(74 222 128 / 0.4);
}
.border-green-500\/25 {
  border-color: rgb(34 197 94 / 0.25);
}
.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}
.border-green-500\/40 {
  border-color: rgb(34 197 94 / 0.4);
}
.border-input {
  border-color: oklch(var(--input));
}
.border-orange {
  border-color: oklch(var(--orange));
}
.border-pink-500\/40 {
  border-color: rgb(236 72 153 / 0.4);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-purple-500\/30 {
  border-color: rgb(168 85 247 / 0.3);
}
.border-red-400\/40 {
  border-color: rgb(248 113 113 / 0.4);
}
.border-rose-500\/30 {
  border-color: rgb(244 63 94 / 0.3);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-sky-500\/30 {
  border-color: rgb(14 165 233 / 0.3);
}
.border-transparent {
  border-color: transparent;
}
.border-violet-400\/40 {
  border-color: rgb(167 139 250 / 0.4);
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-yellow-400\/30 {
  border-color: rgb(250 204 21 / 0.3);
}
.border-yellow-400\/40 {
  border-color: rgb(250 204 21 / 0.4);
}
.border-yellow-500\/40 {
  border-color: rgb(234 179 8 / 0.4);
}
.border-l-amber-400\/60 {
  border-left-color: rgb(251 191 36 / 0.6);
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-orange {
  border-top-color: oklch(var(--orange));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}
.bg-amber-500\/5 {
  background-color: rgb(245 158 11 / 0.05);
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/85 {
  background-color: rgb(0 0 0 / 0.85);
}
.bg-black\/90 {
  background-color: rgb(0 0 0 / 0.9);
}
.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-400\/20 {
  background-color: rgb(96 165 250 / 0.2);
}
.bg-blue-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}
.bg-blue-900\/50 {
  background-color: rgb(30 58 138 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-cyan-400\/15 {
  background-color: rgb(34 211 238 / 0.15);
}
.bg-cyan-500\/20 {
  background-color: rgb(6 182 212 / 0.2);
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive\/10 {
  background-color: oklch(var(--destructive) / 0.1);
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-gray-900\/80 {
  background-color: rgb(17 24 39 / 0.8);
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-400\/20 {
  background-color: rgb(74 222 128 / 0.2);
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-orange {
  background-color: oklch(var(--orange));
}
.bg-pink-500\/20 {
  background-color: rgb(236 72 153 / 0.2);
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/15 {
  background-color: oklch(var(--primary) / 0.15);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-purple-500\/15 {
  background-color: rgb(168 85 247 / 0.15);
}
.bg-purple-500\/20 {
  background-color: rgb(168 85 247 / 0.2);
}
.bg-red-400\/20 {
  background-color: rgb(248 113 113 / 0.2);
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-rose-500\/15 {
  background-color: rgb(244 63 94 / 0.15);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary\/60 {
  background-color: oklch(var(--secondary) / 0.6);
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-sky-500\/15 {
  background-color: rgb(14 165 233 / 0.15);
}
.bg-surface-1 {
  background-color: oklch(var(--surface-1));
}
.bg-surface-2 {
  background-color: oklch(var(--surface-2));
}
.bg-surface-3 {
  background-color: oklch(var(--surface-3));
}
.bg-tedy-green {
  background-color: oklch(var(--green));
}
.bg-text-dim {
  background-color: oklch(var(--text-dim));
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400\/10 {
  background-color: rgb(250 204 21 / 0.1);
}
.bg-yellow-400\/20 {
  background-color: rgb(250 204 21 / 0.2);
}
.bg-yellow-500\/20 {
  background-color: rgb(234 179 8 / 0.2);
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-green-950\/40 {
  --tw-gradient-from: rgb(5 46 22 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 46 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-surface-1 {
  --tw-gradient-to: oklch(var(--surface-1)) var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.\!px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.\!py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.\!py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pl-0 {
  padding-left: 0px;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-7 {
  padding-right: 1.75rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-body {
  font-family: "DM Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
}
.font-display {
  font-family: "Space Grotesk", "Sora", ui-sans-serif, system-ui, sans-serif;
}
.font-mono {
  font-family: Geist Mono, JetBrains Mono, ui-monospace, monospace;
}
.font-sans {
  font-family: Sora, Geist, ui-sans-serif, system-ui, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[0\.6875rem\] {
  font-size: 0.6875rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-300\/80 {
  color: rgb(252 211 77 / 0.8);
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-background {
  color: oklch(var(--background));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-cyan-300 {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-cyan-400\/90 {
  color: rgb(34 211 238 / 0.9);
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground\/60 {
  color: oklch(var(--muted-foreground) / 0.6);
}
.text-orange {
  color: oklch(var(--orange));
}
.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-sky-400 {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.text-tedy-green {
  color: oklch(var(--green));
}
.text-tedy-red {
  color: oklch(var(--red));
}
.text-text-dim {
  color: oklch(var(--text-dim));
}
.text-text-medium {
  color: oklch(var(--text-medium));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 0 0 1px oklch(var(--orange) / 0.08);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow-sm {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.25), 0 0 0 1px oklch(var(--orange) / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_6px_rgba\(253\2c 224\2c 71\2c 0\.9\)\] {
  --tw-drop-shadow: drop-shadow(0 0 6px rgba(253,224,71,0.9));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_6px_rgba\(74\2c 222\2c 128\2c 0\.9\)\] {
  --tw-drop-shadow: drop-shadow(0 0 6px rgba(74,222,128,0.9));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

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

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-90 {
  --tw-enter-scale: .9;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.paused {
  animation-play-state: paused;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  animation-duration: 200ms;
    font-family: var(--font-body, "DM Sans"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
}
.btn:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
/* Primary — solid amber fill, dark text, subtle lift on hover */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  animation-duration: 200ms;
    font-family: var(--font-body, "DM Sans"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
}
.btn-primary:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
.btn-primary {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border: 1px solid transparent;
  }
.btn-primary:hover {
    background: oklch(calc(var(--primary) + 0.03) 0.11 55);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  }
.btn-primary:active {
    background: oklch(calc(var(--primary) - 0.03) 0.11 55);
  }
/* Secondary — quiet raised surface, medium text */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  animation-duration: 200ms;
    font-family: var(--font-body, "DM Sans"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
}
.btn-secondary:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
.btn-secondary {
    background: oklch(var(--secondary));
    color: oklch(var(--secondary-foreground));
    border: 1px solid oklch(var(--border));
  }
.btn-secondary:hover {
    background: oklch(var(--surface-3));
    border-color: oklch(var(--orange) / 0.35);
  }
.btn-secondary:active {
    background: oklch(var(--surface-2));
  }
/* Ghost — transparent, text-only, amber text on hover */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  animation-duration: 200ms;
    font-family: var(--font-body, "DM Sans"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
}
.btn-ghost:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.btn-ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
.btn-ghost {
    background: transparent;
    color: oklch(var(--text-medium));
    border: 1px solid transparent;
  }
.btn-ghost:hover {
    background: oklch(var(--surface-2) / 0.6);
    color: oklch(var(--foreground));
  }
.btn-ghost:active {
    background: oklch(var(--surface-2));
  }
/* ===== Type & contrast hierarchy helpers =====
     Stronger visual hierarchy through size/weight/color rather than
     card borders or shadows. Uppercase tracked labels, tabular mono
     numerics, and explicit dim/medium text tiers. ===== */
.text-hero {
    font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: oklch(var(--foreground));
  }
.text-section {
    font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
      sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
  }
.text-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: oklch(var(--text-medium));
  }
.text-numeric {
    font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
.text-dim {
    color: oklch(var(--text-dim));
  }
.text-medium {
    color: oklch(var(--text-medium));
  }
.text-strong {
    color: oklch(var(--foreground));
    font-weight: 600;
  }
/* Positive / negative data accents — restrained, not loud badges */
.text-positive {
    color: oklch(var(--green));
  }
.text-negative {
    color: oklch(var(--red));
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ============================================================
   TEDY V2 — Progress tab redesign.
   Editorial hero, summary card with conic progress ring,
   responsive milestone card grid, fee policy cards.
   Uses OKLCH tokens only.
   ============================================================ */

/* Hero badge — soft glowing compass mark. */
.rm-hero-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  color: oklch(var(--orange));
  background: radial-gradient(
    circle at 30% 25%,
    oklch(var(--orange) / 0.22),
    oklch(var(--orange) / 0.06) 70%
  );
  border: 1px solid oklch(var(--orange) / 0.35);
  box-shadow: 0 12px 32px -16px oklch(var(--orange) / 0.55);
}

/* Summary card — ring + label + bar. */
.rm-summary {
  position: relative;
  border-radius: 20px;
  border: 1px solid oklch(var(--border) / 0.7);
  background: linear-gradient(
    150deg,
    oklch(var(--surface-2) / 0.95),
    oklch(var(--surface-1) / 0.95)
  );
  overflow: hidden;
}
.rm-summary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    oklch(var(--green) / 0.8),
    oklch(var(--orange) / 0.8)
  );
}
.rm-summary-inner {
  padding: 24px 24px 24px 28px;
}

/* Conic progress ring — fill set inline via --rm-progress (0..100). */
.rm-ring {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 9999px;
  flex-shrink: 0;
  background: conic-gradient(
    oklch(var(--orange) / 0.9) calc(var(--rm-progress, 0) * 1%),
    oklch(var(--surface-3)) 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.rm-ring::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 9999px;
  background: oklch(var(--surface-1));
}
.rm-ring > span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: oklch(var(--foreground));
}

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

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

/* Section header pill. */
.rm-section-head {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 10px;
  border-radius: 9999px;
  border: 1px solid oklch(var(--border) / 0.7);
  background: oklch(var(--surface-1) / 0.9);
}
.rm-section-head--done {
  border-color: oklch(var(--green) / 0.4);
  background: linear-gradient(
    90deg,
    oklch(var(--green) / 0.12),
    oklch(var(--surface-1) / 0.9) 70%
  );
}
.rm-section-head--planned {
  border-color: oklch(var(--orange) / 0.4);
  background: linear-gradient(
    90deg,
    oklch(var(--orange) / 0.12),
    oklch(var(--surface-1) / 0.9) 70%
  );
}
.rm-section-head--fee {
  border-color: oklch(var(--orange) / 0.45);
  background: linear-gradient(
    90deg,
    oklch(var(--orange) / 0.14),
    oklch(var(--surface-2) / 0.95) 70%
  );
}
.rm-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.rm-section-icon--done {
  background: oklch(var(--green) / 0.18);
  color: oklch(var(--green));
}
.rm-section-icon--planned {
  background: oklch(var(--orange) / 0.18);
  color: oklch(var(--orange));
}
.rm-section-icon--fee {
  background: oklch(var(--orange) / 0.2);
  color: oklch(var(--orange));
}
.rm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.rm-count--done {
  background: oklch(var(--green) / 0.16);
  color: oklch(var(--green));
}
.rm-count--planned {
  background: oklch(var(--orange) / 0.16);
  color: oklch(var(--orange));
}

/* Milestone card grid — responsive, auto-fitting columns. */
.rm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .rm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .rm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Milestone card — staggered entrance via --rm-i. */
@keyframes rmCardEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.rm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid oklch(var(--border) / 0.7);
  background: oklch(var(--surface-1) / 0.9);
  opacity: 0;
  animation: rmCardEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--rm-i, 0) * 45ms);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s
    ease, box-shadow 0.2s ease, background 0.2s ease;
}
.rm-card:hover {
  transform: translateY(-3px);
  background: oklch(var(--surface-2));
}
.rm-card--done:hover {
  border-color: oklch(var(--green) / 0.6);
  box-shadow: 0 10px 26px -12px oklch(var(--green) / 0.4), 0 0 0 1px
    oklch(var(--green) / 0.25);
}
.rm-card--planned:hover {
  border-color: oklch(var(--orange) / 0.6);
  box-shadow: 0 10px 26px -12px oklch(var(--orange) / 0.45), 0 0 0 1px
    oklch(var(--orange) / 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .rm-card {
    opacity: 1;
    animation: none;
    transition: none;
  }
  .rm-card:hover {
    transform: none;
  }
}

.rm-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rm-index {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.rm-index--done {
  color: oklch(var(--green) / 0.85);
}
.rm-index--planned {
  color: oklch(var(--orange) / 0.85);
}
.rm-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: oklch(var(--foreground));
}
.rm-card-desc {
  font-size: 12px;
  line-height: 1.55;
  color: oklch(var(--text-dim));
}

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

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

/* Closing pledge — quoted emphasis. */
.rm-pledge {
  position: relative;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid oklch(var(--orange) / 0.25);
  background: oklch(var(--orange) / 0.06);
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
  color: oklch(var(--foreground));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Activity Address table — per-type badge palette =====
   Six visually distinct colors so Send, Receive, Deposit, Withdraw,
   Add Liquidity, and Remove Liquidity are each distinguishable at a
   glance. Backed by the same OKLCH --wd-* action tokens used by the
   Wallet Detail panel, so both activity views read consistently.
   text = 400 shade, background = 500/15, border = 500/30. */
.aa-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.aa-action-send {
  color: oklch(var(--wd-send));
  background: oklch(var(--wd-send-bg) / 0.15);
  border: 1px solid oklch(var(--wd-send-bg) / 0.3);
}
.aa-action-receive {
  color: oklch(var(--wd-receive));
  background: oklch(var(--wd-receive-bg) / 0.15);
  border: 1px solid oklch(var(--wd-receive-bg) / 0.3);
}
.aa-action-deposit {
  color: oklch(var(--wd-deposit));
  background: oklch(var(--wd-deposit-bg) / 0.15);
  border: 1px solid oklch(var(--wd-deposit-bg) / 0.3);
}
.aa-action-withdraw {
  color: oklch(var(--wd-withdraw));
  background: oklch(var(--wd-withdraw-bg) / 0.15);
  border: 1px solid oklch(var(--wd-withdraw-bg) / 0.3);
}
.aa-action-add {
  color: oklch(var(--wd-add));
  background: oklch(var(--wd-add-bg) / 0.15);
  border: 1px solid oklch(var(--wd-add-bg) / 0.3);
}
.aa-action-remove {
  color: oklch(var(--wd-remove));
  background: oklch(var(--wd-remove-bg) / 0.15);
  border: 1px solid oklch(var(--wd-remove-bg) / 0.3);
}
.aa-action-transfer {
  color: oklch(var(--wd-transfer));
  background: oklch(var(--wd-transfer-bg) / 0.15);
  border: 1px solid oklch(var(--wd-transfer-bg) / 0.3);
}
.aa-action-created {
  color: oklch(var(--wd-created));
  background: oklch(var(--wd-created) / 0.15);
  border: 1px solid oklch(var(--wd-created) / 0.3);
}

/* ===== Activity Address — filter controls =====
   Period buttons, type filter chips, and the address search field.
   Active states use the amber primary token so the current selection is
   unmistakable against the dark card surface. */
.aa-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid oklch(var(--border));
  background: oklch(var(--surface-2) / 0.6);
  color: oklch(var(--text-medium));
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms
    ease;
}
.aa-filter-btn:hover {
  border-color: oklch(var(--orange) / 0.4);
  color: oklch(var(--foreground));
}
.aa-filter-btn:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}
.aa-filter-btn[data-active="true"] {
  background: oklch(var(--primary));
  border-color: oklch(var(--primary));
  color: oklch(var(--primary-foreground));
}
.aa-filter-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.aa-filter-btn[data-active="true"] .aa-filter-count {
  opacity: 0.9;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Per-token PnL detail — the numeric column group shown when a Tokens-tab
   row is expanded: current price / avg entry / cost basis / realized /
   unrealized / total PnL, with PnL figures colored by sign. ── */
/* Numeric column group — prices, cost basis, PnL figures. */
.pnl-row-metrics {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
  flex-shrink: 0;
}
.pnl-row-metric {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.pnl-row-metric-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.5rem;
  color: oklch(var(--text-dim));
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
}
.pnl-row-metric-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(var(--foreground));
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ── Collapsible per-token rows — each token shows a compact summary row
   (identity + Balance / Value / Avg Entry / Price / PnL% + chevron) that
   expands to the full metric detail on click. ── */
.pnl-collapsible {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
/* Expanded detail — the metric group fills the width and wraps cleanly. */
.pnl-row-detail {
  padding: 0.625rem 1rem 0.875rem;
  background: oklch(var(--pnl-row));
  border: 1px solid oklch(var(--pnl-row-border));
  border-radius: 10px;
}
.pnl-row-detail .pnl-row-metrics {
  margin-left: 0;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

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

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

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

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

/* ============================================================
   Wallet Checker — overview, recent buys, holdings, stats, profile.
   ADDITIVE, extends the TEDY dark amber/gold theme. Reuses the
   existing --wd-* / --pnl-* tokens and the .wd-* / .pnl-* visual
   language; no new palette. Recent Buys is the visual focus: the
   largest, most emphasized section. Mobile-first: every grid reflows
   to a single column at narrow widths with no horizontal overflow.
   ============================================================ */

/* ── Section shell — a calm raised card used by every Wallet Checker
   block. Mirrors .portfolio-pnl's surface + thin amber-tinted border. ── */
.wc-section {
  position: relative;
  background: oklch(var(--pnl-card));
  border: 1px solid oklch(var(--pnl-card-border));
  border-radius: 14px;
  padding: 1.125rem;
  overflow: hidden;
}
.wc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.wc-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: oklch(var(--foreground));
}
.wc-section-title svg {
  color: oklch(var(--orange));
}

/* ── Wallet Overview — address row + compact metric grid. ── */
.wc-address-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: oklch(var(--wd-chip));
  border: 1px solid oklch(var(--wd-row-border));
}
.wc-address-text {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: oklch(var(--text-medium));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  border: 1px solid oklch(var(--wd-row-border));
  background: oklch(var(--wd-chip));
  color: oklch(var(--text-medium));
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s
    ease;
}
.wc-copy-btn:hover {
  border-color: oklch(var(--orange) / 0.45);
  color: oklch(var(--orange));
}
.wc-copy-btn:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}
.wc-copy-btn[data-copied="true"] {
  color: oklch(var(--pnl-positive));
  border-color: oklch(var(--pnl-positive) / 0.4);
}

/* Metric grid — 2 columns on mobile, 4 on desktop. */
.wc-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-top: 0.875rem;
}
@media (min-width: 768px) {
  .wc-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.wc-metric-tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  background: oklch(var(--pnl-metric-tile));
  border: 1px solid oklch(var(--pnl-card-border));
  min-width: 0;
}
.wc-metric-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.5625rem;
  color: oklch(var(--text-dim));
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-metric-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 700;
  color: oklch(var(--foreground));
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Trade / holding rows — token identity + compact metric columns. ── */
.wc-buy-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wc-buy-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  background: oklch(var(--pnl-row));
  border: 1px solid oklch(var(--pnl-row-border));
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform
    0.15s ease;
}
.wc-buy-row:hover {
  background: oklch(var(--pnl-row-hover));
  border-color: oklch(var(--orange) / 0.45);
}
.wc-buy-row:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}
.wc-buy-identity {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1 1 auto;
}
.wc-buy-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: oklch(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-buy-ticker {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  color: oklch(var(--text-dim));
  white-space: nowrap;
}
.wc-buy-metrics {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.wc-buy-metric {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.wc-buy-metric-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.5rem;
  color: oklch(var(--text-dim));
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
}
.wc-buy-metric-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(var(--foreground));
  white-space: nowrap;
}
.wc-roi-pill {
  display: inline-flex;
  align-items: center;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.wc-buy-time {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  color: oklch(var(--text-dim));
  white-space: nowrap;
  flex-shrink: 0;
}
/* Trade side value — buy reads positive, sell reads negative, matching the
   PnL pill palette so the direction is scannable at a glance. */
.wc-trade-side {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wc-trade-side-buy {
  color: oklch(var(--pnl-positive));
}
.wc-trade-side-sell {
  color: oklch(var(--pnl-negative));
}

/* ── Tokens tab rows — per-token PnL with an expand affordance. The row is a
   flex shell holding a clickable main area (token identity + Balance / Value /
   Avg Entry / Price / PnL% metrics, opens the token chart) and a separate
   chevron button that expands the extra detail. ── */
.wc-token-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  background: oklch(var(--pnl-row));
  border: 1px solid oklch(var(--pnl-row-border));
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wc-token-row:hover {
  background: oklch(var(--pnl-row-hover));
  border-color: oklch(var(--orange) / 0.45);
}
.wc-token-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wc-token-main:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
  border-radius: 8px;
}
.wc-token-main:disabled {
  cursor: default;
}
.wc-token-expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  border: 1px solid oklch(var(--pnl-row-border));
  background: oklch(var(--wd-chip));
  color: oklch(var(--text-dim));
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.wc-token-expand:hover {
  color: oklch(var(--orange));
  border-color: oklch(var(--orange) / 0.45);
}
.wc-token-expand:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}
.wc-token-expand svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}
.wc-token-expand[data-state="open"] svg {
  transform: rotate(180deg);
}

/* ── Trading Stats — compact tiles that reflow on mobile. ── */
.wc-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}
@media (min-width: 768px) {
  .wc-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.wc-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  background: oklch(var(--pnl-metric-tile));
  border: 1px solid oklch(var(--pnl-card-border));
  min-width: 0;
}
.wc-stat-tile-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 700;
  color: oklch(var(--foreground));
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-stat-tile-sub {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  color: oklch(var(--text-dim));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Wallet Profile — score ring + summary rows. ── */
.wc-profile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .wc-profile {
    flex-direction: row;
    align-items: center;
  }
}
.wc-score-ring {
  position: relative;
  width: 6.5rem;
  height: 6.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(
    oklch(var(--orange)) calc(var(--wc-score, 0) * 1%),
    oklch(var(--wd-chip)) 0
  );
}
.wc-score-ring::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border-radius: 9999px;
  background: oklch(var(--pnl-card));
}
.wc-score-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.wc-score-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
  color: oklch(var(--foreground));
}
.wc-score-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.5rem;
  color: oklch(var(--text-dim));
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  margin-top: 0.25rem;
}
.wc-profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  flex: 1 1 auto;
  min-width: 0;
}
.wc-fact {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.5rem 0.625rem;
  border-radius: 10px;
  background: oklch(var(--pnl-metric-tile));
  border: 1px solid oklch(var(--pnl-card-border));
  min-width: 0;
}
.wc-fact-value {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 600;
  color: oklch(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Activity rows — reuse .wd-row language; add a compact variant. ── */
.wc-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.wc-activity-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  background: oklch(var(--wd-row));
  border: 1px solid oklch(var(--wd-row-border));
  transition: background-color 0.15s ease;
}
.wc-activity-row:hover {
  background: oklch(var(--wd-row-hover));
}

/* ── Loading / empty / error states — reuse the calm TEDY pattern. ── */
.wc-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  text-align: center;
  color: oklch(var(--text-dim));
  font-size: 0.8125rem;
  border-radius: 10px;
  border: 1px dashed oklch(var(--pnl-card-border));
}
.wc-state-error {
  color: oklch(var(--pnl-negative));
  border-color: oklch(var(--pnl-negative) / 0.35);
}
.wc-skeleton {
  border-radius: 10px;
  background: oklch(var(--surface-3));
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Responsive: stack the buy-row metrics beneath the identity on
   narrow screens so nothing overflows at 375px. ── */
@media (max-width: 640px) {
  .wc-buy-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }
  .wc-buy-identity {
    flex-basis: 100%;
  }
  .wc-buy-metrics {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    width: 100%;
  }
  .wc-roi-pill {
    margin-left: auto;
  }
  .wc-holding-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }
  .wc-token-main {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }
}

/* ── Respect reduced motion — static color transitions only. ── */
@media (prefers-reduced-motion: reduce) {
  .wc-buy-row,
  .wc-holding-row,
  .wc-token-row,
  .wc-token-main,
  .wc-token-expand,
  .wc-token-expand svg,
  .wc-copy-btn,
  .wc-activity-row,
  .wc-skeleton {
    transition: none;
    animation: none;
  }
}

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

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

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

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

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

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

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

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

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

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

/* ── Compact desktop density — keeps content from stretching too far
   vertically by tightening section gaps on wide screens. ── */
@media (min-width: 1280px) {
  .tedy-compact {
    gap: var(--layout-gap, 1rem);
  }
}

/* ============================================================
   Main top navigation — polished segmented bar.
   A single calm, uniform nav language shared by the direct tabs
   (Home, Progress) and the dropdown triggers (Markets, Tedy,
   Wallets). Every item is the same height, min-width, icon size,
   and chevron size; the active item gets a gold underline + soft
   gold wash. Mobile fills the row evenly; desktop uses fixed
   min-widths and left alignment. Layout/visual only — no logic.
   ============================================================ */

/* ── Bar shell — subtle gradient surface + hairline bottom border. ── */
.tedy-nav {
  position: relative;
  border-bottom: 1px solid oklch(var(--border) / 0.6);
  background: linear-gradient(
    to bottom,
    oklch(0.13 0.012 265 / 0.92),
    oklch(0.11 0 0 / 0.78)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Item row — one compact horizontal row at every width.
   Below sm the five items share the row as five equal grid columns so
   they always fit without horizontal scroll and never wrap into a
   vertical stack. From sm up they sit on one row with fixed min-widths. ── */
.tedy-nav-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.1875rem;
  padding: 0.375rem 0;
  overflow: visible;
}
@media (min-width: 640px) {
  .tedy-nav-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
  }
}

/* ── Shared item base — identical box model for tabs and triggers.
   Every item keeps the same height, icon, and chevron at all widths.
   Below sm each item is a compact equal-width chip (icon over label)
   so all five fit one row; from sm up they sit on one row with wider
   min-widths and an inline icon + label + chevron. ── */
.tedy-nav-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.375rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  font-family: var(--font-body, "DM Sans"), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: oklch(var(--text-medium));
  background: transparent;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s
    ease, transform 0.2s ease;
}
@media (min-width: 640px) {
  .tedy-nav-item {
    flex-direction: row;
    width: auto;
    min-width: 7.25rem;
    gap: 0.5rem;
    padding: 0 1rem;
    font-size: 0.875rem;
  }
}
.tedy-nav-item:hover {
  color: oklch(var(--foreground));
  background: oklch(var(--surface-2) / 0.7);
  border-color: oklch(var(--border) / 0.7);
}
.tedy-nav-item:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}
.tedy-nav-item:active {
  transform: translateY(1px);
}

/* ── Active state — gold text, soft gold wash, gold underline.
   Radix TabsTrigger exposes data-state="active"; dropdown triggers
   get data-active from the app. Both share one treatment. ── */
.tedy-nav-item[data-active="true"],
.tedy-nav-item[data-state="active"] {
  color: oklch(var(--orange));
  background: oklch(var(--orange) / 0.1);
  border-color: oklch(var(--orange) / 0.28);
}
.tedy-nav-item[data-active="true"]::after,
.tedy-nav-item[data-state="active"]::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.125rem;
  height: 2px;
  border-radius: 9999px;
  background: oklch(var(--orange));
  box-shadow: 0 0 10px oklch(var(--orange) / 0.55);
}
@media (min-width: 640px) {
  .tedy-nav-item[data-active="true"]::after,
  .tedy-nav-item[data-state="active"]::after {
    left: 0.75rem;
    right: 0.75rem;
    bottom: -0.375rem;
  }
}

/* ── Icon + chevron sizing — locked so every item matches. ── */
.tedy-nav-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}
.tedy-nav-icon > svg {
  width: 1rem;
  height: 1rem;
}
.tedy-nav-chevron {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Below sm the chevron is pinned to the chip corner so it never eats
   into the label's horizontal space; the label keeps the full width. */
@media (max-width: 639.98px) {
  .tedy-nav-chevron {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
  }
}
.tedy-nav-item:hover .tedy-nav-chevron {
  opacity: 1;
}
.tedy-nav-item[data-state="open"] .tedy-nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── Label — always rendered in full; never clipped or ellipsised.
   The item box grows to fit the label instead of truncating it. ── */
.tedy-nav-label {
  min-width: 0;
  white-space: nowrap;
}

/* ── Dropdown menu surface — matches the nav's dark gold language. ── */
.tedy-nav-menu {
  min-width: 12rem;
  padding: 0.375rem;
  border: 1px solid oklch(var(--border) / 0.8);
  background: oklch(var(--popover));
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}
.tedy-nav-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: oklch(var(--text-medium));
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.tedy-nav-menu-item:hover,
.tedy-nav-menu-item:focus {
  color: oklch(var(--foreground));
  background: oklch(var(--surface-2) / 0.8);
}
.tedy-nav-menu-item[data-active="true"] {
  color: oklch(var(--orange));
  background: oklch(var(--orange) / 0.1);
}
.tedy-nav-menu-item .tedy-nav-icon > svg {
  width: 1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .tedy-nav-item,
  .tedy-nav-chevron,
  .tedy-nav-menu-item {
    transition: none;
  }
  .tedy-nav-item:active {
    transform: none;
  }
}

/* ============================================================
   TEDY404 Home — reference dashboard sections.
   Hero banner, stats strip, token panel, gainers, holders,
   bots promo, activity feed, bottom CTA. Extends the existing
   OKLCH token system; no component logic.
   ============================================================ */

/* ── Hero banner — full-bleed dark hero with a teddy-bear background
   image under a layered scrim so the headline stays legible. ── */
.home-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid oklch(var(--ref-border) / 0.6);
  background: oklch(var(--ref-canvas));
}
.home-hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.55;
  pointer-events: none;
}
.home-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      180deg,
      oklch(var(--home-hero-overlay) / 0.35) 0%,
      oklch(var(--home-hero-overlay) / 0.7) 55%,
      oklch(var(--ref-canvas) / 0.98) 100%
    ),
    radial-gradient(
      ellipse at 50% 40%,
      oklch(var(--ref-gold) / 0.16) 0%,
      transparent 62%
    );
}
.home-hero-content {
  position: relative;
  z-index: 1;
}
/* Oversized display headline — TEDY404 wordmark treatment. */
.home-hero-headline {
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-size: clamp(2.75rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: oklch(var(--foreground));
  text-shadow: 0 2px 24px oklch(var(--ref-canvas) / 0.8);
}
.home-hero-kicker {
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(0.65rem, 1.4vw, 0.8rem);
  font-weight: 600;
  color: oklch(var(--ref-gold));
}
.home-hero-sub {
  color: oklch(var(--ref-text-medium));
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
}

/* ── Gold primary CTA — pill button, dark text, soft gold glow. ── */
.home-cta-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: oklch(var(--ref-canvas));
  background: linear-gradient(
    135deg,
    oklch(var(--ref-gold-bright)) 0%,
    oklch(var(--ref-gold)) 55%,
    oklch(var(--ref-gold-deep)) 100%
  );
  border: 1px solid oklch(var(--ref-gold-bright) / 0.7);
  box-shadow: 0 6px 22px -8px oklch(var(--ref-gold) / 0.55), 0 0 0 1px
    oklch(var(--ref-gold) / 0.2);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s
    ease, filter 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.home-cta-gold:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -8px oklch(var(--ref-gold) / 0.7), 0 0 0 1px
    oklch(var(--ref-gold) / 0.35);
}
.home-cta-gold:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .home-cta-gold:hover {
    transform: none;
  }
}

/* ── Stats strip — four KPI cards with a gold left accent. ── */
.home-stat-card {
  position: relative;
  background: oklch(var(--home-panel));
  border: 1px solid oklch(var(--ref-border) / 0.7);
  border-radius: 12px;
  padding: 1.25rem;
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s
    ease, box-shadow 0.25s ease;
}
.home-stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: oklch(var(--stat-accent, var(--ref-gold)));
  opacity: 0.85;
}
.home-stat-card:hover {
  background: oklch(var(--home-row-hover));
  border-color: oklch(var(--ref-gold) / 0.45);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px oklch(0 0 0 / 0.7);
}
.home-stat-value {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: oklch(var(--foreground));
}

/* ── Generic dark panel — the shared container for every Home section. ── */
.home-panel {
  background: oklch(var(--home-panel));
  border: 1px solid oklch(var(--ref-border) / 0.7);
  border-radius: 14px;
  overflow: hidden;
}
.home-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: oklch(var(--home-panel-header));
  border-bottom: 1px solid oklch(var(--ref-border) / 0.6);
}
.home-panel-title {
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: oklch(var(--foreground));
}

/* ── Sub-tab pills — gold active fill, dark text. ── */
.home-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: oklch(var(--ref-text-medium));
  background: oklch(var(--home-tab-idle));
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s
    ease;
  white-space: nowrap;
}
.home-tab:hover {
  color: oklch(var(--foreground));
  border-color: oklch(var(--ref-gold) / 0.35);
}
.home-tab-active {
  color: oklch(var(--home-tab-active-fg));
  background: oklch(var(--home-tab-active));
  border-color: oklch(var(--ref-gold-bright) / 0.7);
  box-shadow: 0 2px 10px -4px oklch(var(--ref-gold) / 0.6);
}
.home-tab-active:hover {
  color: oklch(var(--home-tab-active-fg));
}

/* ── List rows — gainers, holders, activity. ── */
.home-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid oklch(var(--home-row-border) / 0.55);
  transition: background-color 0.18s ease;
}
.home-row:last-child {
  border-bottom: none;
}
.home-row:hover {
  background: oklch(var(--home-row-hover));
}
.home-row-pinned {
  background: oklch(var(--ref-gold) / 0.07);
  border-left: 2px solid oklch(var(--ref-gold) / 0.8);
}
/* Rank medals — #1 gold, #2 silver, #3 bronze, rest muted. */
.home-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 9999px;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: oklch(var(--ref-text-dim));
  background: oklch(var(--home-tab-idle));
}
.home-rank-1 {
  color: oklch(var(--ref-canvas));
  background: oklch(var(--home-rank-gold));
}
.home-rank-2 {
  color: oklch(var(--ref-canvas));
  background: oklch(var(--home-rank-silver));
}
.home-rank-3 {
  color: oklch(var(--ref-canvas));
  background: oklch(var(--home-rank-bronze));
}
/* Circular token avatar chip. */
.home-token-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9999px;
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: oklch(var(--ref-canvas));
  background: linear-gradient(
    135deg,
    oklch(var(--ref-gold-bright)),
    oklch(var(--ref-gold-deep))
  );
}
.home-token-chip-neutral {
  color: oklch(var(--foreground));
  background: oklch(var(--home-tab-idle));
}

/* ── Delta text — green up / red down, mono tabular. ── */
.home-delta {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.home-delta-up {
  color: oklch(var(--ref-green));
}
.home-delta-down {
  color: oklch(var(--ref-red));
}
.home-delta-flat {
  color: oklch(var(--ref-text-dim));
}

/* ── Holder badges — MASTER gold, ARMY green. ── */
.home-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.0625rem 0.5rem;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-badge-master {
  color: oklch(var(--home-badge-master));
  background: oklch(var(--home-badge-master) / 0.14);
  border: 1px solid oklch(var(--home-badge-master) / 0.45);
}
.home-badge-army {
  color: oklch(var(--home-badge-army));
  background: oklch(var(--home-badge-army) / 0.14);
  border: 1px solid oklch(var(--home-badge-army) / 0.45);
}

/* Small screens: tighten row gutters and keep holder badges legible without
   crowding the name/address column. */
@media (max-width: 640px) {
  .home-row {
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
  }
  .home-badge {
    padding: 0.125rem 0.4375rem;
    font-size: 0.5625rem;
    letter-spacing: 0.04em;
  }
}

/* ── Activity type badges — distinct color per action. ──
   Backed by the same OKLCH --wd-* action tokens as the Activity Address
   table (.aa-action-*), so the Home preview and the full feed read
   consistently. text = 400 shade, background = 500/15, border = 500/30. */
.home-act-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 6px;
  padding: 0.125rem 0.5rem;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.home-act-receive {
  color: oklch(var(--wd-receive));
  background: oklch(var(--wd-receive-bg) / 0.15);
  border: 1px solid oklch(var(--wd-receive-bg) / 0.3);
}
.home-act-send {
  color: oklch(var(--wd-send));
  background: oklch(var(--wd-send-bg) / 0.15);
  border: 1px solid oklch(var(--wd-send-bg) / 0.3);
}
.home-act-deposit {
  color: oklch(var(--wd-deposit));
  background: oklch(var(--wd-deposit-bg) / 0.15);
  border: 1px solid oklch(var(--wd-deposit-bg) / 0.3);
}
.home-act-withdraw {
  color: oklch(var(--wd-withdraw));
  background: oklch(var(--wd-withdraw-bg) / 0.15);
  border: 1px solid oklch(var(--wd-withdraw-bg) / 0.3);
}
.home-act-add {
  color: oklch(var(--wd-add));
  background: oklch(var(--wd-add-bg) / 0.15);
  border: 1px solid oklch(var(--wd-add-bg) / 0.3);
}
.home-act-remove {
  color: oklch(var(--wd-remove));
  background: oklch(var(--wd-remove-bg) / 0.15);
  border: 1px solid oklch(var(--wd-remove-bg) / 0.3);
}
.home-act-transfer {
  color: oklch(var(--wd-transfer));
  background: oklch(var(--wd-transfer-bg) / 0.15);
  border: 1px solid oklch(var(--wd-transfer-bg) / 0.3);
}
.home-act-create {
  color: oklch(var(--wd-created));
  background: oklch(var(--wd-created) / 0.15);
  border: 1px solid oklch(var(--wd-created) / 0.3);
}

/* ── Bots panel — tool cards + gold promo card. ── */
.home-bot-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 12px;
  background: oklch(var(--home-panel));
  border: 1px solid oklch(var(--ref-border) / 0.7);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.home-bot-card:hover {
  border-color: oklch(var(--ref-gold) / 0.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px oklch(0 0 0 / 0.75);
}
.home-bot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: oklch(var(--ref-canvas));
  background: linear-gradient(
    135deg,
    oklch(var(--ref-gold-bright)),
    oklch(var(--ref-gold-deep))
  );
}
.home-promo-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 1.5rem;
  color: oklch(var(--home-cta-fg));
  background: linear-gradient(
    135deg,
    oklch(var(--home-promo)) 0%,
    oklch(var(--home-promo-deep)) 100%
  );
  box-shadow: 0 14px 34px -18px oklch(var(--ref-gold) / 0.8);
}
.home-promo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 80% 10%,
    oklch(1 0 0 / 0.22) 0%,
    transparent 55%
  );
  pointer-events: none;
}

/* ── Bottom CTA banner — full-width gold gradient. ── */
.home-cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  color: oklch(var(--home-cta-fg));
  background: linear-gradient(
    120deg,
    oklch(var(--home-cta)) 0%,
    oklch(var(--home-cta-deep)) 100%
  );
  box-shadow: 0 20px 50px -24px oklch(var(--ref-gold) / 0.75);
}
.home-cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 15% 20%,
      oklch(1 0 0 / 0.18) 0%,
      transparent 50%
    ),
    radial-gradient(ellipse at 90% 90%, oklch(0 0 0 / 0.18) 0%, transparent 55%);
  pointer-events: none;
}
.home-cta-banner-title {
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.home-cta-banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: oklch(var(--foreground));
  background: oklch(var(--ref-canvas) / 0.92);
  border: 1px solid oklch(0 0 0 / 0.25);
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.2s ease;
  white-space: nowrap;
}
.home-cta-banner-btn:hover {
  background: oklch(var(--ref-canvas));
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .home-cta-banner-btn:hover {
    transform: none;
  }
}

/* ── Auto-refresh indicator — pulsing green live dot. ── */
.home-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: oklch(var(--ref-green));
  box-shadow: 0 0 0 0 oklch(var(--ref-green) / 0.5);
  animation: homeLivePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes homeLivePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 oklch(var(--ref-green) / 0.5);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px oklch(var(--ref-green) / 0);
    opacity: 0.75;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-live-dot {
    animation: none;
  }
}

/* ── Home entrance motion — hero fade-up, card enter, panel glow. ── */
.home-enter {
  animation: homeFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.home-enter-card {
  animation: homeCardEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--home-i, 0) * 70ms);
}
@keyframes homeFadeUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes homeCardEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-enter,
  .home-enter-card {
    animation: none;
  }
}

/* ── Gold glow ring — subtle ambient halo for the token panel. ── */
.home-glow {
  box-shadow: 0 0 0 1px oklch(var(--ref-gold) / 0.18), 0 18px 44px -26px
    oklch(var(--ref-gold) / 0.5);
}
.home-glow-pulse {
  animation: homeGlowPulse 3.2s ease-in-out infinite;
}
@keyframes homeGlowPulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px oklch(var(--ref-gold) / 0.16), 0 18px 44px -26px
      oklch(var(--ref-gold) / 0.45);
  }
  50% {
    box-shadow: 0 0 0 1px oklch(var(--ref-gold) / 0.28), 0 22px 52px -26px
      oklch(var(--ref-gold) / 0.62);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-glow-pulse {
    animation: none;
  }
}

/* ============================================================
   TEDY V2 Statistics — TEDY404 dark dashboard redesign.
   Reuses the Home hero treatment (full-bleed banner + layered
   scrim + gold radial glow), the .home-stat-card KPI surface,
   and the .home-panel / .home-row list language. Extends the
   existing OKLCH token system; no new color values.
   ============================================================ */

/* ── Stats hero — full-bleed banner matching the Home hero. ── */
.stats-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid oklch(var(--ref-border) / 0.6);
  background: oklch(var(--ref-canvas));
}
.stats-hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
}
.stats-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      180deg,
      oklch(var(--home-hero-overlay) / 0.4) 0%,
      oklch(var(--home-hero-overlay) / 0.72) 55%,
      oklch(var(--ref-canvas) / 0.98) 100%
    ),
    radial-gradient(
      ellipse at 22% 30%,
      oklch(var(--ref-gold) / 0.2) 0%,
      transparent 60%
    );
}
.stats-hero-content {
  position: relative;
  z-index: 1;
}
/* Oversized display headline — TEDY404 wordmark treatment. */
.stats-hero-headline {
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-size: clamp(2rem, 6vw, 4.25rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: oklch(var(--foreground));
  text-shadow: 0 2px 24px oklch(var(--ref-canvas) / 0.8);
}
/* Gold-accented tagline badge. */
.stats-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  font-family: var(--font-display, "Space Grotesk"), ui-sans-serif, system-ui,
    sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: oklch(var(--ref-gold));
  background: oklch(var(--ref-gold) / 0.12);
  border: 1px solid oklch(var(--ref-gold) / 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Live auto-refresh indicator — pulsing green dot + label. */
.stats-hero-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(var(--ref-green));
}
.stats-hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: oklch(var(--ref-green));
  animation: statLivePulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite,
    statLiveRing 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .stats-hero-live-dot {
    animation: none;
  }
}
/* Non-blocking retry chip shown in the hero when a poll fails. */
.stats-hero-retry {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(var(--ref-red));
  background: oklch(var(--ref-red) / 0.12);
  border: 1px solid oklch(var(--ref-red) / 0.4);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.stats-hero-retry:hover {
  background: oklch(var(--ref-red) / 0.2);
  border-color: oklch(var(--ref-red) / 0.6);
}
.stats-hero-retry:focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

/* ── BTC Reserve platform panel — Odin.fun-style hero balance centerpiece.
   A .home-panel with a large 8-decimal BTC hero figure, a live USD line, a
   compact reserve trend sparkline, and a supporting-metric column. Extends
   the existing OKLCH tokens; no new color values. ── */
/* Gold top accent so the reserve panel reads as the page centerpiece. */
.stats-reserve-panel {
  position: relative;
}
.stats-reserve-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    oklch(var(--ref-gold-bright)) 0%,
    oklch(var(--ref-gold)) 45%,
    transparent 100%
  );
  opacity: 0.9;
  pointer-events: none;
}
.stats-reserve-window {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: oklch(var(--ref-gold));
  background: oklch(var(--ref-gold) / 0.12);
  border: 1px solid oklch(var(--ref-gold) / 0.35);
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}
.stats-reserve-body {
  padding: 1.5rem 1.25rem 1.5rem;
}
.stats-reserve-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
/* Hero column — the large reserve figure + trend chart. */
.stats-reserve-hero {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.stats-reserve-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(var(--ref-green));
}
.stats-reserve-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: oklch(var(--ref-green));
  animation: statLivePulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .stats-reserve-live-dot {
    animation: none;
  }
}
/* Oversized hero number — full 8-decimal BTC, gold gradient text. */
.stats-reserve-hero-value {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  word-break: break-all;
  background: linear-gradient(
    100deg,
    oklch(var(--ref-gold-bright)) 0%,
    oklch(var(--ref-gold)) 55%,
    oklch(var(--ref-gold-deep)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: oklch(var(--ref-gold));
}
.stats-reserve-hero-usd {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 600;
  color: oklch(var(--ref-text-medium));
}
/* Compact reserve trend sparkline. */
.stats-reserve-trend {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.75rem;
}
.stats-reserve-trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.stats-reserve-trend-label {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(var(--ref-text-dim));
}
.stats-reserve-trend-range {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: oklch(var(--ref-gold));
}
/* 30-day reserve chart — a proper date axis + hover tooltip. */
.stats-reserve-chart {
  width: 100%;
  height: 200px;
}
.stats-reserve-spark-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  border-radius: 8px;
  border: 1px dashed oklch(var(--ref-border) / 0.8);
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  color: oklch(var(--ref-text-dim));
}
/* Reserve chart tooltip — dark surface, gold accent, mono numerals. */
.stats-reserve-tooltip {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: oklch(var(--home-panel));
  border: 1px solid oklch(var(--ref-gold) / 0.4);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.45);
}
.stats-reserve-tooltip-date {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(var(--ref-text-dim));
}
.stats-reserve-tooltip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.stats-reserve-tooltip-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: oklch(var(--ref-text-medium));
}
.stats-reserve-tooltip-value {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 700;
  color: oklch(var(--ref-gold));
}
.stats-reserve-tooltip-usd {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: oklch(var(--ref-text-dim));
}
/* Loading / error / unavailable states — layout-matched to the panel body so
   the panel never collapses or blanks. */
.stats-reserve-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 220px;
  text-align: center;
}
.stats-reserve-state-label {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(var(--ref-text-dim));
}
@media (max-width: 640px) {
  .stats-reserve-body {
    padding: 1rem 0.875rem 1.25rem;
  }
  .stats-reserve-state {
    min-height: 180px;
  }
}

/* ── KPI card — extends .home-stat-card with a live dot + change pill. ── */
.stats-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.stats-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.stats-kpi-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.stats-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  color: oklch(var(--ref-gold));
  background: oklch(var(--ref-gold) / 0.12);
}
.stats-kpi-value {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: oklch(var(--foreground));
  word-break: break-all;
}
.stats-kpi-usd {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: oklch(var(--ref-text-dim));
}
/* Live dot marking a card as streaming. */
.stats-kpi-live {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(var(--ref-green));
}
.stats-kpi-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: oklch(var(--ref-green));
  animation: statLivePulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .stats-kpi-live-dot {
    animation: none;
  }
}

/* ── Panel row — extends .home-row with a right-aligned value + delta. ── */
.stats-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid oklch(var(--home-row-border) / 0.55);
  transition: background-color 0.18s ease;
}
.stats-row:last-child {
  border-bottom: none;
}
.stats-row:hover {
  background: oklch(var(--home-row-hover));
}
.stats-row-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  color: oklch(var(--ref-gold));
  background: oklch(var(--ref-gold) / 0.12);
}
.stats-row-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: oklch(var(--foreground));
}
.stats-row-sub {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.6875rem;
  color: oklch(var(--ref-text-dim));
}
.stats-row-value {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 700;
  color: oklch(var(--foreground));
  white-space: nowrap;
}
@media (max-width: 640px) {
  .stats-row {
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
  }
}

/* ── Panel-shaped skeleton + error/empty states. ── */
.stats-panel-skeleton {
  background: oklch(var(--home-panel));
  border: 1px solid oklch(var(--ref-border) / 0.7);
  border-radius: 14px;
  overflow: hidden;
}
.stats-state-card {
  background: oklch(var(--home-panel));
  border: 1px solid oklch(var(--ref-border) / 0.7);
  border-radius: 14px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.stats-state-card-error {
  border-color: oklch(var(--ref-red) / 0.35);
}

/* ── Dev Wallet Tracker bot — watched-token rows + action badges. ──
   Reuses the TEDY404 dark amber/gold tokens so the card matches the
   existing BotsTab bot cards (Price Alert / Portfolio / Smart Money). */
.dev-wallet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: oklch(var(--surface-2));
  border: 1px solid oklch(var(--border) / 0.6);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dev-wallet-row:hover {
  border-color: oklch(var(--orange) / 0.35);
  background: oklch(var(--surface-3));
}
.dev-wallet-dev {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  color: oklch(var(--text-dim));
  overflow-wrap: anywhere;
}
/* Token ID — monospace, fully readable, wraps instead of truncating. */
.dev-wallet-token-id {
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  line-height: 1.3;
  color: oklch(var(--orange) / 0.85);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.dev-wallet-dev-unknown {
  color: oklch(var(--orange) / 0.85);
  font-style: italic;
}
.dev-wallet-waiting {
  font-size: 0.6875rem;
  color: oklch(var(--text-dim));
  font-style: italic;
}
.dev-wallet-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.125rem 0.4rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.dev-wallet-badge-buy {
  color: oklch(var(--green));
  background: oklch(var(--green) / 0.12);
  border-color: oklch(var(--green) / 0.3);
}
.dev-wallet-badge-sell {
  color: oklch(var(--red));
  background: oklch(var(--red) / 0.12);
  border-color: oklch(var(--red) / 0.3);
}
.dev-wallet-badge-send {
  color: oklch(var(--orange));
  background: oklch(var(--orange) / 0.12);
  border-color: oklch(var(--orange) / 0.3);
}
.dev-wallet-badge-receive {
  color: oklch(var(--green));
  background: oklch(var(--green) / 0.12);
  border-color: oklch(var(--green) / 0.3);
}
.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground *::selection {
  color: oklch(var(--primary-foreground));
}
.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
}
.file\:inline-flex::file-selector-button {
  display: inline-flex;
}
.file\:h-7::file-selector-button {
  height: 1.75rem;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-foreground::file-selector-button {
  color: oklch(var(--foreground));
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.placeholder\:text-text-dim::-moz-placeholder {
  color: oklch(var(--text-dim));
}
.placeholder\:text-text-dim::placeholder {
  color: oklch(var(--text-dim));
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}
.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}
.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}
.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.03\]:hover {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-blue-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.hover\:border-orange:hover {
  border-color: oklch(var(--orange));
}
.hover\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.hover\:border-primary\/40:hover {
  border-color: oklch(var(--primary) / 0.4);
}
.hover\:bg-\[oklch\(var\(--card-glow-amber\)\/0\.04\)\]:hover {
  background-color: oklch(var(--card-glow-amber)/0.04);
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-500\/10:hover {
  background-color: rgb(245 158 11 / 0.1);
}
.hover\:bg-blue-400\/30:hover {
  background-color: rgb(96 165 250 / 0.3);
}
.hover\:bg-blue-500\/40:hover {
  background-color: rgb(59 130 246 / 0.4);
}
.hover\:bg-blue-800\/60:hover {
  background-color: rgb(30 64 175 / 0.6);
}
.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
.hover\:bg-green-400\/30:hover {
  background-color: rgb(74 222 128 / 0.3);
}
.hover\:bg-green-500\/30:hover {
  background-color: rgb(34 197 94 / 0.3);
}
.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
}
.hover\:bg-orange-dim:hover {
  background-color: oklch(var(--orange-dim));
}
.hover\:bg-primary\/10:hover {
  background-color: oklch(var(--primary) / 0.1);
}
.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
.hover\:bg-red-400\/30:hover {
  background-color: rgb(248 113 113 / 0.3);
}
.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}
.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}
.hover\:bg-surface-2:hover {
  background-color: oklch(var(--surface-2));
}
.hover\:bg-surface-3:hover {
  background-color: oklch(var(--surface-3));
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-yellow-400\/20:hover {
  background-color: rgb(250 204 21 / 0.2);
}
.hover\:bg-yellow-400\/30:hover {
  background-color: rgb(250 204 21 / 0.3);
}
.hover\:bg-yellow-500\/30:hover {
  background-color: rgb(234 179 8 / 0.3);
}
.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}
.hover\:text-blue-400:hover {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}
.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.hover\:text-orange:hover {
  color: oklch(var(--orange));
}
.hover\:text-orange-dim:hover {
  color: oklch(var(--orange-dim));
}
.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.hover\:text-primary\/80:hover {
  color: oklch(var(--primary) / 0.8);
}
.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}
.hover\:text-tedy-red:hover {
  color: oklch(var(--red));
}
.hover\:text-text-medium:hover {
  color: oklch(var(--text-medium));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-glow:hover {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 0 0 1px oklch(var(--orange) / 0.08);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-4:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.hover\:text-negative:hover {
    color: oklch(var(--red));
  }
.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}
.focus\:z-10:focus {
  z-index: 10;
}
.focus\:border-orange:focus {
  border-color: oklch(var(--orange));
}
.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:z-10:focus-visible {
  z-index: 10;
}
.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}
.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}
.focus-visible\:ring-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-inset:focus-visible {
  --tw-ring-inset: inset;
}
.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}
.focus-visible\:ring-orange:focus-visible {
  --tw-ring-color: oklch(var(--orange));
}
.focus-visible\:ring-primary\/50:focus-visible {
  --tw-ring-color: oklch(var(--primary) / 0.5);
}
.focus-visible\:ring-primary\/60:focus-visible {
  --tw-ring-color: oklch(var(--primary) / 0.6);
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.focus-visible\:ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px;
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: oklch(var(--background));
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
}
.active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-orange {
  color: oklch(var(--orange));
}
.group\/user:hover .group-hover\/user\:underline {
  text-decoration-line: underline;
}
.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}
.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-50 {
  opacity: 0.5;
}
.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}
.has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}
.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
}
.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
}
.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
}
.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
}
.data-\[active\=true\]\:z-10[data-active="true"] {
  z-index: 10;
}
.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
}
.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
}
.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}
.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
}
.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}
.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
}
.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}
.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}
.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}
.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}
.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}
.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}
.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}
.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {

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

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

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}
.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}
.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}
.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}
.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}
.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}
.data-\[active\=true\]\:border-ring[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.data-\[state\=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));
}
@media (prefers-reduced-motion: no-preference) {

  .motion-safe\:hover\:scale-\[1\.03\]:hover {
    --tw-scale-x: 1.03;
    --tw-scale-y: 1.03;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}
.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}
.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}
.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}
.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
}
.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}
.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
}
.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}
@media (min-width: 640px) {

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

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

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

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

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

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table {
    display: table;
  }

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

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .md\:absolute {
    position: absolute;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

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

  .md\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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