/* ============ Signature Signs — 3D Sign Builder (ground-up build) ============ */
.sgb{--navy:#13183f;--blue:#2c5fa8;--sky:#57a9ff;--ink:#0b1020;--line:rgba(255,255,255,.11);
  background:radial-gradient(circle at 12% 0,#22396f 0,transparent 34%),linear-gradient(150deg,#080d2b,#0e1538 58%,#0a102c);color:#fff}
.sgb *{box-sizing:border-box}
.sgb button{font-family:inherit}

/* ---- head strip: H1 straight into the tool ---- */
.sgb-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  width:96%;max-width:1840px;margin:0 auto;padding:22px 0 14px}
.sgb-head h1{margin:0;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;line-height:1.1;color:#fff}
.sgb-head h1 em{font-style:normal;color:#7fb2ff}
.sgb-head .sub{margin:4px 0 0;color:#aab6d4;font-size:13.5px}
.sgb-modes{display:flex;gap:10px;flex-wrap:wrap}
.sgb-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.04)}
.sgb-seg button{border:0;background:transparent;color:#c3cce4;font-size:12.5px;font-weight:700;padding:9px 16px;cursor:pointer;min-height:38px}
.sgb-seg button:hover{color:#fff!important;background:rgba(255,255,255,.09)!important}
.sgb-seg button.on{background:var(--blue)!important;color:#fff!important}

/* ---- mockup bar ---- */
/* mockbar lives INSIDE the stage, overlaid along the bottom (Ryan 9/4) */
.sgb-mockbar{position:absolute;left:10px;right:10px;bottom:10px;z-index:26;margin:0;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(6,10,30,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 14px;display:flex;flex-direction:column;gap:9px}
.sgb-mockbar[hidden]{display:none!important}
/* the overlay replaces the bottom hint/note while mockup mode is on */
.sgb-mockbar:not([hidden])~.sgb-hint,.sgb-mockbar:not([hidden])~.sgb-note{display:none}
.sgb-mockrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sgb-mocklabel{font-size:10px;font-weight:800;letter-spacing:.16em;color:#8b97b5}
.sgb-scenes{display:flex;gap:8px;flex-wrap:wrap}
.sgb-scene{position:relative;width:78px;height:48px;border-radius:9px;border:2px solid transparent;padding:0;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}
.sgb-scene em{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:8.5px;font-weight:700;color:#fff;background:rgba(4,7,24,.74);padding:2px;text-align:center;line-height:1.1}
.sgb-scene:hover{border-color:var(--sky)!important}
.sgb-scene.on{border-color:var(--blue)!important;box-shadow:0 0 0 2px rgba(87,169,255,.35)}
.sgb-upload{position:relative;width:78px;height:48px;border-radius:9px;border:2px dashed rgba(255,255,255,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#c3cce4;cursor:pointer;text-align:center;gap:1px}
.sgb-upload:hover{border-color:var(--sky)!important;color:#fff!important}
.sgb-upload.on{border-style:solid;border-color:var(--blue)!important;box-shadow:0 0 0 2px rgba(87,169,255,.35)}
.sgb-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sgb-upload em{font-style:normal;font-size:8.5px;font-weight:700;line-height:1.05}
#sgbMockScale,#sgbMockRot,#sgbMockTilt,#sgbMockLevel{flex:1 1 100px;max-width:170px;accent-color:var(--blue)}
.sgb-dl{border:0;border-radius:999px;background:var(--blue);color:#fff;font-size:13px;font-weight:700;padding:10px 18px;cursor:pointer;min-height:40px}
.sgb-dl:hover{background:#3d74c4!important;color:#fff!important}
.sgb-dl:disabled{opacity:.5;cursor:not-allowed}
.sgb-mockhint{display:none;font-size:11.5px;color:#8b97b5}
@media(min-width:1780px){.sgb-mockhint{display:inline}}

/* ---- main: stage + panel ---- */
.sgb-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,26vw,430px);gap:14px;
  width:96%;max-width:1840px;margin:0 auto;padding-bottom:26px;height:calc(100vh - 148px);min-height:600px}
.sgb-stage{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0a102c;min-height:320px}
#sgbBackdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#sgbCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#sgbCanvas.dragging{cursor:grabbing}
.sgb-hud{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
.sgb-hud>*{pointer-events:auto}
.sgb-hudleft{display:flex;gap:8px;flex-wrap:wrap;align-items:center;pointer-events:auto}
.sgb-hud .sgb-seg{background:rgba(6,10,30,.66);backdrop-filter:blur(2px)}
.sgb-hud .sgb-seg button{padding:7px 13px;font-size:11.5px;min-height:0}
@media(max-width:560px){.sgb-hud .sgb-seg button{padding:6px 10px;font-size:10.5px}.sgb-views button{padding:6px 10px;font-size:10.5px}.sgb-dims{display:none}}
.sgb-views{display:inline-flex;border-radius:999px;overflow:hidden;background:rgba(6,10,30,.66);border:1px solid var(--line)}
.sgb-views button{border:0;background:transparent;color:#c3cce4;font-size:11.5px;font-weight:700;padding:7px 13px;cursor:pointer}
.sgb-views button:hover{color:#fff!important;background:rgba(255,255,255,.1)!important}
.sgb-dims{background:rgba(6,10,30,.66);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:11.5px;font-weight:700;color:#dbe3f1;white-space:nowrap}
.sgb-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(6,10,30,.66);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:11px;color:#aab6d4;white-space:nowrap}
.sgb-note{position:absolute;right:12px;bottom:12px;font-size:10px;color:#7d88a6}

/* ---- control panel ---- */
.sgb-panel{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:rgba(8,12,36,.66);overflow:hidden;min-height:0}
#sgbControls{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#2c5fa8 transparent}
.sgb-step{border-bottom:1px solid var(--line)}
.sgb-step>button.tog{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:transparent;color:#fff;font-size:13.5px;font-weight:700;padding:15px 18px;cursor:pointer;text-align:left;min-height:48px}
.sgb-step>button.tog:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
.sgb-step>button.tog b{color:#7fb2ff;font-weight:800;margin-right:9px;font-size:11px;letter-spacing:.08em}
.sgb-step>button.tog i{font-style:normal;color:#8b97b5;font-size:16px}
.sgb-step .bd{display:none;padding:2px 18px 18px}
.sgb-step.open .bd{display:block}
.sgb-lab{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:#8b97b5;margin:13px 0 7px;text-transform:uppercase}
.sgb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sgb-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.sgb-num{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:#c3cce4;font-weight:600}
.sgb-num span{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.05)}
.sgb-num input{width:100%;border:0;background:transparent;color:#fff;font-size:15px;font-weight:700;padding:9px 4px 9px 11px;min-height:40px;outline:none}
.sgb-num em{font-style:normal;color:#8b97b5;font-size:11px;padding-right:10px}
.sgb-num input:focus{outline:none}
.sgb-num span:focus-within{border-color:var(--sky)}
.sgb-choices{display:flex;gap:8px;flex-wrap:wrap}
.sgb-chip{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);color:#c3cce4;font-size:12.5px;font-weight:700;padding:9px 15px;cursor:pointer;min-height:38px}
.sgb-chip:hover{color:#fff!important;border-color:var(--sky)!important;background:rgba(87,169,255,.1)!important}
.sgb-chip.on{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.sgb-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sgb-card{border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.05);color:#c3cce4;padding:12px;cursor:pointer;text-align:left}
.sgb-card:hover{border-color:var(--sky)!important;color:#fff!important;background:rgba(87,169,255,.08)!important}
.sgb-card.on{border-color:var(--blue)!important;background:rgba(44,95,168,.28)!important;color:#fff!important}
.sgb-card strong{display:block;font-size:13px;margin-bottom:2px}
.sgb-card small{font-size:10.5px;color:#8b97b5;line-height:1.3}
.sgb-swatches{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.sgb-sw{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
.sgb-sw:hover{border-color:#fff!important}
.sgb-sw.on{border-color:var(--sky)!important;box-shadow:0 0 0 3px rgba(87,169,255,.35)}
.sgb-swcustom{position:relative;width:34px;height:34px;border-radius:50%;border:2px dashed rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;color:#c3cce4;font-weight:800;cursor:pointer}
.sgb-swcustom input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sgb-mats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sgb-mat{border:2px solid transparent;border-radius:10px;overflow:hidden;padding:0;cursor:pointer;background:#0a102c;display:flex;flex-direction:column}
.sgb-mat i{display:block;height:40px;background-size:cover;background-position:center}
.sgb-mat em{font-style:normal;font-size:9px;font-weight:700;color:#c3cce4;padding:4px 2px;text-align:center;line-height:1.15}
.sgb-mat:hover{border-color:var(--sky)!important}
.sgb-mat.on{border-color:var(--blue)!important;box-shadow:0 0 0 2px rgba(87,169,255,.3)}
.sgb-mat.on em{color:#fff}
.sgb-text{width:100%;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.05);color:#fff;font-size:14px;font-weight:600;padding:11px;min-height:42px;outline:none;font-family:inherit}
.sgb-text:focus{border-color:var(--sky);outline:none}
textarea.sgb-text{resize:vertical;min-height:64px}
.sgb-count{display:block;text-align:right;font-size:10.5px;color:#8b97b5;margin-top:3px}
.sgb-upl{display:flex;align-items:center;gap:11px;border:1px dashed rgba(255,255,255,.35);border-radius:11px;padding:12px;cursor:pointer;position:relative;color:#c3cce4}
.sgb-upl:hover{border-color:var(--sky)!important;color:#fff!important}
.sgb-upl input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sgb-upl b{font-size:12.5px;display:block}
.sgb-upl small{font-size:10.5px;color:#8b97b5}
.sgb-upl .ic{flex:0 0 34px;height:34px;border-radius:50%;background:rgba(87,169,255,.15);color:#7fb2ff;display:flex;align-items:center;justify-content:center;font-weight:800}
.sgb-remove{border:0;background:transparent;color:#ff8d86;font-size:11.5px;font-weight:700;cursor:pointer;padding:7px 0;text-decoration:underline}
.sgb-remove:hover{color:#ffb1ac!important;background:transparent!important}
.sgb-select{width:100%;border:1px solid var(--line);border-radius:9px;background:#0e1538;color:#fff;font-size:13px;font-weight:600;padding:10px;min-height:42px}
.sgb-help{font-size:11px;color:#8b97b5;line-height:1.45;margin:7px 0 0}

/* ---- panel footer / actions ---- */
.sgb-actions{border-top:1px solid var(--line);background:rgba(6,10,30,.85);padding:13px 18px 15px}
.sgb-sumline{font-size:11.5px;color:#aab6d4;margin-bottom:10px;line-height:1.5}
.sgb-sumline b{color:#fff}
.sgb-fin{display:flex;align-items:center;gap:9px;font-size:12px;color:#c3cce4;margin-bottom:11px;cursor:pointer}
.sgb-fin input{width:17px;height:17px;accent-color:var(--blue)}
/* v3: ID-header add-on checkbox in the rail */
.sgb-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:700;color:#e8ecf8;cursor:pointer;margin:2px 0 10px}
.sgb-check input{width:18px;height:18px;accent-color:var(--blue);margin-top:1px;flex:none}
.sgb-check small{display:block;font-weight:500;font-size:11px;color:#8b97b5;margin-top:2px}
/* v3: Dimensions overlay toggle keeps a pressed state (unlike the camera presets) */
#sgbDimsBtn.on{background:rgba(87,169,255,.28)!important;color:#fff!important}
.sgb-btnrow{display:flex;gap:9px}
.sgb-primary{flex:1;border:0;border-radius:11px;background:linear-gradient(135deg,#2c5fa8,#3d74c4);color:#fff;font-size:14.5px;font-weight:800;padding:14px;cursor:pointer;min-height:48px;box-shadow:0 10px 26px rgba(44,95,168,.45)}
.sgb-primary:hover{background:#3d74c4!important;color:#fff!important;filter:brightness(1.08)}
.sgb-ghost{border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.05);color:#dbe3f1;font-size:13px;font-weight:700;padding:14px 16px;cursor:pointer;min-height:48px}
.sgb-ghost:hover{color:#fff!important;border-color:var(--sky)!important;background:rgba(87,169,255,.1)!important}

/* ---- modal + toast ---- */
.sgb-modal{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:18px}
.sgb-modal[hidden]{display:none!important}
.sgb-modal .back{position:absolute;inset:0;background:rgba(4,7,20,.78);backdrop-filter:blur(3px)}
.sgb-modal .card{position:relative;width:min(520px,100%);background:#0e1538;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 40px 90px rgba(0,0,0,.5);max-height:92vh;overflow-y:auto}
.sgb-modal h2{margin:2px 0 6px;font-size:22px;color:#fff}
.sgb-modal .k{font-size:10.5px;font-weight:800;letter-spacing:.18em;color:#7fb2ff}
.sgb-modal p{color:#aab6d4;font-size:13px;margin:0 0 15px;line-height:1.5}
.sgb-modal label{display:block;font-size:11.5px;font-weight:700;color:#c3cce4;margin-bottom:10px}
.sgb-modal label input,.sgb-modal label textarea{margin-top:4px}
.sgb-x{position:absolute;top:12px;right:14px;border:0;background:transparent;color:#8b97b5;font-size:22px;cursor:pointer;line-height:1;padding:6px}
.sgb-x:hover{color:#fff!important;background:transparent!important}
.sgb-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:99991;background:#0e1538;border:1px solid rgba(87,169,255,.5);border-left:4px solid var(--blue);color:#fff;font-size:13px;font-weight:600;padding:13px 20px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:92vw;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.sgb-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- responsive ---- */
@media (max-width:1080px){
  .sgb-main{grid-template-columns:1fr;height:auto}
  .sgb-stage{height:min(52vh,470px)}
  /* the bar lives BELOW the stage on small screens (moved out of it by app.js) */
  .sgb-main > .sgb-mockbar{position:static;margin:0;left:auto;right:auto;bottom:auto;border-radius:14px}
  #sgbControls{overflow:visible}
  .sgb-panel{min-height:0}
  .sgb-actions{position:sticky;bottom:0;z-index:20}
  .sgb-mats{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:560px){
  .sgb-head{padding-top:16px}
  .sgb-stage{height:47vh;min-height:300px}
  .sgb-cards{grid-template-columns:1fr 1fr}
  .sgb-mats{grid-template-columns:repeat(3,1fr)}
  .sgb-grid3{grid-template-columns:1fr 1fr}
  .sgb-hint{display:none}
  .sgb-scene,.sgb-upload{width:64px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .sgb-toast{transition:none}
}

/* ---- focus states ----
   WordPress reset.css paints a bare `button:focus` #cc3366, so every control in here
   flashed pink and STAYED pink after a click (the HUD view presets were the worst
   offenders). Out-specify it once for the whole app; `.on` states keep their own
   !important colours, and keyboard users still get a real ring. */
.sgb button:focus,.sgb-modal button:focus,.sgb-arlaunch button:focus{background-color:transparent}
.sgb .sgb-primary:focus,.sgb-modal .sgb-primary:focus,.sgb .sgb-dl:focus{background-color:var(--blue)}
.sgb button:focus-visible,.sgb-modal button:focus-visible,.sgb-arlaunch button:focus-visible{outline:2px solid #57a9ff;outline-offset:-2px}