/* Генератор QR-кодов. Опирается на токены темы (--ink/--text/--muted/--line/--surface),
   поэтому светлая и тёмная темы работают без отдельных правил. Изумруд — тот же акцент,
   что у письма с отчётом и страницы-документа. */
.qrs{--qrs-acc:#10b981;--qrs-acc-d:#0e9f6e;
     --qrs-ink:var(--ink,#14161A);--qrs-txt:var(--text,#3A3F46);--qrs-mut:var(--muted,#62686F);
     --qrs-line:var(--line,#DFE2E6);--qrs-surf:var(--surface,#fff);--qrs-surf2:var(--surface-2,#EDEFF1);
     font-family:var(--font-body,'Inter',-apple-system,Segoe UI,Roboto,sans-serif);}

/* ---------- выбор типа содержимого ---------- */
.qrs-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
.qrs-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;cursor:pointer;
  border:1px solid var(--qrs-line);background:var(--qrs-surf);color:var(--qrs-txt);
  font:600 13.5px/1 inherit;transition:border-color .15s,color .15s,background .15s;}
.qrs-tab:hover{border-color:var(--qrs-acc);color:var(--qrs-ink);}
.qrs-tab.on{background:var(--qrs-acc);border-color:var(--qrs-acc);color:#fff;}
.qrs-tab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- сетка: форма слева, предпросмотр справа ---------- */
.qrs-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start;}
@media (max-width:900px){.qrs-grid{grid-template-columns:1fr;}}

.qrs-card{background:var(--qrs-surf);border:1px solid var(--qrs-line);border-radius:14px;padding:20px 22px;margin:0 0 16px;}
.qrs-card h3{margin:0 0 16px;font:700 14px/1 var(--font-head,'Space Grotesk',sans-serif);color:var(--qrs-ink);
  letter-spacing:.02em;display:flex;align-items:center;gap:9px;}
.qrs-card h3::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--qrs-acc);}

.qrs-row{margin:0 0 14px;}
.qrs-row:last-child{margin-bottom:0;}
.qrs-row label,.qrs-lbl{display:block;margin:0 0 6px;font:600 12.5px/1.3 inherit;color:var(--qrs-mut);}
.qrs-in,.qrs-sel,.qrs-ta{width:100%;padding:10px 13px;border-radius:9px;border:1px solid var(--field-border,#8A9099);
  background:var(--field-bg,#fff);color:var(--qrs-ink);font:400 14.5px/1.4 inherit;}
.qrs-ta{min-height:96px;resize:vertical;}
.qrs-in:focus,.qrs-sel:focus,.qrs-ta:focus{outline:2px solid var(--qrs-acc);outline-offset:1px;border-color:var(--qrs-acc);}
.qrs-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:520px){.qrs-two{grid-template-columns:1fr;}}
.qrs-hint{margin:6px 0 0;font:400 12px/1.5 inherit;color:var(--qrs-mut);}

/* ---------- цвета ---------- */
.qrs-colors{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.qrs-colors input[type=color]{width:44px;height:38px;padding:2px;border:1px solid var(--qrs-line);border-radius:9px;
  background:var(--qrs-surf);cursor:pointer;}
.qrs-dim{opacity:.42;pointer-events:none;}

.qrs-presets{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.qrs-preset{width:34px;height:34px;border-radius:9px;border:2px solid var(--qrs-line);cursor:pointer;padding:0;
  transition:transform .12s,border-color .12s;}
.qrs-preset:hover{transform:translateY(-2px);border-color:var(--qrs-acc);}

/* ---------- переключатели-кнопки ---------- */
.qrs-seg{display:inline-flex;border:1px solid var(--qrs-line);border-radius:10px;overflow:hidden;}
.qrs-seg button{padding:8px 13px;border:0;background:var(--qrs-surf);color:var(--qrs-txt);cursor:pointer;
  font:600 12.5px/1 inherit;border-right:1px solid var(--qrs-line);}
.qrs-seg button:last-child{border-right:0;}
.qrs-seg button.on{background:var(--qrs-acc);color:#fff;}

/* Видов рамки шесть — в слитную полосу .qrs-seg они не помещаются и на узком экране
   уезжают за край. Поэтому отдельные кнопки с переносом строк. */
.qrs-chips{display:flex;flex-wrap:wrap;gap:8px;}
.qrs-chips button{padding:8px 13px;border-radius:9px;border:1px solid var(--qrs-line);background:var(--qrs-surf);
  color:var(--qrs-txt);cursor:pointer;font:600 12.5px/1 inherit;transition:border-color .15s,background .15s,color .15s;}
.qrs-chips button:hover{border-color:var(--qrs-acc);color:var(--qrs-ink);}
.qrs-chips button.on{background:var(--qrs-acc);border-color:var(--qrs-acc);color:#fff;}

.qrs-three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:520px){.qrs-three{grid-template-columns:1fr;}}

.qrs-check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:400 13.5px/1 inherit;color:var(--qrs-txt);}
.qrs-check input{width:17px;height:17px;accent-color:var(--qrs-acc);cursor:pointer;}

.qrs-range{width:100%;accent-color:var(--qrs-acc);}
.qrs-range-row{display:flex;align-items:center;gap:12px;}
.qrs-range-row output{min-width:52px;text-align:right;font:600 13px/1 inherit;color:var(--qrs-ink);
  font-variant-numeric:tabular-nums;}

/* ---------- предпросмотр ---------- */
.qrs-side{position:sticky;top:16px;}
.qrs-preview{background:var(--qrs-surf);border:1px solid var(--qrs-line);border-radius:14px;padding:22px;text-align:center;}
/* Шахматка показывает, что фон действительно прозрачный, а не белый. */
.qrs-stage{min-height:300px;display:flex;align-items:center;justify-content:center;border-radius:12px;padding:14px;
  background-color:var(--qrs-surf2);
  background-image:linear-gradient(45deg,rgba(0,0,0,.05) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.05) 75%),
                   linear-gradient(45deg,rgba(0,0,0,.05) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.05) 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;}
.qrs-stage svg{max-width:100%;height:auto;display:block;}
.qrs-stage.qrs-empty{color:var(--qrs-mut);font:400 13.5px/1.5 inherit;}
.qrs-info{margin:12px 0 0;font:400 12px/1.4 inherit;color:var(--qrs-mut);font-variant-numeric:tabular-nums;min-height:16px;}

.qrs-actions{display:flex;flex-direction:column;gap:9px;margin:16px 0 0;}
.qrs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;
  border:1px solid var(--qrs-line);background:var(--qrs-surf);color:var(--qrs-ink);cursor:pointer;
  font:600 14px/1 inherit;transition:border-color .15s,background .15s,color .15s;}
.qrs-btn:hover:not(:disabled){border-color:var(--qrs-acc);color:var(--qrs-acc-d);}
.qrs-btn.pri{background:var(--qrs-acc);border-color:var(--qrs-acc);color:#fff;}
.qrs-btn.pri:hover:not(:disabled){background:var(--qrs-acc-d);border-color:var(--qrs-acc-d);color:#fff;}
.qrs-btn:disabled,.qrs-btn.qrs-off{opacity:.45;cursor:not-allowed;}
.qrs-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.qrs-note{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:rgba(16,185,129,.08);
  border-left:3px solid var(--qrs-acc);font:400 12.5px/1.6 inherit;color:var(--qrs-txt);}

/* Галочка «без фона» — выделена рамкой: пользователь дважды не нашёл её обычной строкой.
   Во включённом состоянии подсвечивается акцентом, чтобы состояние читалось с одного взгляда. */
.qrs-check-hi{padding:8px 11px;border:1px dashed var(--qrs-line);border-radius:9px;
  transition:border-color .15s,background .15s,color .15s;}
.qrs-check-hi:hover{border-color:var(--qrs-acc);}
.qrs-check-hi:has(input:checked){border-style:solid;border-color:var(--qrs-acc);
  background:rgba(16,185,129,.08);color:var(--qrs-ink);font-weight:600;}