:root{--brand:#0ea5e9;--brand2:#22c55e}
.rng{width:calc(100% - 50px);vertical-align:middle;accent-color:var(--brand)}
.qv{display:inline-block;width:40px;text-align:right;font-weight:700}
.chk{display:flex;gap:8px;align-items:center;margin:10px 0 0;font-size:14px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:10px 0 0}
.row2 label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.row2 input{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}
canvas.preview{touch-action:none;max-height:70vh;width:auto;max-width:100%}
.picked,.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0 0}
.swatch{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:6px}
.swatch i{grid-row:span 2;width:36px;height:36px;border-radius:8px;border:1px solid var(--line)}
.swatch b{font-size:14px}.swatch small{font-size:11px;color:var(--muted)}
.ocrout{min-height:220px;font:14px/1.5 ui-monospace,Consolas,monospace;text-align:left}