/* Builder in "warm ivory": a light, neutral workshop so the card's own colours read true, with the brand kept in
   emerald (text, selected states) and gold (primary buttons, accents). Loaded after app.css, scoped to body.builder. */
body.builder{
  --page:#FBF7EF;--side:#FBF7EF;--card:#FFFDF8;--card2:#F5EEE1;--field:#FFFFFF;
  --ink:#1D2A24;--ink2:#5B665F;--line:#E2D7C1;--line2:#ECE4D4;
  --emerald:#0F2A22;--emerald2:#1C4337;--on-emerald:#FBF7EF;
  --gold:#B8893B;--gold-text:#7E5B1C;--gold-lo:#9C7A2E;--gold-hi:#E9C77A;--on-gold:#1A1307;
  --brand:var(--emerald);--brand2:var(--gold);--paper:var(--page);
  --stage:#E9E1D3;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Bodoni Moda",Georgia,serif;
  --foil:linear-gradient(100deg,var(--gold-lo) 0%,var(--gold) 25%,var(--gold-hi) 48%,var(--gold) 66%,var(--gold-lo) 100%);
  color-scheme:light;background:var(--page);color:var(--ink);font:15px/1.55 var(--sans);-webkit-tap-highlight-color:rgba(184,137,59,.18)}
.builder :focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.builder a{color:var(--gold-text)}.builder a:hover{color:var(--emerald)}
/* top bar */
.builder .topbar{background:var(--card);border-bottom:1px solid var(--line);min-height:64px}
.builder .brand{font:600 21px/1 var(--serif);color:var(--emerald)}.builder .brand span{color:var(--gold);font-style:italic;margin-left:1px}
.builder .title-input{color:var(--ink);font:500 15px var(--sans)}
.builder .title-input:hover,.builder .title-input:focus{background:var(--field);border-color:var(--line)}
.builder .save-state{color:var(--ink2)}
.builder .icon{background:var(--card);border-color:var(--line);color:var(--ink2);min-width:36px;min-height:36px}
.builder .icon:hover:not(:disabled){border-color:var(--emerald);color:var(--emerald)}
/* buttons: gold = the main action, outline = everything else */
.builder .btn{min-height:42px;border-radius:999px;border-color:var(--line);background:var(--card);color:var(--ink);font:500 14px/1 var(--sans);letter-spacing:.02em;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s}
.builder .btn:hover{border-color:var(--emerald);color:var(--emerald)}
.builder .btn.primary{background:var(--foil);background-size:200% 100%;border-color:transparent;color:var(--on-gold);box-shadow:0 8px 20px -12px rgba(156,122,46,.7)}
.builder .btn.primary:hover{color:var(--on-gold);transform:translateY(-1px)}
.builder .btn.ghost{background:transparent}
.builder .btn.small{min-height:36px}
.builder .lang-switch{border-color:var(--line);background:var(--card)}
.builder .lang-switch button{color:var(--ink2)}
.builder .lang-switch button[aria-pressed="true"]{background:var(--emerald);color:var(--on-emerald)}
/* panel + steps */
.builder .panel{background:var(--side);border-right:1px solid var(--line)}
.builder .tabs.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:12px;border-bottom:1px solid var(--line);background:var(--card)}
.builder .tabs.steps button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:12px;color:var(--ink2);font:500 13px var(--sans);min-height:56px;position:relative}
.builder .tabs.steps button i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:italic 500 14px/1 var(--serif);border:1px solid var(--line);color:var(--ink2);background:var(--card)}
.builder .tabs.steps button:hover{color:var(--emerald)}
.builder .tabs.steps button[aria-selected=true]{background:var(--card2);color:var(--emerald);box-shadow:none}
.builder .tabs.steps button[aria-selected=true] i{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald)}
.builder .tabs.steps button.done i{border-color:var(--gold);color:var(--gold-text)}
.builder .tabs.steps button:not(:last-child)::after{content:"";position:absolute;top:21px;right:-6px;width:8px;height:1px;background:var(--line)}
.builder .tab-body{padding:18px 18px 24px}
.builder .step-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--card)}
.builder .step-count{font-size:12px;color:var(--ink2);letter-spacing:.06em;white-space:nowrap}
.builder .lede{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--card2);border:1px solid var(--line);color:var(--ink);font-size:14px}
/* groups, folds, fields */
.builder .group h3,.builder .fold-title{color:var(--gold-text);letter-spacing:.16em;font-size:11px}
.builder .fold-title{margin:22px 0 10px;text-transform:uppercase;font-weight:600}
.builder .fold{border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:10px}
.builder .fold>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:13px 40px 13px 14px;position:relative;min-height:48px}
.builder .fold>summary::-webkit-details-marker{display:none}
.builder .fold>summary b{font:500 15px var(--sans);color:var(--ink)}.builder .fold>summary small{font-size:12px;color:var(--ink2)}
.builder .fold>summary::after{content:"";position:absolute;right:16px;top:20px;width:8px;height:8px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform .25s}
.builder .fold[open]>summary::after{transform:rotate(-135deg);top:24px}
.builder .fold>summary:hover b{color:var(--emerald)}
.builder .fold>:not(summary){margin-left:14px;margin-right:14px}
.builder .fold>:last-child{margin-bottom:14px}
.builder .flabel{margin:12px 0 6px;font-size:12px;font-weight:500;color:var(--ink2);letter-spacing:.04em}
.builder .field{color:var(--ink)}
.builder .field .hint,.builder .note{color:var(--ink2)}
.builder .note.filled{background:var(--card2);border-left:2px solid var(--gold);padding:6px 10px;border-radius:0}
.builder .field input[type=text],.builder .field input[type=url],.builder .field input[type=number],.builder .field input[type=datetime-local],
.builder .field input[type=date],.builder .field input[type=time],.builder .field input:not([type]),.builder .field textarea,.builder .field select,
.builder .add-row select,.builder .linkbox input,.builder dialog input[type=text],.builder dialog input[type=tel],.builder dialog input[type=email],.builder dialog input[type=date]{
  background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:10px;min-height:42px;font:400 15px var(--sans)}
.builder .field input:hover,.builder .field textarea:hover,.builder .field select:hover{border-color:#CDBF9F}
.builder .field input:focus,.builder .field textarea:focus,.builder .field select:focus{border-color:var(--emerald);outline:none;box-shadow:0 0 0 3px rgba(15,42,34,.12)}
.builder select option{background:var(--field);color:var(--ink)}
.builder input[type=range]{accent-color:var(--emerald)}
.builder input[type=checkbox],.builder input[type=radio]{accent-color:var(--emerald);width:18px;height:18px}
.builder .choice button{background:var(--card);color:var(--ink2);border-color:var(--line);min-height:38px;padding:8px 14px}
.builder .choice button:hover{color:var(--emerald);border-color:var(--emerald)}
.builder .choice button[aria-pressed=true]{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald)}
.builder .tpl{background:var(--card);border-color:var(--line);color:var(--ink)}
.builder .tpl span.cat{color:var(--ink2)}
.builder .tpl[aria-pressed=true]{outline:2px solid var(--emerald);outline-offset:2px}
.builder .tpl:hover{border-color:var(--gold)}
.builder .pal,.builder .pair{background:var(--card);border-color:var(--line);color:var(--ink2)}
.builder .pal:hover,.builder .pair:hover{border-color:var(--gold)}
.builder .pair[aria-pressed=true]{outline:2px solid var(--emerald)}
.builder .pair b{color:var(--ink)}
.builder .color{border-color:var(--line);background:var(--card);color:var(--ink)}.builder .color code{color:var(--ink2)}
.builder .contrast.ok{background:#E6F2EA;color:#22593A}.builder .contrast.bad{background:#FBE9EA;color:#8E2B35}
/* section list */
.builder .sec{background:var(--card);border-color:var(--line);border-radius:12px}
.builder .sec-cover{border-color:#D9C391;background:linear-gradient(180deg,#F8EEDB,var(--card))}
.builder .sec-head .nm{color:var(--ink);font:500 15px var(--sans);min-height:36px}
.builder .sec-head .nm[aria-expanded=true]{color:var(--emerald)}
.builder .sec-body{border-top-color:var(--line2)}
.builder .grip{color:#A79C86}
.builder .sec.drop{box-shadow:0 -3px 0 var(--gold)}
.builder .list-item{border-color:var(--line)}
/* preview stage: soft taupe, between light and dark, so every card's colours read fairly */
.builder .stage{background:radial-gradient(70% 55% at 50% 0%,#F3EDE2,transparent 70%),var(--stage)}
.builder .seg{background:var(--card);border-color:var(--line)}
.builder .seg button{color:var(--ink2);min-height:36px}
.builder .seg button[aria-pressed=true]{background:var(--emerald);color:var(--on-emerald)}
.builder .device iframe{box-shadow:0 0 0 1px rgba(156,122,46,.35),0 30px 60px -24px rgba(40,30,15,.45)}
.builder .device.phone iframe,.builder .device.tablet iframe{border-color:#1A1712}
/* dialogs + toast */
.builder dialog.wizard{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.builder dialog.wizard::backdrop{background:rgba(29,42,36,.55)}
.builder dialog.wizard h2{font:500 30px var(--serif);color:var(--emerald)}
.builder .wz-actions{background:var(--card);border-top-color:var(--line2)}
.builder .pkg{border-color:var(--line);background:var(--field)}.builder .pkg:has(input:checked){background:var(--card2);border-color:var(--emerald)}
.builder .pkg em{color:var(--gold-text)}.builder .pkg small{color:var(--ink2)}
.builder .form-error{color:#9B1C2C}.builder .ref-big{color:var(--emerald)}
.builder .qr{background:#fff}
.builder .toast{background:var(--emerald);color:var(--on-emerald);border:0}
@media (max-width:900px){
  .builder .step-nav{position:sticky;bottom:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .builder .step-count{display:none}
  .builder .tabs.steps button{min-height:52px}
}
@media (prefers-reduced-motion:reduce){.builder *{transition:none!important}}
/* keep the editor panel from scrolling sideways: grid columns may shrink below their inputs' natural width */
.builder .row2{grid-template-columns:repeat(2,minmax(0,1fr))}
.builder .row3{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.builder .field input,.builder .field textarea,.builder .field select{min-width:0;max-width:100%}
.builder .tab-body{overflow-x:hidden}
/* "Save for later" button + its dialog */
.builder .save-later{gap:8px}
.builder dialog .linkbox{margin:4px 0 14px}
.builder dialog .btn.primary{width:100%;margin-bottom:6px}
@media (max-width:900px){.builder .save-later span{display:none}.builder .save-later{padding:0 12px}}
/* order form: "naff-biz.com/" + link name */
.builder .prefixed{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;background:var(--field);overflow:hidden}
.builder .prefixed span{display:flex;align-items:center;padding:0 2px 0 12px;color:var(--ink2);font-size:14px;white-space:nowrap}
.builder .prefixed input{flex:1;min-width:0;border:0!important;box-shadow:none!important;padding-left:2px!important;background:transparent!important}
.builder .prefixed:focus-within{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(15,42,34,.12)}