.signcraft-app *,.signcraft-app *::before,.signcraft-app *::after{box-sizing:border-box;margin:0;padding:0}
.signcraft-app{
  --ink:#1a1612;--paper:#f5f2ec;--cream:#ede9e0;
  --warm:#c4b99a;--accent:#c8501a;--adim:#9a3d13;
  --steel:#6b7280;--ls:#d1cdc4;
  --r:6px;--pbg:#fff;--b:1px solid rgba(0,0,0,0.1);
  font-family:system-ui,sans-serif;background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  height:min(720px,80vh);border:1px solid #ddd;border-radius:8px
}
.signcraft-app header{display:flex;align-items:center;justify-content:space-between;padding:0 14px;height:44px;background:var(--ink);flex-shrink:0}

/* Wall-settings gear button + popover (anchored inside #cw) */
.signcraft-app .wall-btn{
  position:absolute;bottom:14px;left:14px;width:42px;height:42px;border-radius:50%;
  background:rgba(26,22,18,.78);color:#fff;border:0;cursor:pointer;z-index:16;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .15s,transform .12s
}
.signcraft-app .wall-btn:hover{background:rgba(26,22,18,.95);transform:scale(1.06)}
.signcraft-app .wall-btn.active{background:var(--accent)}
.signcraft-app .wall-btn svg{display:block}

.signcraft-app .wall-popover{
  position:absolute;bottom:66px;left:14px;width:300px;max-width:calc(100% - 28px);
  background:var(--pbg);border:1px solid var(--ls);border-radius:10px;padding:14px;z-index:17;
  box-shadow:0 14px 40px rgba(0,0,0,.2);
  opacity:0;transform:translateY(6px) scale(.98);pointer-events:none;
  transition:opacity .15s,transform .15s
}
.signcraft-app .wall-popover.open{opacity:1;transform:none;pointer-events:auto}
.signcraft-app .wall-popover[hidden]{display:block !important}
.logo{font-family:Georgia,serif;color:var(--paper);font-size:17px;font-style:italic}
.logo b{font-style:normal;color:var(--accent)}
.hsteps{display:flex;gap:3px}
.hstep{font-size:10px;font-weight:500;color:rgba(255,255,255,0.35);padding:3px 9px;border-radius:20px}
.hstep.on{background:var(--accent);color:#fff}
.hcta{font-size:11px;font-weight:600;background:var(--accent);color:#fff;border:none;padding:6px 12px;border-radius:20px;cursor:pointer;white-space:nowrap}
.hcta:hover{background:var(--adim)}
.app{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.lp{background:var(--pbg);border-top:var(--b);overflow-y:auto;display:flex;flex-direction:column;flex-shrink:0;max-height:50%}
.lp-inner{display:grid;grid-template-columns:1fr 1fr;gap:0}
.lp-inner .ps{border-bottom:var(--b);border-right:var(--b)}
.lp-inner .ps:nth-child(even){border-right:none}
.ps{padding:10px 12px;border-bottom:var(--b);flex-shrink:0}
.sl{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:10px}
.si{width:100%;padding:9px 11px;font-family:Georgia,serif;font-size:20px;border:1.5px solid var(--ls);border-radius:var(--r);background:var(--paper);color:var(--ink);outline:none}
.si:focus{border-color:var(--accent)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.fo{padding:8px 7px 6px;border:1.5px solid var(--ls);border-radius:var(--r);cursor:pointer;text-align:center;background:var(--paper);transition:all .15s}
.fo:hover{border-color:var(--warm)}
.fo.sel{border-color:var(--accent);background:#fff5f2}
.fl{font-size:10px;color:var(--steel);margin-top:2px}
.fp{font-size:19px;line-height:1.1}
.fstat{font-size:11px;text-align:center;margin-top:7px;min-height:15px;color:var(--steel)}
.fstat.ok{color:#2a7a4a}.fstat.err{color:#c8501a}
.sr{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.slb{font-size:12px;color:var(--steel);min-width:50px}
.sv{font-size:12px;font-weight:600;min-width:34px;text-align:right}
.signcraft-app input[type=range]{flex:1;-webkit-appearance:none;height:4px;border-radius:2px;background:var(--ls);outline:none;cursor:pointer}
.signcraft-app input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}
.dbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.db{padding:8px 2px;border:1.5px solid var(--ls);border-radius:var(--r);cursor:pointer;text-align:center;background:var(--paper);font-size:13px;font-weight:700;color:var(--ink);transition:all .15s;font-family:inherit}
.db:hover{border-color:var(--warm)}
.db.sel{border-color:var(--accent);background:#fff5f2;color:var(--accent)}
.mg{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.mo{padding:8px 9px;border:1.5px solid var(--ls);border-radius:var(--r);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;background:var(--paper)}
.mo:hover{border-color:var(--warm)}
.mo.sel{border-color:var(--accent);background:#fff5f2}
.msw{width:20px;height:20px;border-radius:3px;flex-shrink:0;border:1px solid rgba(0,0,0,.1)}
.mn{font-size:11px;font-weight:600}.ms{font-size:10px;color:var(--steel)}
.cr{display:flex;gap:5px;flex-wrap:wrap}
.cs{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:all .15s}
.cs:hover{transform:scale(1.12)}
.cs.sel{border-color:var(--accent);transform:scale(1.14)}
.pa{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--cream);overflow:hidden}
.ptbar{display:flex;align-items:center;gap:7px;padding:8px 14px;background:var(--pbg);border-bottom:var(--b);flex-shrink:0}
.vb{font-size:11px;font-weight:600;padding:5px 13px;border-radius:20px;border:1.5px solid var(--ls);background:transparent;color:var(--ink);cursor:pointer;transition:all .15s}
.vb.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.vb:hover:not(.on){border-color:var(--warm)}
.tf{flex:1}
.ht{font-size:11px;color:var(--steel)}
#cw{flex:1;min-height:0;position:relative;display:flex}
#tc{width:100%!important;height:100%!important;display:block;cursor:grab}
#tc:active{cursor:grabbing}
.lo{position:absolute;inset:0;background:rgba(237,233,224,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--steel);z-index:10;transition:opacity .4s}
.lo.gone{opacity:0;pointer-events:none}
@keyframes dotPulse{0%,80%,100%{opacity:.2} 40%{opacity:1}}
.load-dot{display:inline-block;font-size:18px;color:var(--steel);animation:dotPulse 1.2s infinite;margin:0 1px}
.load-dot:nth-child(2){animation-delay:.2s}
.load-dot:nth-child(3){animation-delay:.4s}
#arp{display:none;flex:1;padding:28px;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#arp.vis{display:flex}
.arf{width:180px;height:320px;border:3px solid var(--ink);border-radius:22px;overflow:hidden;background:#1a1a22;box-shadow:0 16px 40px rgba(0,0,0,.25)}
.arsc{width:100%;height:100%;background:#1e1e28;position:relative;overflow:hidden}
.arw{position:absolute;bottom:0;left:0;right:0;height:52%;background:#38342e;border-top:1px solid rgba(255,255,255,.07)}
.arfl{position:absolute;bottom:0;left:0;right:0;height:16%;background:#242220}
.arsn{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%);font-size:16px;letter-spacing:.05em;text-shadow:2px 2px 0 rgba(0,0,0,.5);white-space:nowrap;transition:all .3s}
.arnt{width:46px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;position:absolute;top:7px;left:50%;transform:translateX(-50%)}
.arc{font-size:12px;color:var(--steel);text-align:center;max-width:210px;line-height:1.6}
.qb{border-top:var(--b);background:var(--pbg);padding:8px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
.qi{text-align:center;min-width:0}
.qv{font-size:15px;font-weight:700;white-space:nowrap}
.qk{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--steel)}
.qs{width:1px;height:24px;background:var(--ls);flex-shrink:0}
.qa{margin-left:auto;display:flex;gap:7px;flex-shrink:0}
.bg{font-size:12px;font-weight:600;padding:7px 14px;border-radius:20px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
.bg:hover{background:var(--ink);color:#fff}
.bp{font-size:12px;font-weight:600;padding:7px 16px;border-radius:20px;border:none;background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap}
.bp:hover{background:var(--adim)}
.mo2{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center}
.mo2.vis{display:flex}
.md{background:#fff;border-radius:12px;padding:26px;width:370px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.mt{font-family:Georgia,serif;font-size:19px;margin-bottom:4px}
.msb{font-size:12px;color:var(--steel);margin-bottom:16px}
.eo{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}
.eo div{border:1.5px solid var(--ls);border-radius:var(--r);padding:11px;cursor:pointer;transition:all .15s}
.eo div:hover,.eo div.sel{border-color:var(--accent);background:#fff8f5}
.en{font-weight:600;font-size:13px;margin-bottom:2px}.ed{font-size:11px;color:var(--steel)}
.en2{background:var(--paper);border-radius:var(--r);padding:9px 11px;font-size:11px;color:var(--steel);margin-bottom:13px;line-height:1.5}
.en2 b{color:var(--ink)}
.mact{display:flex;gap:7px;justify-content:flex-end}
.bc{font-size:12px;padding:7px 14px;border-radius:20px;border:1.5px solid var(--ls);background:transparent;color:var(--steel);cursor:pointer}
.toast{position:fixed;bottom:16px;right:16px;background:var(--ink);color:var(--paper);padding:9px 15px;border-radius:7px;font-size:12px;z-index:300;transform:translateY(48px);opacity:0;transition:all .3s;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}
.lp::-webkit-scrollbar{width:3px}.lp::-webkit-scrollbar-thumb{background:var(--ls);border-radius:2px}
.fcg{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.fc{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:5px 3px;border-radius:var(--r);border:1.5px solid transparent;transition:all .15s}
.fc:hover{border-color:var(--warm)}
.fc.sel{border-color:var(--accent);background:#fff5f2}
.fcsw{width:28px;height:28px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}
.fcsw-brushed{background:linear-gradient(105deg,#9ea4a8 0%,#b8bec2 30%,#888e94 50%,#adb2b6 70%,#989ea4 100%)}
.fcsw-mirror{background:linear-gradient(135deg,#c8cacc 0%,#a8acb0 25%,#d8dadc 50%,#9094a0 75%,#bcc0c4 100%)}
.fcl{font-size:9px;color:var(--steel);text-align:center;line-height:1.2}
.wcg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.wc{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:5px 3px;border-radius:var(--r);border:1.5px solid transparent;transition:all .15s}
.wc:hover{border-color:var(--warm)}
.wc.sel{border-color:var(--accent);background:#fff5f2}
.wcsw{width:32px;height:32px;border-radius:4px;border:1px solid rgba(0,0,0,.12);flex-shrink:0}
.wcl{font-size:9px;color:var(--steel);text-align:center;line-height:1.2}
.sobg{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:2px}
.sob{padding:9px 4px;border:1.5px solid var(--ls);border-radius:var(--r);cursor:pointer;text-align:center;background:var(--paper);font-size:13px;font-weight:700;color:var(--ink);transition:all .15s;font-family:inherit}
.sob:hover{border-color:var(--warm)}
.sob.sel{border-color:var(--accent);background:#fff5f2;color:var(--accent)}
/* Text line cards */
.tl-row{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;padding:10px 12px;border:1.5px solid var(--ls);border-radius:var(--r);background:var(--paper);transition:all .15s;cursor:pointer}
.tl-row.selected{border-color:var(--accent);background:#fff5f2}
.tl-top{display:flex;gap:6px;align-items:center}
.tl-input{flex:1;min-width:0;padding:7px 9px;font-family:Georgia,serif;font-size:17px;border:1px solid var(--ls);border-radius:4px;background:#fff;color:var(--ink);outline:none}
.tl-input:focus{border-color:var(--accent)}
.tl-font{width:82px;padding:5px 6px;font-size:11px;font-family:inherit;border:1px solid var(--ls);border-radius:4px;background:#fff;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.tl-height{width:56px;padding:5px 4px;font-size:11px;font-family:inherit;border:1px solid var(--ls);border-radius:4px;background:#fff;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;text-align:center}
.tl-opts{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.tl-opt{padding:3px 7px;font-size:10px;border:1px solid var(--ls);border-radius:3px;background:#fff;color:var(--steel);cursor:pointer;font-family:inherit;transition:all .12s}
.tl-opt:hover{border-color:var(--warm)}
.tl-opt.sel{border-color:var(--accent);color:var(--accent);background:#fff5f2}
.tl-opt-label{font-size:9px;color:var(--steel);margin-right:2px;font-weight:600;letter-spacing:.04em}
.tl-sep{width:1px;height:14px;background:var(--ls);flex-shrink:0;margin:0 2px}
.tl-center{padding:5px 8px;font-size:14px;font-weight:400;border:1.5px solid var(--ls);border-radius:4px;background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap;line-height:1}
.tl-center:hover{border-color:var(--accent);color:var(--accent)}
.tl-del{padding:5px 7px;font-size:13px;border:none;background:transparent;color:var(--steel);cursor:pointer;line-height:1}
.tl-del:hover{color:#c8501a}
.tl-colors{display:flex;gap:3px;flex-wrap:wrap;align-items:center}
.tl-csw{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .12s;flex-shrink:0}
.tl-csw:hover{transform:scale(1.1)}
.tl-csw.sel{border-color:var(--accent);transform:scale(1.1)}
.tl-csw-brushed{background:linear-gradient(105deg,#9ea4a8 0%,#b8bec2 30%,#888e94 50%,#adb2b6 70%,#989ea4 100%)}
.tl-csw-mirror{background:linear-gradient(135deg,#c8cacc 0%,#a8acb0 25%,#d8dadc 50%,#9094a0 75%,#bcc0c4 100%)}
.tl-spacing{display:flex;align-items:center;gap:6px}
.tl-spacing input[type=range]{flex:1;min-width:60px}
.tl-spacing .sv{font-size:10px;min-width:24px}
.btn-add-text{width:100%;padding:9px;border:1.5px dashed var(--ls);border-radius:var(--r);background:transparent;color:var(--steel);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;margin-top:4px}
.btn-add-text:hover{border-color:var(--accent);color:var(--accent)}
/* Projected handles on canvas */
.handle{position:absolute;pointer-events:all;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);z-index:16;
  font-family:system-ui,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none;
  transition:opacity .15s,transform .12s}
.handle-move{width:38px;height:38px;font-size:18px;background:rgba(26,22,18,.75);color:#fff;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s}
.handle-move:hover{background:rgba(26,22,18,.95);transform:translate(-50%,-50%) scale(1.1)}
.handle-move.dragging{background:var(--accent);color:#fff;transform:translate(-50%,-50%) scale(1.15)}
.handle-move.vis{opacity:1;pointer-events:all}
.handle-scale{width:30px;height:30px;font-size:14px;background:rgba(200,80,26,.82);color:#fff;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s}
.handle-scale .scale-icon{display:inline-block;transform:rotate(90deg)}
.handle-scale:hover{background:rgba(200,80,26,1);transform:translate(-50%,-50%) scale(1.1)}
.handle-scale.dragging{background:#fff;color:var(--accent);transform:translate(-50%,-50%) scale(1.15)}
.handle-scale.vis{opacity:1;pointer-events:all}