html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 12% 18%, rgba(16, 185, 129, 0.16), transparent 30%),
        radial-gradient(circle at 84% 8%, rgba(245, 158, 11, 0.14), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(59, 130, 246, 0.12), transparent 34%),
        #f8faf7 !important;
    color: #0f172a !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.055) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
    z-index: -1;
}

.glass,
.bg-slate-900,
.bg-slate-900\/50,
.bg-slate-900\/40,
.bg-slate-900\/20,
.bg-slate-800,
.bg-slate-950 {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08) !important;
}

nav.bg-slate-950\/50,
nav.bg-slate-950\/80,
nav {
    background: rgba(248, 250, 247, 0.86) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
}

.text-white,
.text-slate-300,
.text-slate-400 {
    color: #0f172a !important;
}

.text-slate-500,
.text-slate-600,
.text-slate-700 {
    color: #64748b !important;
}

.text-blue-500,
.text-blue-400,
.text-blue-300 {
    color: #059669 !important;
}

.beta-badge {
    background: #0f172a !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .beta-badge {
    background: #10b981 !important;
    color: #02130d !important;
}

.bg-blue-600,
.hover\:bg-blue-500:hover,
button.bg-blue-600,
a.bg-blue-600 {
    background-color: #059669 !important;
    color: white !important;
}

.bg-blue-600\/10,
.bg-blue-500\/10,
.bg-emerald-500\/10 {
    background-color: rgba(16, 185, 129, 0.10) !important;
}

.border-blue-500\/20,
.border-blue-500\/30,
.border-blue-500\/50,
.border-emerald-500\/20,
.border-emerald-500\/30 {
    border-color: rgba(5, 150, 105, 0.24) !important;
}

input,
select,
textarea {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18) !important;
}

.shadow-blue-900\/20,
.shadow-blue-900\/40,
.shadow-xl,
.shadow-2xl {
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08) !important;
}

.rounded-\[3rem\],
.rounded-\[3\.5rem\],
.rounded-\[2\.5rem\],
.rounded-\[2rem\] {
    border-radius: 2rem !important;
}

.bg-gradient-to-br {
    background: #0f172a !important;
    color: white !important;
}

.bg-gradient-to-br .text-white,
.bg-gradient-to-br .text-slate-400,
.bg-gradient-to-br .text-slate-500 {
    color: white !important;
}

canvas {
    background: transparent !important;
}

html[data-theme="dark"] img[src$="chutly-logo.png"],
html[data-theme="dark"] img[src$="chutly-logo-dark.png"] {
    filter: drop-shadow(0 10px 24px rgba(16, 185, 129, 0.16));
}

html[data-theme="dark"] a.bg-slate-950,
html[data-theme="dark"] button.bg-slate-950,
html[data-theme="dark"] a.bg-blue-600,
html[data-theme="dark"] button.bg-blue-600,
html[data-theme="dark"] a.bg-emerald-600,
html[data-theme="dark"] button.bg-emerald-600 {
    background: #10b981 !important;
    color: #02130d !important;
    border-color: rgba(52, 211, 153, 0.45) !important;
    box-shadow: 0 16px 36px rgba(16, 185, 129, 0.20) !important;
}

html[data-theme="dark"] a.bg-slate-950:hover,
html[data-theme="dark"] button.bg-slate-950:hover,
html[data-theme="dark"] a.bg-blue-600:hover,
html[data-theme="dark"] button.bg-blue-600:hover,
html[data-theme="dark"] a.bg-emerald-600:hover,
html[data-theme="dark"] button.bg-emerald-600:hover {
    background: #34d399 !important;
}

html[data-theme="dark"] a.bg-slate-100,
html[data-theme="dark"] button.bg-slate-100,
html[data-theme="dark"] a.bg-white,
html[data-theme="dark"] button.bg-white {
    background: rgba(15, 23, 42, 0.94) !important;
    color: #e5eefb !important;
    border: 1px solid rgba(226, 232, 240, 0.14) !important;
}

html[data-theme="dark"] a.bg-red-500\/10,
html[data-theme="dark"] button.bg-red-500\/10,
html[data-theme="dark"] a.bg-red-600\/10,
html[data-theme="dark"] button.bg-red-600\/10 {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #fecaca !important;
    border-color: rgba(239, 68, 68, 0.26) !important;
}