/* ============================================================================
   QR-UI — основа оформления редактора и страницы результата.

   ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. Общий style.css весит 40 КБ, писался годами и правится
   другими задачами; в нём уже находили разъехавшиеся правила. Поэтому новое
   оформление живёт здесь, своими именами с приставкой qr-, и подключается
   ПОСЛЕ style.css — чтобы там, где мы переопределяем старое, побеждало новое,
   а всё, до чего мы ещё не дошли, продолжало работать как раньше.

   ПОДКЛЮЧЕНИЕ: c/models/main_module.php, функции headerFUN2 (редактор),
   header_template (страница результата) и headerFUN (служебные страницы).

   ТЕМА одна — светлая. На сайте есть переключатель, но в конструкторе решили
   пока не разводить два оформления: каждый экран пришлось бы проверять дважды,
   включая чужие врезки карт.

   ЦВЕТА И ШРИФТ сняты с qrmessage.me (светлая тема), чтобы человек не
   чувствовал перехода на другой сайт:
       фон белый, тёплая подложка #FDFAF6, текст #1A1A1A, приглушённый #666,
       рамка #E8E4DF, фирменный градиент #FF914D → #FFBD59, бирюзовый #5CE1E6,
       шрифт Inter, скругления 8/12/16/24.
   ============================================================================ */

/* --- шрифт ----------------------------------------------------------------
   Своя копия в c/views/templates2/fonts/. Раньше шапка тянула Inter из
   /wp-content/themes/hello-elementor/ — конструктор не должен зависеть от
   темы WordPress: сменят тему, и шрифт пропадёт.
   font-display: swap — текст виден сразу, не дожидаясь загрузки шрифта. */
@font-face {
    font-family: 'QR Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'QR Inter';
    src: url('../fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- токены ---------------------------------------------------------------
   Всё оформление собрано из этих значений. Поменять фирменный цвет или радиус
   во всём конструкторе = поправить одну строку здесь. */
:root {
    /* поверхности */
    --qr-bg:          #FFFFFF;   /* фон страницы */
    --qr-bg-soft:     #FDFAF6;   /* тёплая подложка секций, как на сайте */
    --qr-bg-warm:     #FDF6EC;   /* подложка выделенных мест */
    --qr-surface:     #FFFFFF;   /* карточки */
    --qr-line:        #E8E4DF;   /* рамки */
    --qr-line-soft:   #F2EFEA;   /* разделители внутри карточек */

    /* текст */
    --qr-ink:         #1A1A1A;   /* основной */
    --qr-ink-2:       #4A4A4A;   /* вторичный */
    --qr-muted:       #666666;   /* подписи и пояснения */
    --qr-faint:       #9A9A9A;   /* совсем тихий: счётчики, подсказки */

    /* фирменные */
    --qr-accent:      #FF914D;
    --qr-accent-2:    #FFBD59;
    --qr-accent-dark: #E87A35;   /* наведение и нажатие */
    --qr-accent-soft: rgba(255, 145, 77, .10);
    --qr-cyan:        #5CE1E6;
    --qr-grad:        linear-gradient(135deg, #FF914D, #FFBD59);

    /* состояния */
    --qr-ok:          #1A7F52;
    --qr-ok-soft:     #EAF6F0;
    --qr-warn:        #A8690A;
    --qr-warn-soft:   #FDF3E3;
    --qr-bad:         #B3261E;
    --qr-bad-soft:    #FDECEA;

    /* скругления — те же, что на сайте */
    --qr-r-s:  8px;
    --qr-r-m:  12px;
    --qr-r-l:  16px;
    --qr-r-xl: 24px;

    /* тени. Мягкая для карточек, заметная для всплывающего и закреплённого */
    --qr-shadow-1: 0 1px 2px rgba(26, 26, 26, .04), 0 2px 8px rgba(26, 26, 26, .04);
    --qr-shadow-2: 0 10px 30px rgba(0, 0, 0, .15);

    /* ритм: один шаг 4px, всё кратно ему */
    --qr-gap-1: 4px;
    --qr-gap-2: 8px;
    --qr-gap-3: 12px;
    --qr-gap-4: 16px;
    --qr-gap-5: 24px;
    --qr-gap-6: 32px;
    --qr-gap-7: 48px;

    /* ширина содержимого */
    --qr-width: 1160px;

    --qr-font: 'QR Inter', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --- размеры считаем по рамке ---------------------------------------------
   Глобальный сброс `* { box-sizing: border-box }` здесь ставить нельзя: он
   задел бы всю старую вёрстку, которая местами рассчитана на прежнее
   поведение. Поэтому включаем его только для своих элементов — иначе поле с
   min-height:44px и внутренними отступами вырастает до 68px, а ширина 100%
   вылезает за родителя. */
.qr-card, .qr-input, .qr-textarea, .qr-select, .qr-btn, .qr-info,
.qr-meter, .qr-badge, .qr-note, .qr-field, .qr-opt {
    box-sizing: border-box;
}

/* --- типографика ----------------------------------------------------------
   Размеры «резиновые»: clamp(минимум, от ширины экрана, максимум). Так один
   набор правил работает и на телефоне, и на большом мониторе, без десятка
   точек перелома. На сайте заголовки 60/48/20 на десктопе — здесь тот же
   строй, но чуть спокойнее: это рабочий экран, а не витрина. */
.qr-h1, .qr-h2, .qr-h3, .qr-h4 {
    font-family: var(--qr-font);
    color: var(--qr-ink);
    margin: 0;
    font-weight: 700;
    letter-spacing: -.01em;
}
.qr-h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; }
.qr-h2 { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; }
.qr-h3 { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; }
.qr-h4 { font-size: 16px; line-height: 1.4; }

.qr-text   { font-size: 15px; line-height: 1.6; color: var(--qr-ink-2); margin: 0; }
.qr-muted  { font-size: 13px; line-height: 1.55; color: var(--qr-muted); margin: 0; }
.qr-faint  { font-size: 12px; line-height: 1.5; color: var(--qr-faint); margin: 0; }
.qr-mono   { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* --- метка «необязательно» ------------------------------------------------
   Отвечает на вопрос, который есть у каждого новичка: «а это обязательно?».
   Ставится рядом с названием секции или поля. */
.qr-opt {
    display: inline-block;
    margin-left: var(--qr-gap-2);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--qr-bg-warm);
    color: var(--qr-warn);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    vertical-align: 2px;
    white-space: nowrap;
}
.qr-req {
    background: var(--qr-accent-soft);
    color: var(--qr-accent-dark);
}

/* --- карточка -------------------------------------------------------------
   Основной кирпич: и секция редактора, и блок на странице результата. */
.qr-card {
    background: var(--qr-surface);
    border: 1px solid var(--qr-line);
    border-radius: var(--qr-r-l);
    padding: var(--qr-gap-5);
}
.qr-card-soft { background: var(--qr-bg-soft); }
.qr-card + .qr-card { margin-top: var(--qr-gap-4); }

/* --- поля ввода -----------------------------------------------------------
   Высота 44px — минимум, по которому палец попадает без промаха.
   Размер шрифта 16px обязателен: при меньшем Safari на айфоне сам увеличивает
   страницу, когда человек становится в поле, и вёрстка уезжает. */
.qr-field { display: flex; flex-direction: column; gap: var(--qr-gap-1); }
.qr-field > label,
.qr-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--qr-ink);
    line-height: 1.4;
}
.qr-hint { font-size: 12px; line-height: 1.45; color: var(--qr-muted); }

.qr-input,
.qr-textarea,
.qr-select {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    font-family: var(--qr-font);
    font-size: 16px;
    line-height: 20px;
    color: var(--qr-ink);
    background: var(--qr-surface);
    border: 1px solid var(--qr-line);
    border-radius: var(--qr-r-m);
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}
.qr-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.qr-input::placeholder,
.qr-textarea::placeholder { color: var(--qr-faint); }

.qr-input:hover,
.qr-textarea:hover,
.qr-select:hover { border-color: #D8D2CA; }

.qr-input:focus,
.qr-textarea:focus,
.qr-select:focus {
    outline: none;
    border-color: var(--qr-accent);
    box-shadow: 0 0 0 3px var(--qr-accent-soft);
}

.qr-input.qr-bad,
.qr-textarea.qr-bad { border-color: var(--qr-bad); }
.qr-input.qr-good,
.qr-textarea.qr-good { border-color: var(--qr-ok); }

/* --- кнопки ---------------------------------------------------------------
   Главная — фирменным градиентом, как на сайте. Вторая — белая с рамкой.
   Опасная — только текстом и красным, чтобы её нельзя было нажать по привычке
   вместо главной. */
.qr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qr-gap-2);
    min-height: 44px;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--qr-r-m);
    font-family: var(--qr-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: var(--qr-grad);
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, transform .05s, box-shadow .15s;
    text-align: center;
}
.qr-btn:hover { filter: brightness(.96); color: #fff; text-decoration: none; }
.qr-btn:active { transform: translateY(1px); }
.qr-btn:focus-visible { outline: 3px solid var(--qr-accent-soft); outline-offset: 2px; }
.qr-btn[disabled],
.qr-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.qr-btn-2 {
    background: var(--qr-surface);
    color: var(--qr-ink);
    border: 1px solid var(--qr-line);
}
.qr-btn-2:hover { background: var(--qr-bg-soft); color: var(--qr-ink); filter: none; }

.qr-btn-ghost {
    background: transparent;
    color: var(--qr-muted);
    border: 1px solid transparent;
}
.qr-btn-ghost:hover { background: var(--qr-bg-soft); color: var(--qr-ink); filter: none; }

.qr-btn-danger {
    background: var(--qr-surface);
    color: var(--qr-bad);
    border: 1px solid #F0D2CF;
}
.qr-btn-danger:hover { background: var(--qr-bad-soft); color: var(--qr-bad); filter: none; }

.qr-btn-s { min-height: 36px; padding: 8px 14px; font-size: 13px; }
.qr-btn-wide { width: 100%; }

/* --- кнопка-подсказка «i» -------------------------------------------------
   Заменяет картинку с восклицательным знаком: она была просто <img> без
   размеров и без наведения, поэтому выглядела чужеродно. */
.qr-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--qr-line);
    border-radius: 50%;
    background: var(--qr-surface);
    color: var(--qr-muted);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--qr-font);
    line-height: 1;
    cursor: pointer;
    vertical-align: -3px;
    transition: border-color .15s, color .15s, background .15s;
}
.qr-info:hover { border-color: var(--qr-accent); color: var(--qr-accent); background: var(--qr-accent-soft); }

/* --- полоса заполнения ----------------------------------------------------
   Для счётчика размера страницы. Цвет меняется по мере заполнения: пока места
   много — фирменный, ближе к пределу — предупреждающий, на пределе — красный.
   Ширину и класс выставляет PHP, здесь только вид. */
.qr-meter {
    height: 8px;
    border-radius: 999px;
    background: var(--qr-line-soft);
    overflow: hidden;
}
.qr-meter > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--qr-grad);
    transition: width .4s ease;
}
.qr-meter.is-warn > i { background: linear-gradient(135deg, #E8A33A, #F0C05A); }
.qr-meter.is-full > i { background: linear-gradient(135deg, #D6453B, #E8746B); }

/* --- метки-значки ---------------------------------------------------------- */
.qr-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}
.qr-b-ok   { background: var(--qr-ok-soft);   color: var(--qr-ok); }
.qr-b-warn { background: var(--qr-warn-soft); color: var(--qr-warn); }
.qr-b-bad  { background: var(--qr-bad-soft);  color: var(--qr-bad); }
.qr-b-gray { background: var(--qr-line-soft); color: var(--qr-muted); }

/* --- сообщения ------------------------------------------------------------- */
.qr-note {
    border-radius: var(--qr-r-m);
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
}
.qr-note-ok   { background: var(--qr-ok-soft);   border: 1px solid #BFE3D0; color: var(--qr-ok); }
.qr-note-warn { background: var(--qr-warn-soft); border: 1px solid #F3DFBB; color: var(--qr-warn); }
.qr-note-bad  { background: var(--qr-bad-soft);  border: 1px solid #F5C6C2; color: var(--qr-bad); }

/* --- только для чтения ----------------------------------------------------
   Итоговая сумма и подобные значения: видно, что это результат расчёта, а не
   поле для ввода. */
.qr-readonly {
    background: var(--qr-bg-soft);
    border: 1px dashed var(--qr-line);
    color: var(--qr-ink);
    cursor: default;
}
.qr-readonly:focus { box-shadow: none; border-color: var(--qr-line); }

/* --- мелочи ---------------------------------------------------------------- */
.qr-row   { display: flex; flex-wrap: wrap; gap: var(--qr-gap-3); }
.qr-col   { display: flex; flex-direction: column; gap: var(--qr-gap-3); }
.qr-grow  { flex: 1 1 220px; min-width: 0; }
.qr-nowrap { white-space: nowrap; }
.qr-hidden { display: none !important; }

/* Прячем от глаза, но оставляем для чтения с экрана: подписи к полям, у
   которых по макету видна только иконка. */
.qr-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- уважение к настройкам человека ---------------------------------------
   Если в системе выключены анимации (а это и укачивание, и слабые машины) —
   выключаем и у себя. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   ЭКРАНЫ С КАРТОЧКОЙ ПО ЦЕНТРУ: вход в редактирование, восстановление пароля,
   страница недоступна (auth_edit_page.php, recovers.php, blocking.php) и окно
   пароля на просмотр поверх страницы (p.php, класс .qr-gate)

   Лежит в qr-ui.css, а не в qr-editor.css: страница клиента подключает qr-ui.css и
   qr-page.css, но не qr-editor.css.

   Эти два экрана остались от старого оформления: голый заголовок и бледная
   кнопка 160x40 из .btn. Теперь — карточка по центру, поле и кнопка как в
   редакторе (qr-ui.css). Разметка и имена полей прежние, на них держатся
   контроллеры; новые классы все с приставкой qr-auth.
   ============================================================================ */
.qr-auth {
    box-sizing: border-box;
    min-height: calc(100vh - 96px);       /* шапка сайта 72-89px (зависит от ширины) + запас, иначе лишняя прокрутка */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(24px, 8vh, 72px) 16px 48px;
    background: var(--qr-bg-soft);
    font-family: var(--qr-font);
    color: var(--qr-ink);
}
:is(.qr-auth, .qr-gate) *, :is(.qr-auth, .qr-gate) *::before, :is(.qr-auth, .qr-gate) *::after { box-sizing: border-box; }
/* чтобы под экраном не оставалась белая полоса, если шапка ниже запаса */
body:has(.qr-auth) { background: var(--qr-bg-soft); }

.qr-auth__card {
    width: 100%;
    max-width: 440px;
    margin: 0;
    padding: 32px 28px 28px;
    background: var(--qr-surface);
    border: 1px solid var(--qr-line);
    border-radius: var(--qr-r-l);
    box-shadow: var(--qr-shadow-1);
}

/* значок над заголовком: круг в цвет сайта, рисунок внутри — простая фигура */
.qr-auth__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--qr-accent-soft) center / 28px 28px no-repeat;
}
.qr-auth__icon--lock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E87A35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
.qr-auth__icon--clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E87A35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.qr-auth__icon--eye {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E87A35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.qr-auth__icon--ban {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E");
    background-color: var(--qr-bad-soft);       /* «заблокировано» — красным, остальное оранжевым */
}
.qr-auth__icon--mail {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E87A35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

/* старый style.css красит h1 крупно и чёрным с засечками — перебиваем */
:is(.qr-auth, .qr-gate) .qr-auth__title {
    margin: 0 0 8px;
    padding: 0;
    font-family: var(--qr-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-align: center;
    text-transform: none;
    color: var(--qr-ink);
}
.qr-auth__lead {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: var(--qr-muted);
}

.qr-auth__label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--qr-ink);
}
:is(.qr-auth, .qr-gate) .qr-input { margin: 0; }
.qr-auth__hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--qr-muted);
}

.qr-auth__aside { margin: 12px 0 20px; text-align: right; font-size: 14px; }
.qr-auth__aside--center { margin: 16px 0 0; text-align: center; }
.qr-auth__aside a { color: var(--qr-accent-dark); text-decoration: none; }
.qr-auth__aside a:hover { text-decoration: underline; }

/* главная кнопка — на всю ширину карточки */
:is(.qr-auth, .qr-gate) .qr-auth__btn { width: 100%; margin: 20px 0 0; }
.qr-auth__aside + .qr-auth__btn { margin-top: 0; }

/* пояснение, как проходит восстановление */
.qr-auth__howto {
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--qr-bg-warm);
    border: 1px solid var(--qr-line);
    border-radius: var(--qr-r-m);
    font-size: 14px;
    line-height: 1.55;
    color: var(--qr-ink-2);
}
.qr-auth__howto p { margin: 0 0 8px; }
.qr-auth__howto .qr-auth__howto-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--qr-accent-dark);
}
.qr-auth__howto ul { margin: 0; padding: 0 0 0 18px; list-style: disc; }   /* style.css сбрасывает маркеры */
.qr-auth__howto li { margin: 0 0 4px; }
.qr-auth__howto li:last-child { margin-bottom: 0; }

/* сообщения из include/message.php (ошибка / успех) внутри карточки */
:is(.qr-auth, .qr-gate) .mess { margin: 0 0 16px; }
:is(.qr-auth, .qr-gate) .alert {
    margin: 0;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: var(--qr-r-m);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}
:is(.qr-auth, .qr-gate) .alert-danger  { color: var(--qr-bad); background: var(--qr-bad-soft); border-color: #F0D2CF; }
:is(.qr-auth, .qr-gate) .alert-success { color: var(--qr-ok);  background: var(--qr-ok-soft);  border-color: #CBE8DA; }
:is(.qr-auth, .qr-gate) .alert_img { display: none; }          /* ссылка на значок в message.php ведёт в никуда */
.qr-auth__card > br { display: none; }          /* message.php заканчивается <br> */

@media (max-width: 480px) {
    .qr-auth { padding: 20px 12px 32px; }
    .qr-auth__card { padding: 24px 18px 20px; }
    :is(.qr-auth, .qr-gate) .qr-auth__title { font-size: 21px; }
}

:is(.qr-auth, .qr-gate) a.qr-auth__btn { display: flex; margin-top: 0; text-decoration: none; }

/* Окно пароля на просмотр поверх страницы клиента (p.php). Закрывает всю страницу
   сплошной подложкой, а не прозрачной плёнкой: иначе сквозь неё читалось бы то,
   что ещё не должны видеть. Шапка сайта (z-index 1200) остаётся выше окна.
   Видимость задаёт инлайновый display из p.php (flex или none); по умолчанию скрыто. */
.qr-gate {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    padding: clamp(104px, 16vh, 150px) 16px 32px;
    background: var(--qr-bg-soft);
    font-family: var(--qr-font);
    color: var(--qr-ink);
}
@media (max-width: 480px) {
    .qr-gate { padding: 100px 12px 24px; }
}

/* На странице клиента подключён style_template.css с правилом input:valid { border: green }:
   пустое необязательное поле считается «корректным» и получало зелёную рамку без причины.
   В карточке возвращаем рамку палитры; наведение и фокус дублируем, потому что это правило
   тяжелее обычных .qr-input:hover / :focus. */
:is(.qr-auth, .qr-gate) .qr-input:valid { border-color: var(--qr-line); }
:is(.qr-auth, .qr-gate) .qr-input:valid:hover { border-color: #D8D2CA; }
:is(.qr-auth, .qr-gate) .qr-input:valid:focus {
    border-color: var(--qr-accent);
    box-shadow: 0 0 0 3px var(--qr-accent-soft);
}