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: #d8b4fe;
    --dark-text-soft: #94a3b8;
    --dark-brand: #a855f7;
    --dark-brand-strong: #9333ea;
    --dark-brand-deep: rgba(88, 28, 135, 0.28);
    --dark-brand-soft: rgba(88, 28, 135, 0.16);
}

body {
    background-attachment: fixed;
}

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, rgba(126, 34, 206, 0.12), transparent 24%),
        radial-gradient(circle at bottom right, rgba(76, 29, 149, 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: #7e22ce !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: rgba(126, 34, 206, 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: #f3e8ff !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, rgba(31, 16, 49, 0.96) 0%, rgba(16, 10, 28, 0.96) 100%) !important;
    border-color: rgba(168, 85, 247, 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: rgba(34, 18, 54, 0.72) !important;
    border-color: rgba(168, 85, 247, 0.16) !important;
}

html.dark [data-sidebar] [class~="dark:bg-brand-950"] {
    background-color: rgba(168, 85, 247, 0.18) !important;
}

html.dark [data-sidebar] [class~="dark:hover:bg-slate-800"]:hover {
    background-color: rgba(168, 85, 247, 0.12) !important;
}

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