/* ===================================================================== MGBot AI — Дизайн-система: токены, темы, сброс, типографика Тёмная тема — фирменная (по умолчанию), светлая — для яркого класса. Переключение: data-theme="light" на . ===================================================================== */ :root { /* ---- Палитра: тёмная тема (по умолчанию) ---- */ --bg: #0a0e0a; --bg-elevated: #101410; --surface: #1a1a1a; --surface-2: #212421; --surface-hover: #272b27; --border: #2c312c; --border-strong: #3a403a; --text: #e8ece8; --text-muted: #9aa39a; --text-faint: #6b756b; --accent: #00ff66; --accent-hover: #4dff92; --accent-dim: rgba(0, 255, 102, 0.14); --accent-line: rgba(0, 255, 102, 0.30); --on-accent: #05210f; --danger: #ff4d4d; --danger-dim: rgba(255, 77, 77, 0.14); --danger-line: rgba(255, 77, 77, 0.32); --warn: #ffc531; --warn-dim: rgba(255, 197, 49, 0.14); --info: #4db8ff; --info-dim: rgba(77, 184, 255, 0.14); /* Цвета классов разметки — различимы и в тёмной, и в светлой теме */ --cls-1: #00ff66; --cls-2: #4db8ff; --cls-3: #ffc531; --cls-4: #ff7ad9; --cls-5: #ff8a4d; --cls-6: #9d8cff; --cls-7: #4de0d0; --cls-8: #ff5c8a; /* ---- Радиусы ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ---- Тени ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.40); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); --ring: 0 0 0 3px var(--accent-dim); /* ---- Отступы ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* ---- Типографика ---- */ --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Крупнее обычного: интерфейсом пользуются школьники, часто с проектора */ --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 27px; --fs-3xl: 34px; /* ---- Размеры оболочки ---- */ --sidebar-w: 232px; --topbar-h: 60px; --content-max: 1560px; --t-fast: 0.12s ease; --t-mid: 0.22s ease; color-scheme: dark; } /* ---- Светлая тема ---- */ :root[data-theme="light"] { --bg: #f4f7f4; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f0f3f0; --surface-hover: #e8ede8; --border: #dde3dd; --border-strong: #c3ccc3; --text: #16201a; --text-muted: #5d685f; --text-faint: #8a938c; /* На белом фоне неоново-зелёный нечитаем — берём насыщенный оттенок, но заливка кнопок остаётся фирменной яркой. */ --accent: #00a247; --accent-hover: #00893c; --accent-dim: rgba(0, 162, 71, 0.12); --accent-line: rgba(0, 162, 71, 0.34); --on-accent: #ffffff; --danger: #d92c2c; --danger-dim: rgba(217, 44, 44, 0.10); --danger-line: rgba(217, 44, 44, 0.30); --warn: #b57d00; --warn-dim: rgba(181, 125, 0, 0.12); --info: #0b74c4; --info-dim: rgba(11, 116, 196, 0.12); --cls-1: #00a247; --cls-2: #0b74c4; --cls-3: #b57d00; --cls-4: #c4359e; --cls-5: #d2601b; --cls-6: #6b52d4; --cls-7: #0e968a; --cls-8: #cc2f5c; --shadow-sm: 0 1px 2px rgba(16, 32, 20, 0.07); --shadow-md: 0 6px 20px rgba(16, 32, 20, 0.10); --shadow-lg: 0 18px 50px rgba(16, 32, 20, 0.16); color-scheme: light; } /* ===================== Сброс ===================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Тема переключается мгновенно, но без «моргания» цветов */ body, .card, .btn, .input, .panel, .sidebar, .topbar { transition: background-color var(--t-mid), border-color var(--t-mid), color var(--t-mid); } h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; color: var(--text); letter-spacing: -0.01em; } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } p { margin: 0 0 var(--sp-3); } a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--accent-hover); } code, kbd, pre { font-family: var(--font-mono); } img { max-width: 100%; display: block; } ::selection { background: var(--accent-dim); color: var(--text); } /* Скроллбары */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--text-faint); background-clip: content-box; } /* Фокус виден всегда — обязательное условие доступности */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* ===================== Утилиты ===================== */ .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .accent { color: var(--accent); } .danger { color: var(--danger); } .warn { color: var(--warn); } .mono { font-family: var(--font-mono); font-size: 0.92em; } .tiny { font-size: var(--fs-xs); } .small { font-size: var(--fs-sm); } .big { font-size: var(--fs-lg); } .row { display: flex; align-items: center; gap: var(--sp-3); } .row-sm { display: flex; align-items: center; gap: var(--sp-2); } .col { display: flex; flex-direction: column; gap: var(--sp-3); } .wrap { flex-wrap: wrap; } .spacer { flex: 1 1 auto; } .center { justify-content: center; } .between{ justify-content: space-between; } .baseline { align-items: baseline; } .hidden { display: none !important; } .nowrap { white-space: nowrap; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Уважаем системную настройку «меньше движения» */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }