/*!****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/css/common.css ***!
  \****************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/css/common.css (1) ***!
  \********************************************************************************************************************/
/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;

@layer theme {
    :root, :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-red-400: oklch(70.4% 0.191 22.216);
        --color-red-500: oklch(63.7% 0.237 25.331);
        --color-red-600: oklch(57.7% 0.245 27.325);
        --color-orange-400: oklch(75% 0.183 55.934);
        --color-orange-500: oklch(70.5% 0.213 47.604);
        --color-orange-600: oklch(64.6% 0.222 41.116);
        --color-amber-400: oklch(82.8% 0.189 84.429);
        --color-amber-500: oklch(76.9% 0.188 70.08);
        --color-yellow-400: oklch(85.2% 0.199 91.936);
        --color-yellow-500: oklch(79.5% 0.184 86.047);
        --color-yellow-600: oklch(68.1% 0.162 75.834);
        --color-green-500: #f5b400;
        --color-emerald-500: oklch(69.6% 0.17 162.48);
        --color-emerald-600: oklch(59.6% 0.145 163.225);
        --color-teal-500: oklch(70.4% 0.14 182.503);
        --color-teal-600: oklch(60% 0.118 184.704);
        --color-cyan-400: oklch(78.9% 0.154 211.53);
        --color-cyan-500: oklch(71.5% 0.143 215.221);
        --color-cyan-600: oklch(60.9% 0.126 221.723);
        --color-sky-400: oklch(74.6% 0.16 232.661);
        --color-sky-500: oklch(68.5% 0.169 237.323);
        --color-blue-200: oklch(88.2% 0.059 254.128);
        --color-blue-300: oklch(80.9% 0.105 251.813);
        --color-blue-400: oklch(70.7% 0.165 254.624);
        --color-blue-500: oklch(62.3% 0.214 259.815);
        --color-blue-600: oklch(54.6% 0.245 262.881);
        --color-blue-900: oklch(37.9% 0.146 265.522);
        --color-indigo-400: oklch(67.3% 0.182 276.935);
        --color-indigo-500: oklch(58.5% 0.233 277.117);
        --color-indigo-600: oklch(51.1% 0.262 276.966);
        --color-violet-400: oklch(70.2% 0.183 293.541);
        --color-violet-500: oklch(60.6% 0.25 292.717);
        --color-violet-600: oklch(54.1% 0.281 293.009);
        --color-purple-400: oklch(71.4% 0.203 305.504);
        --color-purple-500: oklch(62.7% 0.265 303.9);
        --color-purple-600: oklch(55.8% 0.288 302.321);
        --color-pink-500: oklch(65.6% 0.241 354.308);
        --color-pink-600: oklch(59.2% 0.249 0.584);
        --color-rose-500: oklch(64.5% 0.246 16.439);
        --color-slate-500: oklch(55.4% 0.046 257.417);
        --color-gray-50: oklch(98.5% 0.002 247.839);
        --color-gray-100: oklch(96.7% 0.003 264.542);
        --color-gray-200: oklch(92.8% 0.006 264.531);
        --color-gray-300: oklch(87.2% 0.01 258.338);
        --color-gray-400: oklch(70.7% 0.022 261.325);
        --color-gray-500: oklch(55.1% 0.027 264.364);
        --color-gray-700: oklch(37.3% 0.034 259.733);
        --color-gray-800: oklch(27.8% 0.033 256.848);
        --color-gray-900: oklch(21% 0.034 264.665);
        --color-black: #000;
        --color-white: #fff;
        --spacing: 0.25rem;
        --container-sm: 24rem;
        --container-md: 28rem;
        --container-lg: 32rem;
        --container-2xl: 42rem;
        --container-4xl: 56rem;
        --text-xs: 0.75rem;
        --text-xs--line-height: calc(1 / 0.75);
        --text-sm: 0.875rem;
        --text-sm--line-height: calc(1.25 / 0.875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5 / 1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25 / 1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-wide: 0.025em;
        --tracking-wider: 0.05em;
        --leading-relaxed: 1.625;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --animate-spin: spin 1s linear infinite;
        --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        --blur-3xl: 64px;
        --aspect-video: 16 / 9;
        --default-transition-duration: 150ms;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --color-bg: #f8fafc;
        --color-panel: #f8fafc;
        --color-muted: #64748b;
        --color-text: #0f172a;
        --color-border: #e2e8f0;
        --color-glass: rgba(255, 255, 255, 0.85);
        --color-accent: #f5b400;
        --color-secondary: #10b981;
        --color-success: #10b981;
        --color-warning: #f59e0b;
        --color-error: #ef4444;
        --color-info: #0ea5e9;
        --color-teal: #14b8a6;
        --color-orange: #f97316;
        --color-crypto: #f7931a;
        --color-defi: #627eea;
        --color-cyber: #00f5a0;
    }
}

@layer base {
    *, ::after, ::before, ::backdrop, ::file-selector-button {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0 solid;
    }

    html, :host {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent;
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }

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

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

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

    b, strong {
        font-weight: bolder;
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em;
    }

    small {
        font-size: 80%;
    }

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

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }

    :-moz-focusring {
        outline: auto;
    }

    progress {
        vertical-align: baseline;
    }

    summary {
        display: list-item;
    }

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

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

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

    button, input, select, optgroup, textarea, ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        border-radius: 0;
        background-color: transparent;
        opacity: 1;
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder;
    }

        :where(select:is([multiple], [size])) optgroup option {
            padding-inline-start: 20px;
        }

    ::file-selector-button {
        margin-inline-end: 4px;
    }

    ::placeholder {
        opacity: 1;
    }

    @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
        ::placeholder {
            color: currentcolor;

            @supports (color: color-mix(in lab, red, red)) {
                color: color-mix(in oklab, currentcolor 50%, transparent);
            }
        }
    }

    textarea {
        resize: vertical;
    }

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

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit;
    }

    ::-webkit-datetime-edit {
        display: inline-flex;
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }

    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1;
    }

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

    button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
        appearance: button;
    }

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

    [hidden]:where(:not([hidden="until-found"])) {
        display: none !important;
    }
}

@layer utilities {
    .\@container {
        container-type: inline-size;
    }

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

    .visible {
        visibility: visible;
    }

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

    .absolute {
        position: absolute;
    }

    .fixed {
        position: fixed;
    }

    .relative {
        position: relative;
    }

    .static {
        position: static;
    }

    .sticky {
        position: sticky;
    }

    .inset-0 {
        inset: calc(var(--spacing) * 0);
    }

    .-top-1 {
        top: calc(var(--spacing) * -1);
    }

    .-top-2 {
        top: calc(var(--spacing) * -2);
    }

    .top-0 {
        top: calc(var(--spacing) * 0);
    }

    .top-1\/2 {
        top: calc(1/2 * 100%);
    }

    .top-3 {
        top: calc(var(--spacing) * 3);
    }

    .top-4 {
        top: calc(var(--spacing) * 4);
    }

    .top-10 {
        top: calc(var(--spacing) * 10);
    }

    .top-20 {
        top: calc(var(--spacing) * 20);
    }

    .top-\[15px\] {
        top: 15px;
    }

    .-right-1 {
        right: calc(var(--spacing) * -1);
    }

    .-right-2 {
        right: calc(var(--spacing) * -2);
    }

    .right-0 {
        right: calc(var(--spacing) * 0);
    }

    .right-2 {
        right: calc(var(--spacing) * 2);
    }

    .right-3 {
        right: calc(var(--spacing) * 3);
    }

    .right-4 {
        right: calc(var(--spacing) * 4);
    }

    .right-6 {
        right: calc(var(--spacing) * 6);
    }

    .right-8 {
        right: calc(var(--spacing) * 8);
    }

    .right-10 {
        right: calc(var(--spacing) * 10);
    }

    .bottom-0 {
        bottom: calc(var(--spacing) * 0);
    }

    .bottom-3 {
        bottom: calc(var(--spacing) * 3);
    }

    .bottom-10 {
        bottom: calc(var(--spacing) * 10);
    }

    .bottom-24 {
        bottom: calc(var(--spacing) * 24);
    }

    .left-1 {
        left: calc(var(--spacing) * 1);
    }

    .left-1\/2 {
        left: calc(1/2 * 100%);
    }

    .left-2 {
        left: calc(var(--spacing) * 2);
    }

    .left-3 {
        left: calc(var(--spacing) * 3);
    }

    .left-4 {
        left: calc(var(--spacing) * 4);
    }

    .left-10 {
        left: calc(var(--spacing) * 10);
    }

    .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-\[300\] {
        z-index: 300;
    }

    .z-\[400\] {
        z-index: 400;
    }

    .z-\[500\] {
        z-index: 500;
    }

    .z-\[1000\] {
        z-index: 1000;
    }

    .col-span-2 {
        grid-column: span 2 / span 2;
    }

    .mx-4 {
        margin-inline: calc(var(--spacing) * 4);
    }

    .mx-auto {
        margin-inline: auto;
    }

    .my-2 {
        margin-block: calc(var(--spacing) * 2);
    }

    .my-3 {
        margin-block: calc(var(--spacing) * 3);
    }

    .mt-0\.5 {
        margin-top: calc(var(--spacing) * 0.5);
    }

    .mt-1 {
        margin-top: calc(var(--spacing) * 1);
    }

    .mt-2 {
        margin-top: calc(var(--spacing) * 2);
    }

    .mt-3 {
        margin-top: calc(var(--spacing) * 3);
    }

    .mt-4 {
        margin-top: calc(var(--spacing) * 4);
    }

    .mt-5 {
        margin-top: calc(var(--spacing) * 5);
    }

    .mt-6 {
        margin-top: calc(var(--spacing) * 6);
    }

    .mt-8 {
        margin-top: calc(var(--spacing) * 8);
    }

    .mt-auto {
        margin-top: auto;
    }

    .mr-1 {
        margin-right: calc(var(--spacing) * 1);
    }

    .mr-2 {
        margin-right: calc(var(--spacing) * 2);
    }

    .mr-4 {
        margin-right: calc(var(--spacing) * 4);
    }

    .mb-1 {
        margin-bottom: calc(var(--spacing) * 1);
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing) * 2);
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3);
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4);
    }

    .mb-5 {
        margin-bottom: calc(var(--spacing) * 5);
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing) * 6);
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8);
    }

    .ml-1 {
        margin-left: calc(var(--spacing) * 1);
    }

    .ml-2 {
        margin-left: calc(var(--spacing) * 2);
    }

    .ml-auto {
        margin-left: auto;
    }

    .line-clamp-2 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .block {
        display: block;
    }

    .contents {
        display: contents;
    }

    .flex {
        display: flex;
    }

    .grid {
        display: grid;
    }

    .hidden {
        display: none;
    }

    .hidden\! {
        display: none !important;
    }

    .inline {
        display: inline;
    }

    .inline-block {
        display: inline-block;
    }

    .inline-flex {
        display: inline-flex;
    }

    .table {
        display: table;
    }

    .aspect-square {
        aspect-ratio: 1 / 1;
    }

    .aspect-video {
        aspect-ratio: var(--aspect-video);
    }

    .h-1 {
        height: calc(var(--spacing) * 1);
    }

    .h-1\.5 {
        height: calc(var(--spacing) * 1.5);
    }

    .h-2 {
        height: calc(var(--spacing) * 2);
    }

    .h-3 {
        height: calc(var(--spacing) * 3);
    }

    .h-3\.5 {
        height: calc(var(--spacing) * 3.5);
    }

    .h-4 {
        height: calc(var(--spacing) * 4);
    }

    .h-5 {
        height: calc(var(--spacing) * 5);
    }

    .h-6 {
        height: calc(var(--spacing) * 6);
    }

    .h-7 {
        height: calc(var(--spacing) * 7);
    }

    .h-8 {
        height: calc(var(--spacing) * 8);
    }

    .h-9 {
        height: calc(var(--spacing) * 9);
    }

    .h-10 {
        height: calc(var(--spacing) * 10);
    }

    .h-12 {
        height: calc(var(--spacing) * 12);
    }

    .h-14 {
        height: calc(var(--spacing) * 14);
    }

    .h-16 {
        height: calc(var(--spacing) * 16);
    }

    .h-20 {
        height: calc(var(--spacing) * 20);
    }

    .h-24 {
        height: calc(var(--spacing) * 24);
    }

    .h-32 {
        height: calc(var(--spacing) * 32);
    }

    .h-40 {
        height: calc(var(--spacing) * 40);
    }

    .h-48 {
        height: calc(var(--spacing) * 48);
    }

    .h-50 {
        height: calc(var(--spacing) * 50);
    }

    .h-56 {
        height: calc(var(--spacing) * 56);
    }

    .h-64 {
        height: calc(var(--spacing) * 64);
    }

    .h-72 {
        height: calc(var(--spacing) * 72);
    }

    .h-80 {
        height: calc(var(--spacing) * 80);
    }

    .h-100 {
        height: calc(var(--spacing) * 100);
    }

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

    .h-\[calc\(100vh-180px\)\] {
        height: calc(100vh - 180px);
    }

    .h-auto {
        height: auto;
    }

    .h-full {
        height: 100%;
    }

    .h-px {
        height: 1px;
    }

    .max-h-64 {
        max-height: calc(var(--spacing) * 64);
    }

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

    .min-h-screen {
        min-height: 100vh;
    }

    .w-1\/2 {
        width: calc(1/2 * 100%);
    }

    .w-1\/4 {
        width: calc(1/4 * 100%);
    }

    .w-2 {
        width: calc(var(--spacing) * 2);
    }

    .w-2\/3 {
        width: calc(2/3 * 100%);
    }

    .w-3 {
        width: calc(var(--spacing) * 3);
    }

    .w-3\.5 {
        width: calc(var(--spacing) * 3.5);
    }

    .w-4 {
        width: calc(var(--spacing) * 4);
    }

    .w-5 {
        width: calc(var(--spacing) * 5);
    }

    .w-6 {
        width: calc(var(--spacing) * 6);
    }

    .w-7 {
        width: calc(var(--spacing) * 7);
    }

    .w-8 {
        width: calc(var(--spacing) * 8);
    }

    .w-9 {
        width: calc(var(--spacing) * 9);
    }

    .w-10 {
        width: calc(var(--spacing) * 10);
    }

    .w-12 {
        width: calc(var(--spacing) * 12);
    }

    .w-14 {
        width: calc(var(--spacing) * 14);
    }

    .w-16 {
        width: calc(var(--spacing) * 16);
    }

    .w-20 {
        width: calc(var(--spacing) * 20);
    }

    .w-24 {
        width: calc(var(--spacing) * 24);
    }

    .w-28 {
        width: calc(var(--spacing) * 28);
    }

    .w-32 {
        width: calc(var(--spacing) * 32);
    }

    .w-40 {
        width: calc(var(--spacing) * 40);
    }

    .w-40\! {
        width: calc(var(--spacing) * 40) !important;
    }

    .w-48 {
        width: calc(var(--spacing) * 48);
    }

    .w-56 {
        width: calc(var(--spacing) * 56);
    }

    .w-64 {
        width: calc(var(--spacing) * 64);
    }

    .w-75 {
        width: calc(var(--spacing) * 75);
    }

    .w-80 {
        width: calc(var(--spacing) * 80);
    }

    .w-\[45\%\] {
        width: 45%;
    }

    .w-\[58\%\] {
        width: 58%;
    }

    .w-\[65\%\] {
        width: 65%;
    }

    .w-\[72\%\] {
        width: 72%;
    }

    .w-\[81\%\] {
        width: 81%;
    }

    .w-auto {
        width: auto;
    }

    .w-fit {
        width: fit-content;
    }

    .w-fit\! {
        width: fit-content !important;
    }

    .w-full {
        width: 100%;
    }

    .max-w-2xl {
        max-width: var(--container-2xl);
    }

    .max-w-4xl {
        max-width: var(--container-4xl);
    }

    .max-w-40 {
        max-width: calc(var(--spacing) * 40);
    }

    .max-w-50 {
        max-width: calc(var(--spacing) * 50);
    }

    .max-w-\[80\%\] {
        max-width: 80%;
    }

    .max-w-fit {
        max-width: fit-content;
    }

    .max-w-lg {
        max-width: var(--container-lg);
    }

    .max-w-md {
        max-width: var(--container-md);
    }

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

    .max-w-sm {
        max-width: var(--container-sm);
    }

    .min-w-0 {
        min-width: calc(var(--spacing) * 0);
    }

    .min-w-50 {
        min-width: calc(var(--spacing) * 50);
    }

    .min-w-200 {
        min-width: calc(var(--spacing) * 200);
    }

    .min-w-280 {
        min-width: calc(var(--spacing) * 280);
    }

    .min-w-300 {
        min-width: calc(var(--spacing) * 300);
    }

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

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

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

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

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

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

    .min-w-max {
        min-width: max-content;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-shrink-0 {
        flex-shrink: 0;
    }

    .shrink-0 {
        flex-shrink: 0;
    }

    .-translate-x-1\/2 {
        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .translate-x-\[150\%\] {
        --tw-translate-x: 150%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .-translate-y-1\/2 {
        --tw-translate-y: calc(calc(1/2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .-translate-y-1\/2\! {
        --tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
    }

    .translate-y-10 {
        --tw-translate-y: calc(var(--spacing) * 10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .transform {
        transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
    }

    .animate-pulse {
        animation: var(--animate-pulse);
    }

    .animate-spin {
        animation: var(--animate-spin);
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .resize {
        resize: both;
    }

    .resize-none {
        resize: none;
    }

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

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

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

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

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

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

    .flex-wrap {
        flex-wrap: wrap;
    }

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

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

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

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

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

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

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

    .gap-1 {
        gap: calc(var(--spacing) * 1);
    }

    .gap-2 {
        gap: calc(var(--spacing) * 2);
    }

    .gap-3 {
        gap: calc(var(--spacing) * 3);
    }

    .gap-4 {
        gap: calc(var(--spacing) * 4);
    }

    .gap-5 {
        gap: calc(var(--spacing) * 5);
    }

    .gap-6 {
        gap: calc(var(--spacing) * 6);
    }

    .space-y-1 {
        : where(& > :not(:last-child))

{
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
}

}

.space-y-2 {
    : where(& > :not(:last-child))

{
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}

}

.space-y-3 {
    : where(& > :not(:last-child))

{
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}

}

.space-y-4 {
    : where(& > :not(:last-child))

{
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}

}

.space-y-5 {
    : where(& > :not(:last-child))

{
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
}

}

.space-y-6 {
    : where(& > :not(:last-child))

{
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}

}

.-space-x-1 {
    : where(& > :not(:last-child))

{
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
}

}

.-space-x-2 {
    : where(& > :not(:last-child))

{
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
}

}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

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

.rounded {
    border-radius: 0.25rem;
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.rounded-full {
    border-radius: calc(infinity * 1px);
}

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

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

.rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
}

.rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.rounded-b-2xl {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
}

.border {
    border-style: var(--tw-border-style);
    border-width: 1px;
}

.border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
}

.border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
}

.border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
}

.border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
}

.border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
}

.border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
}

.border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
}

.border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
}

.border-none {
    --tw-border-style: none;
    border-style: none;
}

.border-\[\#00D4AA\] {
    border-color: #00D4AA;
}

.border-\[\#10B981\] {
    border-color: #10B981;
}

.border-\[\#EF4444\] {
    border-color: #EF4444;
}

.border-\[rgba\(0\,212\,170\,0\.2\)\] {
    border-color: rgba(0,212,170,0.2);
}

.border-\[rgba\(0\,245\,180\,0\.2\)\] {
    border-color: rgba(0,245,180,0.2);
}

.border-\[rgba\(16\,185\,129\,0\.2\)\] {
    border-color: rgba(16,185,129,0.2);
}

.border-\[rgba\(31\,199\,212\,0\.2\)\] {
    border-color: rgba(31,199,212,0.2);
}

.border-\[rgba\(239\,68\,68\,0\.2\)\] {
    border-color: rgba(239,68,68,0.2);
}

.border-\[rgba\(245\,158\,11\,0\.2\)\] {
    border-color: rgba(245,158,11,0.2);
}

.border-\[rgba\(247\,147\,26\,0\.2\)\] {
    border-color: rgba(247,147,26,0.2);
}

.border-\[rgba\(255\,0\,122\,0\.2\)\] {
    border-color: rgba(255,0,122,0.2);
}

.border-accent\/20 {
    border-color: color-mix(in srgb, #f5b400 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
    }
}

.border-amber-500\/20 {
    border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
}

.border-amber-500\/30 {
    border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
    }
}

.border-bg {
    border-color: var(--color-bg);
}

.border-blue-500\/20 {
    border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
}

.border-border {
    border-color: var(--color-border);
}

.border-border\/50 {
    border-color: color-mix(in srgb, #e2e8f0 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
    }
}

.border-emerald-500 {
    border-color: var(--color-emerald-500);
}

.border-emerald-500\/20 {
    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
}

.border-emerald-500\/30 {
    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
    }
}

.border-gray-200 {
    border-color: var(--color-gray-200);
}

.border-gray-300 {
    border-color: var(--color-gray-300);
}

.border-gray-700 {
    border-color: var(--color-gray-700);
}

.border-green-500\/20 {
    border-color: color-mix(in srgb, #02b048 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
}

.border-indigo-500 {
    border-color: var(--color-indigo-500);
}

.border-indigo-500\/20 {
    border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
    }
}

.border-indigo-500\/30 {
    border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-indigo-500) 30%, transparent);
    }
}

.border-orange-500\/20 {
    border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
    }
}

.border-panel {
    border-color: var(--color-panel);
}

.border-purple-500\/20 {
    border-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
    }
}

.border-purple-500\/30 {
    border-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
    }
}

.border-red-500\/20 {
    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
}

.border-red-500\/30 {
    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
}

.border-transparent {
    border-color: transparent;
}

.border-violet-500 {
    border-color: var(--color-violet-500);
}

.border-violet-500\/20 {
    border-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
    }
}

.border-violet-500\/30 {
    border-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent);
    }
}

.border-yellow-500\/20 {
    border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
    }
}

.border-yellow-500\/30 {
    border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
    }
}

.border-l-blue-500 {
    border-left-color: var(--color-blue-500);
}

.border-l-green-500 {
    border-left-color: var(--color-green-500);
}

.border-l-yellow-500 {
    border-left-color: var(--color-yellow-500);
}

.bg-\[\#10B981\] {
    background-color: #10B981;
}

.bg-\[\#627EEA\] {
    background-color: #627EEA;
}

.bg-\[\#8247E5\] {
    background-color: #8247E5;
}

.bg-\[\#9945FF\] {
    background-color: #9945FF;
}

.bg-\[\#E84142\] {
    background-color: #E84142;
}

.bg-\[\#F7931A\] {
    background-color: #F7931A;
}

.bg-\[\#57d391\] {
    background-color: #57d391;
}

.bg-\[\#3dceff\] {
    background-color: #3dceff;
}

.bg-\[\#018cb1\] {
    background-color: #018cb1;
}

.bg-\[\#dae938\] {
    background-color: #dae938;
}

.bg-\[\#8fa3a9\] {
    background-color: #8fa3a9;
}

.bg-\[rgba\(0\,212\,170\,0\.1\)\] {
    background-color: rgba(0,212,170,0.1);
}

.bg-\[rgba\(0\,212\,170\,0\.02\)\] {
    background-color: rgba(0,212,170,0.02);
}

.bg-\[rgba\(0\,212\,170\,0\.05\)\] {
    background-color: rgba(0,212,170,0.05);
}

.bg-\[rgba\(0\,245\,180\,0\.05\)\] {
    background-color: rgba(0,245,180,0.05);
}

.bg-\[rgba\(6\,182\,212\,0\.1\)\] {
    background-color: rgba(6,182,212,0.1);
}

.bg-\[rgba\(16\,185\,129\,0\.1\)\] {
    background-color: rgba(16,185,129,0.1);
}

.bg-\[rgba\(16\,185\,129\,0\.05\)\] {
    background-color: rgba(16,185,129,0.05);
}

.bg-\[rgba\(16\,185\,129\,0\.9\)\] {
    background-color: rgba(16,185,129,0.9);
}

.bg-\[rgba\(29\,161\,242\,0\.1\)\] {
    background-color: rgba(29,161,242,0.1);
}

.bg-\[rgba\(31\,199\,212\,0\.05\)\] {
    background-color: rgba(31,199,212,0.05);
}

.bg-\[rgba\(51\,51\,51\,0\.1\)\] {
    background-color: rgba(51,51,51,0.1);
}

.bg-\[rgba\(59\,130\,246\,0\.1\)\] {
    background-color: rgba(59,130,246,0.1);
}

.bg-\[rgba\(59\,130\,246\,0\.9\)\] {
    background-color: rgba(59,130,246,0.9);
}

.bg-\[rgba\(88\,101\,242\,0\.1\)\] {
    background-color: rgba(88,101,242,0.1);
}

.bg-\[rgba\(139\,92\,246\,0\.1\)\] {
    background-color: rgba(139,92,246,0.1);
}

.bg-\[rgba\(139\,92\,246\,0\.9\)\] {
    background-color: rgba(139,92,246,0.9);
}

.bg-\[rgba\(239\,68\,68\,0\.1\)\] {
    background-color: rgba(239,68,68,0.1);
}

.bg-\[rgba\(239\,68\,68\,0\.9\)\] {
    background-color: rgba(239,68,68,0.9);
}

.bg-\[rgba\(245\,158\,11\,0\.1\)\] {
    background-color: rgba(245,158,11,0.1);
}

.bg-\[rgba\(245\,158\,11\,0\.9\)\] {
    background-color: rgba(245,158,11,0.9);
}

.bg-\[rgba\(247\,147\,26\,0\.1\)\] {
    background-color: rgba(247,147,26,0.1);
}

.bg-\[rgba\(247\,147\,26\,0\.05\)\] {
    background-color: rgba(247,147,26,0.05);
}

.bg-\[rgba\(255\,0\,122\,0\.05\)\] {
    background-color: rgba(255,0,122,0.05);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-accent\! {
    background-color: var(--color-accent) !important;
}

.bg-accent\/5 {
    background-color: color-mix(in srgb, #f5b400 5%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-accent) 5%, transparent);
    }
}

.bg-accent\/10 {
    background-color: color-mix(in srgb, #f5b400 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
    }
}

.bg-accent\/30 {
    background-color: color-mix(in srgb, #f5b400 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
    }
}

.bg-amber-400 {
    background-color: var(--color-amber-400);
}

.bg-amber-500 {
    background-color: var(--color-amber-500);
}

.bg-amber-500\/10 {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
}

.bg-amber-500\/20 {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
}

.bg-bg {
    background-color: var(--color-bg);
}

.bg-bg\/50 {
    background-color: color-mix(in srgb, #f8fafc 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-bg) 50%, transparent);
    }
}

.bg-black\/20 {
    background-color: color-mix(in srgb, #000 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
}

.bg-black\/50 {
    background-color: color-mix(in srgb, #000 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
}

.bg-black\/70 {
    background-color: color-mix(in srgb, #000 70%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
}

.bg-blue-200 {
    background-color: var(--color-blue-200);
}

.bg-blue-300 {
    background-color: var(--color-blue-300);
}

.bg-blue-400 {
    background-color: var(--color-blue-400);
}

.bg-blue-500 {
    background-color: var(--color-blue-500);
}

.bg-blue-500\/10 {
    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
}

.bg-blue-500\/20 {
    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
}

.bg-blue-600 {
    background-color: var(--color-blue-600);
}

.bg-border {
    background-color: var(--color-border);
}

.bg-border\/20 {
    background-color: color-mix(in srgb, #e2e8f0 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-border) 20%, transparent);
    }
}

.bg-border\/30 {
    background-color: color-mix(in srgb, #e2e8f0 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-border) 30%, transparent);
    }
}

.bg-border\/50 {
    background-color: color-mix(in srgb, #e2e8f0 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-border) 50%, transparent);
    }
}

.bg-current {
    background-color: currentcolor;
}

.bg-cyan-500 {
    background-color: var(--color-cyan-500);
}

.bg-cyan-500\/10 {
    background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-cyan-500) 10%, transparent);
    }
}

.bg-cyan-500\/20 {
    background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-cyan-500) 20%, transparent);
    }
}

.bg-emerald-500 {
    background-color: var(--color-emerald-500);
}

.bg-emerald-500\/10 {
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
}

.bg-emerald-500\/20 {
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
}

.bg-gray-50 {
    background-color: var(--color-gray-50);
}

.bg-gray-100 {
    background-color: var(--color-gray-100);
}

.bg-gray-200 {
    background-color: var(--color-gray-200);
}

.bg-gray-400 {
    background-color: var(--color-gray-400);
}

.bg-gray-500 {
    background-color: var(--color-gray-500);
}

.bg-gray-500\/10 {
    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
    }
}

.bg-gray-500\/20 {
    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
    }
}

.bg-gray-800 {
    background-color: var(--color-gray-800);
}

.bg-gray-900 {
    background-color: var(--color-gray-900);
}

.bg-green-500 {
    background-color: var(--color-green-500);
}

.bg-green-500\/10 {
    background-color: color-mix(in srgb, #02b048 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
}

.bg-green-500\/20 {
    background-color: color-mix(in srgb, #02b048 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
}

.bg-green-500\/50 {
    background-color: color-mix(in srgb, #02b048 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
    }
}

.bg-indigo-400 {
    background-color: var(--color-indigo-400);
}

.bg-indigo-500 {
    background-color: var(--color-indigo-500);
}

.bg-indigo-500\/10 {
    background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);
    }
}

.bg-indigo-500\/20 {
    background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
    }
}

.bg-orange-500 {
    background-color: var(--color-orange-500);
}

.bg-orange-500\/10 {
    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
    }
}

.bg-orange-500\/20 {
    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
    }
}

.bg-orange-600 {
    background-color: var(--color-orange-600);
}

.bg-panel {
    background-color: var(--color-panel);
}

.bg-panel\/50 {
    background-color: color-mix(in srgb, #f8fafc 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-panel) 50%, transparent);
    }
}

.bg-pink-500\/10 {
    background-color: color-mix(in srgb, oklch(65.6% 0.241 354.308) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-pink-500) 10%, transparent);
    }
}

.bg-purple-500 {
    background-color: var(--color-purple-500);
}

.bg-purple-500\/10 {
    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }
}

.bg-purple-500\/20 {
    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
    }
}

.bg-red-500 {
    background-color: var(--color-red-500);
}

.bg-red-500\/10 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
}

.bg-red-500\/20 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
}

.bg-red-500\/50 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
    }
}

.bg-rose-500\/10 {
    background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent);
    }
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-sky-400 {
    background-color: var(--color-sky-400);
}

.bg-sky-500 {
    background-color: var(--color-sky-500);
}

.bg-sky-500\/10 {
    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
    }
}

.bg-slate-500\/10 {
    background-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-500) 10%, transparent);
    }
}

.bg-teal-500 {
    background-color: var(--color-teal-500);
}

.bg-teal-500\/10 {
    background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-teal-500) 10%, transparent);
    }
}

.bg-teal-500\/20 {
    background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-teal-500) 20%, transparent);
    }
}

.bg-transparent {
    background-color: transparent;
}

.bg-violet-500 {
    background-color: var(--color-violet-500);
}

.bg-violet-500\/10 {
    background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
    }
}

.bg-violet-500\/20 {
    background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
    }
}

.bg-white {
    background-color: var(--color-white);
}

.bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
}

.bg-white\/20 {
    background-color: color-mix(in srgb, #fff 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
}

.bg-yellow-500 {
    background-color: var(--color-yellow-500);
}

.bg-yellow-500\/10 {
    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
    }
}

.bg-yellow-500\/20 {
    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
    }
}

.bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
}

.bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
}

.bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
}

.from-\[rgba\(0\,212\,170\,0\.1\)\] {
    --tw-gradient-from: rgba(0,212,170,0.1);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-\[rgba\(239\,68\,68\,0\.1\)\] {
    --tw-gradient-from: rgba(239,68,68,0.1);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-amber-500 {
    --tw-gradient-from: var(--color-amber-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-amber-500\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-blue-500 {
    --tw-gradient-from: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-blue-500\/10 {
    --tw-gradient-from: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-blue-600 {
    --tw-gradient-from: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-cyan-500 {
    --tw-gradient-from: var(--color-cyan-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-cyan-500\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(71.5% 0.143 215.221) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-cyan-500) 20%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-emerald-500 {
    --tw-gradient-from: var(--color-emerald-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-emerald-500\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-gray-300 {
    --tw-gradient-from: var(--color-gray-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-gray-400 {
    --tw-gradient-from: var(--color-gray-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-gray-400\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(70.7% 0.022 261.325) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-gray-400) 20%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-green-500 {
    --tw-gradient-from: var(--color-green-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-green-500\/10 {
    --tw-gradient-from: color-mix(in srgb, #02b048 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-indigo-500 {
    --tw-gradient-from: var(--color-indigo-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-indigo-500\/10 {
    --tw-gradient-from: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-indigo-500\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-indigo-600 {
    --tw-gradient-from: var(--color-indigo-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-orange-400\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(75% 0.183 55.934) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-orange-400) 20%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-orange-500 {
    --tw-gradient-from: var(--color-orange-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-orange-500\/10 {
    --tw-gradient-from: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-purple-400 {
    --tw-gradient-from: var(--color-purple-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-purple-500 {
    --tw-gradient-from: var(--color-purple-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-purple-500\/10 {
    --tw-gradient-from: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-red-500 {
    --tw-gradient-from: var(--color-red-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-red-600 {
    --tw-gradient-from: var(--color-red-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-teal-500 {
    --tw-gradient-from: var(--color-teal-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-violet-500 {
    --tw-gradient-from: var(--color-violet-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-violet-500\/10 {
    --tw-gradient-from: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-yellow-400 {
    --tw-gradient-from: var(--color-yellow-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-yellow-400\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(85.2% 0.199 91.936) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-from: color-mix(in oklab, var(--color-yellow-400) 20%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-yellow-500 {
    --tw-gradient-from: var(--color-yellow-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.via-purple-500\/10 {
    --tw-gradient-via: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-via: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }

    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
}

.to-\[rgba\(99\,102\,241\,0\.05\)\] {
    --tw-gradient-to: rgba(99,102,241,0.05);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-\[rgba\(124\,58\,237\,0\.1\)\] {
    --tw-gradient-to: rgba(124,58,237,0.1);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-\[rgba\(249\,115\,22\,0\.05\)\] {
    --tw-gradient-to: rgba(249,115,22,0.05);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-blue-400 {
    --tw-gradient-to: var(--color-blue-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-blue-500 {
    --tw-gradient-to: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-blue-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-to: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-blue-600 {
    --tw-gradient-to: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-cyan-400 {
    --tw-gradient-to: var(--color-cyan-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-cyan-500 {
    --tw-gradient-to: var(--color-cyan-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-cyan-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(71.5% 0.143 215.221) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-to: color-mix(in oklab, var(--color-cyan-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-cyan-600 {
    --tw-gradient-to: var(--color-cyan-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-emerald-500 {
    --tw-gradient-to: var(--color-emerald-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-emerald-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-to: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-emerald-600 {
    --tw-gradient-to: var(--color-emerald-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-gray-400 {
    --tw-gradient-to: var(--color-gray-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-gray-500 {
    --tw-gradient-to: var(--color-gray-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-green-500\/10 {
    --tw-gradient-to: color-mix(in srgb, #02b048 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-to: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-indigo-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-to: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-indigo-600 {
    --tw-gradient-to: var(--color-indigo-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-orange-500 {
    --tw-gradient-to: var(--color-orange-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-orange-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-to: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-pink-500 {
    --tw-gradient-to: var(--color-pink-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-pink-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(65.6% 0.241 354.308) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-to: color-mix(in oklab, var(--color-pink-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-pink-600 {
    --tw-gradient-to: var(--color-pink-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-purple-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-to: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-purple-600 {
    --tw-gradient-to: var(--color-purple-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-red-400 {
    --tw-gradient-to: var(--color-red-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-red-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-red-600 {
    --tw-gradient-to: var(--color-red-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-teal-500 {
    --tw-gradient-to: var(--color-teal-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-teal-600 {
    --tw-gradient-to: var(--color-teal-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-violet-600 {
    --tw-gradient-to: var(--color-violet-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-yellow-500 {
    --tw-gradient-to: var(--color-yellow-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-yellow-600 {
    --tw-gradient-to: var(--color-yellow-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.fill-current {
    fill: currentcolor;
}

.object-contain {
    object-fit: contain;
}

.object-cover {
    object-fit: cover;
}

.p-0 {
    padding: calc(var(--spacing) * 0);
}

.p-1 {
    padding: calc(var(--spacing) * 1);
}

.p-2 {
    padding: calc(var(--spacing) * 2);
}

.p-3 {
    padding: calc(var(--spacing) * 3);
}

.p-4 {
    padding: calc(var(--spacing) * 4);
}

.p-5 {
    padding: calc(var(--spacing) * 5);
}

.p-6 {
    padding: calc(var(--spacing) * 6);
}

.p-8 {
    padding: calc(var(--spacing) * 8);
}

.px-2 {
    padding-inline: calc(var(--spacing) * 2);
}

.px-3 {
    padding-inline: calc(var(--spacing) * 3);
}

.px-3\! {
    padding-inline: calc(var(--spacing) * 3) !important;
}

.px-4 {
    padding-inline: calc(var(--spacing) * 4);
}

.px-5 {
    padding-inline: calc(var(--spacing) * 5);
}

.px-6 {
    padding-inline: calc(var(--spacing) * 6);
}

.py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
}

.py-1 {
    padding-block: calc(var(--spacing) * 1);
}

.py-1\! {
    padding-block: calc(var(--spacing) * 1) !important;
}

.py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
}

.py-2 {
    padding-block: calc(var(--spacing) * 2);
}

.py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
}

.py-3 {
    padding-block: calc(var(--spacing) * 3);
}

.py-4 {
    padding-block: calc(var(--spacing) * 4);
}

.py-6 {
    padding-block: calc(var(--spacing) * 6);
}

.py-8 {
    padding-block: calc(var(--spacing) * 8);
}

.py-12 {
    padding-block: calc(var(--spacing) * 12);
}

.py-16 {
    padding-block: calc(var(--spacing) * 16);
}

.pt-0 {
    padding-top: calc(var(--spacing) * 0);
}

.pt-2 {
    padding-top: calc(var(--spacing) * 2);
}

.pt-3 {
    padding-top: calc(var(--spacing) * 3);
}

.pt-4 {
    padding-top: calc(var(--spacing) * 4);
}

.pt-5 {
    padding-top: calc(var(--spacing) * 5);
}

.pt-6 {
    padding-top: calc(var(--spacing) * 6);
}

.pr-4 {
    padding-right: calc(var(--spacing) * 4);
}

.pr-8 {
    padding-right: calc(var(--spacing) * 8);
}

.pr-12 {
    padding-right: calc(var(--spacing) * 12);
}

.pr-20 {
    padding-right: calc(var(--spacing) * 20);
}

.pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
}

.pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
}

.pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
}

.pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
}

.pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
}

.pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
}

.\!pl-4 {
    padding-left: calc(var(--spacing) * 4) !important;
}

.pl-4 {
    padding-left: calc(var(--spacing) * 4);
}

.pl-8\! {
    padding-left: calc(var(--spacing) * 8) !important;
}

.text-center {
    text-align: center;
}

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

.text-right {
    text-align: right;
}

.font-mono {
    font-family: var(--font-mono);
}

.text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
}

.text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
}

.text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
}

.text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
}

.text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

.text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
}

.text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
}

.text-\[10px\] {
    font-size: 10px;
}

.leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
}

.font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
}

.font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
}

.font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
}

.font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
}

.tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
}

.tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
}

.break-all {
    word-break: break-all;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.text-\[\#00D4AA\] {
    color: #00D4AA;
}

.text-\[\#3B82F6\] {
    color: #3B82F6;
}

.text-\[\#06B6D4\] {
    color: #06B6D4;
}

.text-\[\#8B5CF6\] {
    color: #8B5CF6;
}

.text-\[\#10B981\] {
    color: #10B981;
}

.text-\[\#6366F1\] {
    color: #6366F1;
}

.text-\[\#EF4444\] {
    color: #EF4444;
}

.text-\[\#F59E0B\] {
    color: #F59E0B;
}

.text-\[\#F7931A\] {
    color: #F7931A;
}

.text-accent {
    color: var(--color-accent);
}

.text-amber-400 {
    color: var(--color-amber-400);
}

.text-amber-500 {
    color: var(--color-amber-500);
}

.text-amber-500\/80 {
    color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 80%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-amber-500) 80%, transparent);
    }
}

.text-blue-500 {
    color: var(--color-blue-500);
}

.text-blue-900 {
    color: var(--color-blue-900);
}

.text-cyan-500 {
    color: var(--color-cyan-500);
}

.text-emerald-500 {
    color: var(--color-emerald-500);
}

.text-gray-400 {
    color: var(--color-gray-400);
}

.text-gray-500 {
    color: var(--color-gray-500);
}

.text-green-500 {
    color: var(--color-green-500);
}

.text-indigo-400 {
    color: var(--color-indigo-400);
}

.text-indigo-500 {
    color: var(--color-indigo-500);
}

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

.text-orange-500 {
    color: var(--color-orange-500);
}

.text-pink-500 {
    color: var(--color-pink-500);
}

.text-purple-400 {
    color: var(--color-purple-400);
}

.text-purple-500 {
    color: var(--color-purple-500);
}

.text-red-500 {
    color: var(--color-red-500);
}

.text-rose-500 {
    color: var(--color-rose-500);
}

.text-sky-400 {
    color: var(--color-sky-400);
}

.text-sky-500 {
    color: var(--color-sky-500);
}

.text-slate-500 {
    color: var(--color-slate-500);
}

.text-teal-500 {
    color: var(--color-teal-500);
}

.text-text {
    color: var(--color-text);
}

.text-violet-400 {
    color: var(--color-violet-400);
}

.text-violet-500 {
    color: var(--color-violet-500);
}

.text-white {
    color: var(--color-white);
}

.text-white\! {
    color: var(--color-white) !important;
}

.text-white\/70 {
    color: color-mix(in srgb, #fff 70%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
}

.text-white\/80 {
    color: color-mix(in srgb, #fff 80%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
}

.text-yellow-500 {
    color: var(--color-yellow-500);
}

.capitalize {
    text-transform: capitalize;
}

.lowercase {
    text-transform: lowercase;
}

.uppercase {
    text-transform: uppercase;
}

.accent-\[\#00D4AA\] {
    accent-color: #00D4AA;
}

.accent-\[\#6366F1\] {
    accent-color: #6366F1;
}

.accent-amber-500 {
    accent-color: var(--color-amber-500);
}

.accent-purple-500 {
    accent-color: var(--color-purple-500);
}

.accent-violet-500 {
    accent-color: var(--color-violet-500);
}

.opacity-0 {
    opacity: 0%;
}

.opacity-10 {
    opacity: 10%;
}

.opacity-50 {
    opacity: 50%;
}

.opacity-70 {
    opacity: 70%;
}

.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

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

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-amber-500\/20 {
    --tw-shadow-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
}

.shadow-emerald-500\/20 {
    --tw-shadow-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
}

.shadow-emerald-500\/25 {
    --tw-shadow-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 25%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
}

.shadow-indigo-500\/20 {
    --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
}

.shadow-sky-500\/20 {
    --tw-shadow-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-sky-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
}

.shadow-violet-500\/25 {
    --tw-shadow-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 25%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-violet-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
}

.ring-bg {
    --tw-ring-color: var(--color-bg);
}

.ring-yellow-400\/30 {
    --tw-ring-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent);
    }
}

.blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}

.filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}

.backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -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, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
}

.duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
}

.group-hover\:scale-105 {
    &:is(:where(.group):hover *)

{
    @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
    }
}

}

.group-hover\:scale-110 {
    &:is(:where(.group):hover *)

{
    @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
    }
}

}

.group-hover\:bg-orange-500\/20 {
    &:is(:where(.group):hover *)

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
        }
    }
}

}

.group-hover\:bg-red-500\/20 {
    &:is(:where(.group):hover *)

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
        }
    }
}

}

.group-hover\:bg-yellow-500\/20 {
    &:is(:where(.group):hover *)

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
        }
    }
}

}

.placeholder\:text-muted {
    &::placeholder

{
    color: var(--color-muted);
}

}

.last\:border-0 {
    &:last-child

{
    border-style: var(--tw-border-style);
    border-width: 0px;
}

}

.hover\:scale-110 {
    &:hover

{
    @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
    }
}

}

.hover\:border-\[\#00D4AA\] {
    &:hover

{
    @media (hover: hover) {
        border-color: #00D4AA;
    }
}

}

.hover\:border-\[\#10B981\] {
    &:hover

{
    @media (hover: hover) {
        border-color: #10B981;
    }
}

}

.hover\:border-\[\#6366F1\] {
    &:hover

{
    @media (hover: hover) {
        border-color: #6366F1;
    }
}

}

.hover\:border-\[\#F7931A\] {
    &:hover

{
    @media (hover: hover) {
        border-color: #F7931A;
    }
}

}

.hover\:border-blue-500\/50 {
    &:hover

{
    @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
        }
    }
}

}

.hover\:border-border {
    &:hover

{
    @media (hover: hover) {
        border-color: var(--color-border);
    }
}

}

.hover\:border-green-500\/50 {
    &:hover

{
    @media (hover: hover) {
        border-color: color-mix(in srgb, #02b048 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
        }
    }
}

}

.hover\:border-indigo-500\/30 {
    &:hover

{
    @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-indigo-500) 30%, transparent);
        }
    }
}

}

.hover\:border-orange-500 {
    &:hover

{
    @media (hover: hover) {
        border-color: var(--color-orange-500);
    }
}

}

.hover\:border-orange-500\/50 {
    &:hover

{
    @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-orange-500) 50%, transparent);
        }
    }
}

}

.hover\:border-purple-500\/50 {
    &:hover

{
    @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-purple-500) 50%, transparent);
        }
    }
}

}

.hover\:border-red-500 {
    &:hover

{
    @media (hover: hover) {
        border-color: var(--color-red-500);
    }
}

}

.hover\:border-red-500\/30 {
    &:hover

{
    @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
        }
    }
}

}

.hover\:border-violet-500 {
    &:hover

{
    @media (hover: hover) {
        border-color: var(--color-violet-500);
    }
}

}

.hover\:border-violet-500\/30 {
    &:hover

{
    @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent);
        }
    }
}

}

.hover\:border-violet-500\/50 {
    &:hover

{
    @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-violet-500) 50%, transparent);
        }
    }
}

}

.hover\:border-yellow-500 {
    &:hover

{
    @media (hover: hover) {
        border-color: var(--color-yellow-500);
    }
}

}

.hover\:border-yellow-500\/50 {
    &:hover

{
    @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-yellow-500) 50%, transparent);
        }
    }
}

}

.hover\:bg-\[\#6366F1\]\/5 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in oklab, #6366F1 5%, transparent);
    }
}

}

.hover\:bg-\[rgba\(16\,185\,129\,0\.1\)\] {
    &:hover

{
    @media (hover: hover) {
        background-color: rgba(16,185,129,0.1);
    }
}

}

.hover\:bg-\[rgba\(29\,161\,242\,0\.2\)\] {
    &:hover

{
    @media (hover: hover) {
        background-color: rgba(29,161,242,0.2);
    }
}

}

.hover\:bg-\[rgba\(51\,51\,51\,0\.2\)\] {
    &:hover

{
    @media (hover: hover) {
        background-color: rgba(51,51,51,0.2);
    }
}

}

.hover\:bg-\[rgba\(88\,101\,242\,0\.2\)\] {
    &:hover

{
    @media (hover: hover) {
        background-color: rgba(88,101,242,0.2);
    }
}

}

.hover\:bg-\[rgba\(99\,102\,241\,0\.1\)\] {
    &:hover

{
    @media (hover: hover) {
        background-color: rgba(99,102,241,0.1);
    }
}

}

.hover\:bg-\[rgba\(99\,102\,241\,0\.08\)\] {
    &:hover

{
    @media (hover: hover) {
        background-color: rgba(99,102,241,0.08);
    }
}

}

.hover\:bg-\[rgba\(139\,92\,246\,0\.1\)\] {
    &:hover

{
    @media (hover: hover) {
        background-color: rgba(139,92,246,0.1);
    }
}

}

.hover\:bg-\[rgba\(239\,68\,68\,0\.1\)\] {
    &:hover

{
    @media (hover: hover) {
        background-color: rgba(239,68,68,0.1);
    }
}

}

.hover\:bg-\[rgba\(245\,158\,11\,0\.1\)\] {
    &:hover

{
    @media (hover: hover) {
        background-color: rgba(245,158,11,0.1);
    }
}

}

.hover\:bg-accent\/40 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, #f5b400 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-accent) 40%, transparent);
        }
    }
}

}

.hover\:bg-bg {
    &:hover

{
    @media (hover: hover) {
        background-color: var(--color-bg);
    }
}

}

.hover\:bg-bg\/50 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, #f8fafc 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-bg) 50%, transparent);
        }
    }
}

}

.hover\:bg-border {
    &:hover

{
    @media (hover: hover) {
        background-color: var(--color-border);
    }
}

}

.hover\:bg-border\/30 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, #e2e8f0 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-border) 30%, transparent);
        }
    }
}

}

.hover\:bg-border\/50 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, #e2e8f0 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-border) 50%, transparent);
        }
    }
}

}

.hover\:bg-orange-500\/5 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-orange-500) 5%, transparent);
        }
    }
}

}

.hover\:bg-purple-500\/5 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-purple-500) 5%, transparent);
        }
    }
}

}

.hover\:bg-red-500\/5 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent);
        }
    }
}

}

.hover\:bg-red-500\/10 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
        }
    }
}

}

.hover\:bg-red-500\/30 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
        }
    }
}

}

.hover\:bg-violet-500\/5 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-violet-500) 5%, transparent);
        }
    }
}

}

.hover\:bg-white\/30 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
        }
    }
}

}

.hover\:bg-yellow-500\/5 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-yellow-500) 5%, transparent);
        }
    }
}

}

.hover\:text-\[\#10B981\] {
    &:hover

{
    @media (hover: hover) {
        color: #10B981;
    }
}

}

.hover\:text-\[\#EF4444\] {
    &:hover

{
    @media (hover: hover) {
        color: #EF4444;
    }
}

}

.hover\:text-\[\#F59E0B\] {
    &:hover

{
    @media (hover: hover) {
        color: #F59E0B;
    }
}

}

.hover\:text-indigo-600 {
    &:hover

{
    @media (hover: hover) {
        color: var(--color-indigo-600);
    }
}

}

.hover\:text-purple-400 {
    &:hover

{
    @media (hover: hover) {
        color: var(--color-purple-400);
    }
}

}

.hover\:text-purple-500 {
    &:hover

{
    @media (hover: hover) {
        color: var(--color-purple-500);
    }
}

}

.hover\:text-red-500 {
    &:hover

{
    @media (hover: hover) {
        color: var(--color-red-500);
    }
}

}

.hover\:text-text {
    &:hover

{
    @media (hover: hover) {
        color: var(--color-text);
    }
}

}

.hover\:text-violet-400 {
    &:hover

{
    @media (hover: hover) {
        color: var(--color-violet-400);
    }
}

}

.hover\:text-violet-500 {
    &:hover

{
    @media (hover: hover) {
        color: var(--color-violet-500);
    }
}

}

.hover\:text-white {
    &:hover

{
    @media (hover: hover) {
        color: var(--color-white);
    }
}

}

.hover\:underline {
    &:hover

{
    @media (hover: hover) {
        text-decoration-line: underline;
    }
}

}

.hover\:shadow-violet-500\/40 {
    &:hover

{
    @media (hover: hover) {
        --tw-shadow-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-violet-500) 40%, transparent) var(--tw-shadow-alpha), transparent);
        }
    }
}

}

.focus\:ring-\[\#10B981\] {
    &:focus

{
    --tw-ring-color: #10B981;
}

}

.focus\:ring-indigo-500 {
    &:focus

{
    --tw-ring-color: var(--color-indigo-500);
}

}

.focus\:ring-purple-500 {
    &:focus

{
    --tw-ring-color: var(--color-purple-500);
}

}

.focus\:ring-violet-500 {
    &:focus

{
    --tw-ring-color: var(--color-violet-500);
}

}

.focus\:outline-none {
    &:focus

{
    --tw-outline-style: none;
    outline-style: none;
}

}

.disabled\:cursor-not-allowed {
    &:disabled

{
    cursor: not-allowed;
}

}

.disabled\:opacity-50 {
    &:disabled

{
    opacity: 50%;
}

}

.has-\[\:checked\]\:border-violet-500 {
    &:has(*:is(:checked))

{
    border-color: var(--color-violet-500);
}

}

.has-\[\:checked\]\:bg-violet-500\/5 {
    &:has(*:is(:checked))

{
    background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 5%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-violet-500) 5%, transparent);
    }
}

}

.max-2xl\:left-0 {
    @media (width < 1536px) {
        left: calc(var(--spacing) * 0);
    }
}

.max-md\:hidden {
    @media (width < 768px) {
        display: none;
    }
}

.max-md\:flex-col {
    @media (width < 768px) {
        flex-direction: column;
    }
}

.max-md\:flex-wrap {
    @media (width < 768px) {
        flex-wrap: wrap;
    }
}

.max-md\:justify-between {
    @media (width < 768px) {
        justify-content: space-between;
    }
}

.max-sm\:flex-col {
    @media (width < 640px) {
        flex-direction: column;
    }
}

.max-sm\:flex-wrap {
    @media (width < 640px) {
        flex-wrap: wrap;
    }
}

.max-sm\:p-3 {
    @media (width < 640px) {
        padding: calc(var(--spacing) * 3);
    }
}

.max-sm\:p-3\! {
    @media (width < 640px) {
        padding: calc(var(--spacing) * 3) !important;
    }
}

.max-sm\:px-3 {
    @media (width < 640px) {
        padding-inline: calc(var(--spacing) * 3);
    }
}

.max-sm\:py-6 {
    @media (width < 640px) {
        padding-block: calc(var(--spacing) * 6);
    }
}

.max-\[500px\]\:right-20\! {
    @media (width < 500px) {
        right: calc(var(--spacing) * 20) !important;
    }
}

.max-\[500px\]\:-left-12\! {
    @media (width < 500px) {
        left: calc(var(--spacing) * -12) !important;
    }
}

.max-\[450px\]\:mt-2 {
    @media (width < 450px) {
        margin-top: calc(var(--spacing) * 2);
    }
}

.max-\[450px\]\:hidden {
    @media (width < 450px) {
        display: none;
    }
}

.max-\[450px\]\:flex-col {
    @media (width < 450px) {
        flex-direction: column;
    }
}

.max-\[450px\]\:flex-wrap {
    @media (width < 450px) {
        flex-wrap: wrap;
    }
}

.max-\[450px\]\:items-center {
    @media (width < 450px) {
        align-items: center;
    }
}

.max-\[400px\]\:flex-col {
    @media (width < 400px) {
        flex-direction: column;
    }
}

.max-\[380px\]\:flex-col {
    @media (width < 380px) {
        flex-direction: column;
    }
}

.max-\[380px\]\:items-start\! {
    @media (width < 380px) {
        align-items: flex-start !important;
    }
}

.max-\[370px\]\:mr-1 {
    @media (width < 370px) {
        margin-right: calc(var(--spacing) * 1);
    }
}

.max-\[370px\]\:px-2\! {
    @media (width < 370px) {
        padding-inline: calc(var(--spacing) * 2) !important;
    }
}

.max-\[350px\]\:hidden {
    @media (width < 350px) {
        display: none;
    }
}

.max-\[350px\]\:flex-col {
    @media (width < 350px) {
        flex-direction: column;
    }
}

.max-\[350px\]\:flex-col\! {
    @media (width < 350px) {
        flex-direction: column !important;
    }
}

.max-\[350px\]\:flex-wrap {
    @media (width < 350px) {
        flex-wrap: wrap;
    }
}

.max-\[350px\]\:items-start\! {
    @media (width < 350px) {
        align-items: flex-start !important;
    }
}

.max-\[350px\]\:px-2\! {
    @media (width < 350px) {
        padding-inline: calc(var(--spacing) * 2) !important;
    }
}

.max-\[350px\]\:py-2\! {
    @media (width < 350px) {
        padding-block: calc(var(--spacing) * 2) !important;
    }
}

.min-\[350px\]\:p-6 {
    @media (width >= 350px) {
        padding: calc(var(--spacing) * 6);
    }
}

.min-\[400px\]\:h-72 {
    @media (width >= 400px) {
        height: calc(var(--spacing) * 72);
    }
}

.min-\[400px\]\:w-80 {
    @media (width >= 400px) {
        width: calc(var(--spacing) * 80);
    }
}

.min-\[400px\]\:grid-cols-2 {
    @media (width >= 400px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.min-\[400px\]\:grid-cols-3 {
    @media (width >= 400px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.min-\[400px\]\:items-center {
    @media (width >= 400px) {
        align-items: center;
    }
}

.min-\[400px\]\:text-right {
    @media (width >= 400px) {
        text-align: right;
    }
}

.min-\[450px\]\:absolute {
    @media (width >= 450px) {
        position: absolute;
    }
}

.min-\[450px\]\:top-1\/2 {
    @media (width >= 450px) {
        top: calc(1/2 * 100%);
    }
}

.min-\[450px\]\:right-2 {
    @media (width >= 450px) {
        right: calc(var(--spacing) * 2);
    }
}

.min-\[450px\]\:ml-auto {
    @media (width >= 450px) {
        margin-left: auto;
    }
}

.min-\[450px\]\:-translate-y-1\/2\! {
    @media (width >= 450px) {
        --tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
    }
}

.min-\[450px\]\:grid-cols-2 {
    @media (width >= 450px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.xs\:p-5 {
    @media (width >= 450px) {
        padding: calc(var(--spacing) * 5);
    }
}

.min-\[450px\]\:pl-10\! {
    @media (width >= 450px) {
        padding-left: calc(var(--spacing) * 10) !important;
    }
}

.sm\:col-span-2 {
    @media (width >= 640px) {
        grid-column: span 2 / span 2;
    }
}

.sm\:ml-auto {
    @media (width >= 640px) {
        margin-left: auto;
    }
}

.sm\:block {
    @media (width >= 640px) {
        display: block;
    }
}

.sm\:inline {
    @media (width >= 640px) {
        display: inline;
    }
}

.sm\:w-48 {
    @media (width >= 640px) {
        width: calc(var(--spacing) * 48);
    }
}

.sm\:w-72 {
    @media (width >= 640px) {
        width: calc(var(--spacing) * 72);
    }
}

.sm\:w-auto {
    @media (width >= 640px) {
        width: auto;
    }
}

.sm\:flex-1 {
    @media (width >= 640px) {
        flex: 1;
    }
}

.sm\:flex-none {
    @media (width >= 640px) {
        flex: none;
    }
}

.sm\:grid-cols-2 {
    @media (width >= 640px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sm\:grid-cols-3 {
    @media (width >= 640px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sm\:grid-cols-4 {
    @media (width >= 640px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.sm\:flex-row {
    @media (width >= 640px) {
        flex-direction: row;
    }
}

.sm\:items-center {
    @media (width >= 640px) {
        align-items: center;
    }
}

.sm\:justify-between {
    @media (width >= 640px) {
        justify-content: space-between;
    }
}

.sm\:gap-3 {
    @media (width >= 640px) {
        gap: calc(var(--spacing) * 3);
    }
}

.sm\:gap-4 {
    @media (width >= 640px) {
        gap: calc(var(--spacing) * 4);
    }
}

.sm\:p-3 {
    @media (width >= 640px) {
        padding: calc(var(--spacing) * 3);
    }
}

.sm\:p-6 {
    @media (width >= 640px) {
        padding: calc(var(--spacing) * 6);
    }
}

.sm\:px-4\! {
    @media (width >= 640px) {
        padding-inline: calc(var(--spacing) * 4) !important;
    }
}

.sm\:px-6 {
    @media (width >= 640px) {
        padding-inline: calc(var(--spacing) * 6);
    }
}

.sm\:py-2\! {
    @media (width >= 640px) {
        padding-block: calc(var(--spacing) * 2) !important;
    }
}

.sm\:py-4 {
    @media (width >= 640px) {
        padding-block: calc(var(--spacing) * 4);
    }
}

.sm\:text-right {
    @media (width >= 640px) {
        text-align: right;
    }
}

.sm\:text-3xl {
    @media (width >= 640px) {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
}

.md\:block {
    @media (width >= 768px) {
        display: block;
    }
}

.md\:flex {
    @media (width >= 768px) {
        display: flex;
    }
}

.md\:w-64 {
    @media (width >= 768px) {
        width: calc(var(--spacing) * 64);
    }
}

.md\:grid-cols-2 {
    @media (width >= 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.md\:grid-cols-3 {
    @media (width >= 768px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.md\:grid-cols-4 {
    @media (width >= 768px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.md\:flex-row {
    @media (width >= 768px) {
        flex-direction: row;
    }
}

.md\:items-center {
    @media (width >= 768px) {
        align-items: center;
    }
}

.md\:justify-between {
    @media (width >= 768px) {
        justify-content: space-between;
    }
}

.md\:gap-6 {
    @media (width >= 768px) {
        gap: calc(var(--spacing) * 6);
    }
}

.md\:p-6 {
    @media (width >= 768px) {
        padding: calc(var(--spacing) * 6);
    }
}

.md\:text-3xl {
    @media (width >= 768px) {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
}

.lg\:bottom-6 {
    @media (width >= 1024px) {
        bottom: calc(var(--spacing) * 6);
    }
}

.lg\:bottom-8 {
    @media (width >= 1024px) {
        bottom: calc(var(--spacing) * 8);
    }
}

.lg\:col-span-2 {
    @media (width >= 1024px) {
        grid-column: span 2 / span 2;
    }
}

.lg\:col-span-6 {
    @media (width >= 1024px) {
        grid-column: span 6 / span 6;
    }
}

.lg\:ml-auto {
    @media (width >= 1024px) {
        margin-left: auto;
    }
}

.lg\:hidden {
    @media (width >= 1024px) {
        display: none;
    }
}

.lg\:hidden\! {
    @media (width >= 1024px) {
        display: none !important;
    }
}

.lg\:w-48 {
    @media (width >= 1024px) {
        width: calc(var(--spacing) * 48);
    }
}

.lg\:w-auto {
    @media (width >= 1024px) {
        width: auto;
    }
}

.lg\:max-w-md {
    @media (width >= 1024px) {
        max-width: var(--container-md);
    }
}

.lg\:grid-cols-2 {
    @media (width >= 1024px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lg\:grid-cols-3 {
    @media (width >= 1024px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lg\:grid-cols-4 {
    @media (width >= 1024px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lg\:flex-row {
    @media (width >= 1024px) {
        flex-direction: row;
    }
}

.lg\:items-center {
    @media (width >= 1024px) {
        align-items: center;
    }
}

.lg\:justify-between {
    @media (width >= 1024px) {
        justify-content: space-between;
    }
}

.lg\:gap-6 {
    @media (width >= 1024px) {
        gap: calc(var(--spacing) * 6);
    }
}

.lg\:p-6 {
    @media (width >= 1024px) {
        padding: calc(var(--spacing) * 6);
    }
}

.lg\:p-8 {
    @media (width >= 1024px) {
        padding: calc(var(--spacing) * 8);
    }
}

.lg\:px-6 {
    @media (width >= 1024px) {
        padding-inline: calc(var(--spacing) * 6);
    }
}

.lg\:text-3xl {
    @media (width >= 1024px) {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
}

.xl\:col-span-2 {
    @media (width >= 1280px) {
        grid-column: span 2 / span 2;
    }
}

.xl\:ml-auto {
    @media (width >= 1280px) {
        margin-left: auto;
    }
}

.xl\:grid-cols-2 {
    @media (width >= 1280px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.xl\:grid-cols-3 {
    @media (width >= 1280px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.xl\:grid-cols-4 {
    @media (width >= 1280px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.xl\:flex-row {
    @media (width >= 1280px) {
        flex-direction: row;
    }
}

.xl\:items-center {
    @media (width >= 1280px) {
        align-items: center;
    }
}

.xl\:justify-between {
    @media (width >= 1280px) {
        justify-content: space-between;
    }
}

.\32 xl\:col-span-2 {
    @media (width >= 1536px) {
        grid-column: span 2 / span 2;
    }
}

.\32 xl\:col-span-3 {
    @media (width >= 1536px) {
        grid-column: span 3 / span 3;
    }
}

.\32 xl\:grid-cols-3 {
    @media (width >= 1536px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.\32 xl\:grid-cols-4 {
    @media (width >= 1536px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.\32 xl\:flex-row {
    @media (width >= 1536px) {
        flex-direction: row;
    }
}

.\32 xl\:items-center {
    @media (width >= 1536px) {
        align-items: center;
    }
}

.\32 xl\:gap-5 {
    @media (width >= 1536px) {
        gap: calc(var(--spacing) * 5);
    }
}

.\32 xl\:gap-6 {
    @media (width >= 1536px) {
        gap: calc(var(--spacing) * 6);
    }
}

.\@max-5xl\:flex-col {
    @container (width < 64rem) {
        flex-direction: column;
    }
}

.\@max-4xl\:flex-col {
    @container (width < 56rem) {
        flex-direction: column;
    }
}

.\@max-md\:grid-cols-1 {
    @container (width < 28rem) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.\@max-md\:flex-col {
    @container (width < 28rem) {
        flex-direction: column;
    }
}

.\@max-md\:gap-2 {
    @container (width < 28rem) {
        gap: calc(var(--spacing) * 2);
    }
}

.\@max-md\:text-start {
    @container (width < 28rem) {
        text-align: start;
    }
}

.\@max-sm\:flex-col {
    @container (width < 24rem) {
        flex-direction: column;
    }
}

.\@max-sm\:flex-col\! {
    @container (width < 24rem) {
        flex-direction: column !important;
    }
}

.\@max-sm\:text-center {
    @container (width < 24rem) {
        text-align: center;
    }
}

.\@max-xs\:flex-col {
    @container (width < 20rem) {
        flex-direction: column;
    }
}

.\@min-\[200px\]\:flex-col {
    @container (width >= 200px) {
        flex-direction: column;
    }
}

.\@3xs\:col-span-1 {
    @container (width >= 16rem) {
        grid-column: span 1 / span 1;
    }
}

.\@3xs\:grid-cols-1 {
    @container (width >= 16rem) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.\@3xs\:flex-col {
    @container (width >= 16rem) {
        flex-direction: column;
    }
}

.\@3xs\:gap-2 {
    @container (width >= 16rem) {
        gap: calc(var(--spacing) * 2);
    }
}

.\@3xs\:gap-3 {
    @container (width >= 16rem) {
        gap: calc(var(--spacing) * 3);
    }
}

.\@3xs\:gap-4 {
    @container (width >= 16rem) {
        gap: calc(var(--spacing) * 4);
    }
}

.\@3xs\:text-center {
    @container (width >= 16rem) {
        text-align: center;
    }
}

.\@2xs\:grid-cols-3 {
    @container (width >= 18rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.\@xs\:items-center {
    @container (width >= 20rem) {
        align-items: center;
    }
}

.\@sm\:col-span-1 {
    @container (width >= 24rem) {
        grid-column: span 1 / span 1;
    }
}

.\@sm\:grid-cols-1 {
    @container (width >= 24rem) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.\@sm\:grid-cols-2 {
    @container (width >= 24rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.\@sm\:grid-cols-3 {
    @container (width >= 24rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.\@sm\:flex-row {
    @container (width >= 24rem) {
        flex-direction: row;
    }
}

.\@sm\:items-center {
    @container (width >= 24rem) {
        align-items: center;
    }
}

.\@sm\:text-right {
    @container (width >= 24rem) {
        text-align: right;
    }
}

.\@md\:grid-cols-2 {
    @container (width >= 28rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.\@md\:grid-cols-3 {
    @container (width >= 28rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.\@md\:flex-row {
    @container (width >= 28rem) {
        flex-direction: row;
    }
}

.\@md\:items-center {
    @container (width >= 28rem) {
        align-items: center;
    }
}

.\@md\:gap-4 {
    @container (width >= 28rem) {
        gap: calc(var(--spacing) * 4);
    }
}

.\@lg\:grid-cols-2 {
    @container (width >= 32rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.\@lg\:flex-row {
    @container (width >= 32rem) {
        flex-direction: row;
    }
}

.\@lg\:gap-6 {
    @container (width >= 32rem) {
        gap: calc(var(--spacing) * 6);
    }
}

.\@xl\:grid-cols-2 {
    @container (width >= 36rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.\@xl\:flex-row {
    @container (width >= 36rem) {
        flex-direction: row;
    }
}

.\@xl\:text-start {
    @container (width >= 36rem) {
        text-align: start;
    }
}

.\@2xl\:grid-cols-2 {
    @container (width >= 42rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.\@3xl\:col-span-1 {
    @container (width >= 48rem) {
        grid-column: span 1 / span 1;
    }
}

.\@3xl\:col-span-2 {
    @container (width >= 48rem) {
        grid-column: span 2 / span 2;
    }
}

.\@3xl\:grid-cols-1 {
    @container (width >= 48rem) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.\@3xl\:grid-cols-2 {
    @container (width >= 48rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.\@3xl\:grid-cols-3 {
    @container (width >= 48rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.\@3xl\:flex-row {
    @container (width >= 48rem) {
        flex-direction: row;
    }
}

.\@4xl\:col-span-2 {
    @container (width >= 56rem) {
        grid-column: span 2 / span 2;
    }
}

.\@4xl\:grid-cols-2 {
    @container (width >= 56rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.\@4xl\:grid-cols-3 {
    @container (width >= 56rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.\@4xl\:grid-cols-4 {
    @container (width >= 56rem) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.\@4xl\:grid-cols-5 {
    @container (width >= 56rem) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.\@4xl\:items-center {
    @container (width >= 56rem) {
        align-items: center;
    }
}

.\@4xl\:items-end {
    @container (width >= 56rem) {
        align-items: flex-end;
    }
}

.\@4xl\:gap-6 {
    @container (width >= 56rem) {
        gap: calc(var(--spacing) * 6);
    }
}

.\@4xl\:text-right {
    @container (width >= 56rem) {
        text-align: right;
    }
}

.\@5xl\:grid-cols-2 {
    @container (width >= 64rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.\@5xl\:grid-cols-3 {
    @container (width >= 64rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.\@5xl\:grid-cols-4 {
    @container (width >= 64rem) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.\@5xl\:flex-row {
    @container (width >= 64rem) {
        flex-direction: row;
    }
}

.\@5xl\:items-center {
    @container (width >= 64rem) {
        align-items: center;
    }
}

.\@6xl\:grid-cols-4 {
    @container (width >= 72rem) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.\@7xl\:col-span-2 {
    @container (width >= 80rem) {
        grid-column: span 2 / span 2;
    }
}

.\@7xl\:grid-cols-3 {
    @container (width >= 80rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.\@7xl\:grid-cols-4 {
    @container (width >= 80rem) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.\@7xl\:flex-row {
    @container (width >= 80rem) {
        flex-direction: row;
    }
}

.\@7xl\:items-center {
    @container (width >= 80rem) {
        align-items: center;
    }
}

.\@7xl\:gap-5 {
    @container (width >= 80rem) {
        gap: calc(var(--spacing) * 5);
    }
}

.\@7xl\:gap-6 {
    @container (width >= 80rem) {
        gap: calc(var(--spacing) * 6);
    }
}

.dark\:block {
    &:where(.dark, .dark *)

{
    display: block;
}

}

.dark\:hidden {
    &:where(.dark, .dark *)

{
    display: none;
}

}

.dark\:border-gray-700 {
    &:where(.dark, .dark *)

{
    border-color: var(--color-gray-700);
}

}

.dark\:bg-bg {
    &:where(.dark, .dark *)

{
    background-color: var(--color-bg);
}

}

.dark\:bg-bg\/50 {
    &:where(.dark, .dark *)

{
    background-color: color-mix(in srgb, #f8fafc 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-bg) 50%, transparent);
    }
}

}

.dark\:bg-gray-900\/50 {
    &:where(.dark, .dark *)

{
    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
    }
}

}

.dark\:text-text {
    &:where(.dark, .dark *)

{
    color: var(--color-text);
}

}

.dark\:text-white {
    &:where(.dark, .dark *)

{
    color: var(--color-white);
}

}
}

.dark {
    --color-bg: #06080c;
    --color-panel: #0c0f16;
    --color-muted: #94a3b8;
    --color-text: #f1f5f9;
    --color-border: #1e293b;
    --color-glass: rgba(12, 15, 22, 0.85);
    --color-green-500: #f5b400;
}

.live-ticker {
    display: flex;
    gap: 24px;
    animation: ticker 30s linear infinite;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.bot-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .bot-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .bot-card:hover::before {
        opacity: 1;
    }

    .bot-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
    }

    .bot-card.running {
        border-color: rgba(16, 185, 129, 0.3);
    }

        .bot-card.running::before {
            background: linear-gradient(90deg, #10b981, #06b6d4);
            opacity: 1;
        }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) var(--value, 50%), var(--color-border) var(--value, 50%), var(--color-border) 100%);
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .range-slider:hover {
        background: linear-gradient(to right, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) var(--value, 50%), var(--color-border) var(--value, 50%), var(--color-border) 100%);
    }

    .range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: linear-gradient(135deg, #8b5cf6, #6366f1);
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
        transition: all 0.3s ease;
    }

        .range-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.6);
        }

        .range-slider::-webkit-slider-thumb:active {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.8);
        }

    .range-slider::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: linear-gradient(135deg, #8b5cf6, #6366f1);
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
        transition: all 0.3s ease;
    }

        .range-slider::-moz-range-thumb:hover {
            transform: scale(1.15);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.6);
        }

        .range-slider::-moz-range-thumb:active {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.8);
        }

    .range-slider::-moz-range-track {
        height: 6px;
        border-radius: 999px;
        background: transparent;
    }

    .range-slider:focus {
        outline: none;
    }

        .range-slider:focus::-webkit-slider-thumb {
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2), 0 4px 12px rgba(139, 92, 246, 0.6);
        }

        .range-slider:focus::-moz-range-thumb {
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2), 0 4px 12px rgba(139, 92, 246, 0.6);
        }

.template-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .template-card:hover {
        border-color: rgba(99, 102, 241, 0.3);
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(99, 102, 241, 0.15);
    }

    .template-card.featured {
        border-color: rgba(245, 158, 11, 0.3);
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.03), transparent);
    }

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .filter-tag:hover {
        border-color: #6366f1;
        color: #6366f1;
    }

    .filter-tag.active {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-text);
    }

.gradient-dca {
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
}

#dca-bot {
    input [type="range"]

{
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 var(--range-progress, 50%), rgba(148, 163, 184, 0.4) var(--range-progress, 50%));
    outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    border-radius: 99px;
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5);
    margin-top: -6px;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    border-radius: 99px;
    background: rgba(148, 163, 184, 0.4);
}

input[type="range"]::-moz-range-progress {
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5);
}

}

.badge-pump {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.stats-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

    .stats-ring svg {
        transform: rotate(-90deg);
    }

    .stats-ring .ring-bg {
        fill: none;
        stroke: var(--border);
        stroke-width: 8;
    }

    .stats-ring .ring-fill {
        fill: none;
        stroke-width: 8;
        stroke-linecap: round;
        transition: stroke-dashoffset 1s ease;
    }

.stats-ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.protocol-card {
    background: var(--color-panel);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .protocol-card:hover {
        border-color: rgba(139, 92, 246, 0.5);
        box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.2);
        transform: translateY(-2px);
    }

.pool-card {
    background: var(--color-panel);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    overflow: hidden;
}

    .pool-card:hover {
        border-color: rgba(6, 182, 212, 0.5);
        box-shadow: 0 12px 40px -10px rgba(6, 182, 212, 0.2);
    }

.token-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.apy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.risk-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.risk-low {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.risk-medium {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.risk-high {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.chain-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--color-border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

.bot-icon-container {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .bot-icon-container::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    }

.token-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: white;
}

    .token-icon:not(:first-child) {
        margin-left: -10px;
    }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .faq-item:hover {
        border-color: rgba(247, 147, 26, 0.3);
    }

    .faq-item.active {
        border-color: #f7931a;
    }

.faq-question {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 600;
    background: var(--color-panel);
    transition: all 0.3s ease;
}

    .faq-question:hover {
        background: rgba(247, 147, 26, 0.05);
    }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--color-bg);
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-icon {
    transition: transform 0.3s ease;
}

.category-card {
    position: relative;
    padding: 24px;
    border-radius: 16px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.4s ease;
    overflow: hidden;
}

    .category-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #f7931a, #627eea);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .category-card:hover::before {
        transform: scaleX(1);
    }

    .category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px -15px rgba(247, 147, 26, 0.2);
    }

.category-card {
    position: relative;
    padding: 24px;
    border-radius: 16px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.4s ease;
    overflow: hidden;
}

    .category-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #f7931a, #627eea);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .category-card:hover::before {
        transform: scaleX(1);
    }

    .category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px -15px rgba(247, 147, 26, 0.2);
    }

.filter-pill {
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: var(--color-panel);
    color: var(--color-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .filter-pill:hover {
        border-color: var(--color-accent);
        color: var(--color-text);
    }

    .filter-pill.active {
        background: var(--color-accent);
        color: white;
        border-color: transparent;
    }

.article-card {
    padding: 20px;
    border-radius: 12px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    cursor: pointer;
}

    .article-card:hover {
        border-color: rgba(247, 147, 26, 0.3);
        transform: translateX(4px);
    }

.contact-card {
    padding: 24px;
    border-radius: 16px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .contact-card:hover {
        border-color: #f7931a;
        transform: translateY(-4px);
        box-shadow: 0 15px 30px -10px rgba(247, 147, 26, 0.2);
    }

.video-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .video-card:hover {
        transform: scale(1.02);
    }

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card:hover .video-overlay {
    opacity: 1;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-online {
    background: #10b981;
}

.status-busy {
    background: #f59e0b;
}

.ticket-row {
    padding: 16px;
    border-radius: 12px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    margin-bottom: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .ticket-row:hover {
        border-color: rgba(247, 147, 26, 0.3);
        background: rgba(247, 147, 26, 0.02);
    }

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

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

.copy-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

    .copy-input-wrapper input {
        flex: 1;
        padding: 14px 16px;
        background: transparent;
        border: none;
        color: var(--color-text);
        font-size: 14px;
        font-family: monospace;
        outline: none;
    }

    .copy-input-wrapper button {
        padding: 14px 20px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: white;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .copy-input-wrapper button:hover {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
        }

.referral-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

    .referral-card::before {
        content: "";
        position: absolute;
        top: -100px;
        right: -100px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
        pointer-events: none;
    }

.progress-ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

    .progress-ring svg {
        transform: rotate(-90deg);
    }

.progress-ring-bg {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 8;
}

.progress-ring-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease;
}

.progress-ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

    .leaderboard-item:hover {
        background: rgba(99, 102, 241, 0.1);
    }

.leaderboard-rank {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
}

.rank-1 {
    background: linear-gradient(135deg, #f59e0b, #eab308);
    color: white;
}

.rank-2 {
    background: linear-gradient(135deg, #94a3b8, #cbd5e1);
    color: #1e293b;
}

.rank-3 {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: white;
}

.avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
    }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.share-btn-twitter {
    background: #1da1f2;
    color: white;
}

.share-btn-telegram {
    background: #0088cc;
    color: white;
}

.share-btn-discord {
    background: #5865f2;
    color: white;
}

.share-btn-whatsapp {
    background: #25d366;
    color: white;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.tier-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

    .tier-card.current {
        border-color: #6366f1;
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.2);
    }

        .tier-card.current::before {
            content: "Current";
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
            padding: 4px 12px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
        }

.milestone-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-panel);
    border-radius: 12px;
    position: relative;
}

    .milestone-item.completed {
        background: rgba(16, 185, 129, 0.1);
    }

    .milestone-item.active {
        background: rgba(99, 102, 241, 0.1);
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

.milestone-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.milestone-line {
    position: absolute;
    left: 39px;
    top: 64px;
    width: 2px;
    height: calc(100% - 32px);
    background: var(--color-border);
}

.milestone-item.completed .milestone-line {
    background: #10b981;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-text);
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

    .form-input:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    .form-input::placeholder {
        color: var(--color-muted);
    }

.metric-ring {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .metric-ring svg {
        transform: rotate(-90deg);
    }

.metric-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.asset-card {
    background: var(--color-panel);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .asset-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .asset-card:hover::before {
        opacity: 1;
    }

    .asset-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 40px -10px rgba(99, 102, 241, 0.2);
        border-color: rgba(99, 102, 241, 0.3);
    }

.wallet-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

    .wallet-card::before {
        content: "";
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    }

.portfolio-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

    .portfolio-item:hover {
        background: rgba(99, 102, 241, 0.05);
    }

.transaction-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

    .transaction-item:hover {
        border-color: rgba(99, 102, 241, 0.3);
        transform: translateX(4px);
    }

@media (max-width: 450px) {
    .transaction-item {
        flex-direction: column;
    }
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

input[type="date"].form-control {
    position: relative;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%239ca3af%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%2718%27 rx=%272%27 ry=%272%27%3E%3C/rect%3E%3Cline x1=%2716%27 y1=%272%27 x2=%2716%27 y2=%276%27%3E%3C/line%3E%3Cline x1=%278%27 y1=%272%27 x2=%278%27 y2=%276%27%3E%3C/line%3E%3Cline x1=%273%27 y1=%2710%27 x2=%2721%27 y2=%2710%27%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

    input[type="date"].form-control::-webkit-calendar-picker-indicator {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }

    input[type="date"].form-control:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236366f1%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%2718%27 rx=%272%27 ry=%272%27%3E%3C/rect%3E%3Cline x1=%2716%27 y1=%272%27 x2=%2716%27 y2=%276%27%3E%3C/line%3E%3Cline x1=%278%27 y1=%272%27 x2=%278%27 y2=%276%27%3E%3C/line%3E%3Cline x1=%273%27 y1=%2710%27 x2=%2721%27 y2=%2710%27%3E%3C/line%3E%3C/svg%3E");
    }

.card {
    background: var(--color-panel);
    border-radius: 10px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

    .card:hover {
        border-color: rgba(99, 102, 241, 0.3);
    }

.notification-item {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

    .notification-item:hover {
        border-color: rgba(99, 102, 241, 0.4);
        transform: translateX(4px);
        box-shadow: 0 8px 30px -10px rgba(99, 102, 241, 0.2);
    }

    .notification-item.unread {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(236, 72, 153, 0.02));
        border-left: 3px solid #6366f1;
    }

        .notification-item.unread::before {
            content: "";
            position: absolute;
            top: 20px;
            left: 20px;
            width: 8px;
            height: 8px;
            background: #6366f1;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.checkbox-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
}

    .checkbox-wrapper input {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

.checkbox-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--color-panel);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.3s ease;
    pointer-events: none;
}

.checkbox-wrapper input:checked + .checkbox-custom {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: #6366f1;
}

    .checkbox-wrapper input:checked + .checkbox-custom::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 6px;
        width: 5px;
        height: 9px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

.priority-badge {
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-critical {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.priority-high {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.priority-medium {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.priority-low {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.notif-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .notif-icon.trade {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1));
        color: #10b981;
    }

    .notif-icon.alert {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
        color: #ef4444;
    }

    .notif-icon.bot {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
        color: #6366f1;
    }

    .notif-icon.defi {
        background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.1));
        color: #06b6d4;
    }

    .notif-icon.system {
        background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(100, 116, 139, 0.1));
        color: #94a3b8;
    }

    .notif-icon.wallet {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1));
        color: #f59e0b;
    }

    .notif-icon.security {
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(219, 39, 119, 0.1));
        color: #ec4899;
    }

.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
        animation: fadeIn 0.3s ease;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.2);
    }

@media (max-width: 1024px) {
    .sidebar {
        left: -280px;
    }

        .sidebar.mobile-open {
            left: 0;
        }

    .main-content {
        margin-left: 0 !important;
    }

    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
    }
}

@media (max-width: 640px) {
    .drawer {
        width: 100%;
    }

    .header {
        padding: 12px 16px;
    }

    .tab-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-in {
    animation: slideIn 0.4s ease forwards;
}

.notification-item:nth-child(1) {
    animation-delay: 0.05s;
}

.notification-item:nth-child(2) {
    animation-delay: 0.1s;
}

.notification-item:nth-child(3) {
    animation-delay: 0.15s;
}

.notification-item:nth-child(4) {
    animation-delay: 0.2s;
}

.notification-item:nth-child(5) {
    animation-delay: 0.25s;
}

.notification-item:nth-child(6) {
    animation-delay: 0.3s;
}

.notification-item:nth-child(7) {
    animation-delay: 0.35s;
}

.notification-item:nth-child(8) {
    animation-delay: 0.4s;
}

.search-input {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 10px 16px 10px 44px;
    font-size: 14px;
    color: var(--color-text);
    width: 100%;
    transition: all 0.3s ease;
}

    .search-input:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .search-input::placeholder {
        color: var(--color-muted);
    }

.ai-badge {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.bot-status-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

    .bot-status-card:hover {
        border-color: rgba(99, 102, 241, 0.3);
        box-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.2);
    }

    .bot-status-card.running {
        border-color: rgba(16, 185, 129, 0.3);
    }

        .bot-status-card.running:hover {
            box-shadow: 0 10px 40px -10px rgba(16, 185, 129, 0.3);
        }

.portfolio-donut-container {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
}

.portfolio-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.asset-row {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    cursor: pointer;
}

    .asset-row:hover {
        border-color: rgba(99, 102, 241, 0.3);
        transform: translateX(4px);
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(236, 72, 153, 0.03));
    }

.mini-stat {
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.preference-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

    .preference-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .preference-item:first-child {
        padding-top: 0;
    }

#pump-screener {
    .token-logo

{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: white;
}

.gradient-pump {
    background: linear-gradient(135deg, #10b981 0%, #22c55e 100%);
}

.gradient-dump {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.custom-select {
    appearance: none;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 10px 36px 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2394A3B8%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: all 0.3s ease;
}

    .custom-select:focus {
        outline: none;
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .custom-checkbox input {
        display: none;
    }

    .custom-checkbox .checkmark {
        width: 20px;
        height: 20px;
        border: 2px solid var(--color-border);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .custom-checkbox input:checked + .checkmark {
        background: linear-gradient(135deg, #10b981, #06b6d4);
        border-color: transparent;
    }

    .custom-checkbox .checkmark i, .custom-checkbox .checkmark svg {
        display: none;
        color: white;
    }

    .custom-checkbox input:checked + .checkmark i, .custom-checkbox input:checked + .checkmark svg {
        display: block;
    }

}

.card-security {
    background: var(--color-panel);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

    .card-security:hover {
        border-color: rgba(139, 92, 246, 0.3);
        box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.15);
    }

.api-key-card {
    background: var(--color-panel);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    position: relative;
}

    .api-key-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #8b5cf6, #06b6d4);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .api-key-card:hover::before {
        opacity: 1;
    }

    .api-key-card:hover {
        border-color: rgba(139, 92, 246, 0.3);
    }

#security-api-keys {
    .security-meter

{
    width: 100%;
    height: 8px;
    background: var(--color-border);
    border-radius: 99px;
    overflow: hidden;
}

.security-meter-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.6s ease;
}

.key-display {
    font-family: "SF Mono", "Fira Code", monospace;
    background: var(--color-bg);
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    font-size: 13px;
    letter-spacing: 0.5px;
    word-break: break-all;
}

.otp-input {
    width: 56px;
    height: 64px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg);
    color: var(--color-text);
    transition: all 0.3s ease;
}

.otp-input {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);

    @media (width >= 640px) {
        width: calc(var(--spacing) * 14);
        height: calc(var(--spacing) * 14);
    }
}

    .otp-input:focus {
        outline: none;
        border-color: #8b5cf6;
        box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
    }

.badge-active {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-inactive {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-read {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge-write {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.badge-full {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

}

.staking-pool-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 24px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

    .staking-pool-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #00d4aa, #00b4d8, #6366f1);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .staking-pool-card:hover::before {
        opacity: 1;
    }

    .staking-pool-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px -10px rgba(0, 212, 170, 0.2);
        border-color: rgba(0, 212, 170, 0.3);
    }

.strategy-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .strategy-card:hover {
        border-color: rgba(139, 92, 246, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15);
    }

.perf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

    .perf-badge.positive {
        background: rgba(16, 185, 129, 0.15);
        color: #10b981;
    }

    .perf-badge.negative {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

.pricing-card {
    background: var(--color-panel);
    border-radius: 24px;
    border: 1px solid var(--color-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .pricing-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 80px -20px rgba(99, 102, 241, 0.3);
    }

    .pricing-card.featured {
        border-color: transparent;
        background: linear-gradient(var(--color-panel), var(--color-panel)) padding-box, linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899) border-box;
        border: 2px solid transparent;
    }

        .pricing-card.featured::before {
            opacity: 0;
        }

        .pricing-card.featured:hover {
            box-shadow: 0 30px 80px -20px rgba(139, 92, 246, 0.4);
        }

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--color-text);
}

    .feature-item i {
        width: 20px;
        height: 20px;
        color: #10b981;
    }

    .feature-item.disabled {
        color: var(--color-muted);
    }

        .feature-item.disabled i {
            color: var(--color-muted);
        }

.animated-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

    .animated-bg::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.08) 0%, transparent 50%);
        animation: float 20s ease-in-out infinite;
    }

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(2%, 2%) rotate(2deg);
    }

    50% {
        transform: translate(0, 4%) rotate(0deg);
    }

    75% {
        transform: translate(-2%, 2%) rotate(-2deg);
    }
}

.plan-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 10px;
}

.order-book-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 4px 8px;
    font-size: 12px;
    transition: background 0.2s ease;
}

    .order-book-row:hover {
        background: rgba(99, 102, 241, 0.05);
    }

    .order-book-row.bid {
        background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.05) 100%);
    }

    .order-book-row.ask {
        background: linear-gradient(90deg, transparent 0%, rgba(239, 68, 68, 0.05) 100%);
    }

.gradient-bot {
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
}

.order-type-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-muted);
}

    .order-type-btn.buy.active {
        background: rgba(16, 185, 129, 0.15);
        border-color: #10b981;
        color: #10b981;
    }

    .order-type-btn.sell.active {
        background: rgba(239, 68, 68, 0.15);
        border-color: #ef4444;
        color: #ef4444;
    }

.crypto-icon.btc {
    background: linear-gradient(135deg, #f7931a 0%, #ffb347 100%);
    color: white;
}

.crypto-icon.eth {
    background: linear-gradient(135deg, #627eea 0%, #8e9fef 100%);
    color: white;
}

.crypto-icon.sol {
    background: linear-gradient(135deg, #00ffa3 0%, #dc1fff 100%);
    color: white;
}

.crypto-icon.bnb {
    background: linear-gradient(135deg, #f3ba2f 0%, #ffd56b 100%);
    color: #1e2026;
}

.crypto-icon.xrp {
    background: linear-gradient(135deg, #23292f 0%, #4a5568 100%);
    color: white;
}

.crypto-icon.ada {
    background: linear-gradient(135deg, #0033ad 0%, #3366ff 100%);
    color: white;
}

.signal-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .signal-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #10b981, #06b6d4);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .signal-card.buy::before {
        background: linear-gradient(90deg, #10b981, #06b6d4);
        opacity: 1;
    }

    .signal-card.sell::before {
        background: linear-gradient(90deg, #ef4444, #f97316);
        opacity: 1;
    }

    .signal-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

.ticker-tape {
    display: inline-block;
    white-space: nowrap;
    animation: ticker 30s linear infinite;
    padding-left: 100%;
}

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

@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.token-pair {
    display: flex;
    align-items: center;
}

.farm-card {
    background: var(--color-panel);
    border-radius: 24px;
    border: 1px solid var(--color-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .farm-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #10b981, #06b6d4, #8b5cf6);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .farm-card:hover::before {
        opacity: 1;
    }

    .farm-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.2);
    }

    .farm-card.featured {
        border: 2px solid transparent;
        background: linear-gradient(var(--color-panel), var(--color-panel)) padding-box, linear-gradient(135deg, #10b981, #06b6d4, #8b5cf6) border-box;
    }

        .farm-card.featured::before {
            opacity: 1;
        }

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

    #loader.hidden {
        opacity: 0;
        visibility: hidden;
    }

.spinner {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, var(--color-accent) 100%);
    animation: spin 1s linear infinite;
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
}

    .spinner::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--color-accent), #ec4899);
        filter: blur(10px);
        opacity: 0.5;
        z-index: -1;
    }

.loader-text {
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 3px;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    animation: pulse 2s ease-in-out infinite;
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

body {
    font-family: "Poppins", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-muted);
    }

.glass {
    background: var(--color-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .glass {
    background: rgba(12, 15, 22, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.gradient-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, #8b5cf6 50%, #ec4899 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}

.gradient-success {
    background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%);
}

.gradient-danger {
    background: linear-gradient(135deg, var(--color-error) 0%, #dc2626 100%);
}

.gradient-warning {
    background: linear-gradient(135deg, var(--color-warning) 0%, #d97706 100%);
}

.gradient-info {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-accent) 100%);
}

.gradient-teal {
    background: linear-gradient(135deg, var(--color-teal) 0%, #06b6d4 100%);
}

.gradient-orange {
    background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-error) 100%);
}

.gradient-crypto {
    background: linear-gradient(135deg, var(--color-crypto) 0%, #ff9500 100%);
}

.gradient-defi {
    background: linear-gradient(135deg, var(--color-defi) 0%, #8b5cf6 100%);
}

.gradient-ai {
    background: linear-gradient(135deg, var(--color-success) 0%, #06b6d4 50%, #8b5cf6 100%);
}

.gradient-cyber {
    background: linear-gradient(135deg, var(--color-cyber) 0%, #00d9f5 100%);
}

.gradient-eth {
    background: linear-gradient(135deg, var(--color-defi) 0%, #8b5cf6 100%);
}

.gradient-info {
    background: linear-gradient(135deg, #00b4d8 0%, var(--color-accent) 100%);
}

.gradient-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}

.gradient-btc {
    background: linear-gradient(135deg, #f7931a 0%, #f59e0b 100%);
}

.gradient-trading {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #6366f1 100%);
}

.text-gradient {
    background: linear-gradient(135deg, var(--color-accent) 0%, #8b5cf6 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-crypto {
    background: linear-gradient(135deg, var(--color-crypto) 0%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-cyber {
    background: linear-gradient(135deg, var(--color-cyber) 0%, #00d9f5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

    .pulse-dot.green {
        background: var(--color-success);
    }

    .pulse-dot.yellow {
        background: var(--color-warning);
    }

    .pulse-dot.red {
        background: var(--color-error);
    }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

    .status-badge.active {
        background: rgba(16, 185, 129, 0.15);
        color: var(--color-success);
    }

    .status-badge.paused {
        background: rgba(245, 158, 11, 0.15);
        color: var(--color-warning);
    }

    .status-badge.stopped {
        background: rgba(239, 68, 68, 0.15);
        color: var(--color-error);
    }

    .status-badge.pending {
        background: rgba(99, 102, 241, 0.15);
        color: var(--color-accent);
    }

.dropdown-menu.notifications-menu {
    @media (width < 450px) {
        left: calc(183px * -1) !important;
    }

    @media (width < 430px) {
        right: calc(var(--spacing) * 0) !important;
    }

    @media (width < 420px) {
        left: calc(153px * -1) !important;
    }
}

.sidebar {
    background: var(--color-panel);
    border-right: 1px solid var(--color-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 280px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
}

    .sidebar.collapsed {
        width: 80px;
    }

        .sidebar.collapsed .nav-text,
        .sidebar.collapsed .nav-section-title,
        .sidebar.collapsed .logo-text,
        .sidebar.collapsed .user-info,
        .sidebar.collapsed .nav-arrow,
        .sidebar.collapsed .submenu {
            display: none;
        }

        .sidebar.collapsed .nav-item {
            justify-content: center;
            padding: 14px;
        }

            .sidebar.collapsed .nav-item i {
                margin: 0;
            }

        .sidebar.collapsed .logo-section {
            justify-content: center;
            padding: 16px;
        }

        .sidebar.collapsed .user-section {
            justify-content: center;
            padding: 16px;
        }

.nav-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 16px 20px 8px;
    margin-top: 8px;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 2px 12px;
    border-radius: 12px;
    color: var(--color-muted);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

    .nav-item:hover {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.05));
        color: var(--color-text);
    }

    .nav-item.active {
        background: var(--color-accent);
        color: var(--color-white);
        font-weight: 600;
    }

    .nav-item.has-submenu.active {
        background: transparent;
        color: var(--color-accent);
    }

    .nav-item.active::before {
        height: 28px;
    }

    .nav-item.has-submenu.active::before {
        display: none;
    }

    .nav-item .nav-arrow {
        margin-left: auto;
        transition: transform 0.3s ease;
    }

    .nav-item.expanded .nav-arrow {
        transform: rotate(180deg);
    }

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .submenu.open {
        max-height: 500px;
    }

.submenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 32px;
    margin: 2px 12px;
    border-radius: 10px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .submenu-item:hover {
        background: rgba(99, 102, 241, 0.08);
        color: var(--color-text);
    }

    .submenu-item.active {
        color: var(--color-white);
        background: var(--color-accent);
    }

.sidebar.collapsed .nav-item {
    position: relative;
}

    .sidebar.collapsed .nav-item::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        background: var(--color-panel);
        border: 1px solid var(--color-border);
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: var(--color-text);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        margin-left: 10px;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .sidebar.collapsed .nav-item:hover::after {
        opacity: 1;
        visibility: visible;
    }

.main-content {
    margin-left: 280px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100vh;
}

    .main-content.expanded {
        margin-left: 80px;
    }

.inner-content {
    @media (width < 1024px) {
        padding-inline: calc(var(--spacing) * 4);
    }

    @media (width < 1024px) {
        padding-block: calc(var(--spacing) * 6);
    }

    @media (width < 640px) {
        padding-inline: calc(var(--spacing) * 3);
    }

    @media (width >= 1024px) {
        padding: calc(var(--spacing) * 6);
    }
}

.card-elevated,
.card-static {
    background: var(--color-panel);
    border-radius: 10px;
    border: 1px solid var(--color-border);
}

.card-elevated {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.card-elevated {
    @media (width < 1024px) {
        padding-inline: calc(var(--spacing) * 4);
    }

    @media (width < 1024px) {
        padding-block: calc(var(--spacing) * 6);
    }

    @media (width < 640px) {
        padding-inline: calc(var(--spacing) * 3);
    }

    @media (width >= 1024px) {
        padding: calc(var(--spacing) * 4);
    }
}

    .card-elevated:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 60px -15px rgba(99, 102, 241, 0.25);
    }

.badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
}

.badge-success {
    background: rgba(16, 185, 129, 0.05);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.05);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-info {
    background: rgba(99, 102, 241, 0.05);
    color: var(--color-accent);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.badge-premium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(236, 72, 153, 0.2));
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.badge-free {
    background: rgba(6, 182, 212, 0.05);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.05);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-teal {
    background: rgba(20, 184, 166, 0.05);
    color: var(--color-teal);
    border: 1px solid rgba(20, 184, 166, 0.3);
}

.badge-crypto {
    background: rgba(247, 147, 26, 0.05);
    color: var(--color-crypto);
    border: 1px solid rgba(247, 147, 26, 0.3);
}

.badge-purple {
    background: rgba(139, 92, 246, 0.05);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.badge-neutral {
    background: rgba(100, 116, 139, 0.05);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}

.badge-secondary {
    background: rgba(99, 102, 241) !important;
    color: #fff;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    outline: none;
}

.btn-primary {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    background-color: var(--color-accent);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    --tw-duration: 300ms;
    transition-duration: 300ms;
    &:hover

{
    @media (hover: hover) {
        --tw-translate-y: -2px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}

&:hover {
    @media (hover: hover) {
        --tw-shadow: 0 10px 30px -10px var(--tw-shadow-color, rgba(245,158,11,0.5));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
}

@media (width >= 768px) {
    padding-inline: calc(var(--spacing) * 6);
}

@media (width >= 768px) {
    padding-block: calc(var(--spacing) * 3);
}

}

.btn-secondary {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border);
    background-color: var(--color-panel);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    --tw-duration: 300ms;
    transition-duration: 300ms;
    &:hover

{
    @media (hover: hover) {
        --tw-translate-y: -2px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}

&:hover {
    @media (hover: hover) {
        --tw-shadow: 0 10px 30px -10px var(--tw-shadow-color, rgba(245,158,11,0.5));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
}

@media (width >= 768px) {
    padding-inline: calc(var(--spacing) * 6);
}

@media (width >= 768px) {
    padding-block: calc(var(--spacing) * 3);
}

}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

    .btn-outline:hover {
        border-color: var(--color-accent);
        background: rgba(99, 102, 241, 0.1);
        color: var(--color-accent);
    }

.btn-secondary:hover {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.btn-success {
    background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%);
    color: white;
}

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -8px rgba(16, 185, 129, 0.5);
    }

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-icon:hover {
        background: rgba(99, 102, 241, 0.1);
        border-color: rgba(99, 102, 241, 0.3);
    }

.btn-ghost {
    background: transparent;
    color: var(--color-muted);
    padding: 8px 12px;
}

    .btn-ghost:hover {
        background: rgba(99, 102, 241, 0.1);
        color: var(--color-text);
    }

.btn-ai {
    background: linear-gradient(135deg, var(--color-success) 0%, #06b6d4 50%, #8b5cf6 100%);
    color: white;
}

    .btn-ai:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -8px rgba(6, 182, 212, 0.5);
    }

.btn-danger {
    background: linear-gradient(135deg, var(--color-error) 0%, #dc2626 100%);
    color: white;
}

    .btn-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -8px rgba(239, 68, 68, 0.5);
    }

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-panel);
    color: var(--color-text);
    font-size: 14px;
    transition: all 0.3s ease;
}

select.form-control {
    width: 100%;
    padding: 12px 16px;
    padding-right: 44px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-panel);
    color: var(--color-text);
    font-size: 14px;
    transition: 0.3s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 fill=%27gray%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M1.5 5.5l6 6 6-6%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
}

select {
    padding: 12px 16px;
    padding-right: 44px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-panel);
    color: var(--color-text);
    font-size: 14px;
    transition: 0.3s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 fill=%27gray%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M1.5 5.5l6 6 6-6%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.15);
}

.form-control::placeholder {
    color: var(--color-muted);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="time"].form-control {
    position: relative;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%239ca3af%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27%3E%3C/circle%3E%3Cpolyline points=%2712 6 12 12 16 14%27%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

    input[type="time"].form-control::-webkit-calendar-picker-indicator {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }

    input[type="time"].form-control:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236366f1%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27%3E%3C/circle%3E%3Cpolyline points=%2712 6 12 12 16 14%27%3E%3C/polyline%3E%3C/svg%3E");
    }

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 8px;
    min-width: 200px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

    .dropdown-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(4px);
    }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .dropdown-item:hover {
        background: rgba(99, 102, 241, 0.1);
        color: var(--color-accent);
    }

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .drawer-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.drawer {
    position: fixed;
    top: 0;
    right: -560px;
    width: 560px;
    max-width: 95vw;
    height: 100vh;
    background: var(--color-panel);
    border-left: 1px solid var(--color-border);
    z-index: 201;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

    .drawer.active {
        right: 0;
    }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.modal {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal {
    transform: scale(1);
}

.search-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .search-modal.active {
        opacity: 1;
        visibility: visible;
    }

.search-modal-content {
    background: var(--color-panel);
    border-radius: 10px;
    width: 600px;
    max-width: 90vw;
    border: 1px solid var(--color-border);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.search-modal.active .search-modal-content {
    transform: translateY(0);
}

.fab {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-accent), #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
    transition: all 0.3s ease;
    z-index: 90;
}

    .fab:hover {
        transform: scale(1.1);
        box-shadow: 0 12px 32px rgba(99, 102, 241, 0.5);
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s ease forwards;
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

        .sidebar.mobile-open {
            transform: translateX(0);
        }

    .main-content {
        margin-left: 0;
    }

        .main-content.expanded {
            margin-left: 0;
        }

    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
    }
}

.border-border {
    border-color: var(--color-border) !important;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }

.bot-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bot-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

    .bot-status-dot.active {
        background: var(--color-success);
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
    }

    .bot-status-dot.paused {
        background: var(--color-warning);
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
    }

    .bot-status-dot.stopped {
        background: var(--color-error);
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
        animation: none;
    }

.crypto-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: white;
}

.crypto-icon-sm {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: white;
}

.crypto-icon-lg {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 16px;
}

.sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 30px;
}

.sparkline-bar {
    width: 4px;
    border-radius: 2px;
    transition: height 0.3s ease;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    background: rgba(239, 68, 68, 0.1);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-error);
}

    .live-indicator::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color-error);
        animation: pulse 1.5s infinite;
    }

.trade-card {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

    .trade-card:hover {
        border-color: rgba(99, 102, 241, 0.3);
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.1);
    }

.pnl-positive {
    color: var(--color-success);
}

.pnl-negative {
    color: var(--color-error);
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: white;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

.skeleton {
    background: linear-gradient(90deg, var(--color-border) 25%, rgba(99, 102, 241, 0.1) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.gradient-border-card {
    position: relative;
    background: var(--color-panel);
    border-radius: 10px;
    padding: 2px;
}

    .gradient-border-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 10px;
        padding: 2px;
        background: linear-gradient(135deg, var(--color-accent), #8b5cf6, #ec4899);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.gradient-border-card-inner {
    background: var(--color-panel);
    border-radius: 18px;
    padding: 24px;
    position: relative;
}

.exchange-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: white;
}

.stats-card {
    position: relative;
    overflow: hidden;
}

.progress-bar {
    height: calc(var(--spacing) * 2);
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #f5b400 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
    }
}

.progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-container {
    display: flex;
    gap: 4px;
    background: var(--color-bg);
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    overflow-x: auto;
}

.tab-button {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-muted);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    white-space: nowrap;
}

    .tab-button:hover {
        color: var(--color-text);
        background: rgba(99, 102, 241, 0.05);
    }

    .tab-button.active {
        color: var(--color-white);
        background: var(--color-accent);
        border-color: rgba(99, 102, 241, 0.2);
    }

.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
        animation: fadeIn 0.4s ease;
    }

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .data-table thead th {
        padding: 14px 18px;
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        color: var(--color-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--color-border);
    }

    .data-table tbody tr {
        background: var(--color-panel);
        border-radius: 12px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .data-table tbody tr:hover {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(236, 72, 153, 0.03));
        }

    .data-table tbody td {
        padding: 10px 16px;
        border-top: 1px solid var(--color-border);
        font-size: 14px;
        border-bottom: 1px solid var(--color-border);
        border-right: 1px solid var(--color-border);
    }

    .data-table tbody tr th {
        padding: 10px 16px;
        border-top: 1px solid var(--color-border);
        font-size: 14px;
        border-bottom: 1px solid var(--color-border);
        border-right: 1px solid var(--color-border);
    }

        .data-table tbody td:first-child {
            border-left: 1px solid var(--color-border);
            border-radius: 12px 0 0 12px;
        }

        .data-table tbody td:last-child {
            border-right: 1px solid var(--color-border);
            border-radius: 0 12px 12px 0;
        }

.toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    background: var(--color-border);
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .toggle-switch::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        background: white;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .toggle-switch.active {
        background: linear-gradient(135deg, var(--color-accent), #8b5cf6);
    }

        .toggle-switch.active::after {
            left: 27px;
        }

.filter-chip {
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-muted);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

    .filter-chip:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

    .filter-chip.active {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-white);
    }

.mobile-menu-btn {
    display: flex;
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border);
    background-color: var(--color-panel);
    padding: calc(var(--spacing) * 0);
    color: var(--color-text);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);

    @media (width >= 1024px) {
        display: none;
    }
}

.sidebar-toggle-btn {
    display: none;
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border);
    background-color: var(--color-panel);
    padding: calc(var(--spacing) * 0);
    color: var(--color-text);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);

    @media (width >= 1024px) {
        display: flex;
    }
}

.star-rating {
    display: flex;
    gap: 2px;
}

    .star-rating i {
        color: var(--color-warning);
    }

        .star-rating i.empty {
            color: var(--color-border);
        }

.card-pump {
    background: var(--color-panel);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .card-pump::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--color-success), #22c55e);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .card-pump:hover::after {
        opacity: 1;
    }

    .card-pump:hover {
        border-color: rgba(16, 185, 129, 0.3);
        box-shadow: 0 12px 40px -10px rgba(16, 185, 129, 0.2);
    }

.pump-alert-card.pump-high {
    border-left: 4px solid var(--color-success);
}

.pump-alert-card.pump-medium {
    border-left: 4px solid var(--color-warning);
}

.pump-alert-card.pump-low {
    border-left: 4px solid var(--color-accent);
}

.progress-bar-fill {
    height: 100%;
}

.gradient-sol {
    background: linear-gradient(135deg, #9945ff 0%, #14f195 100%);
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
    initial-value: rotateX(0);
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
    initial-value: rotateY(0);
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
    initial-value: rotateZ(0);
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false;
    initial-value: skewX(0);
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false;
    initial-value: skewY(0);
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}

@property --tw-gradient-position {
    syntax: "*";
    inherits: false;
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false;
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false;
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%;
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-leading {
    syntax: "*";
    inherits: false;
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false;
}

@property --tw-tracking {
    syntax: "*";
    inherits: false;
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false;
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false;
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false;
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false;
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false;
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff;
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-blur {
    syntax: "*";
    inherits: false;
}

@property --tw-brightness {
    syntax: "*";
    inherits: false;
}

@property --tw-contrast {
    syntax: "*";
    inherits: false;
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false;
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false;
}

@property --tw-invert {
    syntax: "*";
    inherits: false;
}

@property --tw-opacity {
    syntax: "*";
    inherits: false;
}

@property --tw-saturate {
    syntax: "*";
    inherits: false;
}

@property --tw-sepia {
    syntax: "*";
    inherits: false;
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false;
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false;
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false;
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false;
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false;
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false;
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false;
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false;
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false;
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false;
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false;
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false;
}

@property --tw-duration {
    syntax: "*";
    inherits: false;
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}

@property --tw-ease {
    syntax: "*";
    inherits: false;
}

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

@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}

@layer properties {
    @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
        *, ::before, ::after, ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: rotateX(0);
            --tw-rotate-y: rotateY(0);
            --tw-rotate-z: rotateZ(0);
            --tw-skew-x: skewX(0);
            --tw-skew-y: skewY(0);
            --tw-space-y-reverse: 0;
            --tw-space-x-reverse: 0;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-duration: initial;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-ease: initial;
        }
    }
}


@layer theme {
    :root, :host {
        --color-opal: #ffd24a;
        --color-opal-deep: #f5b400;
    }
}

.text-opal {
    color: var(--color-opal-deep);
}

.nav-item.active {
    background: #537e2fb3 !important;
    border: 1px solid var(--color-opal);
}

.nav-item.has-submenu.active {
    background: transparent;
    color: var(--color-opal);
}

.submenu-item.active {
    color: var(--color-white);
    background: var(--color-opal);
}

.icon-opal {
    border: 1px solid var(--color-opal);
    box-shadow: rgba(255, 209, 28, 0.32) 0px 8px 20px 0px;
}

.gradient-opal {
    background: linear-gradient(135deg, var(--color-opal) 0%, #f5b400 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--color-opal) 0%, #B9F400 100%) !important;
}

.card-elevated:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 40px -15px rgb(253, 200, 56);
}

.spinner {
    background: conic-gradient(from 0deg, transparent 0%, var(--color-opal) 100%);
}

    .spinner::before {
        background: linear-gradient(135deg, var(--color-opal), #ec4899);
    }

.btn-primary {
    width: 100%;
    text-transform: uppercase;
    background-color: #f5b400 !important;
    border: 1px solid var(--color-opal) !important;
    box-shadow: rgba(255, 209, 28, 0.32) 0px 8px 20px 0px;
    color: #b9f400;
    color: #000;
}

.btn-success {
    width: 100%;
    text-transform: uppercase;
    background-color: #3e5c28 !important;
    border: 1px solid var(--color-opal) !important;
    box-shadow: rgba(255, 209, 28, 0.32) 0px 8px 20px 0px;
    color: #b9f400;
    background: none !important;
}

.copy-input-wrapper a {
    background: #f5b400 !important;
    color: #000 !important;
    border: 1px solid var(--color-opal);
}

.referral-card {
    background: linear-gradient(135deg, rgba(245,180,0,0.15), rgba(245,180,0,0.05));
    border: 1px solid var(--color-opal);
}

.swal2-confirm {
    background: var(--color-opal) !important;
    color: #000000 !important;
}

.swal2-title {
    color: var(--color-opal) !important;
}



.copy-input-wrapper a {
    padding: 14px 8px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .copy-input-wrapper a:hover {
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
    }

.tradingview-widget-copyright {
    display: none !important;
}

.widget-market-overview-container span {
    display: none !important;
}

.tv-embed-widget-wrapper__body {
    background: var(--color-panel, var(--color-panel)) !important;
    border-color: var(--color-border) !important;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.tv-site-widget--bg_none {
    background-color: var(--color-panel) !important;
}

.text-white {
    color: #000 !important
}

html.dark .text-muted {
    color: var(--color-muted);
}

.text-muted {
    color: #000;
}


.text-opal {
    color: #000;
}

html.dark .text-opal {
    color: var(--color-opal-deep);
}

html.dark .text-white {
    color: #FFF !important
}

@media only screen and (min-width: 767px) {
    .md-justify {
        justify-content: start !important;
    }
}



.form-control, .datepicker {
    width: 100%;
    padding: 12px 16px !important;
    border: 1px solid var(--color-border);
    border-radius: 12px !important;
    background: var(--color-panel);
    color: var(--color-text);
    font-size: 14px;
    transition: all 0.3s ease;
    display: block;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .table-responsive > .table {
        margin-bottom: 0;
    }