/* ============================================================
   Страница «Поддержать проект» (/support) и неброская полоска
   после выгрузки отчёта.

   Оформление — как у страниц /docs/*: карточка на сером полотне.
   Все цвета и отступы берутся из tokens.css через var().
   Медиазапросов нет — как и во всём проекте.
   ============================================================ */

.sup-page { background: var(--bg-page); }

.sup-wrap { max-width: 860px; margin: 0 auto; padding: 28px 20px 40px; }

.sup-top { display: flex; justify-content: space-between; align-items: center;
           margin-bottom: 16px; }
.sup-top-links { display: flex; gap: 18px; align-items: center; }

.sup-card { background: var(--bg); border: 1px solid var(--line);
            border-radius: var(--r-card); padding: 26px 34px 30px; }
.sup-card h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em;
               margin: 0 0 10px; }

.sup-lead { font-size: 15.5px; line-height: 1.62; color: var(--ink-2);
            margin: 0 0 22px; }

.sup-h2 { font-size: 16px; font-weight: 600; color: var(--ink);
          margin: 26px 0 10px; }

.sup-text { font-size: 14.5px; line-height: 1.62; color: var(--ink-2);
            margin: 0 0 10px; }
.sup-text a { color: var(--amber-ink); }

/* --- Блок оплаты: слева кнопка, справа QR-код --- */

.sup-pay { display: flex; gap: 26px; align-items: center;
           background: var(--amber-soft); border: 1px solid var(--line);
           border-radius: var(--r-card); padding: 22px 26px; }
.sup-pay-main { flex: 1 1 auto; }
.sup-pay-title { font-size: 16px; font-weight: 600; color: var(--ink);
                 margin-bottom: 4px; }
.sup-pay-text { font-size: var(--hint-size); color: var(--muted);
                line-height: 1.55; margin: 0 0 16px; }
.sup-btn { text-decoration: none; }

.sup-pay-qr { flex: 0 0 auto; text-align: center; }
/* QR отдан в 330×330, на странице показываем меньше — читается и так */
.sup-pay-qr img { display: block; width: 152px; height: 152px;
                  background: var(--bg); border: 1px solid var(--line);
                  border-radius: var(--r-sm); padding: 6px; }
.sup-qr-note { font-size: 12.5px; color: var(--muted); line-height: 1.4;
               margin-top: 7px; max-width: 152px; }

/* --- Списки и оговорка --- */

.sup-list { margin: 0; padding-left: 20px; }
.sup-list li { font-size: 14.5px; line-height: 1.62; color: var(--ink-2);
               margin-bottom: 5px; }

.sup-note { background: var(--bg-soft); border: 1px solid var(--line-soft);
            border-radius: var(--r-sm); padding: 14px 18px; }
.sup-note p { font-size: 14px; line-height: 1.6; color: var(--ink-2);
              margin: 0 0 8px; }
.sup-note p:last-child { margin-bottom: 0; }

.sup-thanks { font-size: var(--hint-size); color: var(--muted);
              margin: 24px 0 0; padding-top: 16px;
              border-top: 1px solid var(--line-soft); }
.sup-thanks a { color: var(--muted); }

/* ============================================================
   Полоска «расписание готово» на странице «Отчёты».
   Показывается только после выгрузки (см. print_export.html),
   закрывается крестиком и до конца сессии больше не появляется.
   Никаких всплывающих окон: обычная строка в потоке страницы.
   ============================================================ */

.sup-bar { display: flex; align-items: center; gap: 12px;
           margin: 16px 0 0; padding: 11px 14px;
           background: var(--amber-soft); border: 1px solid var(--line);
           border-radius: var(--r-sm);
           font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sup-bar[hidden] { display: none; }
.sup-bar-text { flex: 1 1 auto; }
/* Кнопка, а не текстовая ссылка: рядом с полоской нет других действий,
   и текстом она терялась. Вид — как у «Предпросмотра» на этой же странице
   (янтарная пилюля, тёмный текст, высота 40, радиус 22). */
.sup-bar-link { flex: 0 0 auto;
                display: inline-flex; align-items: center;
                height: 40px; padding: 0 20px;
                background: var(--amber); color: var(--ink);
                font-size: 14.5px; font-weight: 600; line-height: 1;
                border: 1px solid transparent; border-radius: 22px;
                text-decoration: none; white-space: nowrap;
                transition: background .12s; }
.sup-bar-link:hover { background: var(--amber-hover); text-decoration: none; }
.sup-bar-link:focus-visible { outline: 2px solid var(--amber-ink); outline-offset: 2px; }
.sup-bar-close { flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
                 border: 0; border-radius: var(--r-sm); background: transparent;
                 color: var(--muted); font-size: 17px; line-height: 1;
                 cursor: pointer; }
.sup-bar-close:hover { background: var(--bg-soft); color: var(--ink); }