.qs{max-width:460px;margin:0 auto;text-align:left;display:flex;flex-direction:column}
.qs-side{display:contents}
.qs-ctl{display:block;order:2}
.qs-view{order:1}.qs-tools{order:3}.qs-msg{order:4}
.qs-view{background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:14px;display:flex;justify-content:center;margin-bottom:18px}
.qs-view svg{display:block;width:100%;max-width:340px;height:auto;max-height:420px}
.qs-label{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#6b7280);margin:16px 0 8px}
.qs-designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.qs-d{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 7px;background:#fff;border:2px solid var(--border,#e5e7eb);border-radius:12px;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.qs-d:hover{border-color:var(--brand,#4285f4);transform:translateY(-2px)}
.qs-d.on{border-color:var(--brand,#4285f4);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#4285f4) 22%,transparent)}
.qs-d:focus-visible,.qs-p:focus-visible{outline:3px solid var(--brand,#4285f4);outline-offset:2px}
.qs-thumb{display:flex;width:100%;height:64px;align-items:center;justify-content:center}
.qs-thumb svg{max-width:100%;max-height:64px;width:auto;height:auto}
.qs-n{font-size:.74rem;font-weight:600;line-height:1.1;text-align:center}
.qs-d.locked .qs-thumb{opacity:.38;filter:grayscale(.7)}
.qs-d.locked{border-style:dashed}
.qs-lock{position:absolute;top:5px;right:6px;font-size:.78rem}
.qs-pal{display:flex;flex-wrap:wrap;gap:10px}
.qs-p{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--border,#d1d5db);cursor:pointer;padding:0}
.qs-p.on{box-shadow:0 0 0 3px var(--brand,#4285f4)}
.qs-logo input[type=file]{max-width:100%;margin:0 8px 6px 0}
.qs-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.qs-msg{min-height:1.4em;margin-top:10px;font-size:.88rem;color:var(--muted,#6b7280)}
.qs-msg.bad{color:#b91c1c}
@media (max-width:480px){.qs-designs{grid-template-columns:repeat(3,1fr)}}
.qs-text{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qs-text input[type=text]{flex:1 1 200px;min-width:0}
.qs-text input[type=color]{width:42px;height:38px;padding:2px;border-radius:10px;border:1px solid var(--border,#d1d5db);background:#fff;cursor:pointer}
.qs-custom{position:relative;display:flex;align-items:center;justify-content:center;background:conic-gradient(#ef4444,#facc15,#22c55e,#06b6d4,#8b5cf6,#ef4444);overflow:hidden;color:#fff;font-weight:800;font-size:1rem}
.qs-custom span{text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}
.qs-custom input{position:absolute;inset:-6px;opacity:0;cursor:pointer;width:44px;height:44px}
.qs-pal{max-width:100%}

/* desktop: preview + downloads on the left (stays in view), all options on the right */
.qs-page{max-width:1080px;margin:0 auto}
.qs-foot{margin-top:18px;text-align:center}
@media (min-width:980px){
  .qs-wide{max-width:none;display:grid;grid-template-columns:minmax(360px,420px) minmax(0,1fr);gap:36px;align-items:start}
  .qs-wide .qs-side{display:block;position:sticky;top:90px}
  .qs-wide .qs-view{margin-bottom:14px;padding:22px;min-height:340px;align-items:center}
  .qs-wide .qs-view svg{max-width:100%}
  .qs-wide .qs-tools{margin-top:0;justify-content:center}
  .qs-wide .qs-tools .btn{flex:1 1 0}
  .qs-wide .qs-msg{text-align:center}
  .qs-wide .qs-ctl{padding-left:36px;border-left:1px solid var(--border,#e5e7eb)}
  .qs-wide .qs-ctl>.qs-label:first-child{margin-top:0}
  .qs-wide .qs-designs{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .qs-wide .qs-thumb{height:76px}.qs-wide .qs-thumb svg{max-height:76px}
}

.qs-find input{width:100%;box-sizing:border-box;margin-bottom:10px}
.qs-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 6px;scrollbar-width:thin}
.qs-tab{flex:0 0 auto;border:1px solid var(--border,#e5e7eb);background:#fff;border-radius:999px;padding:7px 13px;font:700 .8rem inherit;color:inherit;cursor:pointer;white-space:nowrap}
.qs-tab span{opacity:.55;font-weight:600;margin-left:3px}
.qs-tab:hover{border-color:var(--brand,#4285f4)}
.qs-tab.on{background:var(--brand,#4285f4);border-color:var(--brand,#4285f4);color:#fff}
.qs-d[hidden]{display:none}
.qs-empty{padding:18px;text-align:center;color:var(--muted,#6b7280);font-size:.9rem}
.qs-wide .qs-designs{max-height:560px;overflow:auto;padding:4px;margin:-4px}