/* Заготовки на время загрузки.

           До этого местом под будущий блок служила строка
           «Загрузка...» — высотой в одну строку, тогда как приходящий
           контент занимает пол-экрана. Разница высот и есть тот скачок,
           который видно на каждом экране: страница подпрыгивает ровно в
           момент подстановки данных.

           Заготовка повторяет форму и высоту будущего блока, поэтому
           подстановка ничего не двигает. */
        .skeleton {
            position: relative;
            overflow: hidden;
            background: #e8ecf1;
            border-radius: 8px;
        }
        /* Блик пробегает слева направо — знак, что идёт загрузка, а не
           что всё сломалось и осталось серым. */
        .skeleton::after {
            content: "";
            position: absolute;
            /* Четыре стороны по отдельности, а не inset: сокращение
               появилось в Safari только с 14.1, а остальной сайт живёт и
               на 14.0 (там уже есть ?. и ?? из app.js). Без поддержки
               inset блик остался бы неразмещённым — вместо бегущей
               полосы получилось бы белое пятно. */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: translateX(-100%);
            background: linear-gradient(90deg,
                        rgba(255, 255, 255, 0) 0%,
                        rgba(255, 255, 255, 0.55) 50%,
                        rgba(255, 255, 255, 0) 100%);
            animation: skeletonShimmer 1.25s ease-in-out infinite;
        }
        @keyframes skeletonShimmer {
            100% { transform: translateX(100%); }
        }
        /* Кому анимация мешает (настройка ОС «уменьшить движение») —
           остаётся ровный серый прямоугольник. */
        @media (prefers-reduced-motion: reduce) {
            .skeleton::after { animation: none; }
        }

        /* Сетка заготовок повторяет сетку #counters один в один: тот же
           минимум колонки и тот же зазор. Иначе заготовка встанет в
           другое число колонок, и подмена всё-таки сдвинет страницу. */
        .skeleton-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
        }

        /* Заготовка карточки ввода показаний: та же рамка, те же поля,
           внутри — полосы на месте названия, поля и двух строк чисел. */
        .skeleton-card {
            background: #fff;
            border: 1px solid #e3e8ef;
            border-radius: 12px;
            padding: 20px 20px 22px;
        }
        .skeleton-card__head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
        }
        .skeleton-card__icon {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 10px;
        }
        .skeleton-card__head-text {
            flex: 1;
            min-width: 0;
        }
        .skeleton-line {
            height: 12px;
            border-radius: 6px;
        }
        .skeleton-line + .skeleton-line {
            margin-top: 8px;
        }
        .skeleton-line--title { height: 15px; width: 62%; }
        .skeleton-line--sub   { height: 11px; width: 44%; }
        .skeleton-line--field { height: 56px; border-radius: 8px; margin-top: 0; }
        .skeleton-line--stat  { height: 13px; width: 100%; }
        .skeleton-card__stats { margin-top: 18px; }
        .skeleton-card__stats .skeleton-line + .skeleton-line { margin-top: 12px; }

        /* Список: карточки-строки (ЛС, новости, FAQ, уведомления). */
        .skeleton-rows {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .skeleton-row {
            background: #fff;
            border: 1px solid #e3e8ef;
            border-radius: 12px;
            padding: 16px 18px;
        }

        /* Текстовый блок: реквизиты, график работы, статья новости.
           Последняя строка короче — так выглядит настоящий абзац, и
           заготовка не читается как «поехала вёрстка». */
        .skeleton-text .skeleton-line {
            width: 100%;
        }
        .skeleton-text .skeleton-line:last-child {
            width: 62%;
        }

        /* Ячейка таблицы (список квитанций). */
        .skeleton-cell {
            height: 14px;
            border-radius: 6px;
        }