/* Токены оформления и темы. Подключается первым: остальные файлы читают отсюда var(--*). Часть шелла (см. index.html). */ /* ────────────────────────────────────────────────────────────── OPERATOR EDITION — control-room palette. Dark by default; large readable typography; status indicators use neon glow so they're visible across the room. ────────────────────────────────────────────────────────────── */ :root { /* Surfaces — layered navy */ --bg: #060a13; --bg-soft: #0b1322; --sidebar-bg: #04070e; --sidebar-text: #6b7a96; --sidebar-active: #ffffff; --sidebar-accent: #00d3f5; --card: #0e1729; --card-elevated: #14203a; --border: #1d2942; --table-hover: #14203a; --table-border: #182238; --input-bg: #0a1322; /* Foreground */ --text: #e7eef9; --text-secondary: #98a4be; --text-muted: #5d6b87; /* Accents — electric cyan as primary, calibrated for OLED */ --accent: #00d3f5; --accent-hover: #5ee5fb; --accent-soft: rgba(0,211,245,.12); --accent-focus-ring: rgba(0,211,245,.32); /* Status — neon, all with matching glow shadows */ --success: #1fe091; --success-bg: rgba(31,224,145,.12); --success-glow: 0 0 0 3px rgba(31,224,145,.22), 0 0 14px rgba(31,224,145,.45); --danger: #ff4d6a; --danger-bg: rgba(255,77,106,.14); --danger-glow: 0 0 0 3px rgba(255,77,106,.22), 0 0 16px rgba(255,77,106,.55); --warning: #ffb84d; --warning-bg: rgba(255,184,77,.14); /* Overlays */ --overlay-bg: rgba(2,6,15,.78); --switch-off: #2a3a5c; /* Radii / shadows / motion */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.35); --shadow-lg: 0 8px 32px rgba(0,0,0,.55); --transition: .18s cubic-bezier(.4,0,.2,1); /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; } /* Light theme (kept as opt-in for day shift) */ [data-theme="light"] { --bg: #f5f7fb; --bg-soft: #ffffff; --sidebar-bg: #0e1729; --sidebar-text: #98a4be; --sidebar-active: #ffffff; --sidebar-accent: #0ea5e9; --card: #ffffff; --card-elevated: #f8fafc; --border: #e2e8f0; --table-hover: #f8fafc; --table-border: #f1f5f9; --input-bg: #ffffff; --text: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --accent: #0284c7; --accent-hover: #0369a1; --accent-soft: rgba(2,132,199,.08); --accent-focus-ring: rgba(2,132,199,.22); --success: #16a34a; --success-bg: #ecfdf5; --success-glow: 0 0 0 3px rgba(22,163,74,.18); --danger: #dc2626; --danger-bg: #fef2f2; --danger-glow: 0 0 0 3px rgba(220,38,38,.18); --warning: #d97706; --warning-bg: #fffbeb; --overlay-bg: rgba(15,23,42,.5); --switch-off: #cbd5e1; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-lg: 0 8px 24px rgba(0,0,0,.08); } /* Back-compat alias — old code wrote data-theme="dark" */ [data-theme="dark"] { /* dark is the default; this keeps existing JS calls working */ } * { margin:0; padding:0; box-sizing:border-box; } /* Pre-paint state — set by the inline script. If we know the user has a token, we hide the login overlay before first paint and reveal the app shell. tryAutoLogin will then validate the token; if it fails, doLogout() drops .preauth. */ html.preauth #loginOverlay { display: none !important; } html.preauth #mainSidebar { display: flex !important; } html.preauth #mainContent { display: block !important; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); display: flex; min-height: 100vh; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } /* Custom scrollbars — calmer than the OS default on dark backgrounds */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--border) 60%, var(--text-secondary)); background-clip: padding-box; } ::selection { background: var(--accent-soft); color: var(--text); }