/* ============================================================= Dark Mode — toggled via [data-theme="dark"] on . Light mode remains the default per the brief. ============================================================= */ html[data-theme="dark"] { --useai-bg: #0F172A; --useai-card: #161F35; --useai-text: #F1F5F9; --useai-text-muted: #94A3B8; --useai-border: #1F2A44; --useai-shadow-sm: 0 1px 2px rgba(0,0,0,.3); --useai-shadow: 0 4px 16px rgba(0,0,0,.35); --useai-shadow-lg: 0 20px 48px rgba(0,0,0,.45); --useai-gradient-hero: radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.25), transparent), radial-gradient(1000px 500px at 90% 10%, rgba(6,182,212,.2), transparent); } html[data-theme="dark"] .useai-header { background: rgba(15,23,42,.72); border-bottom-color: rgba(255,255,255,.08); } html[data-theme="dark"] .useai-theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .useai-theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .useai-btn-secondary { background: var(--useai-card); } html[data-theme="dark"] .useai-badge-free { background: rgba(16,185,129,.15); } html[data-theme="dark"] .useai-badge-paid { background: rgba(220,38,38,.15); } html[data-theme="dark"] .useai-badge-freemium { background: rgba(245,158,11,.15); } html[data-theme="dark"] .useai-flag-verified { background: rgba(37,99,235,.15); } html[data-theme="dark"] .useai-flag-trending { background: rgba(225,29,72,.15); } html[data-theme="dark"] .useai-flag-featured { background: rgba(124,58,237,.15); } html[data-theme="dark"] .useai-tool-logo, html[data-theme="dark"] .useai-favorite-btn, html[data-theme="dark"] .useai-tool-card-arrow, html[data-theme="dark"] .useai-filter-select { background: #1B2540; } html[data-theme="dark"] .useai-mobile-menu { background: var(--useai-bg); } html[data-theme="dark"] ::selection { background: var(--useai-primary); color: #fff; }