/* Конструктор приглашений (proyavka.com/priglashenie/) — в цветах нишевых страниц (niche.css).
   Правила .qg-* скопированы из /qr-kod/qr-gen.css (тот файл здесь не подключаем — он живёт своей жизнью). */
.qg-hero{max-width:1080px;margin:0 auto;padding:34px 24px 10px;text-align:center}
.qg-hero .crumbs{padding:0;margin:0 0 22px;text-align:left}
.qg-hero .kicker{text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#C9A84C;margin-bottom:14px}
.qg-hero h1{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(32px,6vw,52px);line-height:1.1;margin:0 auto 16px;color:#F2ECE0;text-wrap:balance}
.qg-hero h1 em{color:#C9A84C}
.qg-hero .lede{font-size:17px;color:#C9C2B5;max-width:660px;margin:0 auto}

.qg{max-width:1080px;margin:0 auto;padding:30px 24px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;align-items:start}
.qg-preview{position:sticky;top:84px;background:#15130d;border:1px solid #2a2520;border-radius:18px;padding:22px;display:flex;justify-content:center}
.qg-preview canvas{display:block;width:100%;max-width:360px;height:auto;border-radius:6px;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.qg-panel{display:flex;flex-direction:column;gap:20px;min-width:0}
.qg-block{display:flex;flex-direction:column;gap:10px;min-width:0}
.qg-lbl{font-family:'Playfair Display',Georgia,serif;font-size:18px;color:#F2ECE0}
.qg-in{width:100%;box-sizing:border-box;background:#15130d;border:1px solid #2a2520;border-radius:12px;padding:12px 14px;color:#F2ECE0;font:15px/1.4 Inter,system-ui,sans-serif;resize:vertical}
.qg-in:focus{outline:none;border-color:#C9A84C}
.qg-in:focus-visible{outline:2px solid #C9A84C;outline-offset:1px}
.qg-in.bad{border-color:#c96a4e}
.qg-hint{margin:0;font-size:13px;line-height:1.55;color:#9A958E}
.qg-hint a{color:#C9A84C;text-decoration:underline;text-underline-offset:2px}
.qg-chips{display:flex;flex-wrap:wrap;gap:8px}
.qg-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:22px;border:1px solid #2a2520;background:#15130d;color:#C9C2B5;font:14px/1.1 Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.qg-chip:hover{border-color:#5a4e36;color:#F2ECE0}
.qg-chip.on{border-color:#C9A84C;color:#C9A84C;background:rgba(201,168,76,.08)}
.qg-chip:focus-visible{outline:2px solid #C9A84C;outline-offset:2px}
.qg-chip i{width:14px;height:14px;border-radius:50%;background:var(--sw,#a8852e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);flex:0 0 auto}
.qg-dl{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.qg-dl button{font:600 15px/1.2 Inter,system-ui,sans-serif;cursor:pointer;padding:14px 24px;border-radius:30px}
/* кнопки — <button>, а не <a>: стили niche.css (a.btn-gold/a.btn-ghost) на них не действуют */
.qg-dl .btn-gold{background:linear-gradient(105deg,#A9710F 0%,#BE922F 16%,#F8E47B 36%,#EAD779 50%,#CCA641 72%,#A9710F 100%);background-size:220% auto;color:#2A1E06;border:1px solid #F8E47B;transition:background-position .3s,box-shadow .3s}
.qg-dl .btn-gold:hover{background-position:100% center;box-shadow:0 12px 30px rgba(201,168,76,.3)}
.qg-dl .btn-ghost{background:transparent;color:#E8E2D5;border:1px solid #3a3326}
.qg-dl .btn-ghost:hover{border-color:#C9A84C;color:#C9A84C}
.qg-dl button:focus-visible{outline:2px solid #F2ECE0;outline-offset:3px}
.qg-dl.off button{opacity:.55}
.qg-msg{margin:0;min-height:1.4em;font-size:14px;line-height:1.5;color:#C9A84C}
.qg-msg.warn{color:#e08a6e}

/* --- своё у конструктора приглашений --- */
.qg-preview{flex-direction:column;align-items:center;gap:12px}
.inv-cap{margin:0;font-size:12.5px;color:#9A958E;text-align:center}
/* фоны: вкладки групп, как в приложении, и образцы с названием */
.inv-grp .qg-chip{padding:6px 11px;font-size:13px}
.qg-chips.inv-off{opacity:.42}
.qg-chip:disabled{cursor:not-allowed}
.qg-chip:disabled:hover{border-color:#2a2520;color:#C9C2B5}
.qg-chips.inv-off .qg-chip.on{border-color:#5a4e36;color:#C9C2B5;background:#15130d}
#invBg .qg-chip i{width:18px;height:18px}
.inv-note{margin:0;font-size:13px;line-height:1.5;color:#C9C2B5;background:#15130d;border:1px dashed #3a3326;border-radius:10px;padding:9px 12px}
.inv-note[hidden]{display:none}
/* выбор фото: сам input виден экранному диктору и клавиатуре, а снаружи — кнопка */
.inv-file{position:relative;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:11px 18px;border-radius:30px;border:1px solid #3a3326;color:#E8E2D5;font:600 14px/1.2 Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.inv-file:hover{border-color:#C9A84C;color:#C9A84C}
.inv-file input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.inv-file:focus-within{outline:2px solid #C9A84C;outline-offset:2px}
.inv-photo-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.inv-photo-name{font-size:13px;color:#9A958E}
.inv-link-btn{background:none;border:0;padding:0;color:#C9A84C;font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.inv-link-btn:focus-visible{outline:2px solid #C9A84C;outline-offset:2px;border-radius:4px}
.inv-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.inv-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.inv-field>span{font-size:13px;color:#9A958E}
.inv-field input[type=date]{color-scheme:dark;min-height:46px}
/* переключатель QR */
.inv-switch{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:15px;color:#E8E2D5}
.inv-switch input{appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;width:46px;height:26px;border-radius:13px;background:#2a2520;border:1px solid #3a3326;position:relative;cursor:pointer;transition:background .2s}
.inv-switch input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#9A958E;transition:transform .2s,background .2s}
.inv-switch input:checked{background:rgba(201,168,76,.25);border-color:#C9A84C}
.inv-switch input:checked::after{transform:translateX(20px);background:#C9A84C}
.inv-switch input:focus-visible{outline:2px solid #C9A84C;outline-offset:3px}
.inv-stack{display:flex;flex-direction:column;gap:10px}
.inv-stack[hidden]{display:none}
.inv-top{display:none;font-size:14px}
/* перекрёстные ссылки на страницы праздников */
.inv-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px;margin:0 auto}
body.niche .inv-links a{display:inline-block;padding:10px 16px;border:1px solid #2a2520;border-radius:22px;background:#15130d;color:#E8E2D5;font-size:14.5px;transition:border-color .2s,color .2s}
body.niche .inv-links a:hover{border-color:#C9A84C;color:#C9A84C}
.inv-section-p{max-width:760px;margin:22px auto 0;text-align:center;line-height:1.7;color:#C9C2B5}
.inv-section-p.lead{margin:0 auto 24px}
body.niche main a:focus-visible{outline:2px solid #C9A84C;outline-offset:2px;border-radius:4px}   /* только генератор: подвал фокусируется как на главной */

@media (min-width:861px) and (max-width:1020px){
  .qg-preview{top:108px}   /* шапка здесь в две строки (94 px) — превью не заезжает под неё */
}
@media (max-width:860px){
  .qg{grid-template-columns:1fr;gap:22px;padding-top:18px}
  .qg-preview{position:relative;top:0;padding:16px}
  .qg-preview canvas{max-width:260px}
  .inv-top{display:inline-block}
}
@media (max-width:420px){
  .qg{padding-left:16px;padding-right:16px}
  .qg-hero{padding-left:16px;padding-right:16px}
  .inv-two{grid-template-columns:1fr}
  .qg-dl button{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .qg-chip,.inv-file,.inv-switch input,.inv-switch input::after,.qg-dl .btn-gold,body.niche .inv-links a{transition:none}
}