/* Site-wide light / dark theme (data-theme on ) */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 12px; cursor: pointer; flex-shrink: 0; line-height: 1; appearance: none; -webkit-appearance: none; background: transparent; border: 1.5px solid transparent; color: inherit; transition: border-color 0.2s, color 0.2s, background 0.2s; } .theme-toggle-btn .theme-icon-sun, .theme-toggle-btn .theme-icon-moon { display: none; } html[data-theme="dark"] .theme-toggle-btn .theme-icon-sun { display: block; } html[data-theme="light"] .theme-toggle-btn .theme-icon-moon { display: block; } .nav-actions .theme-toggle-btn { position: relative; border: 1.5px solid var(--glass-border, #E2E8F0); background: var(--glass-bg, #fff); color: var(--text-light, #334155); } .nav-actions .theme-toggle-btn:hover { border-color: var(--cyan, #0284C7); color: var(--cyan, #0284C7); background: var(--cyan-dim, rgba(2, 132, 199, 0.06)); } .nav-mobile-head .theme-toggle-btn, .nav-mobile-footer .theme-toggle-btn { width: 38px; height: 38px; border: 1.5px solid var(--glass-border, #E2E8F0); background: transparent; color: inherit; } .dash-topbar-actions .theme-toggle-btn { width: 38px; height: 38px; border: 1px solid var(--dash-border); background: var(--dash-surface); color: var(--dash-text); border-radius: 10px; } .dash-topbar-actions .theme-toggle-btn:hover { background: var(--dash-surface-2); border-color: var(--dash-brand); color: var(--dash-brand); } .lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.7rem; border-radius: 12px; border: 1.5px solid var(--glass-border, #E2E8F0); background: var(--glass-bg, #fff); color: var(--cyan, #0284C7) !important; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; flex-shrink: 0; text-decoration: none !important; } .lang-switch:hover { border-color: var(--cyan, #0284C7); background: var(--cyan-dim, rgba(2, 132, 199, 0.06)); } .dash-topbar-actions .lang-switch { width: auto; height: 38px; border: 1px solid var(--dash-border); background: var(--dash-surface); color: var(--dash-brand, #0284C7) !important; border-radius: 10px; } .dash-topbar-actions .lang-switch:hover { background: var(--dash-surface-2); border-color: var(--dash-brand); } /* ========== Storefront: light mode ========== */ html[data-theme="light"] { --bg-deep: #F1F5F9; --bg-dark: #FFFFFF; --bg-card: #FFFFFF; --bg-surface: #FFFFFF; --text-primary: #0F172A; --text-secondary: #1E293B; --text-light: #1E293B; --text-muted: #64748B; --white: #0F172A; --glass-bg: rgba(255, 255, 255, 0.92); --glass-border: rgba(15, 23, 42, 0.1); --glass-shadow: 0 8px 28px rgba(15, 23, 42, 0.07); --glass-shadow-hover: 0 16px 40px rgba(15, 23, 42, 0.12); --neu-surface: #EEF2F8; --neu-surface-2: #E7ECF4; --neu-shadow-dark: rgba(15, 23, 42, 0.14); --neu-shadow-light: #FFFFFF; --neu-inner-dark: rgba(15, 23, 42, 0.12); --neu-inner-light: rgba(255, 255, 255, 0.9); --cyan: #0891B2; --cyan-light: rgba(8, 145, 178, 0.12); --cyan-dim: rgba(8, 145, 178, 0.1); --blue: #2563EB; --purple: #7C3AED; --purple-light: rgba(124, 58, 237, 0.12); --purple-dim: rgba(124, 58, 237, 0.1); --gen-brand: #0891B2; --gen-brand-dark: #0E7490; --gen-accent: #7C3AED; --gen-bg: #F1F5F9; --gen-surface: #FFFFFF; --gen-text: #0F172A; --gen-muted: #64748B; } html[data-theme="light"] body.genetics-body { background: var(--bg-deep); color: var(--text-primary); } html[data-theme="light"] .genetics-body h1, html[data-theme="light"] .genetics-body h2, html[data-theme="light"] .genetics-body h3, html[data-theme="light"] .genetics-body h4, html[data-theme="light"] .genetics-body h5, html[data-theme="light"] .genetics-body h6 { color: var(--text-primary); } html[data-theme="light"] .landing-site-header { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid var(--glass-border); } html[data-theme="light"] .landing-site-header.scrolled { background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); } html[data-theme="light"] .landing-site-header .site-logo-img, html[data-theme="light"] .footer-brand .site-logo-img { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.08); border: 1px solid rgba(15, 23, 42, 0.06); } html[data-theme="light"] .nav-search-form { background: #F8FAFC; border-color: var(--glass-border); } html[data-theme="light"] .nav-search-form:focus-within { background: #fff; border-color: rgba(8, 145, 178, 0.45); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12); } html[data-theme="light"] .nav-search-form input { color: var(--text-primary); } html[data-theme="light"] .nav-icon-btn { background: #fff; border-color: #E2E8F0; color: #334155; } html[data-theme="light"] .nav-icon-btn:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); } html[data-theme="light"] .nav-auth-link { color: var(--text-primary) !important; } html[data-theme="light"] .nav-link { color: var(--text-secondary) !important; } html[data-theme="light"] .nav-link:hover, html[data-theme="light"] .nav-link.active { color: var(--cyan) !important; background: var(--cyan-dim); } html[data-theme="light"] .nav-toggle { background: #fff; border-color: #E2E8F0; } html[data-theme="light"] .nav-toggle-bar { background: #0F172A; } html[data-theme="light"] .nav-dropdown-panel, html[data-theme="light"] .nav-user-dropdown { background: #fff; border-color: var(--glass-border); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12); } html[data-theme="light"] .nav-dropdown-header strong, html[data-theme="light"] .nav-dropdown-list a, html[data-theme="light"] .nav-user-dropdown a { color: var(--text-primary); } html[data-theme="light"] .genetics-body .nav-mobile-panel, html[data-theme="light"] .genetics-body .nav-mobile-inner, html[data-theme="light"] .nav-mobile-drawer { background: #fff; color: var(--text-primary); } html[data-theme="light"] .nav-mobile-footer { border-top-color: var(--glass-border); } html[data-theme="light"] .nav-mobile-footer a { border-color: var(--glass-border); color: var(--text-secondary); } html[data-theme="light"] .genetics-body .hero-bg::after { background: linear-gradient(180deg, rgba(241, 245, 249, 0.2) 0%, rgba(241, 245, 249, 0.78) 70%, var(--bg-deep) 100%); } html[data-theme="light"] .footer, html[data-theme="light"] .genetics-body .footer { background: #fff; border-top-color: var(--glass-border); } html[data-theme="light"] .genetics-body .btn-primary, html[data-theme="light"] .genetics-body .btn-success, html[data-theme="light"] .genetics-body .nav-badge, html[data-theme="light"] .genetics-body .basket-wizard-steps li.active .basket-wizard-step-num, html[data-theme="light"] .genetics-body .pagination > .active > a, html[data-theme="light"] .genetics-body .pagination > .active > span { color: #fff !important; } html[data-theme="light"] .genetics-body .btn-default, html[data-theme="light"] .genetics-body .btn-secondary { background: #fff !important; border-color: var(--glass-border) !important; color: var(--text-primary) !important; } html[data-theme="light"] .genetics-body .form-control { background: #fff; color: var(--text-primary); border-color: var(--glass-border); } html[data-theme="light"] .genetics-body .auth-card .form-control { background: #F8FAFC !important; color: var(--text-primary) !important; } html[data-theme="light"] .genetics-body .auth-card-title { color: var(--text-primary); } html[data-theme="light"] .genetics-body .panel, html[data-theme="light"] .genetics-body .panel-primary { background: #fff; } html[data-theme="light"] .genetics-body .catalog-hero-bg { background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(8, 145, 178, 0.1), transparent 60%), radial-gradient(ellipse 70% 50% at 80% 70%, rgba(124, 58, 237, 0.08), transparent 55%), linear-gradient(180deg, rgba(241, 245, 249, 0.4) 0%, var(--bg-deep) 100%); } html[data-theme="light"] .genetics-body .basket-item-card { background: #fff; } html[data-theme="light"] .genetics-body .basket-wizard .table-striped > tbody > tr:nth-child(odd) > td { background-color: #F8FAFC !important; } html[data-theme="light"] .genetics-body .modal-content, html[data-theme="light"] .genetics-body .dropdown-menu { background: #fff; color: var(--text-primary); } /* ========== Dashboard: dark mode ========== */ html[data-theme="dark"] { --dash-bg: #0B1220; --dash-surface: #111827; --dash-surface-2: #0F172A; --dash-text: #E2E8F0; --dash-muted: #94A3B8; --dash-border: #1E293B; --dash-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.22); --dash-brand: #38BDF8; --dash-brand-dark: #0EA5E9; } html[data-theme="dark"] body.dash-body { background: var(--dash-bg); color: var(--dash-text); } html[data-theme="dark"] .dash-body .form-control { background: #0B1220; color: var(--dash-text); } html[data-theme="dark"] .dash-body .form-control:focus { box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18); } html[data-theme="dark"] .dash-body .btn-danger, html[data-theme="dark"] .dash-body .btn-warning, html[data-theme="dark"] .dash-body .btn-info, html[data-theme="dark"] .dash-body .btn-default { background: var(--dash-surface-2) !important; } html[data-theme="dark"] .dash-body .btn-danger:hover { background: rgba(220, 38, 38, 0.16) !important; } html[data-theme="dark"] .dash-body .btn-warning:hover { background: rgba(217, 119, 6, 0.16) !important; } html[data-theme="dark"] .dash-body .btn-info:hover { background: rgba(56, 189, 248, 0.12) !important; } html[data-theme="dark"] .dash-body .btn-default:hover { background: #1E293B !important; } html[data-theme="dark"] .dash-logout-btn:hover { background: rgba(220, 38, 38, 0.14); border-color: rgba(248, 113, 113, 0.45); } html[data-theme="dark"] .dash-body .alert-success { background: rgba(22, 163, 74, 0.16); border-color: rgba(74, 222, 128, 0.3); color: #86EFAC; } html[data-theme="dark"] .dash-body .alert-danger, html[data-theme="dark"] .dash-body .alert-error { background: rgba(220, 38, 38, 0.16); border-color: rgba(248, 113, 113, 0.35); color: #FCA5A5; } html[data-theme="dark"] .dash-body .alert-warning { background: rgba(217, 119, 6, 0.16); border-color: rgba(251, 191, 36, 0.35); color: #FDE68A; } html[data-theme="dark"] .dash-body .alert-info { background: rgba(56, 189, 248, 0.12); border-color: rgba(125, 211, 252, 0.3); color: #BAE6FD; } html[data-theme="dark"] .dash-body .help-block { color: var(--dash-muted); } html[data-theme="dark"] .dash-body .pagination > li > a, html[data-theme="dark"] .dash-body .pagination > li > span, html[data-theme="dark"] .dash-body .pagination > li > button { background: var(--dash-surface); border-color: var(--dash-border); color: var(--dash-text); } html[data-theme="dark"] .dash-empty { color: var(--dash-muted); } html[data-theme="dark"] .dash-body table.table > tbody > tr > td { color: var(--dash-text); } html[data-theme="dark"] .dash-body .dl-horizontal dt, html[data-theme="dark"] .dash-body .dl-horizontal dd { color: var(--dash-text); }