/* СЛОЙ 2 — ОСНОВА. Сброс, каркас, боковое меню, типографика, лоадер, доступность. Ничего, что относится к отдельному компоненту. */ /* --- сброс и базовая типографика --- */ * { box-sizing: border-box; margin: 0; } html, body { height: 100%; } body { background: var(--bg); color: var(--txt); font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; } code, .mono { font-family: var(--mono); font-size: .92em; } code { color: var(--cyan); } .muted { color: var(--muted); } .pre { white-space: pre-wrap; } .num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; } /* ---------- иконки ---------- */ /* Спрайт Lucide прячем классом, а не style="display:none" в разметке. */ .sprite { display: none; } .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; } .ic-warn { color: var(--amber); } /* ---------- лоадер: заметная панель сверху, не блокирует интерфейс -------- */ #loader { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; z-index: 80; box-sizing: border-box; width: min(380px, calc(100vw - 24px)); min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px 12px; overflow: hidden; pointer-events: none; color: var(--txt); background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--elev-2); opacity: 1; visibility: visible; transform: translateX(-50%); } .loader-mark { position: relative; width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 10px; } .loader-mark .ic { width: 18px; height: 18px; } .loader-copy { min-width: 0; display: grid; gap: 2px; } .loader-copy b { font-size: 12px; line-height: 1.2; letter-spacing: .01em; } .loader-copy small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .loader-dots { display: inline-flex; align-items: center; gap: 4px; } .loader-dots i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; } .loader-track { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; overflow: hidden; background: var(--surface-3); border-radius: 999px; } .loader-track i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), transparent); transform-origin: left center; } body.loaded #loader { opacity: 0; visibility: hidden; } body.loaded #loader * { animation-play-state: paused !important; } /* Без JS полосы нет вовсе. Класс no-js стоит на и снимается первой строкой app.js. Через