/* ============================================================
   ГЕНЕРАТОР ПРОПУСКОВ v511 (25.10.2026): форма слева, живая
   карточка справа (классы pg-). Подключается до слоя стекла.
   ============================================================ */
.pg-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
.pg-form { display: flex; flex-direction: column; gap: 14px; }
.pg-form h2 { margin: 0; }
.pg-lead { margin: -6px 0 2px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.pg-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pg-field > span { font-weight: 700; font-size: 13px; }
.pg-field input, .pg-field select, .pg-fixed { width: 100%; min-height: 44px; font-size: 15px; }
.pg-fixed { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card-2, transparent); font-weight: 600; }
#pg-snils { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 18px; letter-spacing: .04em; }
.pg-field small { color: var(--muted); font-size: 12.5px; line-height: 1.4; min-height: 17px; }
.pg-field small b { color: var(--text); }
.pg-field small .is-bad { color: var(--danger, #b02a3d); font-weight: 600; }
.pg-field small .is-ok { color: #0f7a5f; font-weight: 600; }
[data-theme=dark] .pg-field small .is-ok { color: #7fd6b6; }
[data-theme=dark] .pg-field small .is-bad { color: #f19aa6; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pg-actions .primary { flex: 1 1 220px; min-height: 46px; font-size: 15px; }
.pg-actions .primary:disabled { opacity: .5; cursor: not-allowed; }
.pg-error { margin: 0; color: var(--danger, #b02a3d); font-weight: 600; }
.pg-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.pg-preview { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pg-card { width: 100%; max-width: 640px; aspect-ratio: 85.6 / 54; border-radius: 4.2% / 6.6%; overflow: hidden;
  background: #f4eee4; box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 18px 40px rgba(15, 23, 42, .18); }
.pg-card img { display: block; width: 100%; height: 100%; }
.pg-card-empty { display: grid; place-items: center; height: 100%; color: #8a7f70; font-size: 14px; }
.pg-preview p { margin: 0; color: var(--muted); font-size: 12.5px; }
@media (max-width: 980px) {
  .pg-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-preview { position: static; order: -1; }
}