:root {
    --brand-color: #9333EA;
    --brand-50: 250 245 255;
    --brand-100: 243 232 255;
    --brand-200: 233 213 255;
    --brand-300: 216 180 254;
    --brand-400: 192 132 252;
    --brand-500: 168 85 247;
    --brand-600: 147 51 234;
    --brand-700: 126 34 206;
    --brand-800: 107 33 168;
    --brand-900: 88 28 135;
    --brand-950: 59 7 100;
}

html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
    --dark-bg: #05070b;
    --dark-bg-deep: #0b0f16;
    --dark-surface: #11161f;
    --dark-surface-soft: #181e29;
    --dark-border: rgba(148, 163, 184, 0.14);
    --dark-border-strong: rgba(148, 163, 184, 0.22);
    --dark-text: #f8fafc;
    --dark-text-muted: rgb(var(--brand-300) / 1);
    --dark-text-soft: #94a3b8;
    --dark-brand: rgb(var(--brand-500) / 1);
    --dark-brand-strong: rgb(var(--brand-600) / 1);
    --dark-brand-deep: rgb(var(--brand-900) / 0.28);
    --dark-brand-soft: rgb(var(--brand-900) / 0.16);
}

body {
    background-attachment: fixed;
}

.theme-shell {
    background-color: rgb(248 250 252);
    background-image:
        radial-gradient(circle at top left, rgb(var(--brand-600) / 0.12), transparent 30%),
        radial-gradient(circle at bottom right, rgb(var(--brand-400) / 0.14), transparent 32%);
}

[class~="bg-slate-900"][class~="text-white"] {
    background-color: rgb(var(--brand-600) / 1) !important;
}

[class~="hover:bg-slate-800"][class~="text-white"]:hover {
    background-color: rgb(var(--brand-500) / 1) !important;
}

[class~="file:bg-slate-900"]::file-selector-button {
    background-color: rgb(var(--brand-600) / 1) !important;
}

[class~="hover:file:bg-slate-800"]:hover::file-selector-button {
    background-color: rgb(var(--brand-500) / 1) !important;
}

html.dark body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

html.dark .theme-shell {
    background-color: var(--dark-bg);
    background-image:
        radial-gradient(circle at top left, rgb(var(--brand-700) / 0.12), transparent 24%),
        radial-gradient(circle at bottom right, rgb(var(--brand-900) / 0.08), transparent 28%),
        linear-gradient(180deg, rgba(10, 12, 18, 0.98) 0%, rgba(5, 7, 11, 1) 100%);
}

.bg-grid-slate {
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
}

html.dark .bg-grid-slate {
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
}

html.dark [class~="dark:bg-slate-950"] {
    background-color: var(--dark-bg-deep) !important;
}

html.dark [class~="dark:bg-slate-950/80"] {
    background-color: rgba(11, 15, 22, 0.82) !important;
}

html.dark [class~="dark:bg-slate-900/90"] {
    background-color: rgba(17, 22, 31, 0.9) !important;
}

html.dark [class~="dark:bg-slate-900/80"] {
    background-color: rgba(17, 22, 31, 0.82) !important;
}

html.dark [class~="dark:bg-slate-900"] {
    background-color: var(--dark-surface) !important;
}

html.dark [class~="dark:bg-slate-800/70"] {
    background-color: rgba(24, 30, 41, 0.72) !important;
}

html.dark [class~="dark:bg-slate-800"] {
    background-color: var(--dark-surface-soft) !important;
}

html.dark [class~="dark:bg-slate-700"] {
    background-color: #222938 !important;
}

html.dark [class~="dark:bg-brand-950"],
html.dark [class~="dark:bg-blue-950"],
html.dark [class~="dark:bg-sky-950"] {
    background-color: var(--dark-brand-deep) !important;
}

html.dark [class~="dark:bg-brand-950/40"],
html.dark [class~="dark:bg-sky-950/40"] {
    background-color: var(--dark-brand-soft) !important;
}

html.dark [class~="dark:bg-brand-700"] {
    background-color: rgb(var(--brand-700) / 1) !important;
}

html.dark [class~="dark:bg-brand-600"] {
    background-color: var(--dark-brand-strong) !important;
}

html.dark [class~="dark:hover:bg-brand-500"]:hover {
    background-color: var(--dark-brand) !important;
}

html.dark [class~="dark:file:bg-brand-600"]::file-selector-button {
    background-color: var(--dark-brand-strong) !important;
}

html.dark [class~="dark:hover:file:bg-brand-500"]:hover::file-selector-button {
    background-color: var(--dark-brand) !important;
}

html.dark [class~="dark:border-slate-800/80"] {
    border-color: var(--dark-border) !important;
}

html.dark [class~="dark:border-slate-800"] {
    border-color: var(--dark-border) !important;
}

html.dark [class~="dark:border-slate-700"] {
    border-color: var(--dark-border-strong) !important;
}

html.dark [class~="dark:border-brand-900/60"],
html.dark [class~="dark:border-sky-900/60"] {
    border-color: rgb(var(--brand-700) / 0.34) !important;
}

html.dark [class~="dark:ring-slate-800"] {
    --tw-ring-color: var(--dark-border) !important;
}

html.dark [class~="dark:text-white"],
html.dark [class~="dark:text-slate-100"] {
    color: var(--dark-text) !important;
}

html.dark [class~="dark:text-slate-200"] {
    color: #e2e8f0 !important;
}

html.dark [class~="dark:text-slate-300"] {
    color: #cbd5e1 !important;
}

html.dark [class~="dark:text-brand-300"],
html.dark [class~="dark:text-blue-300"],
html.dark [class~="dark:text-sky-300"] {
    color: var(--dark-text-muted) !important;
}

html.dark [class~="dark:text-slate-400"],
html.dark [class~="dark:text-slate-500"] {
    color: var(--dark-text-soft) !important;
}

html.dark [class~="dark:text-slate-600"] {
    color: #64748b !important;
}

html.dark [class~="dark:hover:text-brand-200"]:hover {
    color: rgb(var(--brand-100) / 1) !important;
}

html.dark [class~="dark:hover:bg-slate-800"]:hover,
html.dark [class~="dark:hover:bg-slate-100"]:hover {
    background-color: #1d2430 !important;
}

html.dark [class~="dark:hover:bg-slate-900"]:hover {
    background-color: #151b25 !important;
}

html.dark [class~="dark:hover:bg-slate-900/40"]:hover {
    background-color: rgba(21, 27, 37, 0.4) !important;
}

html.dark [data-sidebar] {
    background:
        linear-gradient(180deg, rgb(var(--brand-950) / 0.46) 0%, rgba(16, 10, 28, 0.96) 100%) !important;
    border-color: rgb(var(--brand-500) / 0.22) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45) !important;
}

html.dark [data-sidebar] [class~="dark:bg-slate-900/80"] {
    background-color: rgb(var(--brand-950) / 0.24) !important;
    border-color: rgb(var(--brand-500) / 0.16) !important;
}

html.dark [data-sidebar] [class~="dark:bg-brand-950"] {
    background-color: rgb(var(--brand-500) / 0.18) !important;
}

html.dark [data-sidebar] [class~="dark:hover:bg-slate-800"]:hover {
    background-color: rgb(var(--brand-500) / 0.12) !important;
}

[data-color-input] {
    appearance: none;
    -webkit-appearance: none;
}

[data-color-input]::-webkit-color-swatch-wrapper {
    padding: 0;
}

[data-color-input]::-webkit-color-swatch {
    border: 0;
    border-radius: 1rem;
}

[data-color-input]::-moz-color-swatch {
    border: 0;
    border-radius: 1rem;
}

[data-color-preset][aria-pressed="true"] {
    border-color: rgb(var(--brand-500));
    box-shadow: 0 0 0 2px rgb(var(--brand-500) / 0.28);
}

[data-flow-tooltip-content] {
    max-width: calc(100vw - 2rem);
}

[data-flow-tooltip].is-open [data-flow-tooltip-content] {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    [data-flow-tooltip]:hover [data-flow-tooltip-content] {
        display: block;
    }
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

[data-sidebar-backdrop].is-open {
    display: block;
}

[data-sidebar].is-open {
    transform: translateX(0);
}

[data-flash-message] {
    animation: slide-down 180ms ease-out;
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}