:root { color-scheme: dark; --page-surface: #0a0f1c; --page-rgb: 10,15,28; --heading: #fff; --muted: #9ca3af; --line: rgba(255,255,255,.1); --sheet: #0b101e; --chip: #141b29; }
.header-actions { gap: 8px; }
#theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); cursor: pointer; }
#theme-toggle:hover { color: #e11d48; }
#theme-toggle:focus-visible { outline: 2px solid #e11d48; outline-offset: 3px; }
.theme-moon { display: none; }
@media (max-width: 380px) { #search-input { width: 88px; } header { gap: 6px; } }
html[data-theme="light"] { color-scheme: light; --page-surface: #f8fafc; --page-rgb: 248,250,252; --heading: #172033; --muted: #64748b; --line: rgba(15,23,42,.12); --sheet: #fff; --chip: #f1f5f9; --color-dark: #f8fafc; --color-card: #fff; --color-gray-200: #334155; --color-gray-300: #475569; --color-gray-400: #64748b; --color-gray-500: #64748b; --color-gray-600: #64748b; --color-gray-900: #eef2f7; }
html[data-theme="light"] .theme-sun { display: none; }
html[data-theme="light"] .theme-moon { display: block; }
html[data-theme="light"] body { background: #e8edf4; color: #334155; }
html[data-theme="light"] body > .max-w-md { background: linear-gradient(135deg,#f1f5f9,#f8fafc,#fff); box-shadow: 0 0 40px rgba(15,23,42,.08); }
html[data-theme="light"] header { box-shadow: 0 1px 4px rgba(15,23,42,.035); border-bottom-color: rgba(15,23,42,.045); }
html[data-theme="light"] .text-white { color: var(--heading); }
html[data-theme="light"] [class*="border-white/"] { border-color: var(--line); }
html[data-theme="light"] [class*="bg-white/"] { background-color: rgba(15,23,42,.045); }
html[data-theme="light"] [class*="bg-black/"] { background-color: rgba(15,23,42,.055); }
html[data-theme="light"] footer { background: linear-gradient(transparent,#eef2f7); }
html[data-theme="light"] #bottom-nav { box-shadow: 0 -4px 20px rgba(15,23,42,.08); }
html[data-theme="light"] .breadcrumbs { background: var(--page-surface); color: #64748b; }
html[data-theme="light"] .breadcrumbs [aria-current], html[data-theme="light"] .breadcrumbs a:hover { color: #172033; }
html[data-theme="light"] [class*="bg-brand"].text-white,
html[data-theme="light"] [class*="bg-green"].text-white,
html[data-theme="light"] [class*="bg-red"].text-white,
html[data-theme="light"] .selection\:text-white::selection { color: #fff; }
html[data-theme="light"] .hover\:bg-brand:hover { background: rgba(225,29,72,.08); color: #be123c; }
html[data-theme="light"] .hover\:text-white:hover,
html[data-theme="light"] .group:hover .group-hover\:text-white { color: #be123c; }
html[data-theme="light"] :is(a, button):is(.hover\:text-white, .hover\:bg-brand):hover { background-color: rgba(225,29,72,.08); }
html[data-theme="light"] :is(a, button):is(.bg-brand, .bg-brand\/80, .bg-brand\/90):hover { background-color: #be123c; color: #fff; }
html[data-theme="light"] :is(.bg-brand, .bg-brand\/80, .bg-brand\/90):hover .group-hover\:text-white { color: #fff; }
html[data-theme="light"] .bg-black { background-color: #eef2f7; }
html[data-theme="light"] [class*="bg-black"] iframe { background: #000; }
html[data-theme="light"] [class*="absolute"][class*="bg-gradient-to-t"] { --color-black: #f8fafc; }
html[data-theme="light"] [class*="drop-shadow"] { filter: none; }
html[data-theme="light"] #hero-section [class*="bg-[#2b2b2b]"] { background: #fff; color: #172033; border-color: var(--line); }
html[data-theme="light"] #carousel-dots [class*="bg-white/"] { background: #94a3b8; }
html[data-theme="light"] .group > .relative > .inset-0 .text-white,
html[data-theme="light"] .bg-brand .text-white { color: #fff; }
html[data-theme="light"] .group > .relative > [class*="bg-black/80"] { background: rgba(255,255,255,.94); }
html[data-theme="light"] #server-backdrop { background: rgba(15,23,42,.65); }
html[data-theme="light"] .skeleton-overlay { background: var(--page-surface); }
html[data-theme="light"] .sk-block { background: #dfe6ef; }
html[data-theme="light"] .sk-block::after { background: linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); }
html[data-theme="light"] .sk-hero { background: linear-gradient(#eef2f7,#f8fafc); }