/* Генератор QR-карточки (proyavka.com/qr-kod/) — в цветах нишевых страниц (niche.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(34px,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:640px;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;flex-direction:column;align-items:center;gap:14px}
.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-preview.sheet canvas{max-width:400px;border-radius:3px}
/* листать столы и листы бейджей */
.qg-pager{display:flex;align-items:center;justify-content:center;gap:12px;max-width:100%;font:14px/1.3 Inter,system-ui,sans-serif;color:#C9C2B5;text-align:center}
.qg-pager .qg-chip{width:38px;height:38px;padding:0;justify-content:center;font-size:20px;flex:none}
.qg-pager span{min-width:0;overflow-wrap:anywhere}
.qg-panel{display:flex;flex-direction:column;gap:20px;counter-reset:qgn}
.qg [hidden]{display:none!important}
/* номера шагов считает CSS: у каждого режима свой набор блоков, скрытые не считаются */
.qg-num>.qg-lbl::before{counter-increment:qgn;content:counter(qgn) ". "}
.qg-block{display:flex;flex-direction:column;gap:10px}
.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.bad{border-color:#c96a4e}
.qg-hint{margin:0;font-size:13px;line-height:1.55;color:#9A958E}
.qg-hint a{color:#C9A84C}
.qg-hint.warn{color:#e08a6e}
.qg-cap{font-size:14px;color:#C9C2B5}
.qg-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px}
.qg-short{max-width:200px}
.qg-step{display:inline-flex;align-items:center;gap:6px}
.qg-step .qg-chip{width:38px;height:38px;padding:0;justify-content:center;font-size:18px}
.qg-step .qg-in{width:70px;padding:8px 6px;text-align:center;-moz-appearance:textfield;appearance:textfield}
.qg-step .qg-in::-webkit-inner-spin-button,.qg-step .qg-in::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.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)}
.qg-custom{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:#C9C2B5}
.qg-custom input{width:38px;height:30px;padding:0;border:1px solid #2a2520;border-radius:8px;background:none;cursor:pointer}
.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) на них не действуют (скрин 25.10) */
.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.off button{opacity:.55}
.qg-dl.busy button{opacity:.55;cursor:progress}
.qg-msg{margin:0;min-height:1.4em;font-size:14px;line-height:1.5;color:#C9A84C}
.qg-msg.warn{color:#e08a6e}

/* перекрёстная ссылка на конструктор приглашений */
.qg-x{max-width:1032px;margin:0 auto 10px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;padding:20px 24px;background:#15130d;border:1px solid #2a2520;border-left:3px solid #C9A84C;border-radius:14px}
.qg-x p{margin:0;flex:1 1 320px;font-size:15px;line-height:1.55;color:#C9C2B5}
.qg-x b{color:#F2ECE0;font-weight:600}
.qg-x a{flex:none;color:#C9A84C;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(201,168,76,.4)}
.qg-x a:hover{border-bottom-color:#C9A84C}

@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}
  .qg-preview.sheet canvas{max-width:300px}
  .qg-x{margin:0 24px 10px}
}
@media (prefers-reduced-motion:reduce){.qg-chip{transition:none}}