html, body {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

html:not(.dark) {
    color-scheme: light;
}

html:not(.dark) .gradient-bg {
    background: linear-gradient(135deg, #ecfdf5 0%, #dcfce7 45%, #dbeafe 100%);
}

html:not(.dark) .hero-glow {
    background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.14) 0%, transparent 70%);
}

html:not(.dark) .illustration {
    filter: drop-shadow(0 10px 24px rgba(37, 99, 235, 0.18));
}

html:not(.dark) .illustration [stroke] {
    stroke-opacity: 0.9;
}

html:not(.dark) .glass {
    background: rgba(240, 253, 244, 0.9);
    backdrop-filter: blur(10px);
}

html:not(.dark) .glass-card {
    background: rgba(236, 253, 245, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

html:not(.dark) .glass.border,
html:not(.dark) .glass-card.border {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

html:not(.dark) .menu-overlay {
    background: rgba(15, 23, 42, 0.35);
}

html:not(.dark) .slide-menu {
    background: rgba(236, 253, 245, 0.98);
}

html:not(.dark) .border-gray-700\/50,
html:not(.dark) .border-gray-700\/60,
html:not(.dark) .border-gray-600\/70 {
    border-color: rgba(148, 163, 184, 0.45) !important;
}

html:not(.dark) .border-gray-600 {
    border-color: #cbd5e1 !important;
}

html:not(.dark) .border-white\/20 {
    border-color: #94a3b8 !important;
}

html:not(.dark) .border-white\/10 {
    border-color: #cbd5e1 !important;
}

html:not(.dark) .text-gray-100,
html:not(.dark) .text-gray-200,
html:not(.dark) .text-gray-300,
html:not(.dark) .text-gray-400 {
    color: #1f2937 !important;
}

html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-600 {
    color: #475569 !important;
}

html:not(.dark) .text-blue-300 {
    color: #1d4ed8 !important;
}

html:not(.dark) .glass.text-white,
html:not(.dark) .glass-card.text-white,
html:not(.dark) button.glass.text-white,
html:not(.dark) button.glass-card.text-white,
html:not(.dark) a.glass.text-white,
html:not(.dark) a.glass-card.text-white {
    color: #111827 !important;
}

html:not(.dark) .bg-gray-900,
html:not(.dark) .bg-gray-900\/60,
html:not(.dark) .bg-gray-800,
html:not(.dark) .bg-gray-800\/50,
html:not(.dark) .bg-gray-700\/50,
html:not(.dark) .bg-gray-700 {
    background-color: #f8fafc !important;
}

html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) textarea,
html:not(.dark) select {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
}

html:not(.dark) .bg-white\/10 {
    background-color: rgba(220, 252, 231, 0.88) !important;
}

html:not(.dark) .bg-white\/20 {
    background-color: rgba(187, 247, 208, 0.86) !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #64748b !important;
}

html:not(.dark) footer {
    color: #1f2937;
}

html:not(.dark) .ql-toolbar.ql-snow {
    background: #f8fafc;
    border-color: #cbd5e1;
}

html:not(.dark) .ql-container.ql-snow {
    background: #ffffff;
    border-color: #cbd5e1;
}

html:not(.dark) .ql-editor {
    color: #111827;
}

html:not(.dark) .ql-snow .ql-stroke {
    stroke: #334155;
}

html:not(.dark) .ql-snow .ql-fill {
    fill: #334155;
}

html:not(.dark) .ql-picker {
    color: #1f2937 !important;
}

html:not(.dark) .ql-picker-options {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

.topbar-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(30, 41, 59, 0.55);
    color: #93c5fd;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.topbar-icon-btn:hover {
    border-color: rgba(96, 165, 250, 0.9);
    background: rgba(30, 41, 59, 0.8);
    color: #bfdbfe;
    transform: translateY(-1px);
}

.topbar-icon-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.1;
}

html:not(.dark) .topbar-icon-btn {
    background: rgba(241, 245, 249, 0.95);
    border-color: rgba(148, 163, 184, 0.6);
    color: #1d4ed8;
}

html:not(.dark) .topbar-icon-btn:hover {
    background: rgba(226, 232, 240, 0.95);
    border-color: rgba(59, 130, 246, 0.8);
    color: #1e40af;
}