<div id="sc-settings" class="screen active">
  <div class="nav">
    <div class="ntitle">Receipt settings</div>
    <span class="nstep">1 of 3</span>
  </div>
  <div class="scroll">
    <div class="dots"><div class="dot on"></div><div class="dot"></div><div class="dot"></div></div>
    <div class="sh">Header</div>
    <div class="fg">
      <div class="fl">logo</div>
      <div class="ub" id="logo-box" style="height:74px">
        <input type="file" id="logo-file" accept="image/*">
        <div class="ub-icon"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#73726c" stroke-width="1.5"><path d="M8 10V3M5 6l3-3 3 3"/><path d="M2 12v1a1 1 0 001 1h10a1 1 0 001-1v-1"/></svg></div>
        <div class="ub-lbl">Upload logo</div><div class="ub-hint">PNG, JPG · greyscale on print</div>
        <img class="prev" id="logo-prev">
        <div class="clr" id="logo-clr"><svg width="9" height="9" viewBox="0 0 10 10" fill="none" stroke="#73726c" stroke-width="1.5"><path d="M1 1l8 8M9 1L1 9"/></svg></div>
      </div>
    </div>
    <div class="fg"><div class="fl">tagline</div><input class="fi" id="f-tl" value="moments preserved on paper"></div>
    <div class="sh">Photo</div>
    <div class="fg">
      <div class="fl">photo preview</div>
      <div class="ub" id="photo-box" style="height:102px">
        <input type="file" id="photo-file" accept="image/*">
        <div class="ub-icon"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#73726c" stroke-width="1.5"><rect x="2" y="2" width="12" height="12" rx="1.5"/><circle cx="5.5" cy="5.5" r="1"/><path d="M14 10l-3.5-3.5L5 13"/></svg></div>
        <div class="ub-lbl">Upload photo</div><div class="ub-hint">from FTP drop or camera roll</div>
        <img class="prev" id="photo-prev">
        <div class="clr" id="photo-clr"><svg width="9" height="9" viewBox="0 0 10 10" fill="none" stroke="#73726c" stroke-width="1.5"><path d="M1 1l8 8M9 1L1 9"/></svg></div>
      </div>
    </div>
    <div class="sh">Race info</div>
    <div class="two">
      <div class="fg"><div class="fl">race name</div><input class="fi" id="f-race" value="RUFA"></div>
      <div class="fg"><div class="fl">location</div><input class="fi" id="f-loc" value="STAUNTON PARK"></div>
    </div>
    <div class="fg"><div class="fl">date</div><input class="fi" id="f-date" type="date"></div>
    <div class="sh">Body</div>
    <div class="tb">
      <div class="tr"><span class="tl">Date &amp; time below photo</span><label class="tog"><input type="checkbox" id="f-dt" checked><span class="tt"><span class="th2"></span></span></label></div>
      <div class="tr"><span class="tl">Image metadata</span><label class="tog"><input type="checkbox" id="f-meta" checked><span class="tt"><span class="th2"></span></span></label></div>
    </div>
    <div class="sh">Quotes</div>
    <div class="tb">
      <div class="tr"><span class="tl">Enable quotes</span><label class="tog"><input type="checkbox" id="f-qon" checked><span class="tt"><span class="th2"></span></span></label></div>
    </div>
    <div class="qer" id="qer">
      <span class="qec" id="qec">8 quotes in bank</span>
      <span class="qeb">Manage quotes →</span>
    </div>
    <div class="sh">Footer</div>
    <div class="tb" style="margin-bottom:2px">
      <div class="tr"><span class="tl">QR code</span><label class="tog"><input type="checkbox" id="f-qr" checked><span class="tt"><span class="th2"></span></span></label></div>
    </div>
    <div class="fg"><div class="fl">qr url</div><input class="fi" id="f-qrurl" value="kennethmayr.com"></div>
    <div class="fg"><div class="fl">footer message</div><textarea class="fi" id="f-foot">thank you for racing with us.</textarea></div>
  </div>
  <div class="bbar"><button class="bp" id="btn-to-preview">PREVIEW RECEIPT →</button></div>
</div>

<div id="sc-quotes" class="screen">
  <div class="nav">
    <div class="nbk" id="btn-quotes-back"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#1c1b19" stroke-width="1.5"><path d="M10 3L5 8l5 5"/></svg></div>
    <div class="ntitle">Quote bank</div>
    <button class="nact" id="btn-csv-import"><svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" style="display:inline;vertical-align:middle;margin-right:3px"><path d="M8 10V3M5 6l3-3 3 3"/><path d="M2 12v1a1 1 0 001 1h10a1 1 0 001-1v-1"/></svg>Import CSV</button>
    <input type="file" id="csv-file" accept=".csv,text/csv" style="display:none">
  </div>
  <div class="qlayout">
    <div class="qinput">
      <textarea id="q-new" placeholder="Type a quote and tap Add..."></textarea>
      <button class="qadd" id="btn-add-quote">ADD</button>
    </div>
    <div class="qgrid" id="qgrid"></div>
    <div class="qfoot"><span id="q-count">8 quotes</span><span style="font-size:9px">random on each print</span></div>
  </div>
</div>

<div id="sc-preview" class="screen">
  <div class="nav">
    <div class="nbk" id="btn-preview-back"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#1c1b19" stroke-width="1.5"><path d="M10 3L5 8l5 5"/></svg></div>
    <div class="ntitle">Preview</div>
    <span class="nstep">2 of 3</span>
  </div>
  <div class="preview-screen-body">
    <div class="dots"><div class="dot"></div><div class="dot on"></div><div class="dot"></div></div>
    <div class="plrow"><span class="plbl">receipt preview</span><span class="lbadge">live</span></div>
    <div class="rw" id="receipt-card"><div class="rp" id="receipt-inner"></div></div>
    <button class="dl-btn" id="btn-download">
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" style="flex-shrink:0"><path d="M8 3v7M5 7l3 3 3-3"/><path d="M2 12v1a1 1 0 001 1h10a1 1 0 001-1v-1"/></svg>
      <span id="dl-label">Save JPG to camera roll</span>
    </button>
    <div style="height:4px;flex-shrink:0"></div>
  </div>
  <div class="bbar">
    <button class="bs" id="btn-back-edit">EDIT</button>
    <button class="bp" id="btn-to-save">SAVE SETTINGS →</button>
  </div>
</div>

<div id="sc-saved" class="screen">
  <div class="nav">
    <div class="nbk" id="btn-saved-back"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#1c1b19" stroke-width="1.5"><path d="M10 3L5 8l5 5"/></svg></div>
    <div class="ntitle">Saved</div><span class="nstep">3 of 3</span>
  </div>
  <div class="ssc">
    <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot on"></div></div>
    <div class="si"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#27500A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
    <div><div class="stitle">Settings saved</div><div class="ssub" style="margin-top:5px">Every photo from the camera<br>will print with these settings.</div></div>
    <div class="srow" id="saved-sum"></div>
    <div class="ssub" style="font-size:10px;opacity:.7">Pi ready · watcher active · printer online</div>
    <button class="nrb" id="btn-new-race">START NEW RACE CONFIG</button>
  </div>
</div>