/* ELL. QR generator (EXT-06) — ui/qr-tool.php. Scoped to .qrt, built on kit.css components. */
.svc3 .qrt{margin:8px clamp(0px,4.4cqi,52px) 0;padding:clamp(20px,3cqi,32px);border-radius:30px;scroll-margin-top:150px}
.qrt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qrt-head h2{font-size:clamp(24px,3cqi,32px);font-weight:800;letter-spacing:-.03em;margin:0}
.qrt-note{color:var(--m);margin:10px 0 22px;max-width:720px;font-size:15px}
.qrt-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,3cqi,36px);align-items:start}
.qrt-form{display:grid;gap:16px;min-width:0}
.qrt-types{flex-wrap:wrap}
.qrt-fields{display:grid;gap:12px}
.qrt-two{grid-template-columns:1fr 1fr}.qrt-two .qrt-wide{grid-column:1/-1}
.qrt label{display:grid;gap:6px;font-size:13.5px;font-weight:700;color:var(--t)}
.pro-shell .qrt input:not([type=checkbox]):not([type=color]):not([type=file]),.pro-shell .qrt select,.pro-shell .qrt textarea{width:100%;min-height:46px;padding:11px 14px;border-radius:14px;border:1px solid var(--l);background:var(--s);color:var(--t);font:500 15px Onest,system-ui,sans-serif;box-shadow:none}
.pro-shell .qrt textarea{min-height:110px;resize:vertical;line-height:1.45}
.pro-shell .qrt input:focus-visible,.pro-shell .qrt select:focus-visible,.pro-shell .qrt textarea:focus-visible{outline:0;border-color:var(--b);box-shadow:0 0 0 4px color-mix(in srgb,var(--b) 16%,transparent)}
.qrt .qrt-check{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;align-self:end;min-height:46px}
.qrt .qrt-check input{width:20px;height:20px;accent-color:var(--b);margin:0}
.qrt-set{border:0;margin:0;padding:16px;border-radius:20px;background:color-mix(in srgb,var(--s2) 70%,transparent);display:grid;gap:14px;min-width:0}
.qrt-set legend{float:left;font-size:14px;font-weight:800;padding:0;margin:0 0 2px}
.qrt-set legend+*{clear:both}
.qrt-colors{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qrt-sw{width:36px;height:36px;border-radius:50%;border:3px solid var(--s);box-shadow:0 0 0 1px var(--l);cursor:pointer;padding:0;transition:transform .2s var(--spring),box-shadow .2s}
.qrt-sw[aria-checked=true]{box-shadow:0 0 0 2px var(--b);transform:scale(1.08)}
.pro-shell .qrt .qrt-c0{background:#121320}.pro-shell .qrt .qrt-c1{background:#4b3bdb}.pro-shell .qrt .qrt-c2{background:#0f4c81}.pro-shell .qrt .qrt-c3{background:#0f7a4f}.pro-shell .qrt .qrt-c4{background:#a3222f}.pro-shell .qrt .qrt-c5{background:#6b3f1f}
.qrt .qrt-custom{position:relative;width:36px;height:36px;border-radius:50%;overflow:hidden;background:conic-gradient(#f44,#fc3,#4c6,#3cf,#66f,#c4f,#f44);box-shadow:0 0 0 1px var(--l);cursor:pointer}
.qrt .qrt-custom input{position:absolute;inset:-8px;width:52px;height:52px;opacity:0;cursor:pointer;border:0;padding:0}
.qrt-logo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qrt .qrt-file{position:relative;display:inline-flex;font-size:14px;cursor:pointer;overflow:hidden}
.qrt .qrt-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.qrt-link{border:0;background:none;color:var(--bt);font-weight:700;cursor:pointer;padding:6px 0;font-size:14px}
.qrt-small{font-size:12.5px;color:var(--m);line-height:1.45}
.qrt-plate{display:grid;gap:12px}
.qrt-presets{display:flex;flex-wrap:wrap;gap:8px}
.qrt-presets .chip{cursor:pointer}
.qrt-preview{position:sticky;top:120px;display:grid;gap:12px;justify-items:center;min-width:0}
.qrt-stage{width:100%;max-width:380px;aspect-ratio:1;display:grid;place-items:center;padding:18px;border-radius:26px;background:#fff;box-shadow:var(--sh);border:1px solid var(--l)}
.qrt-stage.plate{aspect-ratio:600/840;max-width:340px;padding:0;background:transparent;box-shadow:none;border:0}
.qrt-stage svg{width:100%;height:auto;display:block}
.qrt-stage.plate svg{filter:drop-shadow(0 18px 30px rgba(20,20,60,.16))}
.qrt-stage .qrt-empty{color:#6a6b80;text-align:center;font-size:15px;padding:0 16px}
.qrt-meta{font-size:12.5px;color:var(--m);text-align:center;margin:0}
.qrt-warn{margin:0;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,#f59e0b 16%,transparent);color:var(--t);font-size:13.5px;text-align:center}
.qrt-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.qrt-actions .btn[disabled]{opacity:.45;cursor:not-allowed}
.qrt-preview>.qrt-small{text-align:center;max-width:380px}
@container ek (max-width:820px){.qrt-grid{grid-template-columns:1fr;gap:16px}.qrt-form{display:contents}.qrt-types{order:1}.qrt-fields{order:2}.qrt-preview{position:static;order:3}.qrt-set{order:4}}
@container ek (max-width:520px){.qrt-two{grid-template-columns:1fr}.qrt-stage{max-width:300px}}
@media (max-width:1100px),(max-width:1366px) and (hover:none) and (pointer:coarse){.svc3 .qrt{margin:8px 0 0;padding:18px;border-radius:26px}}
/* site icon rules give every svg a stroke — the code must have none */
.pro-shell .qrt-stage svg,.pro-shell .qrt-stage svg *:not(.qrt-frame){stroke:none;stroke-width:0}
.ek .qrt .seg button[aria-pressed=true]{background:var(--s)!important;color:var(--t);box-shadow:var(--sh)}
/* five types never push the page sideways: the switch scrolls like the section menu */
.ek .qrt .qrt-types{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}.ek .qrt .qrt-types::-webkit-scrollbar{display:none}.ek .qrt .qrt-types button{flex:none}