/* Same original product families, served locally in both application entries.
Defining a family in --font-sans alone does not load it. No remote font CSS,
tracking request or font-specific runtime owner is required. */
@font-face {
font-family: 'Inter Tight'; font-style: normal; font-weight: 300 800; font-display: swap;
src: url('/fonts/inter-tight-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter Tight'; font-style: normal; font-weight: 300 800; font-display: swap;
src: url('/fonts/inter-tight-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
src: url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ── Metric-matched system fallback for Inter ──
Eliminates layout shift (CLS) when Inter swaps in. Numbers are derived
from Inter's actual cap height / x-height vs system-ui so the swap is
visually invisible. Used as `InterFallback` in the font stack. */
@font-face {
font-family: 'InterFallback';
src: local('system-ui'), local('-apple-system'), local('Segoe UI'), local('Arial');
font-display: swap;
ascent-override: 90%;
descent-override: 22.5%;
line-gap-override: 0%;
size-adjust: 107%;
}
*, ::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.17 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: Inter, InterFallback, system-ui, -apple-system, 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: JetBrains Mono, ui-monospace, SFMono-Regular, 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 {
--background: 220 22% 96%;
--foreground: 222 32% 9%;
--card: 0 0% 100%;
--card-foreground: 222 32% 9%;
--popover: 0 0% 100%;
--popover-foreground: 222 32% 9%;
--primary: 174 64% 32%;
--primary-foreground: 0 0% 100%;
--secondary: 220 20% 90%;
--secondary-foreground: 222 26% 22%;
--muted: 220 20% 91%;
/* 37U13.a — 38% measured 4.37:1 on a tinted hover surface. */
--muted-foreground: 218 16% 36%;
--accent: 40 92% 48%;
--accent-foreground: 222 30% 8%;
--destructive: 0 74% 48%;
--destructive-foreground: 0 0% 100%;
--border: 220 16% 84%;
--input: 220 16% 80%;
--ring: 174 64% 32%;
--radius: 0.75rem;
/* Custom tokens — Psychology-driven */
/* 37U13.a — WCAG AA (>=4.5:1) for normal-size text on every real surface:
background / card / popover / secondary / muted / surface-elevated /
surface-hover, and on the same token tinted at 10% over them. Hues are
unchanged; only lightness carries the fix, so the semantics stay. */
--gain: 160 64% 24%;
--loss: 0 74% 38%;
--warning: 38 96% 24%;
--info: 210 100% 34%;
/* 37U13.a — text/icons printed ON a solid semantic fill. */
--on-gain: 0 0% 100%;
--on-loss: 0 0% 100%;
--on-warning: 0 0% 100%;
--on-info: 0 0% 100%;
--surface-elevated: 0 0% 100%;
--surface-hover: 220 20% 88%;
--glow-primary: 0 0 24px hsl(174 64% 32% / 0.18);
--glow-accent: 0 0 24px hsl(40 92% 48% / 0.16);
--gradient-score: linear-gradient(135deg, hsl(174 64% 32%), hsl(160 60% 28%));
--gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(220 22% 96%));
--gradient-header: linear-gradient(135deg, hsl(222 32% 9%), hsl(222 28% 14%));
--gradient-hero: linear-gradient(135deg, hsl(0 0% 100%), hsl(220 22% 97%));
--gradient-card-shine: linear-gradient(135deg, transparent, transparent);
/* TradingView-grade flat surfaces: 1px hairline ring + ultra-soft lift.
Reads as "panel chrome", not "floating dialog". Hover adds a single
extra hairline ring (no blur growth) so the surface feels physical. */
--shadow-card: 0 0 0 1px hsl(220 16% 88% / 0.9), 0 1px 2px hsl(222 32% 9% / 0.04);
--shadow-card-hover: 0 0 0 1px hsl(220 16% 78% / 1), 0 2px 6px hsl(222 32% 9% / 0.06);
--shadow-stat: 0 0 0 1px hsl(220 16% 86% / 0.8);
--shadow-glow-primary: 0 0 0 1px hsl(174 64% 32% / 0.18), 0 4px 14px -4px hsl(174 64% 32% / 0.28);
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--font-sans: 'Inter Tight', 'InterFallback', system-ui, -apple-system, sans-serif;
--font-display: 'Inter Tight', 'Space Grotesk', 'InterFallback', system-ui, sans-serif;
--sidebar-background: 0 0% 100%;
--sidebar-foreground: 222 26% 22%;
--sidebar-primary: 174 64% 32%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 220 20% 90%;
--sidebar-accent-foreground: 222 26% 22%;
--sidebar-border: 220 16% 80%;
--sidebar-ring: 174 64% 32%;
}
.dark {
--background: 222 38% 5%;
--foreground: 210 28% 95%;
--card: 222 32% 8%;
--card-foreground: 210 28% 95%;
--popover: 222 32% 8%;
--popover-foreground: 210 28% 95%;
--primary: 174 78% 48%;
--primary-foreground: 222 38% 4%;
--secondary: 222 24% 12%;
--secondary-foreground: 210 22% 88%;
--muted: 222 22% 10%;
--muted-foreground: 218 16% 74%;
--accent: 38 100% 60%;
--accent-foreground: 222 38% 4%;
--destructive: 0 72% 55%;
--destructive-foreground: 210 40% 98%;
--border: 222 22% 14%;
--input: 222 22% 14%;
--ring: 174 78% 48%;
/* Custom tokens — Dark mode: cyber-tech, neon teal + amber */
/* 37U13.a — dark loss was 0 76% 58% = 4.13:1 on the shared market header
and failed AA for the 12.5–13px negative values (VIX, 10Y yield…).
Same red hue, lifted lightness only. */
--gain: 160 70% 48%;
--loss: 0 76% 66%;
--warning: 38 100% 60%;
--info: 195 100% 60%;
/* 37U13.a — dark semantic fills are bright, so on-fill text is near-black
(white on the dark loss fill measured 3.28:1 and failed AA). */
--on-gain: 222 38% 6%;
--on-loss: 222 38% 6%;
--on-warning: 222 38% 6%;
--on-info: 222 38% 6%;
--surface-elevated: 222 26% 10%;
--surface-hover: 222 22% 13%;
--glow-primary: 0 0 32px hsl(174 78% 48% / 0.32);
--glow-accent: 0 0 28px hsl(38 100% 60% / 0.25);
--glow-primary-soft: 0 0 18px hsl(174 78% 48% / 0.18);
--gradient-score: linear-gradient(135deg, hsl(174 78% 48%), hsl(160 65% 40%));
--gradient-surface: linear-gradient(180deg, hsl(222 30% 9%), hsl(222 38% 5%));
--gradient-header: linear-gradient(135deg, hsl(222 38% 5%), hsl(222 32% 8%));
--gradient-hero: radial-gradient(80% 60% at 50% 0%, hsl(174 78% 48% / 0.10) 0%, transparent 55%), linear-gradient(180deg, hsl(222 38% 5%) 0%, hsl(222 36% 6%) 100%);
--gradient-card-shine: linear-gradient(135deg, hsl(174 78% 48% / 0.04) 0%, transparent 45%, hsl(38 100% 60% / 0.03) 100%);
/* Dark mode: pure ring (no blur). Borders carry the entire surface
definition like TradingView's dark theme — flat, no glow on idle. */
--shadow-card: 0 0 0 1px hsl(220 14% 16% / 1);
--shadow-card-hover: 0 0 0 1px hsl(220 14% 24% / 1);
--shadow-stat: 0 0 0 1px hsl(220 14% 16% / 0.9);
--shadow-stat: 0 1px 3px hsl(0 0% 0% / 0.22);
--shadow-glow-primary: 0 0 24px hsl(174 78% 48% / 0.22), 0 0 48px hsl(174 78% 48% / 0.10);
--shadow-glow-accent: 0 0 22px hsl(38 100% 60% / 0.20), 0 0 44px hsl(38 100% 60% / 0.08);
--sidebar-background: 222 28% 8%;
--sidebar-foreground: 210 20% 82%;
--sidebar-primary: 174 65% 44%;
--sidebar-primary-foreground: 222 30% 4%;
--sidebar-accent: 222 20% 13%;
--sidebar-accent-foreground: 210 20% 82%;
--sidebar-border: 222 20% 15%;
--sidebar-ring: 174 65% 44%;
}
* {
border-color: hsl(var(--border));
}
body {
background-color: hsl(var(--background));
font-family: Inter, InterFallback, system-ui, -apple-system, sans-serif;
color: hsl(var(--foreground));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:where(.bg-primary):not([class*="bg-primary/"])
:where(.text-primary,body) {
color: hsl(var(--primary-foreground));
}
:where(.bg-accent):not([class*="bg-accent/"])
:where(.text-accent,body) {
color: hsl(var(--accent-foreground));
}
:where(.bg-destructive):not([class*="bg-destructive/"])
:where(.text-destructive,body) {
color: hsl(var(--destructive-foreground));
}
:where(.bg-gain):not([class*="bg-gain/"])
:where(.text-gain,body) {
color: hsl(var(--on-gain));
}
:where(.bg-loss):not([class*="bg-loss/"])
:where(.text-loss,body) {
color: hsl(var(--on-loss));
}
:where(.bg-warning):not([class*="bg-warning/"])
:where(.text-warning,body) {
color: hsl(var(--on-warning));
}
:where(.bg-info):not([class*="bg-info/"])
:where(.text-info,body) {
color: hsl(var(--on-info));
}
body {
font-family: var(--font-sans);
font-size: 14.5px;
line-height: 1.5;
/* Inter-tuned features: cv11 = single-storey 'a', ss03 = curved 'l' tail,
cv02 = open '4', tnum + lnum keep all inline numbers tabular & lining
so prices/percentages never "dance" on update (TradingView-grade). */
font-feature-settings: "cv11" 1, "ss03" 1, "cv02" 1, "ss01" 1, "tnum" 1, "lnum" 1;
font-variant-numeric: tabular-nums lining-nums;
font-optical-sizing: auto;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
position: relative;
}
/* Global lucide icon calibration — uniform 1.5 stroke (TV-grade crispness).
Components can override via `strokeWidth` prop when truly needed. */
svg.lucide {
stroke-width: 1.5;
}
/* Numeric utility: guaranteed tabular + mono for prices, %, scores.
Use … for any live-updating number. */
.\!num {
font-variant-numeric: tabular-nums lining-nums !important;
font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1 !important;
font-family: var(--font-mono) !important;
}
.num, .tabular {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
font-family: var(--font-mono);
}
/* ── View Transitions API: tab swaps (TradingView-grade) ──
180 ms fade + 6 px slide between dashboard tabs. The new tab paints on
top via z-index so there's no flash of empty document. Honors
prefers-reduced-motion via the @media block below. */
@keyframes vt-fade-slide-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes vt-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
::view-transition-old(root) {
animation: vt-fade-out 140ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
animation: vt-fade-slide-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none !important;
}
}
/* ── Row stagger for tables (Hot Radar, Ranking, Technicals) ──
[data-stagger] > * {
animation: stagger-row 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: calc(var(--stagger-i, 0) * 12ms);
}
/* Zero-config fallback: auto-stagger first 14 children via nth-child so
existing tables get the effect without touching JSX. */
[data-stagger] > *:nth-child(1) { animation-delay: 0ms; }
[data-stagger] > *:nth-child(2) { animation-delay: 12ms; }
[data-stagger] > *:nth-child(3) { animation-delay: 24ms; }
[data-stagger] > *:nth-child(4) { animation-delay: 36ms; }
[data-stagger] > *:nth-child(5) { animation-delay: 48ms; }
[data-stagger] > *:nth-child(6) { animation-delay: 60ms; }
[data-stagger] > *:nth-child(7) { animation-delay: 72ms; }
[data-stagger] > *:nth-child(8) { animation-delay: 84ms; }
[data-stagger] > *:nth-child(9) { animation-delay: 96ms; }
[data-stagger] > *:nth-child(10) { animation-delay: 108ms; }
[data-stagger] > *:nth-child(11) { animation-delay: 120ms; }
[data-stagger] > *:nth-child(12) { animation-delay: 132ms; }
[data-stagger] > *:nth-child(13) { animation-delay: 144ms; }
[data-stagger] > *:nth-child(n+14) { animation-delay: 156ms; }
@keyframes stagger-row {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
[data-stagger] > * { animation: none !important; }
}
/* Headings inherit Inter but get tighter tracking + display opsz */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
letter-spacing: -0.018em;
font-feature-settings: "cv11" 1, "ss01" 1, "ss03" 1;
}
h1 { letter-spacing: -0.025em; }
h2 { letter-spacing: -0.022em; }
/* Cyber backdrop — only in dark mode */
.dark body::before {
content: '';
position: fixed;
inset: 0;
background-image:
radial-gradient(80% 50% at 50% 0%, hsl(var(--primary) / 0.08) 0%, transparent 60%),
radial-gradient(60% 40% at 0% 100%, hsl(var(--accent) / 0.04) 0%, transparent 60%),
url('/circuit-pattern.svg');
background-repeat: no-repeat, no-repeat, repeat;
background-size: auto, auto, 320px 320px;
color: hsl(var(--primary));
opacity: 1;
pointer-events: none;
z-index: 0;
mix-blend-mode: screen;
}
.dark body > #root {
position: relative;
z-index: 1;
}
/* Focus-visible ring is defined below in the scrollbar block (brand-tinted halo). */
/* Selection color */
::-moz-selection {
background: hsl(var(--primary) / 0.2);
color: hsl(var(--foreground));
}
::selection {
background: hsl(var(--primary) / 0.2);
color: hsl(var(--foreground));
}
/* Scrollbar styling — ghost-thin, brand-tinted on hover.
6px gutter (was 8) for a quieter, TradingView-grade rail.
Track stays fully transparent; thumb fades in on hover. */
* {
scrollbar-width: thin;
scrollbar-color: hsl(var(--border) / 0.7) transparent;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: hsl(var(--border) / 0.55);
border-radius: 999px;
-webkit-transition: background-color 180ms ease;
transition: background-color 180ms ease;
}
::-webkit-scrollbar-thumb:hover {
background: hsl(var(--primary) / 0.55);
}
::-webkit-scrollbar-corner {
background: transparent;
}
/* Polished focus ring — 1.5px crisp halo via box-shadow so it doesn't
push layout (outline would shift adjacent elements by ring-offset).
Matches the ring-instead-of-shadow surface language from Step 3. */
:focus-visible {
outline: none;
box-shadow:
0 0 0 1px hsl(var(--background)),
0 0 0 2.5px hsl(var(--ring) / 0.65);
border-radius: 4px;
transition: box-shadow 140ms ease;
}
/* Native form controls keep an outline as a safety net */
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 1.5px solid hsl(var(--ring) / 0.7);
outline-offset: 1px;
box-shadow: none;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.\!container {
width: 100% !important;
margin-right: auto !important;
margin-left: auto !important;
padding-right: 2rem !important;
padding-left: 2rem !important;
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 2rem;
padding-left: 2rem;
}
@media (min-width: 1400px) {
.\!container {
max-width: 1400px !important;
}
.container {
max-width: 1400px;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
.\!visible {
visibility: visible !important;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.inset-x-3 {
left: 0.75rem;
right: 0.75rem;
}
.inset-y-0 {
top: 0px;
bottom: 0px;
}
.-bottom-0\.5 {
bottom: -0.125rem;
}
.-bottom-12 {
bottom: -3rem;
}
.-bottom-40 {
bottom: -10rem;
}
.-left-1\/3 {
left: -33.333333%;
}
.-left-12 {
left: -3rem;
}
.-left-2 {
left: -0.5rem;
}
.-left-40 {
left: -10rem;
}
.-left-\[9999px\] {
left: -9999px;
}
.-right-0\.5 {
right: -0.125rem;
}
.-right-1 {
right: -0.25rem;
}
.-right-1\.5 {
right: -0.375rem;
}
.-right-10 {
right: -2.5rem;
}
.-right-12 {
right: -3rem;
}
.-right-16 {
right: -4rem;
}
.-right-2 {
right: -0.5rem;
}
.-right-20 {
right: -5rem;
}
.-right-4 {
right: -1rem;
}
.-right-40 {
right: -10rem;
}
.-top-0\.5 {
top: -0.125rem;
}
.-top-1 {
top: -0.25rem;
}
.-top-1\.5 {
top: -0.375rem;
}
.-top-10 {
top: -2.5rem;
}
.-top-12 {
top: -3rem;
}
.-top-16 {
top: -4rem;
}
.-top-2 {
top: -0.5rem;
}
.-top-2\.5 {
top: -0.625rem;
}
.-top-20 {
top: -5rem;
}
.-top-40 {
top: -10rem;
}
.-top-6 {
top: -1.5rem;
}
.-top-7 {
top: -1.75rem;
}
.-top-9 {
top: -2.25rem;
}
.bottom-0 {
bottom: 0px;
}
.bottom-0\.5 {
bottom: 0.125rem;
}
.bottom-1 {
bottom: 0.25rem;
}
.bottom-1\.5 {
bottom: 0.375rem;
}
.bottom-2 {
bottom: 0.5rem;
}
.bottom-20 {
bottom: 5rem;
}
.bottom-3 {
bottom: 0.75rem;
}
.bottom-4 {
bottom: 1rem;
}
.bottom-\[5\.5rem\] {
bottom: 5.5rem;
}
.left-0 {
left: 0px;
}
.left-1 {
left: 0.25rem;
}
.left-1\.5 {
left: 0.375rem;
}
.left-1\/2 {
left: 50%;
}
.left-12 {
left: 3rem;
}
.left-2 {
left: 0.5rem;
}
.left-2\.5 {
left: 0.625rem;
}
.left-3 {
left: 0.75rem;
}
.left-4 {
left: 1rem;
}
.left-\[50\%\] {
left: 50%;
}
.right-0 {
right: 0px;
}
.right-0\.5 {
right: 0.125rem;
}
.right-1 {
right: 0.25rem;
}
.right-1\/2 {
right: 50%;
}
.right-2 {
right: 0.5rem;
}
.right-3 {
right: 0.75rem;
}
.right-4 {
right: 1rem;
}
.top-0 {
top: 0px;
}
.top-1 {
top: 0.25rem;
}
.top-1\.5 {
top: 0.375rem;
}
.top-1\/2 {
top: 50%;
}
.top-10 {
top: 2.5rem;
}
.top-12 {
top: 3rem;
}
.top-2 {
top: 0.5rem;
}
.top-20 {
top: 5rem;
}
.top-24 {
top: 6rem;
}
.top-3 {
top: 0.75rem;
}
.top-3\.5 {
top: 0.875rem;
}
.top-4 {
top: 1rem;
}
.top-5 {
top: 1.25rem;
}
.top-6 {
top: 1.5rem;
}
.top-\[-2px\] {
top: -2px;
}
.top-\[-3px\] {
top: -3px;
}
.top-\[1px\] {
top: 1px;
}
.top-\[50\%\] {
top: 50%;
}
.top-\[52px\] {
top: 52px;
}
.top-\[60\%\] {
top: 60%;
}
.top-\[96px\] {
top: 96px;
}
.top-\[var\(--header-offset\2c 56px\)\] {
top: var(--header-offset,56px);
}
.top-full {
top: 100%;
}
.isolate {
isolation: isolate;
}
.z-0 {
z-index: 0;
}
.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-\[1000\] {
z-index: 1000;
}
.z-\[100\] {
z-index: 100;
}
.z-\[1\] {
z-index: 1;
}
.z-\[200\] {
z-index: 200;
}
.z-\[60\] {
z-index: 60;
}
.z-\[70\] {
z-index: 70;
}
.z-\[80\] {
z-index: 80;
}
.z-\[90\] {
z-index: 90;
}
.z-\[9998\] {
z-index: 9998;
}
.z-\[9999\] {
z-index: 9999;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-last {
order: 9999;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-start-1 {
grid-column-start: 1;
}
.col-start-2 {
grid-column-start: 2;
}
.col-start-3 {
grid-column-start: 3;
}
.row-start-1 {
grid-row-start: 1;
}
.row-start-2 {
grid-row-start: 2;
}
.row-start-3 {
grid-row-start: 3;
}
.row-start-4 {
grid-row-start: 4;
}
.row-start-5 {
grid-row-start: 5;
}
.m-0 {
margin: 0px;
}
.m-1 {
margin: 0.25rem;
}
.m-2 {
margin: 0.5rem;
}
.m-3 {
margin: 0.75rem;
}
.-mx-1 {
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.-mx-1\.5 {
margin-left: -0.375rem;
margin-right: -0.375rem;
}
.-mx-2 {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.-mx-3 {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
.-mx-3\.5 {
margin-left: -0.875rem;
margin-right: -0.875rem;
}
.-mx-4 {
margin-left: -1rem;
margin-right: -1rem;
}
.mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.mx-0\.5 {
margin-left: 0.125rem;
margin-right: 0.125rem;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mx-1\.5 {
margin-left: 0.375rem;
margin-right: 0.375rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-3\.5 {
margin-left: 0.875rem;
margin-right: 0.875rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-0\.5 {
margin-top: 0.125rem;
margin-bottom: 0.125rem;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-1\.5 {
margin-top: 0.375rem;
margin-bottom: 0.375rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.my-px {
margin-top: 1px;
margin-bottom: 1px;
}
.-mb-px {
margin-bottom: -1px;
}
.-ml-0\.5 {
margin-left: -0.125rem;
}
.-ml-2 {
margin-left: -0.5rem;
}
.-ml-4 {
margin-left: -1rem;
}
.-mt-0\.5 {
margin-top: -0.125rem;
}
.-mt-1 {
margin-top: -0.25rem;
}
.-mt-2 {
margin-top: -0.5rem;
}
.-mt-4 {
margin-top: -1rem;
}
.mb-0\.5 {
margin-bottom: 0.125rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-1\.5 {
margin-bottom: 0.375rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-2\.5 {
margin-bottom: 0.625rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.ml-0 {
margin-left: 0px;
}
.ml-0\.5 {
margin-left: 0.125rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-1\.5 {
margin-left: 0.375rem;
}
.ml-12 {
margin-left: 3rem;
}
.ml-14 {
margin-left: 3.5rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.ml-4 {
margin-left: 1rem;
}
.ml-5 {
margin-left: 1.25rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.ml-auto {
margin-left: auto;
}
.mr-0\.5 {
margin-right: 0.125rem;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-1\.5 {
margin-right: 0.375rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-8 {
margin-right: 2rem;
}
.mr-auto {
margin-right: auto;
}
.mt-0 {
margin-top: 0px;
}
.mt-0\.5 {
margin-top: 0.125rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-1\.5 {
margin-top: 0.375rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-2\.5 {
margin-top: 0.625rem;
}
.mt-24 {
margin-top: 6rem;
}
.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-\[1px\] {
margin-top: 1px;
}
.mt-\[2px\] {
margin-top: 2px;
}
.mt-\[6px\] {
margin-top: 6px;
}
.mt-\[8px\] {
margin-top: 8px;
}
.mt-auto {
margin-top: auto;
}
.mt-px {
margin-top: 1px;
}
.box-border {
box-sizing: border-box;
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.\!block {
display: block !important;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.contents {
display: contents;
}
.\!hidden {
display: none !important;
}
.hidden {
display: none;
}
.aspect-\[1200\/630\] {
aspect-ratio: 1200/630;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.aspect-video {
aspect-ratio: 16 / 9;
}
.size-4 {
width: 1rem;
height: 1rem;
}
.\!h-\[92vh\] {
height: 92vh !important;
}
.h-0\.5 {
height: 0.125rem;
}
.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-32 {
height: 8rem;
}
.h-36 {
height: 9rem;
}
.h-4 {
height: 1rem;
}
.h-40 {
height: 10rem;
}
.h-44 {
height: 11rem;
}
.h-48 {
height: 12rem;
}
.h-5 {
height: 1.25rem;
}
.h-52 {
height: 13rem;
}
.h-56 {
height: 14rem;
}
.h-6 {
height: 1.5rem;
}
.h-64 {
height: 16rem;
}
.h-7 {
height: 1.75rem;
}
.h-72 {
height: 18rem;
}
.h-8 {
height: 2rem;
}
.h-9 {
height: 2.25rem;
}
.h-96 {
height: 24rem;
}
.h-\[1\.15rem\] {
height: 1.15rem;
}
.h-\[100dvh\] {
height: 100dvh;
}
.h-\[100px\] {
height: 100px;
}
.h-\[110px\] {
height: 110px;
}
.h-\[130px\] {
height: 130px;
}
.h-\[132px\] {
height: 132px;
}
.h-\[14px\] {
height: 14px;
}
.h-\[150px\] {
height: 150px;
}
.h-\[180px\] {
height: 180px;
}
.h-\[18px\] {
height: 18px;
}
.h-\[1px\] {
height: 1px;
}
.h-\[200px\] {
height: 200px;
}
.h-\[20px\] {
height: 20px;
}
.h-\[210px\] {
height: 210px;
}
.h-\[250px\] {
height: 250px;
}
.h-\[280px\] {
height: 280px;
}
.h-\[300px\] {
height: 300px;
}
.h-\[32px\] {
height: 32px;
}
.h-\[34px\] {
height: 34px;
}
.h-\[360px\] {
height: 360px;
}
.h-\[3px\] {
height: 3px;
}
.h-\[400px\] {
height: 400px;
}
.h-\[520px\] {
height: 520px;
}
.h-\[54px\] {
height: 54px;
}
.h-\[55dvh\] {
height: 55dvh;
}
.h-\[600px\] {
height: 600px;
}
.h-\[60vh\] {
height: 60vh;
}
.h-\[62px\] {
height: 62px;
}
.h-\[68px\] {
height: 68px;
}
.h-\[90px\] {
height: 90px;
}
.h-\[92px\] {
height: 92px;
}
.h-\[92vh\] {
height: 92vh;
}
.h-\[95vh\] {
height: 95vh;
}
.h-\[97dvh\] {
height: 97dvh;
}
.h-\[calc\(100\%-2\.5rem\)\] {
height: calc(100% - 2.5rem);
}
.h-\[calc\(100vh-260px\)\] {
height: calc(100vh - 260px);
}
.h-\[calc\(100vh-var\(--header-offset\2c 56px\)\)\] {
height: calc(100vh - var(--header-offset,56px));
}
.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-\[var\(--z-row-h\)\] {
height: var(--z-row-h);
}
.h-auto {
height: auto;
}
.h-fit {
height: -moz-fit-content;
height: fit-content;
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.h-screen {
height: 100vh;
}
.h-svh {
height: 100svh;
}
.\!max-h-\[92vh\] {
max-height: 92vh !important;
}
.max-h-14 {
max-height: 3.5rem;
}
.max-h-24 {
max-height: 6rem;
}
.max-h-28 {
max-height: 7rem;
}
.max-h-32 {
max-height: 8rem;
}
.max-h-40 {
max-height: 10rem;
}
.max-h-44 {
max-height: 11rem;
}
.max-h-48 {
max-height: 12rem;
}
.max-h-52 {
max-height: 13rem;
}
.max-h-56 {
max-height: 14rem;
}
.max-h-60 {
max-height: 15rem;
}
.max-h-64 {
max-height: 16rem;
}
.max-h-72 {
max-height: 18rem;
}
.max-h-8 {
max-height: 2rem;
}
.max-h-80 {
max-height: 20rem;
}
.max-h-96 {
max-height: 24rem;
}
.max-h-\[100px\] {
max-height: 100px;
}
.max-h-\[120px\] {
max-height: 120px;
}
.max-h-\[200px\] {
max-height: 200px;
}
.max-h-\[220px\] {
max-height: 220px;
}
.max-h-\[240px\] {
max-height: 240px;
}
.max-h-\[260px\] {
max-height: 260px;
}
.max-h-\[280px\] {
max-height: 280px;
}
.max-h-\[300px\] {
max-height: 300px;
}
.max-h-\[320px\] {
max-height: 320px;
}
.max-h-\[340px\] {
max-height: 340px;
}
.max-h-\[360px\] {
max-height: 360px;
}
.max-h-\[400px\] {
max-height: 400px;
}
.max-h-\[420px\] {
max-height: 420px;
}
.max-h-\[500px\] {
max-height: 500px;
}
.max-h-\[520px\] {
max-height: 520px;
}
.max-h-\[55dvh\] {
max-height: 55dvh;
}
.max-h-\[560px\] {
max-height: 560px;
}
.max-h-\[60vh\] {
max-height: 60vh;
}
.max-h-\[640px\] {
max-height: 640px;
}
.max-h-\[70vh\] {
max-height: 70vh;
}
.max-h-\[80px\] {
max-height: 80px;
}
.max-h-\[80vh\] {
max-height: 80vh;
}
.max-h-\[82vh\] {
max-height: 82vh;
}
.max-h-\[85dvh\] {
max-height: 85dvh;
}
.max-h-\[85vh\] {
max-height: 85vh;
}
.max-h-\[90dvh\] {
max-height: 90dvh;
}
.max-h-\[92dvh\] {
max-height: 92dvh;
}
.max-h-\[97dvh\] {
max-height: 97dvh;
}
.max-h-\[calc\(100\%-16px\)\] {
max-height: calc(100% - 16px);
}
.max-h-\[calc\(100vh-5rem\)\] {
max-height: calc(100vh - 5rem);
}
.max-h-\[min\(80dvh\2c 560px\)\] {
max-height: min(80dvh,560px);
}
.max-h-full {
max-height: 100%;
}
.max-h-screen {
max-height: 100vh;
}
.min-h-0 {
min-height: 0px;
}
.min-h-10 {
min-height: 2.5rem;
}
.min-h-11 {
min-height: 2.75rem;
}
.min-h-8 {
min-height: 2rem;
}
.min-h-9 {
min-height: 2.25rem;
}
.min-h-\[100px\] {
min-height: 100px;
}
.min-h-\[120px\] {
min-height: 120px;
}
.min-h-\[1rem\] {
min-height: 1rem;
}
.min-h-\[2\.2em\] {
min-height: 2.2em;
}
.min-h-\[200px\] {
min-height: 200px;
}
.min-h-\[24px\] {
min-height: 24px;
}
.min-h-\[28px\] {
min-height: 28px;
}
.min-h-\[30px\] {
min-height: 30px;
}
.min-h-\[32px\] {
min-height: 32px;
}
.min-h-\[34px\] {
min-height: 34px;
}
.min-h-\[36px\] {
min-height: 36px;
}
.min-h-\[38px\] {
min-height: 38px;
}
.min-h-\[44px\] {
min-height: 44px;
}
.min-h-\[48px\] {
min-height: 48px;
}
.min-h-\[560px\] {
min-height: 560px;
}
.min-h-\[56px\] {
min-height: 56px;
}
.min-h-\[600px\] {
min-height: 600px;
}
.min-h-\[60vh\] {
min-height: 60vh;
}
.min-h-\[62px\] {
min-height: 62px;
}
.min-h-\[64px\] {
min-height: 64px;
}
.min-h-\[80px\] {
min-height: 80px;
}
.min-h-\[84px\] {
min-height: 84px;
}
.min-h-full {
min-height: 100%;
}
.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-1\/3 {
width: 33.333333%;
}
.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-2\/3 {
width: 66.666667%;
}
.w-2\/5 {
width: 40%;
}
.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-3\/5 {
width: 60%;
}
.w-32 {
width: 8rem;
}
.w-36 {
width: 9rem;
}
.w-4 {
width: 1rem;
}
.w-4\/5 {
width: 80%;
}
.w-40 {
width: 10rem;
}
.w-44 {
width: 11rem;
}
.w-48 {
width: 12rem;
}
.w-5 {
width: 1.25rem;
}
.w-52 {
width: 13rem;
}
.w-56 {
width: 14rem;
}
.w-6 {
width: 1.5rem;
}
.w-60 {
width: 15rem;
}
.w-64 {
width: 16rem;
}
.w-7 {
width: 1.75rem;
}
.w-72 {
width: 18rem;
}
.w-8 {
width: 2rem;
}
.w-80 {
width: 20rem;
}
.w-9 {
width: 2.25rem;
}
.w-96 {
width: 24rem;
}
.w-\[--sidebar-width\] {
width: var(--sidebar-width);
}
.w-\[100px\] {
width: 100px;
}
.w-\[110px\] {
width: 110px;
}
.w-\[118px\] {
width: 118px;
}
.w-\[120px\] {
width: 120px;
}
.w-\[12px\] {
width: 12px;
}
.w-\[130px\] {
width: 130px;
}
.w-\[140px\] {
width: 140px;
}
.w-\[150px\] {
width: 150px;
}
.w-\[160px\] {
width: 160px;
}
.w-\[16px\] {
width: 16px;
}
.w-\[170px\] {
width: 170px;
}
.w-\[180px\] {
width: 180px;
}
.w-\[18px\] {
width: 18px;
}
.w-\[190px\] {
width: 190px;
}
.w-\[1px\] {
width: 1px;
}
.w-\[200px\] {
width: 200px;
}
.w-\[210px\] {
width: 210px;
}
.w-\[220px\] {
width: 220px;
}
.w-\[232px\] {
width: 232px;
}
.w-\[240px\] {
width: 240px;
}
.w-\[260px\] {
width: 260px;
}
.w-\[280px\] {
width: 280px;
}
.w-\[2px\] {
width: 2px;
}
.w-\[300px\] {
width: 300px;
}
.w-\[320px\] {
width: 320px;
}
.w-\[340px\] {
width: 340px;
}
.w-\[380px\] {
width: 380px;
}
.w-\[3px\] {
width: 3px;
}
.w-\[40px\] {
width: 40px;
}
.w-\[44px\] {
width: 44px;
}
.w-\[46px\] {
width: 46px;
}
.w-\[48px\] {
width: 48px;
}
.w-\[52px\] {
width: 52px;
}
.w-\[56px\] {
width: 56px;
}
.w-\[58px\] {
width: 58px;
}
.w-\[600px\] {
width: 600px;
}
.w-\[60px\] {
width: 60px;
}
.w-\[64px\] {
width: 64px;
}
.w-\[70px\] {
width: 70px;
}
.w-\[72px\] {
width: 72px;
}
.w-\[78px\] {
width: 78px;
}
.w-\[80px\] {
width: 80px;
}
.w-\[80vw\] {
width: 80vw;
}
.w-\[88px\] {
width: 88px;
}
.w-\[92\%\] {
width: 92%;
}
.w-\[96vw\] {
width: 96vw;
}
.w-\[97vw\] {
width: 97vw;
}
.w-\[calc\(100\%-1rem\)\] {
width: calc(100% - 1rem);
}
.w-\[min\(22rem\2c 90vw\)\] {
width: min(22rem,90vw);
}
.w-\[min\(360px\2c calc\(100vw-1\.5rem\)\)\] {
width: min(360px,calc(100vw - 1.5rem));
}
.w-auto {
width: auto;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
.w-max {
width: -moz-max-content;
width: max-content;
}
.w-px {
width: 1px;
}
.min-w-0 {
min-width: 0px;
}
.min-w-11 {
min-width: 2.75rem;
}
.min-w-5 {
min-width: 1.25rem;
}
.min-w-\[1\.15rem\] {
min-width: 1.15rem;
}
.min-w-\[1\.75rem\] {
min-width: 1.75rem;
}
.min-w-\[100px\] {
min-width: 100px;
}
.min-w-\[104px\] {
min-width: 104px;
}
.min-w-\[110px\] {
min-width: 110px;
}
.min-w-\[120px\] {
min-width: 120px;
}
.min-w-\[124px\] {
min-width: 124px;
}
.min-w-\[12rem\] {
min-width: 12rem;
}
.min-w-\[130px\] {
min-width: 130px;
}
.min-w-\[140px\] {
min-width: 140px;
}
.min-w-\[150px\] {
min-width: 150px;
}
.min-w-\[160px\] {
min-width: 160px;
}
.min-w-\[16px\] {
min-width: 16px;
}
.min-w-\[180px\] {
min-width: 180px;
}
.min-w-\[18px\] {
min-width: 18px;
}
.min-w-\[190px\] {
min-width: 190px;
}
.min-w-\[200px\] {
min-width: 200px;
}
.min-w-\[20px\] {
min-width: 20px;
}
.min-w-\[22px\] {
min-width: 22px;
}
.min-w-\[240px\] {
min-width: 240px;
}
.min-w-\[24px\] {
min-width: 24px;
}
.min-w-\[260px\] {
min-width: 260px;
}
.min-w-\[280px\] {
min-width: 280px;
}
.min-w-\[28px\] {
min-width: 28px;
}
.min-w-\[2rem\] {
min-width: 2rem;
}
.min-w-\[3\.5rem\] {
min-width: 3.5rem;
}
.min-w-\[34px\] {
min-width: 34px;
}
.min-w-\[36px\] {
min-width: 36px;
}
.min-w-\[380px\] {
min-width: 380px;
}
.min-w-\[3px\] {
min-width: 3px;
}
.min-w-\[40px\] {
min-width: 40px;
}
.min-w-\[42px\] {
min-width: 42px;
}
.min-w-\[44px\] {
min-width: 44px;
}
.min-w-\[48px\] {
min-width: 48px;
}
.min-w-\[4px\] {
min-width: 4px;
}
.min-w-\[50px\] {
min-width: 50px;
}
.min-w-\[52px\] {
min-width: 52px;
}
.min-w-\[560px\] {
min-width: 560px;
}
.min-w-\[56px\] {
min-width: 56px;
}
.min-w-\[58px\] {
min-width: 58px;
}
.min-w-\[60px\] {
min-width: 60px;
}
.min-w-\[640px\] {
min-width: 640px;
}
.min-w-\[720px\] {
min-width: 720px;
}
.min-w-\[72px\] {
min-width: 72px;
}
.min-w-\[74px\] {
min-width: 74px;
}
.min-w-\[76px\] {
min-width: 76px;
}
.min-w-\[80px\] {
min-width: 80px;
}
.min-w-\[8rem\] {
min-width: 8rem;
}
.min-w-\[900px\] {
min-width: 900px;
}
.min-w-\[90px\] {
min-width: 90px;
}
.min-w-\[92px\] {
min-width: 92px;
}
.min-w-\[980px\] {
min-width: 980px;
}
.min-w-\[9rem\] {
min-width: 9rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
min-width: var(--radix-select-trigger-width);
}
.min-w-full {
min-width: 100%;
}
.\!max-w-\[96vw\] {
max-width: 96vw !important;
}
.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-6xl {
max-width: 72rem;
}
.max-w-7xl {
max-width: 80rem;
}
.max-w-\[--skeleton-width\] {
max-width: var(--skeleton-width);
}
.max-w-\[100px\] {
max-width: 100px;
}
.max-w-\[110px\] {
max-width: 110px;
}
.max-w-\[120px\] {
max-width: 120px;
}
.max-w-\[130px\] {
max-width: 130px;
}
.max-w-\[140px\] {
max-width: 140px;
}
.max-w-\[14ch\] {
max-width: 14ch;
}
.max-w-\[14rem\] {
max-width: 14rem;
}
.max-w-\[1600px\] {
max-width: 1600px;
}
.max-w-\[160px\] {
max-width: 160px;
}
.max-w-\[16rem\] {
max-width: 16rem;
}
.max-w-\[180px\] {
max-width: 180px;
}
.max-w-\[200px\] {
max-width: 200px;
}
.max-w-\[220px\] {
max-width: 220px;
}
.max-w-\[22ch\] {
max-width: 22ch;
}
.max-w-\[22rem\] {
max-width: 22rem;
}
.max-w-\[240px\] {
max-width: 240px;
}
.max-w-\[24rem\] {
max-width: 24rem;
}
.max-w-\[260px\] {
max-width: 260px;
}
.max-w-\[280px\] {
max-width: 280px;
}
.max-w-\[28ch\] {
max-width: 28ch;
}
.max-w-\[28rem\] {
max-width: 28rem;
}
.max-w-\[300px\] {
max-width: 300px;
}
.max-w-\[320px\] {
max-width: 320px;
}
.max-w-\[360px\] {
max-width: 360px;
}
.max-w-\[400px\] {
max-width: 400px;
}
.max-w-\[420px\] {
max-width: 420px;
}
.max-w-\[46ch\] {
max-width: 46ch;
}
.max-w-\[520px\] {
max-width: 520px;
}
.max-w-\[55\%\] {
max-width: 55%;
}
.max-w-\[60\%\] {
max-width: 60%;
}
.max-w-\[60vw\] {
max-width: 60vw;
}
.max-w-\[65\%\] {
max-width: 65%;
}
.max-w-\[68ch\] {
max-width: 68ch;
}
.max-w-\[6ch\] {
max-width: 6ch;
}
.max-w-\[70ch\] {
max-width: 70ch;
}
.max-w-\[78\%\] {
max-width: 78%;
}
.max-w-\[80\%\] {
max-width: 80%;
}
.max-w-\[80px\] {
max-width: 80px;
}
.max-w-\[90\%\] {
max-width: 90%;
}
.max-w-\[92\%\] {
max-width: 92%;
}
.max-w-\[92vw\] {
max-width: 92vw;
}
.max-w-\[95vw\] {
max-width: 95vw;
}
.max-w-\[9rem\] {
max-width: 9rem;
}
.max-w-\[calc\(100\%-80px\)\] {
max-width: calc(100% - 80px);
}
.max-w-\[calc\(100vw-1\.5rem\)\] {
max-width: calc(100vw - 1.5rem);
}
.max-w-\[min\(32rem\2c 100\%\)\] {
max-width: min(32rem,100%);
}
.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-none {
max-width: none;
}
.max-w-prose {
max-width: 65ch;
}
.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-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;
}
.border-separate {
border-collapse: separate;
}
.border-spacing-0 {
--tw-border-spacing-x: 0px;
--tw-border-spacing-y: 0px;
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.-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-full {
--tw-translate-x: -100%;
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-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));
}
.translate-x-1 {
--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));
}
.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-6 {
--tw-translate-x: 1.5rem;
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-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-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));
}
.rotate-12 {
--tw-rotate: 12deg;
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));
}
.skew-x-12 {
--tw-skew-x: 12deg;
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));
}
.scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-75 {
--tw-scale-x: .75;
--tw-scale-y: .75;
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));
}
.transform-gpu {
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) 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 fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-fade-in {
animation: fade-in 0.25s ease-out;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.animate-marquee {
animation: marquee 60s linear infinite;
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.animate-ping {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes price-flash-down {
0% {
background-color: hsl(var(--loss) / 0.25);
}
100% {
background-color: transparent;
}
}
.animate-price-flash-down {
animation: price-flash-down 0.8s ease-out;
}
@keyframes price-flash-up {
0% {
background-color: hsl(var(--gain) / 0.25);
}
100% {
background-color: transparent;
}
}
.animate-price-flash-up {
animation: price-flash-up 0.8s ease-out;
}
@keyframes pulse {
50% {
opacity: .5;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-slide-up {
animation: slide-up 0.3s ease-out;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.cursor-crosshair {
cursor: crosshair;
}
.cursor-default {
cursor: default;
}
.cursor-grab {
cursor: grab;
}
.cursor-help {
cursor: help;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-wait {
cursor: wait;
}
.cursor-zoom-in {
cursor: zoom-in;
}
.touch-none {
touch-action: none;
}
.touch-pan-x {
--tw-pan-x: pan-x;
touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
}
.touch-pan-y {
--tw-pan-y: pan-y;
touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
}
.touch-manipulation {
touch-action: manipulation;
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.resize-none {
resize: none;
}
.resize {
resize: both;
}
.snap-x {
scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
--tw-scroll-snap-strictness: mandatory;
}
.snap-start {
scroll-snap-align: start;
}
.scroll-mt-20 {
scroll-margin-top: 5rem;
}
.scroll-mt-24 {
scroll-margin-top: 6rem;
}
.scroll-mt-40 {
scroll-margin-top: 10rem;
}
.list-inside {
list-style-position: inside;
}
.list-disc {
list-style-type: disc;
}
.list-none {
list-style-type: none;
}
.auto-rows-fr {
grid-auto-rows: minmax(0, 1fr);
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, 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-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1\.25rem_minmax\(0\2c 1fr\)_auto\] {
grid-template-columns: 1.25rem minmax(0,1fr) auto;
}
.grid-cols-\[1\.4fr_0\.9fr_0\.9fr_0\.9fr\] {
grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr;
}
.grid-cols-\[1\.4fr_repeat\(3\2c 1fr\)\] {
grid-template-columns: 1.4fr repeat(3,1fr);
}
.grid-cols-\[110px_1fr_70px_70px_80px\] {
grid-template-columns: 110px 1fr 70px 70px 80px;
}
.grid-cols-\[1fr\] {
grid-template-columns: 1fr;
}
.grid-cols-\[1fr_72px_88px_88px_1fr\] {
grid-template-columns: 1fr 72px 88px 88px 1fr;
}
.grid-cols-\[1fr_auto\] {
grid-template-columns: 1fr auto;
}
.grid-cols-\[2\.25rem_minmax\(0\2c 1fr\)_auto\] {
grid-template-columns: 2.25rem minmax(0,1fr) auto;
}
.grid-cols-\[2\.5rem_3\.5rem_1\.5rem_1fr_4\.5rem_4\.5rem_4\.5rem_3\.5rem\] {
grid-template-columns: 2.5rem 3.5rem 1.5rem 1fr 4.5rem 4.5rem 4.5rem 3.5rem;
}
.grid-cols-\[20px_minmax\(0\2c 1fr\)_64px_64px_56px\] {
grid-template-columns: 20px minmax(0,1fr) 64px 64px 56px;
}
.grid-cols-\[24px_1fr_auto\] {
grid-template-columns: 24px 1fr auto;
}
.grid-cols-\[40px_1fr_70px_80px_80px_70px_60px_36px_36px\] {
grid-template-columns: 40px 1fr 70px 80px 80px 70px 60px 36px 36px;
}
.grid-cols-\[40px_1fr_auto\] {
grid-template-columns: 40px 1fr auto;
}
.grid-cols-\[40px_minmax\(0\2c 1fr\)_auto\] {
grid-template-columns: 40px minmax(0,1fr) auto;
}
.grid-cols-\[44px_60px_32px_1fr_80px_80px_80px_72px\] {
grid-template-columns: 44px 60px 32px 1fr 80px 80px 80px 72px;
}
.grid-cols-\[64px_1fr_1fr_88px\] {
grid-template-columns: 64px 1fr 1fr 88px;
}
.grid-cols-\[auto_1fr\] {
grid-template-columns: auto 1fr;
}
.grid-cols-\[auto_1fr_auto\] {
grid-template-columns: auto 1fr auto;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-stretch {
justify-content: stretch;
}
.gap-0 {
gap: 0px;
}
.gap-0\.5 {
gap: 0.125rem;
}
.gap-1 {
gap: 0.25rem;
}
.gap-1\.5 {
gap: 0.375rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-2\.5 {
gap: 0.625rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-3\.5 {
gap: 0.875rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-\[2px\] {
gap: 2px;
}
.gap-px {
gap: 1px;
}
.gap-x-1\.5 {
-moz-column-gap: 0.375rem;
column-gap: 0.375rem;
}
.gap-x-2 {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.gap-x-2\.5 {
-moz-column-gap: 0.625rem;
column-gap: 0.625rem;
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-x-4 {
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.gap-x-5 {
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.gap-y-0\.5 {
row-gap: 0.125rem;
}
.gap-y-1 {
row-gap: 0.25rem;
}
.gap-y-1\.5 {
row-gap: 0.375rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-14 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-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));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
border-color: hsl(var(--border));
}
.divide-border\/15 > :not([hidden]) ~ :not([hidden]) {
border-color: hsl(var(--border) / 0.15);
}
.divide-border\/20 > :not([hidden]) ~ :not([hidden]) {
border-color: hsl(var(--border) / 0.2);
}
.divide-border\/30 > :not([hidden]) ~ :not([hidden]) {
border-color: hsl(var(--border) / 0.3);
}
.divide-border\/40 > :not([hidden]) ~ :not([hidden]) {
border-color: hsl(var(--border) / 0.4);
}
.divide-border\/50 > :not([hidden]) ~ :not([hidden]) {
border-color: hsl(var(--border) / 0.5);
}
.divide-border\/60 > :not([hidden]) ~ :not([hidden]) {
border-color: hsl(var(--border) / 0.6);
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-stretch {
align-self: stretch;
}
.justify-self-end {
justify-self: end;
}
.overflow-auto {
overflow: auto;
}
.\!overflow-hidden {
overflow: hidden !important;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overscroll-contain {
overscroll-behavior: contain;
}
.scroll-smooth {
scroll-behavior: smooth;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hyphens-none {
-webkit-hyphens: none;
hyphens: none;
}
.hyphens-auto {
-webkit-hyphens: auto;
hyphens: auto;
}
.whitespace-normal {
white-space: normal;
}
.whitespace-nowrap {
white-space: nowrap;
}
.whitespace-pre-line {
white-space: pre-line;
}
.whitespace-pre-wrap {
white-space: pre-wrap;
}
.text-balance {
text-wrap: balance;
}
.text-pretty {
text-wrap: pretty;
}
.break-words {
overflow-wrap: break-word;
}
.break-all {
word-break: break-all;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-\[2px\] {
border-radius: 2px;
}
.rounded-\[3px\] {
border-radius: 3px;
}
.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-terminal {
border-radius: var(--z-radius-md);
}
.rounded-terminal-lg {
border-radius: var(--z-radius-lg);
}
.rounded-terminal-sm {
border-radius: var(--z-radius-sm);
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-b-sm {
border-bottom-right-radius: calc(var(--radius) - 4px);
border-bottom-left-radius: calc(var(--radius) - 4px);
}
.rounded-l-full {
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.rounded-r {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.rounded-r-full {
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
}
.rounded-t {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.rounded-t-2xl {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.rounded-t-\[10px\] {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.rounded-t-sm {
border-top-left-radius: calc(var(--radius) - 4px);
border-top-right-radius: calc(var(--radius) - 4px);
}
.rounded-t-xl {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.rounded-bl-md {
border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-bl-sm {
border-bottom-left-radius: calc(var(--radius) - 4px);
}
.rounded-br-md {
border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-br-sm {
border-bottom-right-radius: calc(var(--radius) - 4px);
}
.rounded-tl-sm {
border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
border-width: 1px;
}
.border-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-l-4 {
border-left-width: 4px;
}
.border-l-\[3px\] {
border-left-width: 3px;
}
.border-r {
border-right-width: 1px;
}
.border-t {
border-top-width: 1px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-dashed {
border-style: dashed;
}
.border-none {
border-style: none;
}
.border-\[--color-border\] {
border-color: var(--color-border);
}
.border-\[hsl\(var\(--gain\)\/0\.35\)\] {
border-color: hsl(var(--gain)/0.35);
}
.border-\[hsl\(var\(--loss\)\/0\.35\)\] {
border-color: hsl(var(--loss)/0.35);
}
.border-accent {
border-color: hsl(var(--accent));
}
.border-accent\/20 {
border-color: hsl(var(--accent) / 0.2);
}
.border-accent\/30 {
border-color: hsl(var(--accent) / 0.3);
}
.border-accent\/40 {
border-color: hsl(var(--accent) / 0.4);
}
.border-action\/45 {
border-color: hsl(var(--z-action) / 0.45);
}
.border-action\/50 {
border-color: hsl(var(--z-action) / 0.5);
}
.border-amber-400\/30 {
border-color: rgb(251 191 36 / 0.3);
}
.border-amber-400\/40 {
border-color: rgb(251 191 36 / 0.4);
}
.border-amber-500\/10 {
border-color: rgb(245 158 11 / 0.1);
}
.border-amber-500\/15 {
border-color: rgb(245 158 11 / 0.15);
}
.border-amber-500\/20 {
border-color: rgb(245 158 11 / 0.2);
}
.border-amber-500\/25 {
border-color: rgb(245 158 11 / 0.25);
}
.border-amber-500\/30 {
border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/35 {
border-color: rgb(245 158 11 / 0.35);
}
.border-amber-500\/40 {
border-color: rgb(245 158 11 / 0.4);
}
.border-amber-500\/50 {
border-color: rgb(245 158 11 / 0.5);
}
.border-amber-500\/60 {
border-color: rgb(245 158 11 / 0.6);
}
.border-background {
border-color: hsl(var(--background));
}
.border-blue-500\/20 {
border-color: rgb(59 130 246 / 0.2);
}
.border-blue-500\/30 {
border-color: rgb(59 130 246 / 0.3);
}
.border-border {
border-color: hsl(var(--border));
}
.border-border\/20 {
border-color: hsl(var(--border) / 0.2);
}
.border-border\/30 {
border-color: hsl(var(--border) / 0.3);
}
.border-border\/40 {
border-color: hsl(var(--border) / 0.4);
}
.border-border\/50 {
border-color: hsl(var(--border) / 0.5);
}
.border-border\/60 {
border-color: hsl(var(--border) / 0.6);
}
.border-border\/70 {
border-color: hsl(var(--border) / 0.7);
}
.border-border\/80 {
border-color: hsl(var(--border) / 0.8);
}
.border-card {
border-color: hsl(var(--card));
}
.border-current {
border-color: currentColor;
}
.border-cyan-500\/30 {
border-color: rgb(6 182 212 / 0.3);
}
.border-destructive {
border-color: hsl(var(--destructive));
}
.border-destructive\/15 {
border-color: hsl(var(--destructive) / 0.15);
}
.border-destructive\/20 {
border-color: hsl(var(--destructive) / 0.2);
}
.border-destructive\/25 {
border-color: hsl(var(--destructive) / 0.25);
}
.border-destructive\/30 {
border-color: hsl(var(--destructive) / 0.3);
}
.border-destructive\/40 {
border-color: hsl(var(--destructive) / 0.4);
}
.border-destructive\/50 {
border-color: hsl(var(--destructive) / 0.5);
}
.border-destructive\/60 {
border-color: hsl(var(--destructive) / 0.6);
}
.border-emerald-500 {
--tw-border-opacity: 1;
border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-emerald-500\/10 {
border-color: rgb(16 185 129 / 0.1);
}
.border-emerald-500\/20 {
border-color: rgb(16 185 129 / 0.2);
}
.border-emerald-500\/30 {
border-color: rgb(16 185 129 / 0.3);
}
.border-emerald-500\/35 {
border-color: rgb(16 185 129 / 0.35);
}
.border-emerald-500\/40 {
border-color: rgb(16 185 129 / 0.4);
}
.border-emerald-500\/50 {
border-color: rgb(16 185 129 / 0.5);
}
.border-foreground\/30 {
border-color: hsl(var(--foreground) / 0.3);
}
.border-gain {
border-color: hsl(var(--gain));
}
.border-gain\/15 {
border-color: hsl(var(--gain) / 0.15);
}
.border-gain\/20 {
border-color: hsl(var(--gain) / 0.2);
}
.border-gain\/25 {
border-color: hsl(var(--gain) / 0.25);
}
.border-gain\/30 {
border-color: hsl(var(--gain) / 0.3);
}
.border-gain\/40 {
border-color: hsl(var(--gain) / 0.4);
}
.border-gain\/50 {
border-color: hsl(var(--gain) / 0.5);
}
.border-hairline {
border-color: hsl(var(--z-hairline));
}
.border-hairline\/60 {
border-color: hsl(var(--z-hairline) / 0.6);
}
.border-info {
border-color: hsl(var(--info));
}
.border-info\/20 {
border-color: hsl(var(--info) / 0.2);
}
.border-info\/30 {
border-color: hsl(var(--info) / 0.3);
}
.border-info\/40 {
border-color: hsl(var(--info) / 0.4);
}
.border-input {
border-color: hsl(var(--input));
}
.border-intel\/45 {
border-color: hsl(var(--z-intel) / 0.45);
}
.border-live\/40 {
border-color: hsl(var(--z-live) / 0.4);
}
.border-live\/45 {
border-color: hsl(var(--z-live) / 0.45);
}
.border-loss {
border-color: hsl(var(--loss));
}
.border-loss\/15 {
border-color: hsl(var(--loss) / 0.15);
}
.border-loss\/20 {
border-color: hsl(var(--loss) / 0.2);
}
.border-loss\/25 {
border-color: hsl(var(--loss) / 0.25);
}
.border-loss\/30 {
border-color: hsl(var(--loss) / 0.3);
}
.border-loss\/35 {
border-color: hsl(var(--loss) / 0.35);
}
.border-loss\/40 {
border-color: hsl(var(--loss) / 0.4);
}
.border-loss\/50 {
border-color: hsl(var(--loss) / 0.5);
}
.border-muted {
border-color: hsl(var(--muted));
}
.border-muted-foreground\/10 {
border-color: hsl(var(--muted-foreground) / 0.1);
}
.border-muted-foreground\/20 {
border-color: hsl(var(--muted-foreground) / 0.2);
}
.border-muted-foreground\/30 {
border-color: hsl(var(--muted-foreground) / 0.3);
}
.border-muted-foreground\/40 {
border-color: hsl(var(--muted-foreground) / 0.4);
}
.border-orange-400\/35 {
border-color: rgb(251 146 60 / 0.35);
}
.border-orange-500\/20 {
border-color: rgb(249 115 22 / 0.2);
}
.border-orange-500\/30 {
border-color: rgb(249 115 22 / 0.3);
}
.border-orange-500\/40 {
border-color: rgb(249 115 22 / 0.4);
}
.border-pink-500\/30 {
border-color: rgb(236 72 153 / 0.3);
}
.border-primary {
border-color: hsl(var(--primary));
}
.border-primary\/10 {
border-color: hsl(var(--primary) / 0.1);
}
.border-primary\/15 {
border-color: hsl(var(--primary) / 0.15);
}
.border-primary\/20 {
border-color: hsl(var(--primary) / 0.2);
}
.border-primary\/25 {
border-color: hsl(var(--primary) / 0.25);
}
.border-primary\/30 {
border-color: hsl(var(--primary) / 0.3);
}
.border-primary\/35 {
border-color: hsl(var(--primary) / 0.35);
}
.border-primary\/40 {
border-color: hsl(var(--primary) / 0.4);
}
.border-primary\/50 {
border-color: hsl(var(--primary) / 0.5);
}
.border-primary\/60 {
border-color: hsl(var(--primary) / 0.6);
}
.border-red-500\/10 {
border-color: rgb(239 68 68 / 0.1);
}
.border-red-500\/20 {
border-color: rgb(239 68 68 / 0.2);
}
.border-red-500\/30 {
border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/35 {
border-color: rgb(239 68 68 / 0.35);
}
.border-red-500\/40 {
border-color: rgb(239 68 68 / 0.4);
}
.border-red-500\/50 {
border-color: rgb(239 68 68 / 0.5);
}
.border-rose-500\/20 {
border-color: rgb(244 63 94 / 0.2);
}
.border-rose-500\/30 {
border-color: rgb(244 63 94 / 0.3);
}
.border-rose-500\/40 {
border-color: rgb(244 63 94 / 0.4);
}
.border-rose-500\/50 {
border-color: rgb(244 63 94 / 0.5);
}
.border-rose-500\/60 {
border-color: rgb(244 63 94 / 0.6);
}
.border-sidebar-border {
border-color: hsl(var(--sidebar-border));
}
.border-sky-500\/25 {
border-color: rgb(14 165 233 / 0.25);
}
.border-sky-500\/30 {
border-color: rgb(14 165 233 / 0.3);
}
.border-sky-500\/35 {
border-color: rgb(14 165 233 / 0.35);
}
.border-sky-500\/40 {
border-color: rgb(14 165 233 / 0.4);
}
.border-slate-500\/30 {
border-color: rgb(100 116 139 / 0.3);
}
.border-transparent {
border-color: transparent;
}
.border-violet-500\/20 {
border-color: rgb(139 92 246 / 0.2);
}
.border-violet-500\/30 {
border-color: rgb(139 92 246 / 0.3);
}
.border-warning {
border-color: hsl(var(--warning));
}
.border-warning\/15 {
border-color: hsl(var(--warning) / 0.15);
}
.border-warning\/20 {
border-color: hsl(var(--warning) / 0.2);
}
.border-warning\/25 {
border-color: hsl(var(--warning) / 0.25);
}
.border-warning\/30 {
border-color: hsl(var(--warning) / 0.3);
}
.border-warning\/40 {
border-color: hsl(var(--warning) / 0.4);
}
.border-warning\/45 {
border-color: hsl(var(--warning) / 0.45);
}
.border-warning\/50 {
border-color: hsl(var(--warning) / 0.5);
}
.border-warning\/60 {
border-color: hsl(var(--warning) / 0.6);
}
.border-yellow-500 {
--tw-border-opacity: 1;
border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-yellow-500\/40 {
border-color: rgb(234 179 8 / 0.4);
}
.border-yellow-500\/50 {
border-color: rgb(234 179 8 / 0.5);
}
.border-y-border {
border-top-color: hsl(var(--border));
border-bottom-color: hsl(var(--border));
}
.border-l-amber-500 {
--tw-border-opacity: 1;
border-left-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-l-amber-500\/25 {
border-left-color: rgb(245 158 11 / 0.25);
}
.border-l-blue-500 {
--tw-border-opacity: 1;
border-left-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-l-border {
border-left-color: hsl(var(--border));
}
.border-l-destructive {
border-left-color: hsl(var(--destructive));
}
.border-l-emerald-500\/70 {
border-left-color: rgb(16 185 129 / 0.7);
}
.border-l-gain {
border-left-color: hsl(var(--gain));
}
.border-l-gain\/70 {
border-left-color: hsl(var(--gain) / 0.7);
}
.border-l-loss\/50 {
border-left-color: hsl(var(--loss) / 0.5);
}
.border-l-loss\/70 {
border-left-color: hsl(var(--loss) / 0.7);
}
.border-l-primary {
border-left-color: hsl(var(--primary));
}
.border-l-red-500\/70 {
border-left-color: rgb(239 68 68 / 0.7);
}
.border-l-transparent {
border-left-color: transparent;
}
.border-r-border {
border-right-color: hsl(var(--border));
}
.border-t-primary {
border-top-color: hsl(var(--primary));
}
.border-t-transparent {
border-top-color: transparent;
}
.bg-\[--color-bg\] {
background-color: var(--color-bg);
}
.bg-\[hsl\(var\(--accent\)\)\] {
background-color: hsl(var(--accent));
}
.bg-\[hsl\(var\(--destructive\)\)\] {
background-color: hsl(var(--destructive));
}
.bg-\[hsl\(var\(--gain\)\/0\.12\)\] {
background-color: hsl(var(--gain)/0.12);
}
.bg-\[hsl\(var\(--info\)\)\] {
background-color: hsl(var(--info));
}
.bg-\[hsl\(var\(--loss\)\/0\.12\)\] {
background-color: hsl(var(--loss)/0.12);
}
.bg-\[hsl\(var\(--success\)\)\] {
background-color: hsl(var(--success));
}
.bg-\[hsl\(var\(--warning\)\)\] {
background-color: hsl(var(--warning));
}
.bg-accent {
background-color: hsl(var(--accent));
}
.bg-accent\/10 {
background-color: hsl(var(--accent) / 0.1);
}
.bg-accent\/15 {
background-color: hsl(var(--accent) / 0.15);
}
.bg-accent\/20 {
background-color: hsl(var(--accent) / 0.2);
}
.bg-accent\/5 {
background-color: hsl(var(--accent) / 0.05);
}
.bg-accent\/60 {
background-color: hsl(var(--accent) / 0.6);
}
.bg-accent\/80 {
background-color: hsl(var(--accent) / 0.8);
}
.bg-accent\/\[0\.04\] {
background-color: hsl(var(--accent) / 0.04);
}
.bg-action {
background-color: hsl(var(--z-action));
}
.bg-action\/15 {
background-color: hsl(var(--z-action) / 0.15);
}
.bg-amber-400\/20 {
background-color: rgb(251 191 36 / 0.2);
}
.bg-amber-400\/70 {
background-color: rgb(251 191 36 / 0.7);
}
.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\/15 {
background-color: rgb(245 158 11 / 0.15);
}
.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-amber-500\/50 {
background-color: rgb(245 158 11 / 0.5);
}
.bg-amber-500\/60 {
background-color: rgb(245 158 11 / 0.6);
}
.bg-amber-500\/70 {
background-color: rgb(245 158 11 / 0.7);
}
.bg-amber-500\/\[0\.03\] {
background-color: rgb(245 158 11 / 0.03);
}
.bg-amber-500\/\[0\.04\] {
background-color: rgb(245 158 11 / 0.04);
}
.bg-amber-600 {
--tw-bg-opacity: 1;
background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-background {
background-color: hsl(var(--background));
}
.bg-background\/25 {
background-color: hsl(var(--background) / 0.25);
}
.bg-background\/30 {
background-color: hsl(var(--background) / 0.3);
}
.bg-background\/40 {
background-color: hsl(var(--background) / 0.4);
}
.bg-background\/50 {
background-color: hsl(var(--background) / 0.5);
}
.bg-background\/60 {
background-color: hsl(var(--background) / 0.6);
}
.bg-background\/70 {
background-color: hsl(var(--background) / 0.7);
}
.bg-background\/80 {
background-color: hsl(var(--background) / 0.8);
}
.bg-background\/85 {
background-color: hsl(var(--background) / 0.85);
}
.bg-background\/90 {
background-color: hsl(var(--background) / 0.9);
}
.bg-background\/95 {
background-color: hsl(var(--background) / 0.95);
}
.bg-black\/40 {
background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/80 {
background-color: rgb(0 0 0 / 0.8);
}
.bg-blue-500\/10 {
background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-500\/15 {
background-color: rgb(59 130 246 / 0.15);
}
.bg-blue-500\/5 {
background-color: rgb(59 130 246 / 0.05);
}
.bg-border {
background-color: hsl(var(--border));
}
.bg-border\/30 {
background-color: hsl(var(--border) / 0.3);
}
.bg-border\/40 {
background-color: hsl(var(--border) / 0.4);
}
.bg-border\/50 {
background-color: hsl(var(--border) / 0.5);
}
.bg-border\/60 {
background-color: hsl(var(--border) / 0.6);
}
.bg-border\/70 {
background-color: hsl(var(--border) / 0.7);
}
.bg-canvas {
background-color: hsl(var(--z-canvas));
}
.bg-card {
background-color: hsl(var(--card));
}
.bg-card\/20 {
background-color: hsl(var(--card) / 0.2);
}
.bg-card\/30 {
background-color: hsl(var(--card) / 0.3);
}
.bg-card\/40 {
background-color: hsl(var(--card) / 0.4);
}
.bg-card\/50 {
background-color: hsl(var(--card) / 0.5);
}
.bg-card\/60 {
background-color: hsl(var(--card) / 0.6);
}
.bg-card\/70 {
background-color: hsl(var(--card) / 0.7);
}
.bg-card\/80 {
background-color: hsl(var(--card) / 0.8);
}
.bg-card\/90 {
background-color: hsl(var(--card) / 0.9);
}
.bg-card\/95 {
background-color: hsl(var(--card) / 0.95);
}
.bg-current {
background-color: currentColor;
}
.bg-cyan-500\/10 {
background-color: rgb(6 182 212 / 0.1);
}
.bg-cyan-500\/5 {
background-color: rgb(6 182 212 / 0.05);
}
.bg-destructive {
background-color: hsl(var(--destructive));
}
.bg-destructive\/10 {
background-color: hsl(var(--destructive) / 0.1);
}
.bg-destructive\/15 {
background-color: hsl(var(--destructive) / 0.15);
}
.bg-destructive\/20 {
background-color: hsl(var(--destructive) / 0.2);
}
.bg-destructive\/5 {
background-color: hsl(var(--destructive) / 0.05);
}
.bg-destructive\/70 {
background-color: hsl(var(--destructive) / 0.7);
}
.bg-destructive\/80 {
background-color: hsl(var(--destructive) / 0.8);
}
.bg-destructive\/90 {
background-color: hsl(var(--destructive) / 0.9);
}
.bg-emerald-400 {
--tw-bg-opacity: 1;
background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
--tw-bg-opacity: 1;
background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/20 {
background-color: rgb(16 185 129 / 0.2);
}
.bg-emerald-500\/5 {
background-color: rgb(16 185 129 / 0.05);
}
.bg-emerald-600 {
--tw-bg-opacity: 1;
background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-foreground {
background-color: hsl(var(--foreground));
}
.bg-foreground\/10 {
background-color: hsl(var(--foreground) / 0.1);
}
.bg-foreground\/15 {
background-color: hsl(var(--foreground) / 0.15);
}
.bg-gain {
background-color: hsl(var(--gain));
}
.bg-gain\/10 {
background-color: hsl(var(--gain) / 0.1);
}
.bg-gain\/15 {
background-color: hsl(var(--gain) / 0.15);
}
.bg-gain\/20 {
background-color: hsl(var(--gain) / 0.2);
}
.bg-gain\/30 {
background-color: hsl(var(--gain) / 0.3);
}
.bg-gain\/5 {
background-color: hsl(var(--gain) / 0.05);
}
.bg-gain\/60 {
background-color: hsl(var(--gain) / 0.6);
}
.bg-gain\/70 {
background-color: hsl(var(--gain) / 0.7);
}
.bg-gain\/80 {
background-color: hsl(var(--gain) / 0.8);
}
.bg-gain\/\[0\.04\] {
background-color: hsl(var(--gain) / 0.04);
}
.bg-gain\/\[0\.05\] {
background-color: hsl(var(--gain) / 0.05);
}
.bg-gain\/\[0\.07\] {
background-color: hsl(var(--gain) / 0.07);
}
.bg-hairline {
background-color: hsl(var(--z-hairline));
}
.bg-indigo-500\/15 {
background-color: rgb(99 102 241 / 0.15);
}
.bg-info {
background-color: hsl(var(--info));
}
.bg-info\/10 {
background-color: hsl(var(--info) / 0.1);
}
.bg-info\/15 {
background-color: hsl(var(--info) / 0.15);
}
.bg-info\/20 {
background-color: hsl(var(--info) / 0.2);
}
.bg-info\/5 {
background-color: hsl(var(--info) / 0.05);
}
.bg-info\/60 {
background-color: hsl(var(--info) / 0.6);
}
.bg-info\/70 {
background-color: hsl(var(--info) / 0.7);
}
.bg-info\/\[0\.07\] {
background-color: hsl(var(--info) / 0.07);
}
.bg-inherit {
background-color: inherit;
}
.bg-intel {
background-color: hsl(var(--z-intel));
}
.bg-live {
background-color: hsl(var(--z-live));
}
.bg-loss {
background-color: hsl(var(--loss));
}
.bg-loss\/10 {
background-color: hsl(var(--loss) / 0.1);
}
.bg-loss\/15 {
background-color: hsl(var(--loss) / 0.15);
}
.bg-loss\/20 {
background-color: hsl(var(--loss) / 0.2);
}
.bg-loss\/5 {
background-color: hsl(var(--loss) / 0.05);
}
.bg-loss\/60 {
background-color: hsl(var(--loss) / 0.6);
}
.bg-loss\/70 {
background-color: hsl(var(--loss) / 0.7);
}
.bg-loss\/80 {
background-color: hsl(var(--loss) / 0.8);
}
.bg-loss\/\[0\.01\] {
background-color: hsl(var(--loss) / 0.01);
}
.bg-loss\/\[0\.04\] {
background-color: hsl(var(--loss) / 0.04);
}
.bg-loss\/\[0\.05\] {
background-color: hsl(var(--loss) / 0.05);
}
.bg-loss\/\[0\.07\] {
background-color: hsl(var(--loss) / 0.07);
}
.bg-muted {
background-color: hsl(var(--muted));
}
.bg-muted-foreground {
background-color: hsl(var(--muted-foreground));
}
.bg-muted-foreground\/15 {
background-color: hsl(var(--muted-foreground) / 0.15);
}
.bg-muted-foreground\/20 {
background-color: hsl(var(--muted-foreground) / 0.2);
}
.bg-muted-foreground\/30 {
background-color: hsl(var(--muted-foreground) / 0.3);
}
.bg-muted-foreground\/40 {
background-color: hsl(var(--muted-foreground) / 0.4);
}
.bg-muted-foreground\/60 {
background-color: hsl(var(--muted-foreground) / 0.6);
}
.bg-muted-foreground\/70 {
background-color: hsl(var(--muted-foreground) / 0.7);
}
.bg-muted\/10 {
background-color: hsl(var(--muted) / 0.1);
}
.bg-muted\/15 {
background-color: hsl(var(--muted) / 0.15);
}
.bg-muted\/20 {
background-color: hsl(var(--muted) / 0.2);
}
.bg-muted\/25 {
background-color: hsl(var(--muted) / 0.25);
}
.bg-muted\/30 {
background-color: hsl(var(--muted) / 0.3);
}
.bg-muted\/40 {
background-color: hsl(var(--muted) / 0.4);
}
.bg-muted\/5 {
background-color: hsl(var(--muted) / 0.05);
}
.bg-muted\/50 {
background-color: hsl(var(--muted) / 0.5);
}
.bg-muted\/60 {
background-color: hsl(var(--muted) / 0.6);
}
.bg-muted\/70 {
background-color: hsl(var(--muted) / 0.7);
}
.bg-muted\/80 {
background-color: hsl(var(--muted) / 0.8);
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/10 {
background-color: rgb(249 115 22 / 0.1);
}
.bg-orange-500\/15 {
background-color: rgb(249 115 22 / 0.15);
}
.bg-orange-500\/20 {
background-color: rgb(249 115 22 / 0.2);
}
.bg-orange-500\/30 {
background-color: rgb(249 115 22 / 0.3);
}
.bg-orange-500\/5 {
background-color: rgb(249 115 22 / 0.05);
}
.bg-panel {
background-color: hsl(var(--z-panel));
}
.bg-panel-elevated {
background-color: hsl(var(--z-panel-elevated));
}
.bg-panel\/95 {
background-color: hsl(var(--z-panel) / 0.95);
}
.bg-pink-500\/10 {
background-color: rgb(236 72 153 / 0.1);
}
.bg-popover {
background-color: hsl(var(--popover));
}
.bg-popover\/85 {
background-color: hsl(var(--popover) / 0.85);
}
.bg-popover\/95 {
background-color: hsl(var(--popover) / 0.95);
}
.bg-primary {
background-color: hsl(var(--primary));
}
.bg-primary\/10 {
background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/15 {
background-color: hsl(var(--primary) / 0.15);
}
.bg-primary\/20 {
background-color: hsl(var(--primary) / 0.2);
}
.bg-primary\/25 {
background-color: hsl(var(--primary) / 0.25);
}
.bg-primary\/30 {
background-color: hsl(var(--primary) / 0.3);
}
.bg-primary\/40 {
background-color: hsl(var(--primary) / 0.4);
}
.bg-primary\/5 {
background-color: hsl(var(--primary) / 0.05);
}
.bg-primary\/50 {
background-color: hsl(var(--primary) / 0.5);
}
.bg-primary\/60 {
background-color: hsl(var(--primary) / 0.6);
}
.bg-primary\/70 {
background-color: hsl(var(--primary) / 0.7);
}
.bg-primary\/80 {
background-color: hsl(var(--primary) / 0.8);
}
.bg-primary\/\[0\.02\] {
background-color: hsl(var(--primary) / 0.02);
}
.bg-primary\/\[0\.04\] {
background-color: hsl(var(--primary) / 0.04);
}
.bg-primary\/\[0\.06\] {
background-color: hsl(var(--primary) / 0.06);
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/15 {
background-color: rgb(239 68 68 / 0.15);
}
.bg-red-500\/20 {
background-color: rgb(239 68 68 / 0.2);
}
.bg-red-500\/5 {
background-color: rgb(239 68 68 / 0.05);
}
.bg-red-500\/\[0\.04\] {
background-color: rgb(239 68 68 / 0.04);
}
.bg-rose-500 {
--tw-bg-opacity: 1;
background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-rose-500\/10 {
background-color: rgb(244 63 94 / 0.1);
}
.bg-rose-500\/15 {
background-color: rgb(244 63 94 / 0.15);
}
.bg-rose-500\/20 {
background-color: rgb(244 63 94 / 0.2);
}
.bg-rose-500\/5 {
background-color: rgb(244 63 94 / 0.05);
}
.bg-rose-600 {
--tw-bg-opacity: 1;
background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-secondary {
background-color: hsl(var(--secondary));
}
.bg-secondary\/30 {
background-color: hsl(var(--secondary) / 0.3);
}
.bg-secondary\/40 {
background-color: hsl(var(--secondary) / 0.4);
}
.bg-secondary\/50 {
background-color: hsl(var(--secondary) / 0.5);
}
.bg-secondary\/60 {
background-color: hsl(var(--secondary) / 0.6);
}
.bg-secondary\/70 {
background-color: hsl(var(--secondary) / 0.7);
}
.bg-secondary\/80 {
background-color: hsl(var(--secondary) / 0.8);
}
.bg-sidebar {
background-color: hsl(var(--sidebar-background));
}
.bg-sidebar-border {
background-color: hsl(var(--sidebar-border));
}
.bg-sky-500 {
--tw-bg-opacity: 1;
background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.bg-sky-500\/10 {
background-color: rgb(14 165 233 / 0.1);
}
.bg-sky-500\/15 {
background-color: rgb(14 165 233 / 0.15);
}
.bg-sky-500\/20 {
background-color: rgb(14 165 233 / 0.2);
}
.bg-sky-500\/25 {
background-color: rgb(14 165 233 / 0.25);
}
.bg-sky-500\/5 {
background-color: rgb(14 165 233 / 0.05);
}
.bg-slate-500\/15 {
background-color: rgb(100 116 139 / 0.15);
}
.bg-transparent {
background-color: transparent;
}
.bg-violet-500\/10 {
background-color: rgb(139 92 246 / 0.1);
}
.bg-violet-500\/15 {
background-color: rgb(139 92 246 / 0.15);
}
.bg-violet-500\/5 {
background-color: rgb(139 92 246 / 0.05);
}
.bg-warning {
background-color: hsl(var(--warning));
}
.bg-warning\/10 {
background-color: hsl(var(--warning) / 0.1);
}
.bg-warning\/15 {
background-color: hsl(var(--warning) / 0.15);
}
.bg-warning\/20 {
background-color: hsl(var(--warning) / 0.2);
}
.bg-warning\/5 {
background-color: hsl(var(--warning) / 0.05);
}
.bg-warning\/50 {
background-color: hsl(var(--warning) / 0.5);
}
.bg-warning\/60 {
background-color: hsl(var(--warning) / 0.6);
}
.bg-warning\/70 {
background-color: hsl(var(--warning) / 0.7);
}
.bg-warning\/80 {
background-color: hsl(var(--warning) / 0.8);
}
.bg-warning\/\[0\.05\] {
background-color: hsl(var(--warning) / 0.05);
}
.bg-warning\/\[0\.06\] {
background-color: hsl(var(--warning) / 0.06);
}
.bg-warning\/\[0\.07\] {
background-color: hsl(var(--warning) / 0.07);
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500\/10 {
background-color: rgb(234 179 8 / 0.1);
}
.bg-\[radial-gradient\(circle\2c hsl\(var\(--primary\)\)\2c transparent_70\%\)\] {
background-image: radial-gradient(circle,hsl(var(--primary)),transparent 70%);
}
.bg-\[radial-gradient\(ellipse_at_top_right\2c hsl\(var\(--primary\)\/0\.06\)\2c transparent_60\%\)\] {
background-image: radial-gradient(ellipse at top right,hsl(var(--primary)/0.06),transparent 60%);
}
.bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-accent {
--tw-gradient-from: hsl(var(--accent)) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/10 {
--tw-gradient-from: hsl(var(--accent) / 0.1) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/15 {
--tw-gradient-from: hsl(var(--accent) / 0.15) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/20 {
--tw-gradient-from: hsl(var(--accent) / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-400 {
--tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-400\/20 {
--tw-gradient-from: rgb(251 191 36 / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500 {
--tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500\/15 {
--tw-gradient-from: rgb(245 158 11 / 0.15) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500\/20 {
--tw-gradient-from: rgb(245 158 11 / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-background\/80 {
--tw-gradient-from: hsl(var(--background) / 0.8) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-background\/95 {
--tw-gradient-from: hsl(var(--background) / 0.95) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-card {
--tw-gradient-from: hsl(var(--card)) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-card\/40 {
--tw-gradient-from: hsl(var(--card) / 0.4) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500 {
--tw-gradient-from: #10b981 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/10 {
--tw-gradient-from: rgb(16 185 129 / 0.1) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/5 {
--tw-gradient-from: rgb(16 185 129 / 0.05) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gain\/10 {
--tw-gradient-from: hsl(var(--gain) / 0.1) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--gain) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gain\/15 {
--tw-gradient-from: hsl(var(--gain) / 0.15) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--gain) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-info {
--tw-gradient-from: hsl(var(--info)) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--info) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-info\/15 {
--tw-gradient-from: hsl(var(--info) / 0.15) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--info) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-info\/20 {
--tw-gradient-from: hsl(var(--info) / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--info) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-loss\/15 {
--tw-gradient-from: hsl(var(--loss) / 0.15) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--loss) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-loss\/20 {
--tw-gradient-from: hsl(var(--loss) / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--loss) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-loss\/5 {
--tw-gradient-from: hsl(var(--loss) / 0.05) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--loss) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-muted\/15 {
--tw-gradient-from: hsl(var(--muted) / 0.15) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-muted\/20 {
--tw-gradient-from: hsl(var(--muted) / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-muted\/30 {
--tw-gradient-from: hsl(var(--muted) / 0.3) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-muted\/60 {
--tw-gradient-from: hsl(var(--muted) / 0.6) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-400 {
--tw-gradient-from: #fb923c var(--tw-gradient-from-position);
--tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500\/10 {
--tw-gradient-from: rgb(249 115 22 / 0.1) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary {
--tw-gradient-from: hsl(var(--primary)) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/10 {
--tw-gradient-from: hsl(var(--primary) / 0.1) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/15 {
--tw-gradient-from: hsl(var(--primary) / 0.15) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/20 {
--tw-gradient-from: hsl(var(--primary) / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/5 {
--tw-gradient-from: hsl(var(--primary) / 0.05) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/80 {
--tw-gradient-from: hsl(var(--primary) / 0.8) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/95 {
--tw-gradient-from: hsl(var(--primary) / 0.95) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/\[0\.06\] {
--tw-gradient-from: hsl(var(--primary) / 0.06) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/\[0\.08\] {
--tw-gradient-from: hsl(var(--primary) / 0.08) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500\/10 {
--tw-gradient-from: rgb(239 68 68 / 0.1) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500\/5 {
--tw-gradient-from: rgb(239 68 68 / 0.05) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-500\/10 {
--tw-gradient-from: rgb(14 165 233 / 0.1) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
--tw-gradient-from: transparent var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-500 {
--tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-500\/5 {
--tw-gradient-from: rgb(139 92 246 / 0.05) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-warning {
--tw-gradient-from: hsl(var(--warning)) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--warning) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-warning\/10 {
--tw-gradient-from: hsl(var(--warning) / 0.1) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--warning) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-warning\/15 {
--tw-gradient-from: hsl(var(--warning) / 0.15) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--warning) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-warning\/20 {
--tw-gradient-from: hsl(var(--warning) / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--warning) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-accent {
--tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--accent)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/5 {
--tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--accent) / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/50 {
--tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--accent) / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/60 {
--tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--accent) / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/70 {
--tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--accent) / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-amber-400\/20 {
--tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(251 191 36 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-amber-500\/5 {
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(245 158 11 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-card {
--tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--card)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-card\/30 {
--tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--card) / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-card\/50 {
--tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--card) / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-500\/25 {
--tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(16 185 129 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-info\/60 {
--tw-gradient-to: hsl(var(--info) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--info) / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-muted\/10 {
--tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--muted) / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-muted\/15 {
--tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--muted) / 0.15) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-orange-500 {
--tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #f97316 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-orange-500\/10 {
--tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(249 115 22 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary {
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary\/10 {
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary\/20 {
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary\/5 {
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary\/60 {
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary\/\[0\.03\] {
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.03) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-red-500\/25 {
--tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(239 68 68 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-sky-500\/5 {
--tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(14 165 233 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-accent {
--tw-gradient-to: hsl(var(--accent)) var(--tw-gradient-to-position);
}
.to-accent\/30 {
--tw-gradient-to: hsl(var(--accent) / 0.3) var(--tw-gradient-to-position);
}
.to-accent\/5 {
--tw-gradient-to: hsl(var(--accent) / 0.05) var(--tw-gradient-to-position);
}
.to-accent\/70 {
--tw-gradient-to: hsl(var(--accent) / 0.7) var(--tw-gradient-to-position);
}
.to-amber-500 {
--tw-gradient-to: #f59e0b var(--tw-gradient-to-position);
}
.to-amber-500\/10 {
--tw-gradient-to: rgb(245 158 11 / 0.1) var(--tw-gradient-to-position);
}
.to-amber-500\/5 {
--tw-gradient-to: rgb(245 158 11 / 0.05) var(--tw-gradient-to-position);
}
.to-amber-600 {
--tw-gradient-to: #d97706 var(--tw-gradient-to-position);
}
.to-amber-600\/5 {
--tw-gradient-to: rgb(217 119 6 / 0.05) var(--tw-gradient-to-position);
}
.to-background {
--tw-gradient-to: hsl(var(--background)) var(--tw-gradient-to-position);
}
.to-background\/20 {
--tw-gradient-to: hsl(var(--background) / 0.2) var(--tw-gradient-to-position);
}
.to-card {
--tw-gradient-to: hsl(var(--card)) var(--tw-gradient-to-position);
}
.to-card\/50 {
--tw-gradient-to: hsl(var(--card) / 0.5) var(--tw-gradient-to-position);
}
.to-card\/60 {
--tw-gradient-to: hsl(var(--card) / 0.6) var(--tw-gradient-to-position);
}
.to-card\/80 {
--tw-gradient-to: hsl(var(--card) / 0.8) var(--tw-gradient-to-position);
}
.to-emerald-500\/0 {
--tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
}
.to-emerald-500\/10 {
--tw-gradient-to: rgb(16 185 129 / 0.1) var(--tw-gradient-to-position);
}
.to-emerald-600 {
--tw-gradient-to: #059669 var(--tw-gradient-to-position);
}
.to-gain {
--tw-gradient-to: hsl(var(--gain)) var(--tw-gradient-to-position);
}
.to-gain\/5 {
--tw-gradient-to: hsl(var(--gain) / 0.05) var(--tw-gradient-to-position);
}
.to-indigo-500 {
--tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
}
.to-indigo-500\/5 {
--tw-gradient-to: rgb(99 102 241 / 0.05) var(--tw-gradient-to-position);
}
.to-info {
--tw-gradient-to: hsl(var(--info)) var(--tw-gradient-to-position);
}
.to-info\/5 {
--tw-gradient-to: hsl(var(--info) / 0.05) var(--tw-gradient-to-position);
}
.to-loss\/5 {
--tw-gradient-to: hsl(var(--loss) / 0.05) var(--tw-gradient-to-position);
}
.to-muted\/15 {
--tw-gradient-to: hsl(var(--muted) / 0.15) var(--tw-gradient-to-position);
}
.to-muted\/20 {
--tw-gradient-to: hsl(var(--muted) / 0.2) var(--tw-gradient-to-position);
}
.to-muted\/30 {
--tw-gradient-to: hsl(var(--muted) / 0.3) var(--tw-gradient-to-position);
}
.to-orange-500 {
--tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}
.to-orange-500\/15 {
--tw-gradient-to: rgb(249 115 22 / 0.15) var(--tw-gradient-to-position);
}
.to-primary {
--tw-gradient-to: hsl(var(--primary)) var(--tw-gradient-to-position);
}
.to-primary\/10 {
--tw-gradient-to: hsl(var(--primary) / 0.1) var(--tw-gradient-to-position);
}
.to-primary\/15 {
--tw-gradient-to: hsl(var(--primary) / 0.15) var(--tw-gradient-to-position);
}
.to-primary\/20 {
--tw-gradient-to: hsl(var(--primary) / 0.2) var(--tw-gradient-to-position);
}
.to-primary\/30 {
--tw-gradient-to: hsl(var(--primary) / 0.3) var(--tw-gradient-to-position);
}
.to-primary\/5 {
--tw-gradient-to: hsl(var(--primary) / 0.05) var(--tw-gradient-to-position);
}
.to-primary\/70 {
--tw-gradient-to: hsl(var(--primary) / 0.7) var(--tw-gradient-to-position);
}
.to-primary\/80 {
--tw-gradient-to: hsl(var(--primary) / 0.8) var(--tw-gradient-to-position);
}
.to-primary\/85 {
--tw-gradient-to: hsl(var(--primary) / 0.85) var(--tw-gradient-to-position);
}
.to-primary\/\[0\.03\] {
--tw-gradient-to: hsl(var(--primary) / 0.03) var(--tw-gradient-to-position);
}
.to-red-500\/0 {
--tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
}
.to-red-500\/10 {
--tw-gradient-to: rgb(239 68 68 / 0.1) var(--tw-gradient-to-position);
}
.to-rose-500 {
--tw-gradient-to: #f43f5e var(--tw-gradient-to-position);
}
.to-transparent {
--tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-warning\/10 {
--tw-gradient-to: hsl(var(--warning) / 0.1) var(--tw-gradient-to-position);
}
.to-warning\/5 {
--tw-gradient-to: hsl(var(--warning) / 0.05) var(--tw-gradient-to-position);
}
.to-warning\/60 {
--tw-gradient-to: hsl(var(--warning) / 0.6) var(--tw-gradient-to-position);
}
.to-warning\/70 {
--tw-gradient-to: hsl(var(--warning) / 0.7) var(--tw-gradient-to-position);
}
.fill-accent {
fill: hsl(var(--accent));
}
.fill-amber-500 {
fill: #f59e0b;
}
.fill-amber-500\/10 {
fill: rgb(245 158 11 / 0.1);
}
.fill-current {
fill: currentColor;
}
.fill-emerald-500\/10 {
fill: rgb(16 185 129 / 0.1);
}
.fill-foreground {
fill: hsl(var(--foreground));
}
.fill-muted-foreground {
fill: hsl(var(--muted-foreground));
}
.fill-none {
fill: none;
}
.fill-red-500\/10 {
fill: rgb(239 68 68 / 0.1);
}
.fill-warning {
fill: hsl(var(--warning));
}
.stroke-amber-500 {
stroke: #f59e0b;
}
.stroke-border\/30 {
stroke: hsl(var(--border) / 0.3);
}
.stroke-emerald-500 {
stroke: #10b981;
}
.stroke-foreground\/80 {
stroke: hsl(var(--foreground) / 0.8);
}
.stroke-muted-foreground {
stroke: hsl(var(--muted-foreground));
}
.stroke-muted-foreground\/50 {
stroke: hsl(var(--muted-foreground) / 0.5);
}
.stroke-muted-foreground\/60 {
stroke: hsl(var(--muted-foreground) / 0.6);
}
.stroke-red-500 {
stroke: #ef4444;
}
.stroke-rose-400 {
stroke: #fb7185;
}
.stroke-rose-400\/70 {
stroke: rgb(251 113 133 / 0.7);
}
.stroke-teal-400 {
stroke: #2dd4bf;
}
.stroke-teal-400\/70 {
stroke: rgb(45 212 191 / 0.7);
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.\!p-0 {
padding: 0px !important;
}
.p-0 {
padding: 0px;
}
.p-0\.5 {
padding: 0.125rem;
}
.p-1 {
padding: 0.25rem;
}
.p-1\.5 {
padding: 0.375rem;
}
.p-10 {
padding: 2.5rem;
}
.p-12 {
padding: 3rem;
}
.p-2 {
padding: 0.5rem;
}
.p-2\.5 {
padding: 0.625rem;
}
.p-3 {
padding: 0.75rem;
}
.p-3\.5 {
padding: 0.875rem;
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.p-\[1px\] {
padding: 1px;
}
.p-px {
padding: 1px;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-1\.5 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-3\.5 {
padding-left: 0.875rem;
padding-right: 0.875rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.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-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-3\.5 {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.py-32 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.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;
}
.py-\[1px\] {
padding-top: 1px;
padding-bottom: 1px;
}
.py-\[2px\] {
padding-top: 2px;
padding-bottom: 2px;
}
.py-\[3px\] {
padding-top: 3px;
padding-bottom: 3px;
}
.py-px {
padding-top: 1px;
padding-bottom: 1px;
}
.pb-0 {
padding-bottom: 0px;
}
.pb-0\.5 {
padding-bottom: 0.125rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.pb-1\.5 {
padding-bottom: 0.375rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.pb-12 {
padding-bottom: 3rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-2\.5 {
padding-bottom: 0.625rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pb-\[calc\(env\(safe-area-inset-bottom\)\+72px\)\] {
padding-bottom: calc(env(safe-area-inset-bottom) + 72px);
}
.pb-\[env\(safe-area-inset-bottom\)\] {
padding-bottom: env(safe-area-inset-bottom);
}
.pl-0\.5 {
padding-left: 0.125rem;
}
.pl-1 {
padding-left: 0.25rem;
}
.pl-1\.5 {
padding-left: 0.375rem;
}
.pl-10 {
padding-left: 2.5rem;
}
.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-5 {
padding-left: 1.25rem;
}
.pl-6 {
padding-left: 1.5rem;
}
.pl-7 {
padding-left: 1.75rem;
}
.pl-8 {
padding-left: 2rem;
}
.pl-9 {
padding-left: 2.25rem;
}
.pl-\[230px\] {
padding-left: 230px;
}
.pl-\[64px\] {
padding-left: 64px;
}
.pr-0\.5 {
padding-right: 0.125rem;
}
.pr-1 {
padding-right: 0.25rem;
}
.pr-1\.5 {
padding-right: 0.375rem;
}
.pr-10 {
padding-right: 2.5rem;
}
.pr-12 {
padding-right: 3rem;
}
.pr-14 {
padding-right: 3.5rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.pr-2\.5 {
padding-right: 0.625rem;
}
.pr-3 {
padding-right: 0.75rem;
}
.pr-4 {
padding-right: 1rem;
}
.pr-7 {
padding-right: 1.75rem;
}
.pr-8 {
padding-right: 2rem;
}
.pr-9 {
padding-right: 2.25rem;
}
.pr-\[210px\] {
padding-right: 210px;
}
.pt-0 {
padding-top: 0px;
}
.pt-0\.5 {
padding-top: 0.125rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-1\.5 {
padding-top: 0.375rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-2\.5 {
padding-top: 0.625rem;
}
.pt-24 {
padding-top: 6rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-3\.5 {
padding-top: 0.875rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pt-8 {
padding-top: 2rem;
}
.pt-\[10vh\] {
padding-top: 10vh;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.align-top {
vertical-align: top;
}
.align-middle {
vertical-align: middle;
}
.align-bottom {
vertical-align: bottom;
}
.font-chart {
font-family: Inter, InterFallback, system-ui, sans-serif;
}
.font-display {
font-family: Inter, InterFallback, system-ui, sans-serif;
}
.font-mono {
font-family: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
}
.font-sans {
font-family: Inter, InterFallback, system-ui, -apple-system, sans-serif;
}
.\!text-\[12px\] {
font-size: 12px !important;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-7xl {
font-size: 4.5rem;
line-height: 1;
}
.text-\[0\.8rem\] {
font-size: 0.8rem;
}
.text-\[10\.5px\] {
font-size: 10.5px;
}
.text-\[10px\] {
font-size: 10px;
}
.text-\[11\.5px\] {
font-size: 11.5px;
}
.text-\[11px\] {
font-size: 11px;
}
.text-\[12\.5px\] {
font-size: 12.5px;
}
.text-\[12px\] {
font-size: 12px;
}
.text-\[13\.5px\] {
font-size: 13.5px;
}
.text-\[13px\] {
font-size: 13px;
}
.text-\[14px\] {
font-size: 14px;
}
.text-\[15px\] {
font-size: 15px;
}
.text-\[16px\] {
font-size: 16px;
}
.text-\[17px\] {
font-size: 17px;
}
.text-\[18px\] {
font-size: 18px;
}
.text-\[20px\] {
font-size: 20px;
}
.text-\[34px\] {
font-size: 34px;
}
.text-\[44px\] {
font-size: 44px;
}
.text-\[7px\] {
font-size: 7px;
}
.text-\[8\.5px\] {
font-size: 8.5px;
}
.text-\[8px\] {
font-size: 8px;
}
.text-\[9\.5px\] {
font-size: 9.5px;
}
.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-\[var\(--font-mono\)\] {
font-weight: var(--font-mono);
}
.font-black {
font-weight: 900;
}
.font-bold {
font-weight: 700;
}
.font-extrabold {
font-weight: 800;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.normal-case {
text-transform: none;
}
.italic {
font-style: italic;
}
.not-italic {
font-style: normal;
}
.ordinal {
--tw-ordinal: ordinal;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.15\] {
line-height: 1.15;
}
.leading-\[1\.15rem\] {
line-height: 1.15rem;
}
.leading-none {
line-height: 1;
}
.leading-relaxed {
line-height: 1.625;
}
.leading-snug {
line-height: 1.375;
}
.leading-tight {
line-height: 1.25;
}
.tracking-\[0\.02em\] {
letter-spacing: 0.02em;
}
.tracking-\[0\.08em\] {
letter-spacing: 0.08em;
}
.tracking-\[0\.12em\] {
letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
letter-spacing: 0.14em;
}
.tracking-\[0\.15em\] {
letter-spacing: 0.15em;
}
.tracking-\[0\.16em\] {
letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
letter-spacing: 0.18em;
}
.tracking-\[0\.1em\] {
letter-spacing: 0.1em;
}
.tracking-\[0\.2em\] {
letter-spacing: 0.2em;
}
.tracking-normal {
letter-spacing: 0em;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.tracking-tighter {
letter-spacing: -0.05em;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.tracking-widest {
letter-spacing: 0.1em;
}
.\!text-current {
color: currentColor !important;
}
.text-\[hsl\(0\2c 72\%\2c 25\%\)\] {
--tw-text-opacity: 1;
color: hsl(0 72% 25% / var(--tw-text-opacity, 1));
}
.text-\[hsl\(142\2c 72\%\2c 20\%\)\] {
--tw-text-opacity: 1;
color: hsl(142 72% 20% / var(--tw-text-opacity, 1));
}
.text-\[hsl\(var\(--accent\)\)\] {
color: hsl(var(--accent));
}
.text-\[hsl\(var\(--destructive\)\)\] {
color: hsl(var(--destructive));
}
.text-\[hsl\(var\(--gain\)\)\] {
color: hsl(var(--gain));
}
.text-\[hsl\(var\(--info\)\)\] {
color: hsl(var(--info));
}
.text-\[hsl\(var\(--loss\)\)\] {
color: hsl(var(--loss));
}
.text-\[hsl\(var\(--success\)\)\] {
color: hsl(var(--success));
}
.text-\[hsl\(var\(--warning\)\)\] {
color: hsl(var(--warning));
}
.text-accent {
color: hsl(var(--accent));
}
.text-accent-foreground {
color: hsl(var(--accent-foreground));
}
.text-accent-foreground\/70 {
color: hsl(var(--accent-foreground) / 0.7);
}
.text-action {
color: hsl(var(--z-action));
}
.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-400\/80 {
color: rgb(251 191 36 / 0.8);
}
.text-amber-500 {
--tw-text-opacity: 1;
color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-500\/80 {
color: rgb(245 158 11 / 0.8);
}
.text-amber-500\/90 {
color: rgb(245 158 11 / 0.9);
}
.text-amber-600 {
--tw-text-opacity: 1;
color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
--tw-text-opacity: 1;
color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-700\/70 {
color: rgb(180 83 9 / 0.7);
}
.text-amber-700\/80 {
color: rgb(180 83 9 / 0.8);
}
.text-amber-950 {
--tw-text-opacity: 1;
color: rgb(69 26 3 / var(--tw-text-opacity, 1));
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-border {
color: hsl(var(--border));
}
.text-border\/60 {
color: hsl(var(--border) / 0.6);
}
.text-card-foreground {
color: hsl(var(--card-foreground));
}
.text-current {
color: currentColor;
}
.text-cyan-400 {
--tw-text-opacity: 1;
color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-cyan-500 {
--tw-text-opacity: 1;
color: rgb(6 182 212 / var(--tw-text-opacity, 1));
}
.text-destructive {
color: hsl(var(--destructive));
}
.text-destructive-foreground {
color: hsl(var(--destructive-foreground));
}
.text-destructive\/80 {
color: hsl(var(--destructive) / 0.8);
}
.text-emerald-200 {
--tw-text-opacity: 1;
color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.text-emerald-300 {
--tw-text-opacity: 1;
color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-300\/80 {
color: rgb(110 231 183 / 0.8);
}
.text-emerald-400 {
--tw-text-opacity: 1;
color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
--tw-text-opacity: 1;
color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-500\/90 {
color: rgb(16 185 129 / 0.9);
}
.text-emerald-600 {
--tw-text-opacity: 1;
color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-foreground {
color: hsl(var(--foreground));
}
.text-foreground\/60 {
color: hsl(var(--foreground) / 0.6);
}
.text-foreground\/65 {
color: hsl(var(--foreground) / 0.65);
}
.text-foreground\/70 {
color: hsl(var(--foreground) / 0.7);
}
.text-foreground\/75 {
color: hsl(var(--foreground) / 0.75);
}
.text-foreground\/80 {
color: hsl(var(--foreground) / 0.8);
}
.text-foreground\/85 {
color: hsl(var(--foreground) / 0.85);
}
.text-foreground\/90 {
color: hsl(var(--foreground) / 0.9);
}
.text-foreground\/95 {
color: hsl(var(--foreground) / 0.95);
}
.text-gain {
color: hsl(var(--gain));
}
.text-gain\/60 {
color: hsl(var(--gain) / 0.6);
}
.text-gain\/70 {
color: hsl(var(--gain) / 0.7);
}
.text-gain\/80 {
color: hsl(var(--gain) / 0.8);
}
.text-gain\/85 {
color: hsl(var(--gain) / 0.85);
}
.text-gain\/90 {
color: hsl(var(--gain) / 0.9);
}
.text-indigo-400 {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-indigo-500 {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-info {
color: hsl(var(--info));
}
.text-ink {
color: hsl(var(--z-text));
}
.text-ink-muted {
color: hsl(var(--z-text-muted));
}
.text-ink-secondary {
color: hsl(var(--z-text-secondary));
}
.text-live {
color: hsl(var(--z-live));
}
.text-loss {
color: hsl(var(--loss));
}
.text-loss\/70 {
color: hsl(var(--loss) / 0.7);
}
.text-loss\/80 {
color: hsl(var(--loss) / 0.8);
}
.text-loss\/90 {
color: hsl(var(--loss) / 0.9);
}
.text-muted-foreground {
color: hsl(var(--muted-foreground));
}
.text-muted-foreground\/40 {
color: hsl(var(--muted-foreground) / 0.4);
}
.text-muted-foreground\/45 {
color: hsl(var(--muted-foreground) / 0.45);
}
.text-muted-foreground\/50 {
color: hsl(var(--muted-foreground) / 0.5);
}
.text-muted-foreground\/55 {
color: hsl(var(--muted-foreground) / 0.55);
}
.text-muted-foreground\/60 {
color: hsl(var(--muted-foreground) / 0.6);
}
.text-muted-foreground\/70 {
color: hsl(var(--muted-foreground) / 0.7);
}
.text-muted-foreground\/75 {
color: hsl(var(--muted-foreground) / 0.75);
}
.text-muted-foreground\/80 {
color: hsl(var(--muted-foreground) / 0.8);
}
.text-muted-foreground\/85 {
color: hsl(var(--muted-foreground) / 0.85);
}
.text-muted-foreground\/90 {
color: hsl(var(--muted-foreground) / 0.9);
}
.text-muted-foreground\/95 {
color: hsl(var(--muted-foreground) / 0.95);
}
.text-neutralState {
color: hsl(var(--z-neutral));
}
.text-orange-300 {
--tw-text-opacity: 1;
color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.text-orange-400 {
--tw-text-opacity: 1;
color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-400\/80 {
color: rgb(251 146 60 / 0.8);
}
.text-orange-500 {
--tw-text-opacity: 1;
color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
--tw-text-opacity: 1;
color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-700 {
--tw-text-opacity: 1;
color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-orange-950 {
--tw-text-opacity: 1;
color: rgb(67 20 7 / var(--tw-text-opacity, 1));
}
.text-pink-400 {
--tw-text-opacity: 1;
color: rgb(244 114 182 / var(--tw-text-opacity, 1));
}
.text-pink-500 {
--tw-text-opacity: 1;
color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
color: hsl(var(--popover-foreground));
}
.text-primary {
color: hsl(var(--primary));
}
.text-primary-foreground {
color: hsl(var(--primary-foreground));
}
.text-primary-foreground\/40 {
color: hsl(var(--primary-foreground) / 0.4);
}
.text-primary-foreground\/50 {
color: hsl(var(--primary-foreground) / 0.5);
}
.text-primary-foreground\/60 {
color: hsl(var(--primary-foreground) / 0.6);
}
.text-primary-foreground\/80 {
color: hsl(var(--primary-foreground) / 0.8);
}
.text-primary\/50 {
color: hsl(var(--primary) / 0.5);
}
.text-primary\/60 {
color: hsl(var(--primary) / 0.6);
}
.text-primary\/70 {
color: hsl(var(--primary) / 0.7);
}
.text-primary\/80 {
color: hsl(var(--primary) / 0.8);
}
.text-primary\/90 {
color: hsl(var(--primary) / 0.9);
}
.text-purple-400 {
--tw-text-opacity: 1;
color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-500 {
--tw-text-opacity: 1;
color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-red-300 {
--tw-text-opacity: 1;
color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-300\/80 {
color: rgb(252 165 165 / 0.8);
}
.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-400\/80 {
color: rgb(248 113 113 / 0.8);
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-500\/90 {
color: rgb(239 68 68 / 0.9);
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-rose-200 {
--tw-text-opacity: 1;
color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.text-rose-300 {
--tw-text-opacity: 1;
color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-rose-400 {
--tw-text-opacity: 1;
color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
--tw-text-opacity: 1;
color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-500\/90 {
color: rgb(244 63 94 / 0.9);
}
.text-rose-600 {
--tw-text-opacity: 1;
color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
--tw-text-opacity: 1;
color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
color: hsl(var(--secondary-foreground));
}
.text-sidebar-foreground {
color: hsl(var(--sidebar-foreground));
}
.text-sidebar-foreground\/70 {
color: hsl(var(--sidebar-foreground) / 0.7);
}
.text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity, 1));
}
.text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.text-sky-300\/80 {
color: rgb(125 211 252 / 0.8);
}
.text-sky-400 {
--tw-text-opacity: 1;
color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.text-sky-500 {
--tw-text-opacity: 1;
color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.text-sky-600 {
--tw-text-opacity: 1;
color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-teal-400 {
--tw-text-opacity: 1;
color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}
.text-teal-500 {
--tw-text-opacity: 1;
color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}
.text-violet-400 {
--tw-text-opacity: 1;
color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.text-violet-500 {
--tw-text-opacity: 1;
color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.text-violet-600 {
--tw-text-opacity: 1;
color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-warning {
color: hsl(var(--warning));
}
.text-warning\/70 {
color: hsl(var(--warning) / 0.7);
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-500 {
--tw-text-opacity: 1;
color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
--tw-text-opacity: 1;
color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.underline {
text-decoration-line: underline;
}
.line-through {
text-decoration-line: line-through;
}
.no-underline {
text-decoration-line: none;
}
.decoration-muted-foreground\/40 {
text-decoration-color: hsl(var(--muted-foreground) / 0.4);
}
.decoration-muted-foreground\/70 {
text-decoration-color: hsl(var(--muted-foreground) / 0.7);
}
.decoration-dotted {
text-decoration-style: dotted;
}
.underline-offset-2 {
text-underline-offset: 2px;
}
.underline-offset-4 {
text-underline-offset: 4px;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.accent-current {
accent-color: currentColor;
}
.accent-primary {
accent-color: hsl(var(--primary));
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.opacity-20 {
opacity: 0.2;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-40 {
opacity: 0.4;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-55 {
opacity: 0.55;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-75 {
opacity: 0.75;
}
.opacity-80 {
opacity: 0.8;
}
.opacity-90 {
opacity: 0.9;
}
.opacity-\[0\.015\] {
opacity: 0.015;
}
.opacity-\[0\.04\] {
opacity: 0.04;
}
.opacity-\[0\.08\] {
opacity: 0.08;
}
.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\(--primary\)\/0\.1\)\] {
--tw-shadow: 0 0 0 1px hsl(var(--primary)/0.1);
--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
--tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_12px_-2px_hsl\(var\(--accent\)\/0\.45\)\] {
--tw-shadow: 0 0 12px -2px hsl(var(--accent)/0.45);
--tw-shadow-colored: 0 0 12px -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-\[0_0_12px_-2px_hsl\(var\(--gain\)\/0\.45\)\] {
--tw-shadow: 0 0 12px -2px hsl(var(--gain)/0.45);
--tw-shadow-colored: 0 0 12px -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-\[0_0_12px_-2px_hsl\(var\(--info\)\/0\.45\)\] {
--tw-shadow: 0 0 12px -2px hsl(var(--info)/0.45);
--tw-shadow-colored: 0 0 12px -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-\[0_0_12px_-2px_hsl\(var\(--primary\)\/0\.45\)\] {
--tw-shadow: 0 0 12px -2px hsl(var(--primary)/0.45);
--tw-shadow-colored: 0 0 12px -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-\[0_0_12px_hsl\(var\(--primary\)\/0\.08\)\] {
--tw-shadow: 0 0 12px hsl(var(--primary)/0.08);
--tw-shadow-colored: 0 0 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_20px_-5px_hsl\(var\(--primary\)\/0\.4\)\] {
--tw-shadow: 0 0 20px -5px hsl(var(--primary)/0.4);
--tw-shadow-colored: 0 0 20px -5px 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_20px_hsl\(var\(--primary\)\/0\.15\)\] {
--tw-shadow: 0 0 20px hsl(var(--primary)/0.15);
--tw-shadow-colored: 0 0 20px 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_4px_rgba\(245\2c 158\2c 11\2c 0\.3\)\] {
--tw-shadow: 0 0 4px rgba(245,158,11,0.3);
--tw-shadow-colored: 0 0 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-\[0_0_6px_hsl\(var\(--gain\)\)\] {
--tw-shadow: 0 0 6px hsl(var(--gain));
--tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_hsl\(var\(--gain\)\/0\.2\)\] {
--tw-shadow: 0 0 6px hsl(var(--gain)/0.2);
--tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_hsl\(var\(--loss\)\/0\.2\)\] {
--tw-shadow: 0 0 6px hsl(var(--loss)/0.2);
--tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_hsl\(var\(--loss\)\/0\.5\)\] {
--tw-shadow: 0 0 6px hsl(var(--loss)/0.5);
--tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_8px_hsl\(var\(--primary\)\/0\.25\)\] {
--tw-shadow: 0 0 8px hsl(var(--primary)/0.25);
--tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_40px_-10px_hsl\(var\(--primary\)\/0\.45\)\] {
--tw-shadow: 0 12px 40px -10px hsl(var(--primary)/0.45);
--tw-shadow-colored: 0 12px 40px -10px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_0_0_hsl\(var\(--border\)\)\2c 0_8px_24px_-12px_hsl\(var\(--background\)\/0\.6\)\] {
--tw-shadow: 0 1px 0 0 hsl(var(--border)),0 8px 24px -12px hsl(var(--background)/0.6);
--tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color), 0 8px 24px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_0_hsl\(var\(--foreground\)\/0\.06\)_inset\2c 0_0_12px_-3px_hsl\(var\(--primary\)\/0\.55\)\] {
--tw-shadow: 0 1px 0 hsl(var(--foreground)/0.06) inset,0 0 12px -3px hsl(var(--primary)/0.55);
--tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 0 12px -3px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_0_hsl\(var\(--foreground\)\/0\.08\)_inset\2c 0_2px_8px_-2px_hsl\(var\(--primary\)\/0\.4\)\] {
--tw-shadow: 0 1px 0 hsl(var(--foreground)/0.08) inset,0 2px 8px -2px hsl(var(--primary)/0.4);
--tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 2px 8px -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-\[0_24px_80px_-20px_hsl\(var\(--primary\)\/0\.35\)\2c 0_0_0_1px_hsl\(var\(--primary\)\/0\.08\)_inset\] {
--tw-shadow: 0 24px 80px -20px hsl(var(--primary)/0.35),0 0 0 1px hsl(var(--primary)/0.08) inset;
--tw-shadow-colored: 0 24px 80px -20px var(--tw-shadow-color), inset 0 0 0 1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_2px_10px_-2px_hsl\(28_92\%_55\%\/0\.45\)\] {
--tw-shadow: 0 2px 10px -2px hsl(28 92% 55%/0.45);
--tw-shadow-colored: 0 2px 10px -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-\[0_2px_12px_-2px_hsl\(35_95\%_55\%\/0\.55\)\] {
--tw-shadow: 0 2px 12px -2px hsl(35 95% 55%/0.55);
--tw-shadow-colored: 0 2px 12px -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-\[0_2px_8px_-2px_hsl\(var\(--destructive\)\/0\.4\)\] {
--tw-shadow: 0 2px 8px -2px hsl(var(--destructive)/0.4);
--tw-shadow-colored: 0 2px 8px -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-\[0_4px_24px_-12px_hsl\(var\(--accent\)\/0\.4\)\] {
--tw-shadow: 0 4px 24px -12px hsl(var(--accent)/0.4);
--tw-shadow-colored: 0 4px 24px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_28px_-12px_hsl\(var\(--background\)\/0\.6\)\2c 0_2px_6px_-2px_hsl\(var\(--primary\)\/0\.15\)\] {
--tw-shadow: 0 8px 28px -12px hsl(var(--background)/0.6),0 2px 6px -2px hsl(var(--primary)/0.15);
--tw-shadow-colored: 0 8px 28px -12px var(--tw-shadow-color), 0 2px 6px -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-\[0_8px_28px_-12px_hsl\(var\(--background\)\/0\.6\)\] {
--tw-shadow: 0 8px 28px -12px hsl(var(--background)/0.6);
--tw-shadow-colored: 0 8px 28px -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-inner {
--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: inset 0 2px 4px 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-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-\[var\(--shadow-card\)\] {
--tw-shadow-color: var(--shadow-card);
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-\[var\(--shadow-stat\)\] {
--tw-shadow-color: var(--shadow-stat);
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-amber-500\/10 {
--tw-shadow-color: rgb(245 158 11 / 0.1);
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-amber-500\/30 {
--tw-shadow-color: rgb(245 158 11 / 0.3);
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary\/10 {
--tw-shadow-color: hsl(var(--primary) / 0.1);
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary\/20 {
--tw-shadow-color: hsl(var(--primary) / 0.2);
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary\/25 {
--tw-shadow-color: hsl(var(--primary) / 0.25);
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary\/30 {
--tw-shadow-color: hsl(var(--primary) / 0.3);
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary\/5 {
--tw-shadow-color: hsl(var(--primary) / 0.05);
--tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline {
outline-style: solid;
}
.\!ring-0 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.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-inset {
--tw-ring-inset: inset;
}
.ring-accent\/20 {
--tw-ring-color: hsl(var(--accent) / 0.2);
}
.ring-accent\/30 {
--tw-ring-color: hsl(var(--accent) / 0.3);
}
.ring-accent\/35 {
--tw-ring-color: hsl(var(--accent) / 0.35);
}
.ring-accent\/40 {
--tw-ring-color: hsl(var(--accent) / 0.4);
}
.ring-action\/50 {
--tw-ring-color: hsl(var(--z-action) / 0.5);
}
.ring-amber-400\/30 {
--tw-ring-color: rgb(251 191 36 / 0.3);
}
.ring-amber-400\/40 {
--tw-ring-color: rgb(251 191 36 / 0.4);
}
.ring-amber-500\/20 {
--tw-ring-color: rgb(245 158 11 / 0.2);
}
.ring-amber-500\/30 {
--tw-ring-color: rgb(245 158 11 / 0.3);
}
.ring-background {
--tw-ring-color: hsl(var(--background));
}
.ring-black\/5 {
--tw-ring-color: rgb(0 0 0 / 0.05);
}
.ring-border {
--tw-ring-color: hsl(var(--border));
}
.ring-border\/30 {
--tw-ring-color: hsl(var(--border) / 0.3);
}
.ring-border\/40 {
--tw-ring-color: hsl(var(--border) / 0.4);
}
.ring-border\/50 {
--tw-ring-color: hsl(var(--border) / 0.5);
}
.ring-border\/60 {
--tw-ring-color: hsl(var(--border) / 0.6);
}
.ring-emerald-500\/30 {
--tw-ring-color: rgb(16 185 129 / 0.3);
}
.ring-foreground {
--tw-ring-color: hsl(var(--foreground));
}
.ring-foreground\/10 {
--tw-ring-color: hsl(var(--foreground) / 0.1);
}
.ring-foreground\/15 {
--tw-ring-color: hsl(var(--foreground) / 0.15);
}
.ring-gain\/15 {
--tw-ring-color: hsl(var(--gain) / 0.15);
}
.ring-gain\/20 {
--tw-ring-color: hsl(var(--gain) / 0.2);
}
.ring-gain\/30 {
--tw-ring-color: hsl(var(--gain) / 0.3);
}
.ring-gain\/40 {
--tw-ring-color: hsl(var(--gain) / 0.4);
}
.ring-gain\/55 {
--tw-ring-color: hsl(var(--gain) / 0.55);
}
.ring-info\/20 {
--tw-ring-color: hsl(var(--info) / 0.2);
}
.ring-info\/30 {
--tw-ring-color: hsl(var(--info) / 0.3);
}
.ring-info\/40 {
--tw-ring-color: hsl(var(--info) / 0.4);
}
.ring-info\/55 {
--tw-ring-color: hsl(var(--info) / 0.55);
}
.ring-loss\/15 {
--tw-ring-color: hsl(var(--loss) / 0.15);
}
.ring-loss\/20 {
--tw-ring-color: hsl(var(--loss) / 0.2);
}
.ring-loss\/30 {
--tw-ring-color: hsl(var(--loss) / 0.3);
}
.ring-loss\/40 {
--tw-ring-color: hsl(var(--loss) / 0.4);
}
.ring-loss\/55 {
--tw-ring-color: hsl(var(--loss) / 0.55);
}
.ring-muted-foreground\/15 {
--tw-ring-color: hsl(var(--muted-foreground) / 0.15);
}
.ring-muted-foreground\/40 {
--tw-ring-color: hsl(var(--muted-foreground) / 0.4);
}
.ring-orange-400\/25 {
--tw-ring-color: rgb(251 146 60 / 0.25);
}
.ring-primary {
--tw-ring-color: hsl(var(--primary));
}
.ring-primary\/10 {
--tw-ring-color: hsl(var(--primary) / 0.1);
}
.ring-primary\/20 {
--tw-ring-color: hsl(var(--primary) / 0.2);
}
.ring-primary\/25 {
--tw-ring-color: hsl(var(--primary) / 0.25);
}
.ring-primary\/30 {
--tw-ring-color: hsl(var(--primary) / 0.3);
}
.ring-primary\/35 {
--tw-ring-color: hsl(var(--primary) / 0.35);
}
.ring-primary\/40 {
--tw-ring-color: hsl(var(--primary) / 0.4);
}
.ring-primary\/5 {
--tw-ring-color: hsl(var(--primary) / 0.05);
}
.ring-primary\/50 {
--tw-ring-color: hsl(var(--primary) / 0.5);
}
.ring-primary\/60 {
--tw-ring-color: hsl(var(--primary) / 0.6);
}
.ring-ring {
--tw-ring-color: hsl(var(--ring));
}
.ring-rose-500\/30 {
--tw-ring-color: rgb(244 63 94 / 0.3);
}
.ring-sidebar-ring {
--tw-ring-color: hsl(var(--sidebar-ring));
}
.ring-transparent {
--tw-ring-color: transparent;
}
.ring-warning\/10 {
--tw-ring-color: hsl(var(--warning) / 0.1);
}
.ring-warning\/20 {
--tw-ring-color: hsl(var(--warning) / 0.2);
}
.ring-warning\/30 {
--tw-ring-color: hsl(var(--warning) / 0.3);
}
.ring-warning\/40 {
--tw-ring-color: hsl(var(--warning) / 0.4);
}
.ring-warning\/55 {
--tw-ring-color: hsl(var(--warning) / 0.55);
}
.ring-offset-1 {
--tw-ring-offset-width: 1px;
}
.ring-offset-background {
--tw-ring-offset-color: hsl(var(--background));
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-2xl {
--tw-blur: blur(40px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
--tw-blur: blur(64px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-md {
--tw-blur: blur(12px);
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);
}
.invert {
--tw-invert: invert(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) !important;
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
--tw-backdrop-blur: blur(8px);
-webkit-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: 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-\[2px\] {
--tw-backdrop-blur: blur(2px);
-webkit-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: 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);
-webkit-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: 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);
-webkit-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: 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-xl {
--tw-backdrop-blur: blur(24px);
-webkit-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: 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 {
-webkit-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: 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, -webkit-backdrop-filter !important;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter !important;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
transition-duration: 150ms !important;
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[border-color\2c box-shadow\2c background-color\] {
transition-property: border-color,box-shadow,background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[border-color\2c box-shadow\2c transform\] {
transition-property: border-color,box-shadow,transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[height\] {
transition-property: height;
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 opa\] {
transition-property: margin,opa;
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-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-100 {
transition-duration: 100ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
.duration-150 {
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-500 {
transition-duration: 500ms;
}
.duration-700 {
transition-duration: 700ms;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
transition-timing-function: linear;
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-transform {
will-change: transform;
}
@keyframes enter {
from {
opacity: var(--tw-enter-opacity, 1);
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
}
}
@keyframes exit {
to {
opacity: var(--tw-exit-opacity, 1);
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
}
}
.animate-in {
animation-name: enter;
animation-duration: 150ms;
--tw-enter-opacity: initial;
--tw-enter-scale: initial;
--tw-enter-rotate: initial;
--tw-enter-translate-x: initial;
--tw-enter-translate-y: initial;
}
.fade-in {
--tw-enter-opacity: 0;
}
.fade-in-0 {
--tw-enter-opacity: 0;
}
.fade-in-80 {
--tw-enter-opacity: 0.8;
}
.zoom-in-95 {
--tw-enter-scale: .95;
}
.slide-in-from-bottom {
--tw-enter-translate-y: 100%;
}
.slide-in-from-bottom-2 {
--tw-enter-translate-y: 0.5rem;
}
.slide-in-from-bottom-4 {
--tw-enter-translate-y: 1rem;
}
.slide-in-from-bottom-5 {
--tw-enter-translate-y: 1.25rem;
}
.slide-in-from-top-1 {
--tw-enter-translate-y: -0.25rem;
}
.slide-in-from-top-2 {
--tw-enter-translate-y: -0.5rem;
}
.duration-100 {
animation-duration: 100ms;
}
.duration-1000 {
animation-duration: 1000ms;
}
.duration-150 {
animation-duration: 150ms;
}
.duration-200 {
animation-duration: 200ms;
}
.duration-300 {
animation-duration: 300ms;
}
.duration-500 {
animation-duration: 500ms;
}
.duration-700 {
animation-duration: 700ms;
}
.ease-in-out {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
animation-timing-function: linear;
}
.ease-out {
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\!running {
animation-play-state: running !important;
}
.running {
animation-play-state: running;
}
.\!paused {
animation-play-state: paused !important;
}
.paused {
animation-play-state: paused;
}
.\@container {
container-type: inline-size;
}
.\@container\/cell {
container-type: inline-size;
container-name: cell;
}
.\@container\/evidence {
container-type: inline-size;
container-name: evidence;
}
/* Slice 24V.1 — 44x44 minimum tap target on coarse pointers only. */
@media (pointer: coarse) {
.touch-target-44 {
min-height: 44px;
min-width: 44px;
}
}
/* Slice 32B.3 — ticker chrome geometry. Both utilities are keyed on the
rotator selection condition, so the row that CONTAINS the 44px targets
grows exactly when those targets exist — narrow/fine pointers included. */
@media (max-width: 639.98px), (pointer: coarse) {
.narrow-ticker-row {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
.narrow-touch-target-44 {
min-height: 44px;
min-width: 44px;
}
}
.scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
display: none;
}
.font-mono {
font-family: var(--font-mono);
/* Crisper numerals: tabular figures + stylistic alt for "1" / "0".
Applied globally so every score, price, % and rank line up under each other. */
font-variant-numeric: tabular-nums slashed-zero;
font-feature-settings: "tnum" 1, "ss01" 1, "cv01" 1, "zero" 1;
letter-spacing: -0.005em;
}
/* Display family for headings & big KPI numbers — same family as body
but heavier weight + tighter tracking gives a distinct editorial voice. */
.font-display {
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: -0.018em;
font-feature-settings: "ss01" 1, "cv11" 1;
}
/* Tabular numerals for any element (not only mono). Use on headline KPIs. */
.font-num {
font-variant-numeric: tabular-nums slashed-zero;
font-feature-settings: "tnum" 1, "zero" 1;
}
/* ── Premium typography primitives ──
Use these instead of ad-hoc class soup so every screen breathes the
same rhythm. All numbers are tabular + slashed-zero so columns lock
and never jitter on live updates. */
/* Hero KPI — the single big number on a card (price, score, count). */
.text-kpi-sm {
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.1;
letter-spacing: -0.022em;
font-variant-numeric: tabular-nums slashed-zero;
font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
font-optical-sizing: auto;
}
/* Inline data — prices, %, scores in tables/rows. Mono, locked column width. */
/* Micro label — uppercase eyebrow above values. Replaces ad-hoc
"text-[10px] uppercase tracking-wider text-muted-foreground" repeated
across 200+ files. */
.text-label-sm {
font-size: 9.5px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0.10em;
text-transform: uppercase;
color: hsl(var(--muted-foreground) / 0.75);
}
/* Section title — replaces "text-sm font-bold tracking-tight" everywhere. */
.text-section-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
line-height: 1.25;
letter-spacing: -0.018em;
color: hsl(var(--foreground));
}
/* Headlines wrap nicely without orphans — kills CLS on resize. */
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
/* Pro table chrome — uppercase header cells + zebra striping.
Stacks cleanly with shadcn : just add `table-pro-head` to
or `table-zebra` to . Uses semantic tokens only. */
.dark .table-zebra > tr:nth-child(even of :not(.no-zebra)) {
background: hsl(var(--muted) / 0.10);
}
/* TradingView-grade row hover — quiet bg shift + 2px primary rail on the
leading edge. Inset box-shadow keeps the row height stable (no border
reflow). Opt-in via `table-zebra` on , or `data-row-rail` on any
/ . Honors prefers-reduced-motion. */
.table-zebra > tr,
[data-row-rail] > tr,
tr[data-row-rail] {
transition: background-color 140ms ease, box-shadow 140ms ease;
}
.table-zebra > tr:hover:not(.no-hover),
[data-row-rail] > tr:hover,
tr[data-row-rail]:hover {
background: hsl(var(--primary) / 0.06);
box-shadow: inset 2px 0 0 0 hsl(var(--primary) / 0.7);
}
.dark .table-zebra > tr:hover:not(.no-hover),
.dark [data-row-rail] > tr:hover,
.dark tr[data-row-rail]:hover {
background: hsl(var(--primary) / 0.09);
box-shadow: inset 2px 0 0 0 hsl(var(--primary) / 0.85);
}
@media (prefers-reduced-motion: reduce) {
.table-zebra > tr,
[data-row-rail] > tr,
tr[data-row-rail] {
transition: none;
}
}
.text-gain {
color: hsl(var(--gain));
}
.text-loss {
color: hsl(var(--loss));
}
.text-warning {
color: hsl(var(--warning));
}
.gradient-score {
background: var(--gradient-score);
}
.safe-area-bottom {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.safe-area-top {
padding-top: env(safe-area-inset-top, 0px);
}
/* ── Cyber-tech utilities ── */
.dark .circuit-overlay::before {
opacity: 0.10;
}
/* ── Subtle SVG noise texture for dark surfaces ──
Inline base64 fractal-noise SVG. Adds tactile grain that prevents
flat HSL fills from showing color-banding on OLED/dark mode.
Apply via `.dark-card-noise` on any card; light mode = no-op. */
.dark-card-noise {
position: relative;
isolation: isolate;
}
.dark .dark-card-noise::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
border-radius: inherit;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,` anchors. `:where()` keeps
specificity at 0 so per-component `scroll-mt-*` utilities still win. */
:where([id], [name]) {
scroll-margin-top: calc(var(--header-offset) + 8px);
}
/* ── Universal overlay scroll-lock neutraliser ─────────────────────────────
ANY overlay library (Radix Dialog/Popover/Select/DropdownMenu/Sheet/
ContextMenu/HoverCard, Vaul Drawer, custom JS) locks body scroll and
"compensates" for the (about-to-disappear) scrollbar by injecting inline
padding/margin on . Because we already reserve the gutter on
via `scrollbar-gutter: stable` AND the body has real `padding-left/right`
to clear the fixed Zenitra side rails (see zenitra.css), that library
compensation CLOBBERS the rail offset → main content slides UNDER the
side rails every time a dialog/popover opens.
The rules below preserve `scrollbar-gutter` and force body padding to
stay equal to the rail widths no matter what inline styles libraries
inject. New libraries are caught by the generic `body[style]` selectors. */
/* 1. Keep scrollable so `scrollbar-gutter: stable` keeps reserving
the gutter even when a library swaps html.overflow to hidden. */
html {
overflow-y: auto !important;
}
/* 37U175 — phones/tablets must render edge-to-edge.
`scrollbar-gutter: stable` (set above for the desktop dialog-jump fix)
permanently reserves a classic scrollbar track, so on a 390px phone the
document measured 380px and every surface was inset by ~10px — the
"not full width" report. Touch viewports use overlay scrollbars and never
need the reservation, so release it below lg. Desktop behaviour is
unchanged. */
@media (max-width: 1023.98px) {
html {
scrollbar-gutter: auto;
}
}
/* 2. Preserve rail-aware body padding even when an overlay library writes
inline `padding-right`/`padding-left` for scrollbar compensation.
The rails themselves are `hidden lg:flex`, so the padding must ONLY
apply at lg+ — otherwise mobile/tablet inherit the desktop rail width
(232px) and content gets squeezed into a narrow column.
Slice 24T: only the LEFT rail exists, so no right reservation remains. */
@media (min-width: 1024px) {
html body,
html body[style],
html body[data-scroll-locked],
html body[data-vaul-drawer-visible],
html body[data-vaul-drawer] {
padding-left: var(--zenitra-rail-w, 0px) !important;
padding-right: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
}
/* Below lg: force body edge-to-edge regardless of any rail CSS var that
leaked from a prior desktop session (vars persist on until
the next mount). */
@media (max-width: 1023.98px) {
html body,
html body[style] {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* 3. Neutralise react-remove-scroll-bar helper classes (applied to body
and to portaled fixed children to keep them aligned with the
compensated body). */
.with-scroll-bars-hidden,
html body .with-scroll-bars-hidden,
.width-before-scroll-bar,
html body .width-before-scroll-bar {
margin-right: 0 !important;
padding-right: 0 !important;
}
.right-scroll-bar-position,
html body .right-scroll-bar-position {
right: 0 !important;
}
/* 4. Vaul (mobile drawer) on iOS sets `position: fixed` on body to dodge
iOS Safari scroll bugs — that takes body out of normal flow and can
cause a 1-frame width collapse on desktop Safari too. Force body to
stay in flow; Vaul's scroll-lock is handled by its overlay anyway. */
html body[style*="position: fixed"],
html body[style*="position:fixed"] {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
height: auto !important;
}
/* ── Animation smoothness layer ──
1. Widget cards (the heaviest, most numerous surfaces) get paint+layout
containment so a hover/resize/state-change inside one card does NOT
invalidate the parent layout or trigger sibling repaints.
2. Tab-swap entrance animations (`animate-fade-in`, `animate-scale-in`,
`animate-enter`) get GPU promotion + backface hiding so the browser
composites them on their own layer instead of re-rasterising every frame.
3. `prefers-reduced-motion` honored globally — all animations collapse
to a single 0.01ms tick + transitions to ~80ms so motion-sensitive
users get no jank AND no perceived slowness.
These rules are framework-agnostic and add zero JS cost. */
.widget-card,
[class*="widget-card"] {
contain: layout paint;
}
/* GPU-promote ONLY while the animation runs. Persisting
`transform: translateZ(0)` + `will-change` on tab content rasterised text to
a GPU texture, which produced blurry/sub-pixel rendering on the Overview tab
at devicePixelRatio < 1 (Financials tab had no animate-fade-in wrapper so it
stayed crisp). Opacity-only fades composite fine without explicit promotion;
accordion height animations still benefit from will-change scoped to the
transition itself. */
.animate-accordion-down,
.animate-accordion-up {
will-change: height;
}
.animate-fade-in,
.animate-scale-in,
.animate-enter {
animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 80ms !important;
scroll-behavior: auto !important;
}
}
/* ── Global readability improvements ── */
/* Enforce minimum readable font size (12px floor) */
.text-\[9px\] { font-size: 12px !important; }
.text-\[10px\] { font-size: 12.5px !important; }
.text-\[11px\] { font-size: 12.5px !important; }
/* Boost muted-foreground on small text for better contrast */
.text-muted-foreground {
font-weight: 500;
}
/* Make badge text more legible */
[class*="badge"], [class*="Badge"] {
font-weight: 600;
letter-spacing: 0.01em;
}
/* Ensure mono text in dark mode is legible */
.dark .font-mono {
font-weight: 500;
}
/* ───────────────────────────────────────────────────────────
CONTRAST SAFETY NET
Prevents the "same-color-text-on-same-color-bg" bug class.
When an element uses an OPAQUE semantic background
(bg-primary, bg-accent, bg-gain, bg-loss, bg-warning,
bg-info, bg-destructive), force readable foreground on
the element AND on any descendant that erroneously
declares text in the same hue. This is the single most
common a11y bug we have, because hundreds of components
share the `bg-{c}/X + text-{c}` pattern that breaks the
moment opacity is bumped above ~30%.
We use :where() to keep specificity at 0 so component
styles can still override intentionally.
─────────────────────────────────────────────────────── */
:where(.bg-primary):not([class*="bg-primary/"]) {
color: hsl(var(--primary-foreground));
}
:where(.bg-primary):not([class*="bg-primary/"])
:where(.text-primary, .text-foreground) {
color: hsl(var(--primary-foreground)) !important;
}
:where(.bg-accent):not([class*="bg-accent/"]) {
color: hsl(var(--accent-foreground));
}
:where(.bg-accent):not([class*="bg-accent/"])
:where(.text-accent, .text-foreground) {
color: hsl(var(--accent-foreground)) !important;
}
:where(.bg-destructive):not([class*="bg-destructive/"]) {
color: hsl(var(--destructive-foreground));
}
:where(.bg-destructive):not([class*="bg-destructive/"])
:where(.text-destructive, .text-foreground) {
color: hsl(var(--destructive-foreground)) !important;
}
:where(.bg-gain):not([class*="bg-gain/"]) {
color: hsl(var(--on-gain));
}
:where(.bg-gain):not([class*="bg-gain/"])
:where(.text-gain, .text-foreground) {
color: hsl(var(--on-gain)) !important;
}
:where(.bg-loss):not([class*="bg-loss/"]) {
color: hsl(var(--on-loss));
}
:where(.bg-loss):not([class*="bg-loss/"])
:where(.text-loss, .text-foreground) {
color: hsl(var(--on-loss)) !important;
}
:where(.bg-warning):not([class*="bg-warning/"]) {
color: hsl(var(--on-warning));
}
:where(.bg-warning):not([class*="bg-warning/"])
:where(.text-warning, .text-foreground) {
color: hsl(var(--on-warning)) !important;
}
:where(.bg-info):not([class*="bg-info/"]) {
color: hsl(var(--on-info));
}
:where(.bg-info):not([class*="bg-info/"])
:where(.text-info, .text-foreground) {
color: hsl(var(--on-info)) !important;
}
/* High-opacity tints (≥ /60) also need protection because the
token color becomes visually dominant. */
:where(.bg-primary\/60, .bg-primary\/70, .bg-primary\/75, .bg-primary\/80, .bg-primary\/90, .bg-primary\/95)
:where(.text-primary) { color: hsl(var(--primary-foreground)) !important; }
:where(.bg-accent\/60, .bg-accent\/70, .bg-accent\/75, .bg-accent\/80, .bg-accent\/90, .bg-accent\/95)
:where(.text-accent) { color: hsl(var(--accent-foreground)) !important; }
:where(.bg-gain\/60, .bg-gain\/70, .bg-gain\/75, .bg-gain\/80, .bg-gain\/90, .bg-gain\/95)
:where(.text-gain) { color: hsl(var(--on-gain)) !important; }
:where(.bg-loss\/60, .bg-loss\/70, .bg-loss\/75, .bg-loss\/80, .bg-loss\/90, .bg-loss\/95)
:where(.text-loss) { color: hsl(var(--on-loss)) !important; }
:where(.bg-warning\/60, .bg-warning\/70, .bg-warning\/75, .bg-warning\/80, .bg-warning\/90, .bg-warning\/95)
:where(.text-warning) { color: hsl(var(--on-warning)) !important; }
:where(.bg-info\/60, .bg-info\/70, .bg-info\/75, .bg-info\/80, .bg-info\/90, .bg-info\/95)
:where(.text-info) { color: hsl(var(--on-info)) !important; }
:where(.bg-destructive\/60, .bg-destructive\/70, .bg-destructive\/75, .bg-destructive\/80, .bg-destructive\/90, .bg-destructive\/95)
:where(.text-destructive) { color: hsl(var(--destructive-foreground)) !important; }
/* Improve table readability */
table th {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.03em;
}
table td {
font-size: 13px;
font-weight: 450;
}
/* Subtitle and secondary text improvements */
.dark .text-muted-foreground\/40 { color: hsl(var(--muted-foreground) / 0.55) !important; }
.dark .text-muted-foreground\/50 { color: hsl(var(--muted-foreground) / 0.65) !important; }
.dark .text-muted-foreground\/60 { color: hsl(var(--muted-foreground) / 0.75) !important; }
.dark .text-foreground\/60 { color: hsl(var(--foreground) / 0.7) !important; }
.dark .text-foreground\/50 { color: hsl(var(--foreground) / 0.65) !important; }
/* Improve text-xs readability */
.text-xs { font-size: 13px !important; line-height: 1.4 !important; }
/* ── Mobile / Touch optimizations ── */
/* 37HI — tablets in portrait are coarse-pointer surfaces too, so the touch
contract extends past the phone breakpoint. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1023.98px) {
/* 37HI — this rule is UNLAYERED, so it used to beat every Tailwind
`min-h-[44px]` utility and silently capped primary controls at 36px.
Navigation, tabs and toolbar controls now meet the 44px contract;
inline/link text inside prose keeps its natural box. */
button,
[role="tab"],
[role="button"],
nav a[href],
header a[href] {
min-height: 44px;
}
a[href] {
min-height: 36px;
}
/* Opt-out for dense inline chips that are not primary controls. */
.touch-target-dense,
.touch-target-dense button,
.touch-target-dense a[href] {
min-height: 0;
}
/* Reduce card shadows on mobile for performance */
.stock-card-enhanced,
.widget-card,
.kpi-card {
box-shadow: 0 1px 2px hsl(0 0% 0% / 0.08);
}
.stock-card-enhanced:hover,
.widget-card:hover,
.kpi-card:hover {
transform: none;
box-shadow: 0 1px 2px hsl(0 0% 0% / 0.08);
}
/* Tighter spacing for mobile content */
.widget-card {
border-radius: 0.625rem;
}
}
/* ── Tablet breakpoint (768-1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
.stock-card-enhanced:hover {
transform: none;
}
}
/* Card shadows */
.dashboard-card {
box-shadow: var(--shadow-card);
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.dashboard-card:hover {
box-shadow: var(--shadow-card-hover);
}
/* Stat mini-card */
.stat-chip {
box-shadow: var(--shadow-stat);
}
/* ── Stock Card enhanced — premium elevated surface ── */
.stock-card-enhanced {
background:
radial-gradient(120% 80% at 0% 0%, hsl(var(--primary) / 0.04) 0%, transparent 55%),
linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--card) / 0.96) 100%);
border: 1px solid hsl(var(--border) / 0.6);
border-radius: calc(var(--radius) + 4px);
box-shadow:
0 1px 0 hsl(var(--foreground) / 0.04) inset,
0 1px 2px hsl(0 0% 0% / 0.06),
0 4px 14px -8px hsl(0 0% 0% / 0.18);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
isolation: isolate;
}
.stock-card-enhanced::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-card-shine);
pointer-events: none;
z-index: 1;
opacity: 0.6;
}
.stock-card-enhanced::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(180deg, hsl(var(--foreground) / 0.06), transparent 40%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 2;
}
.stock-card-enhanced:hover {
border-color: hsl(var(--primary) / 0.35);
box-shadow:
0 1px 0 hsl(var(--foreground) / 0.05) inset,
0 8px 28px -10px hsl(var(--primary) / 0.22),
0 2px 6px hsl(0 0% 0% / 0.08);
transform: translateY(-2px);
}
.dark .stock-card-enhanced {
background:
radial-gradient(120% 80% at 0% 0%, hsl(var(--primary) / 0.07) 0%, transparent 55%),
linear-gradient(180deg, hsl(222 30% 9%) 0%, hsl(222 36% 6%) 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: hsl(var(--primary) / 0.14);
box-shadow:
0 1px 0 hsl(var(--foreground) / 0.05) inset,
0 1px 2px hsl(0 0% 0% / 0.35),
0 6px 18px -10px hsl(0 0% 0% / 0.5);
}
.dark .stock-card-enhanced:hover {
border-color: hsl(var(--primary) / 0.45);
box-shadow:
0 1px 0 hsl(var(--foreground) / 0.06) inset,
0 10px 32px -10px hsl(var(--primary) / 0.4),
0 0 28px -8px hsl(var(--primary) / 0.28),
0 4px 10px hsl(0 0% 0% / 0.4);
}
/* ── Shimmer skeleton animation ── */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton-shimmer {
background: linear-gradient(
90deg,
hsl(var(--muted)) 25%,
hsl(var(--muted-foreground) / 0.08) 50%,
hsl(var(--muted)) 75%
);
background-size: 200% 100%;
animation: shimmer 1.8s ease-in-out infinite;
}
/* ── Price flash on update — TradingView-grade tick feedback ──
Apply `.flash-up` / `.flash-down` to any element when its numeric value
changes; the class auto-clears via animation. Use with a small useEffect
that toggles the class on prev-vs-next comparison. */
@keyframes price-flash-up {
0% { background-color: hsl(var(--gain) / 0.28); color: hsl(var(--gain)); }
100% { background-color: transparent; }
}
@keyframes price-flash-down {
0% { background-color: hsl(var(--loss) / 0.28); color: hsl(var(--loss)); }
100% { background-color: transparent; }
}
.flash-up {
animation: price-flash-up 600ms cubic-bezier(0.16, 1, 0.3, 1);
border-radius: 3px;
padding: 0 2px;
margin: 0 -2px;
}
.flash-down {
animation: price-flash-down 600ms cubic-bezier(0.16, 1, 0.3, 1);
border-radius: 3px;
padding: 0 2px;
margin: 0 -2px;
}
@media (prefers-reduced-motion: reduce) {
.flash-up, .flash-down { animation: none; }
}
/* ── Table row hover lift ── */
tr.row-hover-lift {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
tr.row-hover-lift:hover {
background: hsl(var(--secondary) / 0.5);
box-shadow: 0 1px 4px hsl(var(--primary) / 0.06);
}
.dark tr.row-hover-lift:hover {
background: hsl(var(--primary) / 0.06);
box-shadow:
inset 3px 0 0 hsl(var(--primary) / 0.7),
0 0 18px -4px hsl(var(--primary) / 0.18);
}
.dark tr.row-hover-lift td:first-child {
position: relative;
}
/* Light mode refinements */
:root:not(.dark) header.app-header {
box-shadow: 0 1px 4px hsl(220 20% 12% / 0.05);
background: hsl(0 0% 100% / 0.97);
}
:root:not(.dark) table {
background-color: hsl(0 0% 100%);
}
/* Dark mode header */
.dark header.app-header {
background: hsl(222 38% 5%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: hsl(var(--primary) / 0.16);
box-shadow:
0 1px 0 hsl(var(--primary) / 0.18),
0 0 28px hsl(var(--primary) / 0.08),
0 4px 18px hsl(0 0% 0% / 0.35);
/* Slice 32I: no `position` here — the header is `sticky top-0` via Tailwind
and a positioned box already establishes the containing block for the
::before/::after accents. */
}
.dark header.app-header::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
/* Tab pill style — refined with animated indicator + press feedback */
.tab-pill {
transition: color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
position: relative;
border-radius: calc(var(--radius) - 2px);
will-change: transform;
}
.tab-pill:hover {
background-color: hsl(var(--muted));
}
.tab-pill:active:not(:disabled) {
transform: translateY(0.5px) scale(0.985);
}
.tab-pill.active {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
box-shadow: 0 0 0 1px hsl(var(--primary) / 0.25);
font-weight: 600;
}
.dark .tab-pill.active {
box-shadow: 0 0 0 1px hsl(var(--primary) / 0.3);
}
/* ── Cyber TabBar container ── */
.dark [role="tablist"].cyber-tabbar {
background: linear-gradient(180deg, hsl(222 32% 9%), hsl(222 36% 6%));
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: hsl(var(--primary) / 0.18);
box-shadow:
inset 0 1px 0 hsl(var(--primary) / 0.06),
0 0 0 1px hsl(var(--primary) / 0.05);
}
[role="tablist"].cyber-tabbar {
position: relative;
}
[role="tablist"].cyber-tabbar::before {
content: '';
position: absolute;
left: 8%;
right: 8%;
bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.45), hsl(var(--accent) / 0.35), transparent);
pointer-events: none;
opacity: 0.7;
}
/* Active-tab indicator — flat ring, no diffuse glow. Spring-eased glide
(subtle overshoot) makes the swap feel mechanical-precise instead of soft. */
.cyber-tab-indicator {
background: linear-gradient(180deg, hsl(var(--primary) / 0.14), hsl(var(--primary) / 0.06)) !important;
border: 1px solid hsl(var(--primary) / 0.45) !important;
box-shadow:
0 0 0 1px hsl(var(--primary) / 0.08),
inset 0 1px 0 hsl(var(--primary) / 0.18) !important;
transition:
left 280ms cubic-bezier(0.34, 1.25, 0.64, 1),
width 280ms cubic-bezier(0.34, 1.25, 0.64, 1) !important;
}
.dark .cyber-tab-indicator {
box-shadow:
0 0 0 1px hsl(var(--primary) / 0.14),
inset 0 1px 0 hsl(var(--primary) / 0.22) !important;
}
@media (prefers-reduced-motion: reduce) {
.cyber-tab-indicator {
transition: none !important;
}
}
box-shadow:
0 0 0 1px hsl(var(--primary) / 0.14),
0 0 22px hsl(var(--primary) / 0.45),
0 0 44px hsl(var(--primary) / 0.18),
inset 0 1px 0 hsl(var(--primary) / 0.22) !important;
}
/* ── Cyber KPI top accent — replaces flat gradient bar ── */
.kpi-cyber-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
pointer-events: none;
z-index: 2;
}
.kpi-cyber-bar::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, currentColor, transparent);
filter: drop-shadow(0 0 6px currentColor);
opacity: 0.85;
}
.dark .kpi-cyber-bar::before {
filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 14px currentColor);
}
/* Widget card styling */
.widget-card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) + 2px);
box-shadow: var(--shadow-card);
transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
position: relative;
overflow: hidden;
}
.widget-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-card-shine);
pointer-events: none;
z-index: 0;
}
.widget-card > *:not(.absolute):not([class*=" absolute"]):not([class^="absolute"]) {
position: relative;
z-index: 1;
}
.widget-card:hover {
box-shadow: var(--shadow-card-hover);
border-color: hsl(var(--primary) / 0.15);
}
.dark .widget-card {
background: linear-gradient(180deg, hsl(222 30% 9%), hsl(222 36% 6%));
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: hsl(var(--primary) / 0.12);
}
/* Subtle film-grain on every dark card to defeat OLED color-banding.
Sits above ::before shine but below content (which has z-index:1). */
.dark .widget-card::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
border-radius: inherit;
opacity: 0.03;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8, .max-w-7xl,
html.zenitra [role="tabpanel"] > .max-w-6xl,
html.zenitra [role="tabpanel"] > .max-w-5xl {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ── Layer 2: Tab bar — flatten to underline (Zenitra-style) ── */
html.zenitra .cyber-tabbar {
background: transparent !important;
border: none !important;
border-bottom: 1px solid hsl(var(--border)) !important;
border-radius: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
html.zenitra .cyber-tab-indicator {
background: transparent !important;
border-radius: 0 !important;
top: auto !important;
bottom: 0 !important;
height: 2px !important;
box-shadow: none !important;
background-color: hsl(var(--primary)) !important;
}
html.zenitra .cyber-tabbar .tab-pill {
border-radius: 0 !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
font-weight: 500 !important;
}
html.zenitra .cyber-tabbar > div > div[aria-hidden="true"] {
display: none !important;
}
/* ── Layer 3: Dashboard surfaces ────────────────────────────────
Flatten gradients/glows on StatsBar, KPI tiles, score chips,
and remaining cyber-card residue. No component rewrites needed
— overrides match existing classnames so every Hot Radar /
Top Picks / KPI surface inherits the Zenitra look. */
/* StatsBar — hairline, no backdrop blur, no gradient seam */
html.zenitra [role="status"][aria-live="polite"] {
background: hsl(var(--card)) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid hsl(var(--border) / 0.72) !important;
}
html.zenitra [role="status"][aria-live="polite"]::after {
display: none !important;
}
/* 37SQ — Flattening is scoped to EXPLICIT decorative surfaces only.
The former `[class*="bg-gradient-to-"][class*="from-primary"]`
substring selectors matched shared Button CTAs (Charts "Watchlist",
chart layout toggles) and stripped their background while leaving
`text-primary-foreground`, producing 1.02:1 invisible controls.
Component role is never inferred from utility-class fragments. */
html.zenitra .kpi-card,
html.zenitra [data-zenitra-surface="flat"] {
background-image: none !important;
background-color: hsl(var(--card)) !important;
border: 1px solid hsl(var(--border)) !important;
box-shadow: none !important;
border-radius: var(--radius) !important;
}
/* Score chips / pills — keep accent bar, drop glow */
html.zenitra .score-chip,
html.zenitra .stat-chip {
box-shadow: none !important;
background: hsl(var(--card)) !important;
border: 1px solid hsl(var(--border)) !important;
}
/* Buttons — a flat CTA always swaps the gradient for a COMPLETE
semantic pair (background-color + foreground); we never remove
only the background-image. `[class~=]` matches whole-word classes,
so faint chip gradients (`from-primary/8`) keep their own styling. */
html.zenitra .btn-cyber,
html.zenitra button[class~="from-primary"],
html.zenitra [role="button"][class~="from-primary"],
html.zenitra a[class~="from-primary"] {
background-image: none !important;
background-color: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
box-shadow: none !important;
}
html.zenitra button[class~="from-accent"],
html.zenitra [role="button"][class~="from-accent"] {
background-image: none !important;
background-color: hsl(var(--accent)) !important;
color: hsl(var(--accent-foreground)) !important;
box-shadow: none !important;
}
html.zenitra button[class~="from-gain"],
html.zenitra [role="button"][class~="from-gain"] {
background-image: none !important;
background-color: hsl(var(--gain)) !important;
color: hsl(var(--gain-foreground)) !important;
box-shadow: none !important;
}
html.zenitra .btn-cyber *,
html.zenitra button[class~="from-primary"] *,
html.zenitra button[class~="from-accent"] *,
html.zenitra button[class~="from-gain"] * {
color: inherit !important;
}
/* Tables — universal tabular numeric alignment in body cells */
html.zenitra table tbody td {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Subtle row hover, no glow */
html.zenitra table tbody tr:hover {
background-color: hsl(var(--surface-hover, var(--muted))) !important;
}
/* Drop decorative after-line strips under headers */
html.zenitra .app-header::after,
html.zenitra [class*="after:bg-gradient-to-r"]::after {
display: none !important;
}
/* ── Layer 4: Generic shadcn Tabs → Zenitra underline ───────────
Catches Stock Detail drawer tabs, Admin tabs, Charts toolbar
tabs, Workspace sub-tabs — every Tabs component that uses
shadcn's [role="tablist"] / [role="tab"]. Active state = 2 px
underline + primary color; inactive = muted-foreground. */
html.zenitra [role="tablist"]:not(.cyber-tabbar):not(.preserve-tabs):not(.pill-tabs) {
background: transparent !important;
border: none !important;
border-bottom: 1px solid hsl(var(--border)) !important;
border-radius: 0 !important;
padding: 0 !important;
gap: 0 !important;
height: auto !important;
box-shadow: none !important;
}
html.zenitra [role="tablist"]:not(.cyber-tabbar):not(.preserve-tabs):not(.pill-tabs) > [role="tab"] {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
position: relative;
padding: 8px 14px !important;
font-size: 12.5px;
font-weight: 500;
color: hsl(var(--muted-foreground));
transition: color 120ms ease;
}
html.zenitra [role="tablist"]:not(.cyber-tabbar):not(.preserve-tabs):not(.pill-tabs) > [role="tab"]:hover {
color: hsl(var(--foreground));
background: hsl(var(--muted) / 0.4) !important;
}
html.zenitra [role="tablist"]:not(.cyber-tabbar):not(.preserve-tabs):not(.pill-tabs) > [role="tab"][data-state="active"],
html.zenitra [role="tablist"]:not(.cyber-tabbar):not(.preserve-tabs):not(.pill-tabs) > [role="tab"][aria-selected="true"] {
color: hsl(var(--primary)) !important;
background: transparent !important;
font-weight: 600;
}
html.zenitra [role="tablist"]:not(.cyber-tabbar):not(.preserve-tabs):not(.pill-tabs) > [role="tab"][data-state="active"]::after,
html.zenitra [role="tablist"]:not(.cyber-tabbar):not(.preserve-tabs):not(.pill-tabs) > [role="tab"][aria-selected="true"]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background-color: hsl(var(--primary));
pointer-events: none;
}
/* ── Layer 4: Tables — sticky header + right-aligned numbers ──
Force every inside .widget-card to stick to the top
of its scroll container, with an opaque card background and
a hairline divider. Body cells with numeric data class get
right alignment so columns read like a terminal. */
html.zenitra .widget-card table thead,
html.zenitra .widget-card table thead tr,
html.zenitra .widget-card table thead th {
position: sticky;
top: 0;
z-index: 2;
background: hsl(var(--card)) !important;
border-bottom: 1px solid hsl(var(--border)) !important;
box-shadow: 0 1px 0 hsl(var(--border));
}
/* Numeric cells (any th/td carrying .num/.tabular or data-num) → right align */
html.zenitra .num,
html.zenitra .tabular,
html.zenitra [data-num],
html.zenitra th.num,
html.zenitra td.num {
text-align: right;
}
/* ── Layer 4: Drawer / Dialog flatten ──────────────────────────
Stock Detail drawer + any shadcn Sheet/Dialog: drop gradients,
keep card surface + hairline border, no glow. */
html.zenitra [role="dialog"],
html.zenitra [data-vaul-drawer],
html.zenitra [data-vaul-drawer-content] {
background: hsl(var(--card)) !important;
border-color: hsl(var(--border)) !important;
box-shadow: 0 10px 40px -10px hsl(220 30% 2% / 0.55) !important;
}
/* 37SQ — decorative dialog surfaces only; interactive controls keep a
complete colour pair and are never left with a stripped background. */
html.zenitra [role="dialog"] [class*="bg-gradient"]:not(button):not(a):not([role="button"]):not([role="tab"]):not(.bg-primary),
html.zenitra [data-vaul-drawer-content] [class*="bg-gradient"]:not(button):not(a):not([role="button"]):not([role="tab"]):not(.bg-primary) {
background-image: none !important;
}
/* ── Layer 4: Scrollbars — thin, neutral, terminal feel ────── */
html.zenitra ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
html.zenitra ::-webkit-scrollbar-track {
background: transparent;
}
html.zenitra ::-webkit-scrollbar-thumb {
background: hsl(var(--border));
border-radius: 4px;
}
html.zenitra ::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.6);
}
html.zenitra * {
scrollbar-width: thin;
scrollbar-color: hsl(var(--border)) transparent;
}
/* ── Layer 5: Home polish at wide widths ───────────────────────
With both rails reserved and max-w stripped, the dashboard
gets ~1700 px of working width on 1080p+. Lift the grid gaps
and bump KPI tile minimum width so columns don't get crushed,
and let the Hot Radar / Top Picks split breathe. */
@media (min-width: 1280px) {
html.zenitra .kpi-grid,
html.zenitra [data-kpi-grid] {
gap: 12px !important;
}
html.zenitra .widget-card + .widget-card {
/* Stacked widgets get a bit more separation on wide screens */
}
}
/* Contrast: nudge body text on hairline borders so cards don't
blur into the background under the cooler palette. */
html.zenitra .text-muted-foreground {
color: hsl(var(--muted-foreground)) !important;
}
html.zenitra .border,
html.zenitra .border-border\/60 {
border-color: hsl(var(--border)) !important;
}
/* AppHeader is `position: sticky` (not fixed) so it lives inside
body's flow and inherits the rail padding automatically. No
special left/right override needed — and forcing one breaks
sticky behaviour. */
/* ─────────────────────────────────────────────────────────────
Layer 6 — Contrast hardening (v2)
─────────────────────────────────────────────────────────────
Fixes the screenshots:
1. Tiny CRO-style chips (`bg-primary/10 text-primary`) — the
light-blue-on-light-blue washout. Force a Zenitra chip
recipe with visible border and AA-level text.
2. Solid primary buttons that lost their label because an
underlying gradient stack was overriding `color`.
3. Uppercase tracker links like "LEVEL UP YOUR" that ship
with `text-primary/60..70` opacity.
4. Close (X) buttons inside dialogs/banners that ship with
`opacity-50/60`.
All scoped under `html.zenitra` — toggle off restores legacy. */
/* 1. Translucent primary chips → opaque, bordered, AA-readable.
Light mode: use --foreground for body text + primary tint on the
border. Dark mode: keep primary on dark — already readable. */
html.zenitra .bg-primary\/5,
html.zenitra .bg-primary\/10,
html.zenitra .bg-primary\/15,
html.zenitra .bg-primary\/20 {
background-color: hsl(var(--primary) / 0.12) !important;
color: hsl(var(--foreground)) !important;
box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.40);
}
html.zenitra.dark .bg-primary\/5,
html.zenitra.dark .bg-primary\/10,
html.zenitra.dark .bg-primary\/15,
html.zenitra.dark .bg-primary\/20 {
color: hsl(var(--primary)) !important;
}
html.zenitra .bg-accent\/5,
html.zenitra .bg-accent\/10,
html.zenitra .bg-accent\/15,
html.zenitra .bg-accent\/20 {
background-color: hsl(var(--accent) / 0.12) !important;
color: hsl(var(--foreground)) !important;
box-shadow: inset 0 0 0 1px hsl(var(--accent) / 0.40);
}
html.zenitra.dark .bg-accent\/5,
html.zenitra.dark .bg-accent\/10,
html.zenitra.dark .bg-accent\/15,
html.zenitra.dark .bg-accent\/20 {
color: hsl(var(--accent)) !important;
}
/* 2. Solid primary buttons — kill leftover gradients, force label colour.
Exception: gradient-text (bg-clip-text + text-transparent) inside
a primary surface must keep its transparent fill, otherwise the
label vanishes against the solid blue. */
html.zenitra .bg-primary {
background-image: none !important;
background-color: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
}
html.zenitra .bg-primary * {
color: inherit !important;
}
html.zenitra .bg-primary:hover {
background-color: hsl(var(--primary) / 0.92) !important;
}
html.zenitra .bg-clip-text.text-transparent {
color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
/* 3. Faded foreground variants — clamp every /XX step to full opacity.
37SQ: never repaint text that sits on a filled primary/accent surface;
doing so would leave primary ink on a primary background (1:1). */
html.zenitra [class*="text-primary/"]:not(.bg-clip-text):not(.bg-primary):not(.bg-accent) {
color: hsl(var(--primary)) !important;
}
html.zenitra [class*="text-foreground/"]:not(.bg-clip-text):not(.bg-primary):not(.bg-accent) {
color: hsl(var(--foreground)) !important;
}
html.zenitra [class*="text-muted-foreground/"]:not(.bg-clip-text):not(.bg-primary):not(.bg-accent) {
color: hsl(var(--muted-foreground)) !important;
}
html.zenitra [class*="text-accent/"]:not(.bg-clip-text):not(.bg-primary):not(.bg-accent) {
color: hsl(var(--accent)) !important;
}
/* 4. Dialog / banner close buttons — full-opacity foreground */
html.zenitra [role="dialog"] [aria-label*="lose" i],
html.zenitra [role="dialog"] [aria-label*="ismiss" i],
html.zenitra [data-state="open"] > button[aria-label*="lose" i] {
opacity: 1 !important;
color: hsl(var(--foreground)) !important;
}
/* 5. Generic translucent borders → solid border colour */
html.zenitra [class*="border-primary/"] {
border-color: hsl(var(--primary) / 0.45) !important;
}
html.zenitra [class*="border-accent/"] {
border-color: hsl(var(--accent) / 0.45) !important;
}
/* 6. Light-mode link sanity inside callout cards */
html.zenitra:not(.dark) a:not(.no-zenitra-link) {
color: hsl(var(--primary));
}
html.zenitra:not(.dark) a:not(.no-zenitra-link):hover {
color: hsl(var(--primary) / 0.82);
text-decoration: underline;
}
/* 7. Rails must beat dialogs visually but never trap them. Toasts
stay above everything. Dialogs (z-50) and Sheets need clear
layering. */
html.zenitra .zenitra-rail {
z-index: 40;
}
/* Dialogs sit at z-50 already (Radix) — rails drop to 40 so the
modal overlay covers them, no jank. */
/* ─────────────────────────────────────────────────────────────────────────
Slice 37BP — Zenitra Midnight v2 theme contract.
Values mirror `src/lib/design/midnightTokens.ts` (kept in sync by
`src/test/midnight-design-system-37bp.test.ts`). Components consume these
ONLY through Tailwind semantic utilities (bg-panel, text-secondary,
border-hairline, text-action, …). Raw hex in components is a lint failure.
Inspiration is documented in docs/design-midnight-v2-37bp.md — analytical
near-black panels (MRKT) and disciplined charcoal + electric-blue active
states (Koyfin). No brand asset, layout, wording or trade dress is copied.
───────────────────────────────────────────────────────────────────────── */
:root {
/* Light theme — designed, not inverted. */
--z-canvas: 220 30% 97%;
--z-rail: 220 26% 94%;
--z-panel: 0 0% 100%;
--z-panel-elevated: 220 30% 98%;
--z-hairline: 220 18% 84%;
--z-text: 220 34% 11%;
--z-text-secondary: 218 16% 34%;
--z-text-muted: 218 12% 44%;
--z-action: 215 89% 42%;
--z-intel: 258 62% 47%;
--z-live: 177 72% 30%;
--z-gain: 158 72% 27%;
--z-loss: 354 68% 43%;
--z-warning: 33 82% 34%;
--z-neutral: 218 12% 46%;
/* Terminal radius scale — 4 / 6 / 8. Marketing radii stay out of research. */
--z-radius-sm: 4px;
--z-radius-md: 6px;
--z-radius-lg: 8px;
/* Density modes. `data-density="comfortable"` on any subtree switches. */
--z-row-h: 34px;
/* Functional motion only. */
--z-motion-fast: 120ms;
--z-motion: 160ms;
--z-motion-slow: 180ms;
}
.dark {
--z-canvas: 223 30% 5%;
--z-rail: 218 30% 7%;
--z-panel: 220 31% 10%;
--z-panel-elevated: 219 28% 12%;
--z-hairline: 218 26% 21%;
--z-text: 214 41% 97%;
--z-text-secondary: 218 17% 70%;
--z-text-muted: 218 12% 50%;
--z-action: 213 100% 59%;
--z-intel: 258 90% 66%;
--z-live: 177 70% 48%;
--z-gain: 155 67% 45%;
--z-loss: 354 100% 68%;
--z-warning: 39 87% 63%;
--z-neutral: 218 12% 50%;
}
[data-density='comfortable'] {
--z-row-h: 44px;
}
[data-density='compact'] {
--z-row-h: 34px;
}
/* Coarse pointers always get a 44px minimum interactive target. */
@media (pointer: coarse) {
[data-terminal-target] {
min-height: 44px;
min-width: 44px;
}
}
/* Flat panels: 1px hairline, no idle glow. */
.z-panel {
background-color: hsl(var(--z-panel));
border: 1px solid hsl(var(--z-hairline));
border-radius: var(--z-radius-lg);
}
.z-panel-elevated {
background-color: hsl(var(--z-panel-elevated));
}
/* Glow is reserved for keyboard focus and focused intelligence actions. */
.z-focus-ring:focus-visible {
outline: 2px solid hsl(var(--z-action));
outline-offset: 2px;
border-radius: var(--z-radius-sm);
}
.z-intel-focus:focus-visible {
outline: 2px solid hsl(var(--z-intel));
outline-offset: 2px;
box-shadow: 0 0 0 4px hsl(var(--z-intel) / 0.18);
}
.z-row {
height: var(--z-row-h);
}
.z-motion {
transition-duration: var(--z-motion);
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
.z-motion,
.z-motion * {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
}
}
/* Tabular numbers everywhere a value is rendered. */
.z-num {
font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}