/* ============================================================ Тема оформления: CSS-переменные + светлая/тёмная тема Переключение — атрибутом data-theme="light" на . ============================================================ */ :root { --bg: #12141c; --bg-alt: #171a24; --surface: #1c1f2b; --surface-hover: #202744; --border: #2a2e3f; --text: #eaeaf0; --text-dim: #9a9ab0; --text-bright: #ffffff; --accent: #5b6cff; --accent-hover: #4756d6; --accent-soft: rgba(91, 108, 255, 0.15); --success: #2e7d32; --success-hover: #245f27; --danger: #c0392b; --danger-hover: #992d22; --warning: #c58a1a; --warning-soft: rgba(197, 138, 26, 0.18); --shadow: 0 8px 24px rgba(0, 0, 0, 0.28); --radius: 12px; } html[data-theme="light"] { --bg: #f4f5fa; --bg-alt: #eceef6; --surface: #ffffff; --surface-hover: #eef0ff; --border: #dde0ee; --text: #23253a; --text-dim: #6b6f8a; --text-bright: #14152a; --accent: #4a5aeb; --accent-hover: #3946c4; --accent-soft: rgba(74, 90, 235, 0.10); --success: #2e7d32; --success-hover: #245f27; --danger: #c0392b; --danger-hover: #992d22; --warning: #a5680f; --warning-soft: rgba(165, 104, 15, 0.12); --shadow: 0 8px 24px rgba(30, 34, 70, 0.08); } * { box-sizing: border-box; } body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 0; transition: background-color 0.2s ease, color 0.2s ease; } .container { max-width: 800px; margin: 0 auto; padding: 30px 20px 60px; } .container.narrow { max-width: 400px; } .container.wide { max-width: 1180px; } /* ---------- Раскладка: плеер слева (всегда виден), каналы справа ---------- */ .layout { display: flex; align-items: flex-start; gap: 28px; margin-top: 20px; } .player-column { flex: 1 1 460px; min-width: 380px; max-width: 560px; position: sticky; top: 16px; align-self: flex-start; } .player-column .deck { margin-top: 0; } /* ---------- Панель для видео-каналов (mpegts.js в