.tool-head{padding:40px 0 8px}
.tool-head h1{font-size:clamp(2rem,7vw,3rem);margin-top:10px}
.tool-head .lead{margin:10px 0 0}
.back{text-decoration:none;color:var(--muted);font-weight:600;font-size:.92rem}.back:hover{color:var(--fg)}
.qr{display:grid;gap:20px;padding-top:20px;padding-bottom:40px;grid-template-areas:"content" "preview" "design"}
.qr>.panel:first-child{grid-area:content}.qr>.design{grid-area:design}.qr>.preview{grid-area:preview}
@media(min-width:860px){.qr{grid-template-columns:1.1fr .9fr;grid-template-areas:"content preview" "design preview";grid-template-rows:auto 1fr;align-items:start}.preview{position:sticky;top:84px}}
.panel,.preview{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:18px;padding:4px;background:var(--surface);border-radius:999px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;font:inherit;font-weight:600;font-size:.9rem;padding:9px 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.tab[aria-selected=true]{background:var(--lime);color:var(--lime-ink)}
.fields{display:grid;gap:14px}.fields[hidden]{display:none}
.field{display:grid;gap:6px;font-size:.9rem;font-weight:600}
.field input:not([type=color]):not([type=range]),.field textarea,.field select{width:100%;font:inherit;font-weight:400;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);background:var(--bg);color:var(--fg)}
.field textarea{resize:vertical;min-height:80px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 35%,transparent)}
.field input[type=color]{width:100%;height:44px;padding:3px;border-radius:12px;border:1.5px solid var(--border);background:var(--bg);cursor:pointer}
.field input[type=range]{accent-color:#7ccf00;width:100%}
.warn{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#fff3cd;color:#5c4400;font-size:.9rem}
.qr-box{display:grid;place-items:center;min-height:280px;border-radius:16px;background:var(--surface);border:1px dashed var(--border);padding:14px;overflow:hidden}
.qr-box img{width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:6px;display:none}
.qr-box.ready{border-style:solid;background:#fff;padding:8px}
.qr-box.ready img{display:block}
.qr-box.checker.ready{background:repeating-conic-gradient(#e4e8dc 0 25%,#fff 0 50%) 0 0/16px 16px}
.qr-box.ready .placeholder{display:none}
.placeholder{color:var(--muted);text-align:center;margin:0}
.preview .actions{margin-top:16px}.preview .actions .btn{flex:1}
.preview .muted{margin:14px 0 0;text-align:center}

.design h2{font-size:1.3rem;margin-bottom:14px}
fieldset{border:0;border-top:1px solid var(--border);margin:0;padding:14px 0 6px;display:grid;gap:12px;min-width:0}
legend{font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 8px 0 0;float:left;width:100%;margin-bottom:6px}
legend+*{clear:both}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.seg{display:flex;gap:4px;padding:4px;background:var(--surface);border-radius:999px;width:fit-content;max-width:100%;overflow-x:auto}
.seg button{font:inherit;font-weight:600;font-size:.88rem;padding:8px 16px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--lime);color:#0a0a0a}
.check{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer}
.check input{width:18px;height:18px;accent-color:#7ccf00}
.presets{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));margin-bottom:14px}
.preset{display:flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:.85rem;padding:8px 10px;border-radius:12px;border:1.5px solid var(--border);background:var(--bg);color:var(--fg);cursor:pointer;transition:transform .15s,border-color .15s}
.preset:hover{transform:translateY(-2px);border-color:var(--lime)}
.sw{width:22px;height:22px;border-radius:6px;flex:none}
.field select:disabled,.field input:disabled{opacity:.5}
.modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);display:grid;place-items:center;padding:20px;overflow:auto}
.modal[hidden]{display:none}
.modal-card{width:100%;max-width:420px;background:var(--card);border-radius:var(--r);padding:24px;display:grid;gap:14px;text-align:center;justify-items:center}
.modal-card h2{font-size:1.5rem}.modal-card p{margin:0}
.ad-modal{width:100%;max-width:336px;min-height:250px}