/* Builder-only styles, layered on styles.css so the form matches the funnel. */

body.builder .stage{align-items:flex-start; max-width:560px; margin:0 auto; width:100%}
body.builder .screen.active{width:100%; padding-bottom:40px; text-align:left}
body.builder .headline{text-align:left; margin-top:22px}
body.builder .subhead{text-align:left}
.wordmark{font-size:20px; font-weight:800; color:var(--secondary)}

.form{display:flex; flex-direction:column; gap:14px}
fieldset{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px 6px; margin:0;
  display:flex; flex-direction:column; gap:12px;
  background:var(--card);
}
legend{font-weight:800; color:var(--secondary); padding:0 6px}

.field{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:700; color:var(--muted)}
.field b{color:#C0392B}
.field input[type=text],.field input[type=url],.field input[type=password],
.field input[type=number],.field textarea,#url-out{
  width:100%; padding:11px 12px;
  font:inherit; font-size:15px; font-weight:500; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; background:#fff;
}
.field textarea,#url-out{resize:vertical; font-family:inherit}
#url-out{font-family:ui-monospace,Consolas,monospace; font-size:12px; word-break:break-all}
.field input[type=color]{width:100%; height:40px; border:1px solid var(--line); border-radius:10px; background:#fff; padding:2px}

.row{display:flex; gap:8px; align-items:stretch}
.row > input{flex:1}
.row.colors > .field{flex:1}

.btn-small{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; white-space:nowrap;
  background:var(--secondary); color:#fff;
  font:inherit; font-size:13px; font-weight:800;
  text-decoration:none; border:none; border-radius:10px; cursor:pointer;
}
.btn-small:active{filter:brightness(.9)}
.btn-small[disabled]{opacity:.5; cursor:wait}

.hint{font-size:12px; color:var(--muted); font-weight:600; margin:0}
.err{color:#C0392B; font-weight:700; font-size:14px; margin:0}
.ok{color:#1E8449}

#qr{display:block; max-width:320px; width:100%; height:auto; margin:8px 0; border:1px solid var(--line); border-radius:10px}
#result{display:flex; flex-direction:column; gap:10px; margin-top:20px}