body {
    font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-0 {
    transition-delay: 0ms;
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

.delay-500 {
    transition-delay: 500ms;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    /* Slate 300 */
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    /* Slate 400 */
    border: 2px solid transparent;
    background-clip: content-box;
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    display: block !important;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Dark Mode Overrides - The "Clean" Strategy */

/* 1. Backgrounds */
html.dark body {
    background-color: #0f172a;
    /* Slate 900 */
    color: #f8fafc;
    /* Slate 50 */
}

html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
    /* Slate 700 */
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
    /* Slate 600 */
}

html.dark .bg-white {
    background-color: #1e293b;
    /* Slate 800 */
    border-color: #334155;
    /* Slate 700 */
}

html.dark .bg-gray-50 {
    background-color: #0f172a;
    /* Slate 900 */
}

html.dark .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.1);
    /* Indigo 500 at 10% opacity */
}

/* 2. Text Colors */
html.dark .text-gray-900 {
    color: #f1f5f9;
    /* Slate 100 */
}

html.dark .text-gray-800 {
    color: #e2e8f0;
    /* Slate 200 */
}

html.dark .text-gray-700 {
    color: #e2e8f0;
    /* Slate 200 (Brightened from Slate 300) */
}

html.dark .text-gray-600 {
    color: #94a3b8;
    /* Slate 400 */
}

html.dark .text-gray-500 {
    color: #94a3b8;
    /* Slate 400 */
}

html.dark .text-gray-400 {
    color: #64748b;
    /* Slate 500 */
}

/* 3. Borders */
html.dark .border-gray-50,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: #334155;
    /* Slate 700 */
}

/* Handle Tailwind's divide-y utility */
html.dark .divide-gray-100> :not([hidden])~ :not([hidden]),
html.dark .divide-gray-200> :not([hidden])~ :not([hidden]) {
    border-color: #334155;
}

html.dark {
    color-scheme: dark;
}

/* 4. Form Elements */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark textarea,
html.dark select {
    background-color: #020617 !important;
    /* Slate 950 - Darker than card */
    border: 1px solid #334155 !important;
    /* Force border */
    color: #f3f4f6 !important;
}

html.dark select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
    padding-right: 2.5rem !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
    /* Slate 500 */
}

/* 5. Specific Component Fixes */
/* Ensure navbar and footer blend well */
html.dark nav.bg-white\/90 {
    background-color: rgba(30, 41, 59, 0.9);
    /* Slate 800 with opacity */
    border-bottom-color: #334155;
}

html.dark footer.bg-white {
    background-color: #1e293b;
    border-top-color: #334155;
}

/* Fix for specific opacity utilities used in headers */
html.dark .bg-gray-50\/30,
html.dark .bg-gray-50\/50,
html.dark .hover\:bg-gray-50\/80:hover {
    background-color: #1e293b;
    /* Slate 800 */
}

/* Fix hover states colliding with base dark backgrounds */
html.dark .hover\:bg-gray-50:hover {
    background-color: #334155;
    /* Slate 700 - Distinct hover for buttons */
}

html.dark .hover\:bg-gray-100:hover {
    background-color: #334155;
    /* Slate 700 */
}

html.dark .hover\:bg-gray-200:hover {
    background-color: #334155;
    /* Slate 700 */
}

html.dark .hover\:bg-indigo-100:hover,
html.dark .hover\:bg-indigo-50:hover {
    background-color: rgba(99, 102, 241, 0.25);
    /* Darker Indigo Hover */
}

html.dark .hover\:bg-red-50:hover {
    background-color: rgba(239, 68, 68, 0.2);
    /* Red 500 at 20% */
    color: #fca5a5;
    /* Red 300 */
}

html.dark .bg-indigo-50\/30 {
    background-color: rgba(79, 70, 229, 0.1);
    /* Indigo 600 at 10% */
}

html.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1);
    /* Green 500 at 10% */
    color: #86efac;
    /* Green 300 */
}

html.dark .text-green-600 {
    color: #86efac;
    /* Green 300 */
}

html.dark .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.1);
    /* Amber 500 at 10% */
    color: #fcd34d;
    /* Amber 300 */
}

html.dark .border-purple-100 {
    border-color: rgba(168, 85, 247, 0.2);
}

/* Onboarding Components Overrides (Clean Strategy) */
html.dark .bg-indigo-50\/50 {
    background-color: rgba(79, 70, 229, 0.1);
    /* Indigo 600 at 10% */
}

html.dark .bg-white\/80 {
    background-color: rgba(30, 41, 59, 0.8);
    /* Slate 800 at 80% */
}

html.dark .border-indigo-100\/50,
html.dark .border-indigo-50 {
    border-color: rgba(99, 102, 241, 0.2);
    /* Indigo 500 at 20% */
}

html.dark .text-indigo-900,
html.dark .text-indigo-800 {
    color: #e0e7ff;
    /* Indigo 100 */
}

html.dark .text-indigo-800\/80 {
    color: rgba(199, 210, 254, 0.9);
    /* Indigo 200 at 90% */
}

/* Typography / Prose Overrides */
html.dark .prose {
    color: #cbd5e1;
    /* Slate 300 */
}

html.dark .prose p,
html.dark .prose li {
    color: #cbd5e1 !important;
    /* Force override of prose-p:text-gray-700 utility */
}

html.dark .prose strong,
html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4 {
    color: #f8fafc;
    /* Slate 50 */
}

html.dark .prose a {
    color: #818cf8;
    /* Indigo 400 */
}

html.dark .prose code {
    color: #818cf8;
    background-color: #1e293b;
    /* Slate 800 */
}

html.dark .prose blockquote {
    border-left-color: #334155;
    color: #94a3b8;
}

html.dark .prose th {
    color: #f8fafc;
    /* Slate 50 */
}

html.dark .prose thead {
    border-bottom-color: #334155;
    /* Slate 700 */
}

html.dark .prose tbody tr {
    border-bottom-color: #1e293b;
    /* Slate 800 */
}


/* Contact Page Blobs & Icons */
html.dark .bg-indigo-50\/50,
html.dark .bg-violet-50\/50 {
    background-color: rgba(15, 23, 42, 0.2);
    /* Very subtle dark blob or hidden */
    /* Alternatively hide them if they look bad: display: none; */
}

html.dark .bg-violet-50 {
    background-color: rgba(139, 92, 246, 0.1);
    /* Violet 500 at 10% */
}

html.dark .bg-rose-50 {
    background-color: rgba(244, 63, 94, 0.1);
    /* Rose 500 at 10% */
}

html.dark .shadow-indigo-100\/50 {
    box-shadow: none;
    /* Remove light colored shadows in dark mode */
}

html.dark .shadow-indigo-200 {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    /* Dark shadow replacement */
}

/* YouTube/Badge Tags (bg-indigo-100 text-indigo-700) */
html.dark .bg-indigo-100 {
    background-color: rgba(79, 70, 229, 0.2);
    /* Indigo 600 at 20% */
    color: #a5b4fc;
}

html.dark .border-indigo-100 {
    border-color: rgba(79, 70, 229, 0.2);
}

html.dark .text-indigo-700 {
    color: #c7d2fe;
    /* Indigo 200 */
}

html.dark .text-indigo-500 {
    color: #818cf8;
    /* Indigo 400 */
}

/* Fix for the sidebar radio options in dark mode */
html.dark .radio-option {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

html.dark .radio-option:hover {
    background-color: #1e293b;
    /* Slate 800 */
    border-color: #6366f1;
}

/* Selected State */
html.dark .radio-option.selected {
    background-color: rgba(99, 102, 241, 0.15);
    /* Dark Indigo Tint */
    border-color: #6366f1;
    box-shadow: 0 0 0 1px #6366f1;
}

html.dark .radio-option.selected span {
    color: #818cf8 !important;
    /* Indigo 400 (Lighter) */
}

html.dark .radio-option.selected .radio-circle {
    background-color: #6366f1;
    border-color: #6366f1;
}

/* Badges & Utility Colors */
html.dark .bg-gray-100 {
    background-color: #334155;
    /* Slate 700 */
    color: #f1f5f9;
}

html.dark .text-indigo-600 {
    color: #818cf8;
    /* Indigo 400 for better contrast on dark */
}

html.dark .bg-indigo-600 {
    background-color: #4f46e5;
    /* Indigo 600 (slightly lighter/vibrant) */
}

/* Feed List Interactions */
html.dark .feed-card:hover {
    background-color: #1e293b !important;
    /* Ensure hover is visible/distinct */
}

html.dark .accordion-trigger:hover {
    background-color: #1e293b;
}

/* Breadcrumbs or other specific text overrides */
html.dark .text-gray-500 {
    color: #94a3b8;
    /* Slate 400 */
}

/* --- Error Page Centralized Theming --- */

/* Global Background Gradient Override */
html.dark .from-white {
    --tw-gradient-from: #0f172a;
    /* Slate 900 */
    --tw-gradient-to: rgba(15, 23, 42, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html.dark .to-gray-50 {
    --tw-gradient-to: #0f172a;
    /* Slate 900 */
}

/* Error Icon Colors */
/* Red (500 Error) */
html.dark .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.2);
    /* Red 900/20 */
    color: #fca5a5;
    /* Red 300 */
}

html.dark .text-red-600 {
    color: #fca5a5;
    /* Red 300 */
}

/* Yellow (403 Error) */
html.dark .bg-yellow-100 {
    background-color: rgba(113, 63, 18, 0.2);
    /* Yellow 900/20 */
    color: #fde047;
    /* Yellow 300 */
}

html.dark .text-yellow-600 {
    color: #fde047;
    /* Yellow 300 */
}

/* Blue (401 Error) */
html.dark .bg-blue-100 {
    background-color: rgba(30, 58, 138, 0.2);
    /* Blue 900/20 */
    color: #93c5fd;
    /* Blue 300 */
}

html.dark .text-blue-600 {
    color: #93c5fd;
    /* Blue 300 */
}

/* Orange (429 Error) */
html.dark .bg-orange-100 {
    background-color: rgba(124, 45, 18, 0.2);
    /* Orange 900/20 */
    color: #fdba74;
    /* Orange 300 */
}

html.dark .text-orange-600 {
    color: #fdba74;
    /* Orange 300 */
}

/* Digest View Specifics */
/* Force top alignment for table cells in the digest body and preview (Minimal Format) */
#digest-body table td,
#digest-body table th,
#preview-result-content table td,
#preview-result-content table th {
    vertical-align: top !important;
}

/* Ensure images in tables don't have extra bottom margin interfering with alignment */
#digest-body table td img,
#preview-result-content table td img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}