/** * Светлая / тёмная тема. По умолчанию — тёмная. * Переключатель задаёт data-theme="light" | "dark" на , значение хранится в localStorage. */ :root, [data-theme="dark"] { --app-bg: #0f172a; --app-bg-gradient-from: #0f172a; --app-bg-gradient-to: #0f172a; --app-surface: rgba(15, 23, 42, 0.7); --app-surface-card: rgba(15, 23, 42, 0.7); --app-border: rgba(51, 65, 85, 0.8); --app-text: #f8fafc; --app-text-muted: #94a3b8; --app-header-bg: rgba(15, 23, 42, 0.8); --app-nav-bg: rgba(15, 23, 42, 0.95); --app-nav-border: rgba(51, 65, 85, 0.8); --app-input-bg: #1e293b; --app-input-border: #334155; --app-accent: #2563eb; --app-success: #22c55e; --app-warning: #eab308; --app-error: #ef4444; } [data-theme="light"] { --app-bg: #f1f5f9; --app-bg-gradient-from: #f8fafc; --app-bg-gradient-to: #e2e8f0; --app-surface: #ffffff; --app-surface-card: rgba(255, 255, 255, 0.95); --app-border: #e2e8f0; --app-text: #0f172a; --app-text-muted: #64748b; --app-header-bg: rgba(255, 255, 255, 0.95); --app-nav-bg: rgba(255, 255, 255, 0.98); --app-nav-border: #e2e8f0; --app-input-bg: #f8fafc; --app-input-border: #cbd5e1; --app-accent: #2563eb; --app-success: #16a34a; --app-warning: #ca8a04; --app-error: #dc2626; } [data-theme="light"] body, [data-theme="light"] .app-root { background-color: var(--app-bg) !important; color: var(--app-text) !important; } [data-theme="light"] .app-root header { background: var(--app-header-bg) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } [data-theme="light"] .app-root header .header-title, [data-theme="light"] .app-root header [class*="text-slate-50"], [data-theme="light"] .app-root header [class*="text-slate-100"] { color: var(--app-text) !important; } [data-theme="light"] .app-root header [class*="text-slate-300"], [data-theme="light"] .app-root header [class*="text-slate-400"] { color: var(--app-text-muted) !important; } [data-theme="light"] .app-root header button:not(#btnLogin) { border-color: var(--app-border) !important; color: var(--app-text) !important; } [data-theme="light"] .app-root header #btnLogin { background: var(--app-text) !important; color: var(--app-bg) !important; } [data-theme="light"] .app-root header #btnLogout { border-color: var(--app-border) !important; color: var(--app-text) !important; } [data-theme="light"] .app-body { background: linear-gradient(to bottom, var(--app-bg-gradient-from), var(--app-bg-gradient-to)) !important; color: var(--app-text) !important; } [data-theme="light"] .app-root [class*="rounded-2xl"][class*="border"], [data-theme="light"] .app-root [class*="rounded-xl"][class*="border"][class*="bg-slate"], [data-theme="light"] .device-features-section { background: var(--app-surface-card) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } [data-theme="light"] .app-root section h2, [data-theme="light"] .app-root [class*="text-slate-50"], [data-theme="light"] .app-root [class*="text-slate-100"], [data-theme="light"] .app-root [class*="text-slate-200"] { color: var(--app-text) !important; } [data-theme="light"] .app-root [class*="text-slate-400"], [data-theme="light"] .app-root [class*="text-slate-500"] { color: var(--app-text-muted) !important; } [data-theme="light"] .bottom-nav { background: var(--app-nav-bg) !important; border-color: var(--app-nav-border) !important; } [data-theme="light"] .bottom-nav a, [data-theme="light"] .bottom-nav button { color: var(--app-text-muted) !important; } [data-theme="light"] .bottom-nav a:hover, [data-theme="light"] .bottom-nav button:hover, [data-theme="light"] .bottom-nav a.active { color: var(--app-text) !important; } [data-theme="light"] .more-menu-panel { background: var(--app-surface) !important; border-color: var(--app-border) !important; } [data-theme="light"] .more-menu-item { color: var(--app-text) !important; } [data-theme="light"] .app-root footer { border-color: var(--app-border) !important; background: var(--app-surface) !important; color: var(--app-text-muted) !important; } [data-theme="light"] .system-banner { background: rgba(37, 99, 235, 0.15) !important; color: var(--app-text) !important; border-color: var(--app-accent) !important; } [data-theme="light"] [id$="Modal"]:not(.hidden), [data-theme="light"] .fixed.inset-0 [class*="rounded-2xl"] { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } [data-theme="light"] [id$="Modal"] h2, [data-theme="light"] [id$="Modal"] [class*="text-slate"] { color: var(--app-text) !important; } [data-theme="light"] [id$="Modal"] input, [data-theme="light"] [id$="Modal"] select, [data-theme="light"] [id$="Modal"] textarea { background: var(--app-input-bg) !important; border-color: var(--app-input-border) !important; color: var(--app-text) !important; }