/* ---- layout ---- */
.gen{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-3);align-items:start;margin-top:var(--space-3)}
@media(max-width:900px){.gen{grid-template-columns:1fr}.gen-preview{order:-1}}

/* ---- type tabs ---- */
.types{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:var(--space-2)}
.type-b{font:inherit;font-size:var(--fs-xs);letter-spacing:var(--track-wide);text-transform:uppercase;
        background:var(--bg);color:var(--text-faint);border:1px solid var(--border);border-radius:var(--radius);
        padding:0.4rem 0.75rem;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.type-b:hover{color:var(--text);border-color:var(--border-hi)}
.type-b.on{background:rgba(61,220,132,0.12);color:var(--ok);border-color:var(--ok-dim)}
.type-hint{font-size:var(--fs-sm);color:var(--text-dim);margin-bottom:var(--space-2);min-height:1.6em}

/* ---- fields ---- */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
@media(max-width:620px){.fields{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:0.4rem}
.f.wide{grid-column:1/-1}
.f label{font-size:var(--fs-xs);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-faint)}
.f .box{display:flex;align-items:flex-start;gap:0.5rem;background:var(--bg);border:1px solid var(--border-hi);
        border-radius:var(--radius);padding:0.7rem var(--space-2);transition:border-color .15s ease,box-shadow .15s ease}
.f .box:hover{border-color:var(--ok-dim)}
.f .box:focus-within{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok-dim)}
.f .p{color:var(--ok);font-weight:700;flex:0 0 auto;line-height:1.6}
.f input[type=text],.f textarea,.f select{flex:1 1 auto;min-width:0;background:none;border:none;outline:none;
        font-family:var(--font-mono);font-size:var(--fs-base);line-height:1.6;color:var(--text);caret-color:var(--ok)}
.f textarea{resize:vertical;min-height:3rem}
.f select{cursor:pointer;appearance:none}
.f select option{background:var(--surface);color:var(--text)}
.f input::placeholder,.f textarea::placeholder{color:var(--text-faint)}
.f.check .box{align-items:center;cursor:pointer}
.f.check input{accent-color:var(--ok);width:15px;height:15px;cursor:pointer;flex:0 0 auto}
.f.check .ctext{font-size:var(--fs-sm);color:var(--text-dim)}

/* ---- presets ---- */
.pres{display:flex;flex-wrap:wrap;gap:0.5rem}
.pres-b{position:relative;display:flex;align-items:center;gap:0.5rem;font:inherit;font-size:var(--fs-xs);
        letter-spacing:var(--track-wide);background:var(--bg);color:var(--text-faint);border:1px solid var(--border);
        border-radius:var(--radius);padding:0.35rem 0.6rem;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.pres-b:hover{color:var(--text);border-color:var(--border-hi)}
.pres-b.on{color:var(--ok);border-color:var(--ok-dim);background:rgba(61,220,132,0.1)}
.pres-b .chip{width:16px;height:16px;border-radius:3px;flex:0 0 auto;border:1px solid rgba(255,255,255,0.15);position:relative;overflow:hidden}
.pres-b .chip::after{content:"";position:absolute;inset:3px 3px 3px 8px;background:var(--cfg);border-radius:1px}
.pres-b.locked{opacity:0.55}
.pres-b.locked:hover{color:var(--warn);border-color:var(--warn)}
.pres-b .lk{font-size:0.7rem}

/* ---- tolerance ---- */
.tol{display:flex;flex-wrap:wrap;gap:0.4rem}
.tol-b{font:inherit;font-size:var(--fs-xs);letter-spacing:var(--track-wide);text-transform:uppercase;
       background:var(--bg);color:var(--text-faint);border:1px solid var(--border);border-radius:var(--radius);
       padding:0.35rem 0.7rem;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.tol-b:hover{color:var(--text)}
.tol-b.on{background:rgba(61,220,132,0.12);color:var(--ok);border-color:var(--ok-dim)}
.tol-note{margin-top:0.5rem;font-size:var(--fs-xs);color:var(--text-faint)}

.ctrl{margin-top:var(--space-3)}
.ctrl-k{display:block;font-size:var(--fs-xs);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-faint);margin-bottom:0.6rem}

/* ---- preview ---- */
.gen-preview{position:sticky;top:76px}
.qwrap{border:1px solid var(--ok-dim);border-radius:var(--radius);
       background:radial-gradient(ellipse 70% 120% at 50% 0%,rgba(61,220,132,0.07),transparent 70%),var(--surface);
       padding:var(--space-3);display:flex;align-items:center;justify-content:center;min-height:250px;position:relative}
.qwrap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ok)}
#qcanvas{display:block;width:100%;max-width:240px;height:auto;image-rendering:pixelated;border-radius:2px}
.qempty,.qerr{font-size:var(--fs-sm);text-align:center;line-height:1.6;max-width:24ch}
.qempty{color:var(--text-faint)}
.qerr{color:var(--warn)}
.qmeta{margin-top:var(--space-2);display:grid;grid-template-columns:6.5rem 1fr;gap:0.3rem 0.6rem;font-size:var(--fs-xs)}
.qmeta .kk{color:var(--text-faint)}
.qmeta .kk::before{content:'· '}
.qmeta .kd{color:var(--text-dim);font-variant-numeric:tabular-nums}
.acts{margin-top:var(--space-2);display:flex;gap:0.5rem;flex-wrap:wrap}
.btn{font:inherit;font-size:var(--fs-xs);letter-spacing:var(--track-wide);text-transform:uppercase;background:var(--bg);
     color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius);padding:0.45rem 0.8rem;cursor:pointer;
     transition:color .15s ease,border-color .15s ease}
.btn:hover:not(:disabled){color:var(--ok);border-color:var(--ok-dim)}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.btn--pri{border-color:var(--ok-dim);color:var(--ok)}
.sizerow{margin-top:var(--space-2);display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.sizerow .ctrl-k{margin:0}

/* ---- FAQ ---- */
.faq{margin-top:var(--space-5)}
.faq details{border-bottom:1px solid var(--border);padding:0}
.faq details[open]{background:linear-gradient(180deg,rgba(61,220,132,0.03),transparent 60%)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-2) 0;font-size:var(--fs-base);color:var(--text);
             display:flex;align-items:center;gap:0.6rem;transition:color .15s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--ok);font-weight:700;flex:0 0 auto;width:1ch}
.faq details[open] summary::before{content:'\2212'}
.faq summary:hover{color:var(--ok)}
.faq .a{padding:0 0 var(--space-2) 1.6rem;color:var(--text-dim);font-size:var(--fs-sm);max-width:70ch}
.faq .a p+p{margin-top:var(--space-1)}
.faq .a ul{margin:var(--space-1) 0 0 1.1rem}
.faq .a li{margin-bottom:0.2rem}
.faq .a a{color:var(--ok);border-bottom-color:var(--ok-dim)}

.toast{position:fixed;bottom:var(--space-3);left:50%;transform:translateX(-50%);background:var(--surface-2);
       border:1px solid var(--ok-dim);border-radius:var(--radius);padding:0.6rem var(--space-3);
       font-size:var(--fs-sm);color:var(--text);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:50}
.toast.show{opacity:1}
.toast.bad{border-color:var(--warn)}

/* ---- locked presets: recede, don't shout ---- */
.pres-b.locked{opacity:1;color:var(--text-faint);border-color:var(--border);border-style:dashed;background:transparent}
.pres-b.locked .chip{filter:saturate(0.25) brightness(0.7);opacity:0.6}
.pres-b.locked:hover{color:var(--ok);border-color:var(--ok-dim);border-style:solid}
.pres-b.locked:hover .chip{filter:none;opacity:1}
.pres-b .lk{font-size:0.85em;color:var(--text-faint);font-weight:700;line-height:1}
.pres-b.locked:hover .lk{color:var(--ok)}
.pres-note{margin-top:0.6rem;font-size:var(--fs-xs);color:var(--text-faint)}
.pres-note a{color:var(--ok);border-bottom-color:var(--ok-dim)}

/* even preset grid — no orphan on the wrap */
.pres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5rem}
.pres-b{justify-content:flex-start}
@media(max-width:760px){.pres{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.pres{grid-template-columns:repeat(2,minmax(0,1fr))}}