/* v1.3.2 */
#snb-builder{font-family:Arial,sans-serif}
.snb-layout{display:flex;flex-direction:column;gap:18px}
#snb-stage{order:1}
#snb-options{order:2}
#snb-options{max-width:980px;margin:12px auto}
#snb-stage{max-width:1100px;margin:0 auto}
@media (min-width:1000px){
  .snb-layout{display:grid;grid-template-columns:420px 1fr;align-items:start;max-width:1400px;margin:0 auto;gap:18px}
  #snb-options{order:initial}
  #snb-stage{order:initial}
  #snb-options{max-width:none;margin:0;position:sticky;top:90px;max-height:calc(100vh - 110px);overflow:auto;padding-right:8px}
  #snb-stage{max-width:none;margin:0}
}
.snb-section{background:#fff;border:1px solid #e7e7e7;border-radius:14px;padding:12px;margin:12px 0;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.snb-section h3{margin:0 0 10px 0;font-size:16px}
.snb-label{display:block;font-weight:700;margin:10px 0 6px 0;font-size:13px}
.snb-note{font-size:12px;color:#666;margin-top:8px}
#snb-input{width:100%;box-sizing:border-box;padding:10px;border:1px solid #ddd;border-radius:10px;resize:vertical}
#snb-font,#snb-glow-strength,#snb-tube-mode,#snb-tube-size{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;box-sizing:border-box;background:#fff}
#snb-width,#snb-dimmer{width:100%}
#snb-preview{position:relative;height:62vh;background:#111;border-radius:16px;overflow:hidden}
#snb-scene{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(1)}
#snb-text-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:grab;touch-action:none;user-select:none}
#snb-text-wrap:active{cursor:grabbing}
#snb-text{font-size:84px;line-height:1.05;white-space:pre-wrap;text-align:center;color:#ff00ff;filter:saturate(1.05)}
#snb-size-overlay{margin-top:8px;font-size:12px;color:#fff;text-align:center;opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#snb-text.glow-off{text-shadow:none}
#snb-text.glow-on.glow-soft{text-shadow:0 0 8px currentColor, 0 0 18px rgba(255,255,255,.15)}
#snb-text.glow-on.glow-normal{text-shadow:0 0 12px currentColor, 0 0 28px currentColor, 0 0 44px rgba(255,255,255,.18)}
#snb-text.glow-on.glow-strong{text-shadow:0 0 16px currentColor, 0 0 38px currentColor, 0 0 70px currentColor, 0 0 90px rgba(255,255,255,.22)}
@keyframes snb-rainbow{0%{color:#ff004c}16%{color:#ff8a00}33%{color:#ffee00}50%{color:#00ff6a}66%{color:#00e5ff}83%{color:#7a5cff}100%{color:#ff00ff}}
#snb-text.rgb-on{animation:snb-rainbow 3.8s linear infinite}
.snb-align{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.snb-align-btn{padding:8px 10px;border:1px solid #ddd;border-radius:10px;background:#fff;cursor:pointer}
.snb-align-btn.active{border-color:#ff00ff;box-shadow:0 0 0 2px rgba(255,0,255,.14)}
.snb-switch{display:flex;gap:10px;align-items:center}
.snb-switch input{transform:scale(1.1)}
.snb-btn{margin-top:12px;padding:10px 14px;border:1px solid #ddd;border-radius:12px;background:#fff;cursor:pointer}
.snb-btn:hover{border-color:#ff00ff}
.snb-colours{display:flex;gap:10px;flex-wrap:wrap}
.snb-colour{width:26px;height:26px;border-radius:50%;border:2px solid rgba(0,0,0,.25);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15);position:relative}
.snb-colour.active{outline:3px solid rgba(255,0,255,.35);border-color:#fff}
.snb-colour.rgb::after{content:'RGB';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#111}
.snb-scenes{display:flex;gap:10px;padding:10px 0;overflow-x:auto}
.snb-scene-thumb{height:62px;width:92px;object-fit:cover;border-radius:12px;border:2px solid transparent;cursor:pointer;flex:0 0 auto}
.snb-scene-thumb.active{border-color:#ff00ff}
.snb-presets{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.snb-preset{border:1px solid #e1e1e1;border-radius:14px;padding:10px;background:#fff;cursor:pointer;text-align:left}
.snb-preset .t{font-weight:800;font-size:13px}
.snb-preset .s{font-size:12px;color:#666;margin-top:4px}
.snb-preset.active{border-color:#ff00ff;box-shadow:0 0 0 2px rgba(255,0,255,.12)}
@media (max-width:768px){#snb-preview{height:56vh}#snb-text{font-size:66px}}


#snb-overlay-ui{position:absolute;inset:0;pointer-events:none}
#snb-overlay-ui .snb-overlay-topright{position:absolute;top:10px;right:10px;pointer-events:auto}
#snb-overlay-ui .snb-overlay-bottomleft{position:absolute;left:10px;bottom:10px;display:flex;gap:10px;align-items:center;pointer-events:auto;background:rgba(0,0,0,.35);padding:8px 10px;border-radius:12px}
#snb-overlay-ui input[type=range]{width:180px}
#snb-overlay-ui .snb-toggle{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.35);padding:8px 10px;border-radius:12px;color:#fff;font-weight:600}
#snb-overlay-ui .snb-toggle input{accent-color:#d400ff}
#snb-units-label{color:#fff;font-weight:700;min-width:24px;text-transform:uppercase}


/* Overlay UI */
.snb-overlay-bottomright{ position:absolute; right:14px; bottom:14px; pointer-events:auto; display:flex; flex-direction:column; gap:6px; background:rgba(0,0,0,.35); padding:10px 12px; border-radius:12px; backdrop-filter: blur(6px); }
.snb-overlay-dimmer-label{ font-size:12px; color:#fff; opacity:.9; }
.snb-units-toggle span{ color:#fff; font-size:12px; }
.snb-units-toggle{ background:rgba(0,0,0,.35); padding:8px 10px; border-radius:12px; backdrop-filter: blur(6px); }
.snb-units-toggle input{ margin-right:6px; }

#snb-scene-row{max-width:980px;margin:14px auto 0; padding:0 10px;}
#snb-scene-row .snb-scene-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
#snb-scene-row .snb-scene-row-title{font-weight:800}
#snb-scenes.snb-scenes-row{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}
#snb-scenes.snb-scenes-row .snb-scene-thumb{flex:0 0 auto}


/* Units pill + reference toggle */
.snb-units-pill{display:flex; gap:2px; align-items:center; background:rgba(0,0,0,.35); padding:6px 6px; border-radius:999px; backdrop-filter: blur(6px); cursor:pointer; user-select:none;}
.snb-units-pill .unit{font-size:12px; color:#fff; opacity:.7; padding:2px 8px; border-radius:999px;}
.snb-units-pill .unit.active{opacity:1; background:rgba(255,255,255,.18);} 
.snb-ref-toggle{margin-left:8px; background:rgba(0,0,0,.35); color:#fff; border:0; padding:6px 10px; border-radius:10px; font-size:12px; cursor:pointer; backdrop-filter: blur(6px);} 
.snb-ref-toggle.active{background:rgba(255,255,255,.18);} 

#snb-ref-canvas{position:absolute; inset:0; pointer-events:none;}


/* v1.3.19 - Accordion option sections */
.snb-acc-toggle{width:100%;text-align:left;background:transparent;border:0;padding:0;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.snb-acc-toggle:after{content:'▾';font-size:14px;line-height:1;opacity:.7;margin-left:10px;transition:transform .15s ease}
.snb-section:not(.snb-collapsed) .snb-acc-toggle:after{transform:rotate(180deg)}
.snb-section.snb-collapsed .snb-section-body{display:none}
.snb-section h3{display:block}
.snb-section h3 .snb-acc-toggle{font-weight:700;font-size:16px}
.snb-section-body{margin-top:10px}


/* Mobile layout lock */
@media (max-width:999px){
  #snb-options{position:static;max-height:none;overflow:visible;padding-right:0;max-width:none;margin:0}
  #snb-stage{max-width:none;margin:0}
}

/* Info tooltips (v1.3.23) */
.snb-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid #cfcfcf;
  background:#f7f7f7;
  color:#333;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  margin-left:8px;
  vertical-align:middle;
}
.snb-info:focus{outline:2px solid rgba(212,0,255,.35);outline-offset:2px}
.snb-tip{position:fixed;
  position:absolute;
  z-index:50;
  min-width:220px;
  max-width:320px;
  padding:10px 12px;
  background:#111;
  color:#fff;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  font-size:12px;
  line-height:1.35;
  display:none;
}
.snb-tip .snb-tip-title{font-weight:800;margin:0 0 6px 0;font-size:12px}
.snb-tip img{max-width:100%;height:auto;border-radius:10px;display:block;margin-top:8px}
.snb-tip[data-open="1"]{display:block}


/* Info icon positioning in accordion headings (v1.3.28) */
.snb-section h3{position:relative}
.snb-section h3 .snb-acc-toggle{padding-right:44px} /* space for info icon */
.snb-section h3 .snb-info{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  margin-left:0;
}


/* Price panel (v1.3.32) */
.snb-price-panel{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  padding:12px 14px;
  margin:0 0 14px 0;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
}
.snb-price-title{font-weight:700; font-size:14px; opacity:.8; margin-bottom:4px;}
.snb-price-total{font-weight:800; font-size:22px; line-height:1.1;}
.snb-price-breakdown{margin-top:8px; font-size:13px; opacity:.85;}
.snb-price-row{display:flex; justify-content:space-between; gap:10px; padding:2px 0;}


/* Summary panel (v1.3.39) */
.snb-summary-panel{
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:14px;
  padding:12px;
  margin:12px 0 18px 0;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.snb-summary-title{font-weight:800; font-size:14px; margin:0 0 8px 0;}
.snb-summary-list{font-size:13px; color:#222;}
.snb-summary-item{display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px dashed rgba(0,0,0,.08);}
.snb-summary-item:last-child{border-bottom:0;}
.snb-summary-k{font-weight:700; opacity:.8;}
.snb-summary-v{font-weight:600; text-align:right;}

.snb-summary-actions{margin-top:10px; display:flex; gap:10px;}
.snb-btn{
  appearance:none;
  border:0;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  background:linear-gradient(90deg,#ff4adf,#00e5ff);
  color:#111;
  width:100%;
}
.snb-btn:active{transform:translateY(1px);}

/* Export mode: hide UI controls inside preview while capturing */
body.snb-exporting #snb-overlay-ui{display:none !important;}
body.snb-exporting #snb-size-overlay{display:none !important;}

/* Under-preview info strip (v1.3.39) */
.snb-under-preview{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin:10px 0 4px 0;
  padding:0 10px;
}
.snb-under-preview-left{font-size:12px; color:#666;}
.snb-under-preview-right{text-align:right;}
.snb-under-preview-price-label{font-size:12px; color:#666; margin-bottom:2px;}
.snb-under-preview-price{font-size:22px; font-weight:800; line-height:1.1;}