/* Тема семейного дашборда: чёрная (по умолчанию) ↔ белая, ручной тумблер в шапке (nav.js). Класс на : без класса — тёмная, .светлая — светлая. Переменные читают шапка и страницы. */ :root { --bg: #131417; --fg: #ececef; --muted: #8b8f98; --card: #1c1e22; --card-brd: #2a2d33; --accent: #d8a24a; --accent-fg: #14130f; --good: #6ec08a; --warn: #e0a84a; --bad: #d76a6a; --nav-bg: #1b1d21; --nav-fg: #9aa0a8; --nav-fg-active: #ffffff; --nav-accent: var(--accent); } html.светлая { --bg: #f5f5f3; --fg: #1b1b1e; --muted: #6b7078; --card: #ffffff; --card-brd: #e4e4e1; --accent: #b8791c; --accent-fg: #ffffff; --good: #2f9e5f; --warn: #c08417; --bad: #c0453f; --nav-bg: #ecece9; --nav-fg: #6b7078; --nav-fg-active: #1b1b1e; --nav-accent: #b8791c; } body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .обёртка { max-width: 780px; margin: 0 auto; padding: 18px 16px 60px; } h1 { font-size: 22px; margin: 18px 0 4px; } .подзаголовок { color: var(--muted); margin: 0 0 18px; font-size: 14px; } .карточки { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .карта { background: var(--card); border: 1px solid var(--card-brd); border-radius: 14px; padding: 14px 16px; } .карта h2 { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; } .число { font-size: 26px; font-weight: 700; } .строка { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--card-brd); } .строка:last-child { border-bottom: none; } .метка { color: var(--muted); } .good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); } .акцент { color: var(--accent); } a { color: var(--accent); } .заглушка { color: var(--muted); font-style: italic; }