/* v0.2.1 — ensure inactive render modules stay hidden.
   Author CSS display:flex can otherwise override the browser's hidden attribute. */
.sdcmb [hidden]{display:none!important;}
.sdcmb [data-render][hidden]{display:none!important;}

.sdcmb{--navy:#0c1735;--orange:#ff7a00;--line:#dfe5ec;--muted:#667085;width:min(96vw,1500px);margin:26px auto 52px;font-family:Inter,Arial,sans-serif;color:#151b26}
.sdcmb *{box-sizing:border-box}.sdcmb button,.sdcmb input,.sdcmb select{font:inherit}
.sdcmb-top{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}.sdcmb-eyebrow{font-size:11px;font-weight:900;color:var(--orange);letter-spacing:.8px}.sdcmb-top h2{font-size:32px;line-height:1.05;margin:5px 0 7px;color:var(--navy);letter-spacing:-1px}.sdcmb-top p{margin:0;color:var(--muted)}.sdcmb-mini-note{font-size:11px;color:#7a8391;text-align:right;max-width:260px}
.sdcmb-typebar{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}.sdcmb-typebar button{border:1px solid var(--line);border-radius:10px;background:#fff;padding:13px 15px;text-align:left;cursor:pointer;transition:.18s}.sdcmb-typebar button:hover{border-color:#9eb9ff;transform:translateY(-1px)}.sdcmb-typebar button.active{background:#0e1c3c;color:#fff;border-color:#0e1c3c;box-shadow:0 7px 20px rgba(14,28,60,.16)}.sdcmb-typebar b{display:block;font-size:14px}.sdcmb-typebar span{display:block;font-size:10px;opacity:.68;margin-top:3px}
.sdcmb-layout{display:grid;grid-template-columns:330px 1fr;gap:14px;align-items:start}.sdcmb-controls{background:#f7f9fb;border:1px solid var(--line);border-radius:12px;padding:14px;max-height:none}.sdcmb-controls section{background:#fff;border:1px solid #e8ecf1;border-radius:9px;padding:12px;margin-bottom:10px}.sdcmb-controls section:last-child{margin-bottom:0}.sdcmb-controls h3{font-size:12px;text-transform:uppercase;letter-spacing:.55px;color:#344057;margin:0 0 10px}.sdcmb-controls label{display:block;font-size:11px;font-weight:750;color:#475467;margin:8px 0}.sdcmb-controls input[type=text],.sdcmb-controls select{display:block;width:100%;height:38px;border:1px solid #cfd7e2;border-radius:6px;margin-top:5px;padding:0 9px;background:#fff;color:#111827}.sdcmb-controls input[type=color]{display:block;width:100%;height:36px;border:1px solid #cfd7e2;border-radius:6px;padding:3px;margin-top:5px;background:#fff}.sdcmb-controls input[type=range]{width:100%;margin-top:8px}.sdcmb-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sdcmb-bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.sdcmb-bg-grid button{border:1px solid #d5dce5;border-radius:7px;background:#fff;padding:5px;text-align:left;font-size:10px;color:#354052;cursor:pointer}.sdcmb-bg-grid button.active{border:2px solid #1f66e5;padding:4px}.bg-thumb{display:block;height:46px;border-radius:4px;margin-bottom:5px;background-size:cover;background-position:center}.bg-thumb.brick{background-image:url("../images/brick.jpg")}.bg-thumb.concrete{background-image:url("../images/concrete.jpg")}.bg-thumb.black-acm{background-image:url("../images/black-acm.jpg")}.bg-thumb.light-panel{background-image:url("../images/light-panel.jpg")}
.sdcmb-upload-label{border:1px dashed #c8d0db;border-radius:7px;padding:8px!important;margin-top:10px!important}.sdcmb-upload-label input{display:block;margin-top:6px;font-size:10px;width:100%}.sdcmb-secondary{width:100%;border:1px solid #cad3df;background:#fff;color:#334155;border-radius:6px;padding:7px 8px;font-size:10px;cursor:pointer}.sdcmb-view-toggle{display:grid;grid-template-columns:1fr 1fr;border:1px solid #ccd5e1;border-radius:7px;overflow:hidden}.sdcmb-view-toggle button{height:35px;border:0;background:#fff;color:#455266;cursor:pointer;font-weight:800}.sdcmb-view-toggle button.active{background:#0e1c3c;color:#fff}
.sdcmb-stage-wrap{min-width:0}.sdcmb-stage{position:relative;min-height:640px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:filter .25s,background .25s}.sdcmb-stage.bg-brick{background-image:url("../images/brick.jpg");background-size:720px auto;background-repeat:repeat;background-position:center}.sdcmb-stage.bg-concrete{background-image:url("../images/concrete.jpg")}.sdcmb-stage.bg-black-acm{background-image:url("../images/black-acm.jpg")}.sdcmb-stage.bg-light-panel{background-image:url("../images/light-panel.jpg")}
.sdcmb-vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 38%,rgba(0,0,0,.14) 100%);pointer-events:none}
[data-render]{position:relative;z-index:2;width:88%;display:flex;align-items:center;justify-content:center}
.sdcmb-sign{position:relative;display:inline-block;white-space:nowrap;font-weight:900;line-height:1;letter-spacing:.4px;max-width:100%;transform:perspective(800px) rotateX(1deg)}.sdcmb-sign span{display:block}.sdcmb-sign .rear{position:absolute;inset:0;z-index:1;transform:translate(8px,9px);color:#262a31;text-shadow:1px 1px 0 #16191e,2px 2px 0 #16191e,3px 3px 0 #121418,4px 4px 0 #121418,5px 5px 0 #0e1013}.sdcmb-sign .face{position:relative;z-index:3;color:#fff}
.channel-front .face{text-shadow:0 0 4px currentColor,0 0 13px currentColor,0 0 25px rgba(255,255,255,.8)}
.channel-halo:before,.channel-front-halo:before,.channel-gold:before,.channel-chrome:before{content:"";position:absolute;z-index:0;inset:-16% -7%;border-radius:25px;background:var(--halo,#fff2d6);filter:blur(var(--halo-blur,18px));opacity:var(--halo-opacity,.7)}.channel-front-halo .face{text-shadow:0 0 4px currentColor,0 0 13px currentColor}.channel-gold .face,.three-d.gold .face{background:linear-gradient(90deg,#5f4310 0%,#c99a35 10%,#fff0a5 21%,#8d661d 34%,#f6db83 48%,#7d5b18 62%,#e4bd55 80%,#6a4c13 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.15)}.channel-gold .rear{color:#6d5324}.channel-chrome .face,.three-d.chrome .face{background:linear-gradient(180deg,#4d545b 0%,#fafcff 17%,#7c858e 32%,#ffffff 48%,#60686f 63%,#e9edf0 80%,#555c62 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.channel-chrome .rear{color:#50565c}
.sdcmb-3d-render .three-d .face{text-shadow:0 2px 2px rgba(0,0,0,.18)}.three-d.black .face{color:#090a0b!important}.three-d.black .rear{color:#23262b}.three-d.paint .rear{color:#30343a}
.sdcmb-lightbox{position:relative;width:min(75%,760px);aspect-ratio:3/1;background:#181b1f;border-radius:8px;padding:14px;box-shadow:14px 18px 24px rgba(0,0,0,.28),inset 0 0 0 2px rgba(255,255,255,.14)}.sdcmb-lightbox:after{content:"";position:absolute;left:10px;right:-16px;bottom:-16px;height:16px;background:#08090a;transform:skewX(-45deg);transform-origin:left top;opacity:.75}.sdcmb-lb-face{height:100%;border-radius:3px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 18px rgba(255,255,255,.95),0 0 28px rgba(255,255,255,.34);font-weight:900;font-size:50px;padding:18px;text-align:center}.sdcmb-lb-face img{max-width:92%;max-height:86%;object-fit:contain}.sdcmb-lb-face span{max-width:95%;overflow:hidden;text-overflow:ellipsis}
.sdcmb-neon-render{position:relative}.sdcmb-neon{position:relative;z-index:3;font-size:72px;font-family:cursive;font-weight:500;color:#ff3f8e;-webkit-text-stroke:2px currentColor;text-shadow:0 0 4px currentColor,0 0 10px currentColor,0 0 20px currentColor,0 0 38px currentColor;white-space:nowrap}.sdcmb-neon-backing{position:absolute;z-index:1;inset:-18px -28px;border:1px solid rgba(255,255,255,.42);border-radius:10px;background:rgba(255,255,255,.06);backdrop-filter:blur(1px)}
.sdcmb-stage-meta{position:absolute;z-index:5;left:18px;right:18px;bottom:14px;display:flex;justify-content:space-between;color:rgba(255,255,255,.9);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.sdcmb-bottom{margin-top:10px;background:#0e1c3c;color:#fff;border-radius:10px;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:18px}.sdcmb-bottom strong{display:block;font-size:15px}.sdcmb-bottom span{display:block;font-size:11px;opacity:.72;margin-top:3px}.sdcmb-bottom button{border:0;background:var(--orange);color:#fff;border-radius:7px;padding:12px 16px;font-weight:900;cursor:pointer}
@media(max-width:1050px){.sdcmb-layout{grid-template-columns:280px 1fr}.sdcmb-stage{min-height:560px}.sdcmb-typebar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.sdcmb-top{display:block}.sdcmb-mini-note{text-align:left;margin-top:8px}.sdcmb-layout{grid-template-columns:1fr}.sdcmb-controls{order:2}.sdcmb-stage-wrap{order:1}.sdcmb-stage{min-height:430px}.sdcmb-typebar{grid-template-columns:1fr 1fr}.sdcmb-neon{font-size:44px}.sdcmb-lb-face{font-size:30px}.sdcmb-bottom{flex-direction:column;align-items:flex-start}.sdcmb-bottom button{width:100%}}


/* === v0.3.0 refinement pass === */
.sdcmb [hidden],
.sdcmb [data-render][hidden],
.sdcmb [data-panel][hidden]{display:none!important}

/* Keep every renderer perfectly centered inside the stage. */
.sdcmb [data-render]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8% 7%;
}
.sdcmb-sign{
  display:inline-block;
  max-width:86%;
  text-align:center;
  transform-origin:center center;
}
.sdcmb-sign .face,
.sdcmb-sign .rear{
  white-space:nowrap;
  transform-origin:center center;
}

/* More dimensional, fabricated feel. */
.sdcmb-sign .rear{
  text-shadow:
    1px 1px 0 rgba(0,0,0,.92),
    2px 2px 0 rgba(0,0,0,.88),
    3px 3px 0 rgba(0,0,0,.82),
    4px 4px 0 rgba(0,0,0,.78),
    5px 5px 0 rgba(0,0,0,.72),
    7px 8px 10px rgba(0,0,0,.35);
}
.channel-halo:before,.channel-front-halo:before,.channel-gold:before,.channel-chrome:before{
  inset:-13% -5%;
  filter:blur(var(--halo-blur,18px));
  box-shadow:0 0 22px var(--halo,#fff2d6);
}
.channel-gold .face,.three-d.gold .face{
  background:
    linear-gradient(100deg,#4f3607 0%,#8f6716 7%,#f7db7b 16%,#fff1ad 22%,#8e6718 31%,#d7a83c 42%,#fff0a4 49%,#705015 58%,#c99a32 71%,#fff1a8 80%,#705013 91%,#c08c27 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.channel-chrome .face,.three-d.chrome .face{
  background:
    linear-gradient(180deg,#343a40 0%,#d6dde2 10%,#ffffff 18%,#707981 28%,#f7fafc 40%,#4f585f 52%,#ffffff 62%,#858f97 73%,#e8edf0 84%,#50575d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sdcmb-stage.night .channel-halo:before,
.sdcmb-stage.night .channel-front-halo:before,
.sdcmb-stage.night .channel-gold:before,
.sdcmb-stage.night .channel-chrome:before{
  opacity:calc(var(--halo-opacity,.7) + .13);
}

/* Neon: thinner luminous tube with bright inner core and soft outer bloom. */
.sdcmb-neon{
  font-weight:500;
  letter-spacing:1px;
  line-height:1.05;
  text-align:center;
  -webkit-text-stroke:1px rgba(255,255,255,.72);
  paint-order:stroke fill;
}
.sdcmb-neon:after{
  content:attr(data-text-copy);
  position:absolute;
  inset:0;
  color:rgba(255,255,255,.76);
  -webkit-text-stroke:0;
  text-shadow:0 0 2px #fff;
  opacity:.42;
  pointer-events:none;
}

/* Gloss black ACM should look reflective rather than simply dark. */
.sdcmb-stage.bg-black-acm:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.12) 48%,rgba(255,255,255,.035) 54%,transparent 64%),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 32%,rgba(255,255,255,.03) 78%,transparent);
  pointer-events:none;
  z-index:1;
}

/* Better small-screen fitting. */
@media(max-width:760px){
  .sdcmb [data-render]{padding:12% 4%}
  .sdcmb-sign{max-width:92%}
}


/* v0.3.1 — Light-box proportions + wedding script polish */
.sdcmb-controls input[type=number]{
  display:block;width:100%;height:38px;border:1px solid #cfd7e2;border-radius:6px;
  margin-top:5px;padding:0 9px;background:#fff;color:#111827;
}
.sdcmb-lightbox{transition:width .22s ease,aspect-ratio .22s ease}
.sdcmb-neon{font-kerning:normal;text-rendering:geometricPrecision}


/* === v0.3.2 — Night lighting + text scale === */
.sdcmb-range-row{
  display:grid;
  grid-template-columns:1fr 52px;
  gap:9px;
  align-items:center;
  margin-top:6px;
}
.sdcmb-range-row input[type=range]{margin:0;width:100%}
.sdcmb-range-row output{
  display:grid;
  place-items:center;
  height:30px;
  border:1px solid #d5dce5;
  border-radius:6px;
  background:#f8fafc;
  font-size:10px;
  font-weight:800;
  color:#344057;
}

/* Night should darken the environment, not the illuminated sign. */
.sdcmb-stage.night:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(2,6,13,.58);
  pointer-events:none;
}
.sdcmb-stage.night .sdcmb-vignette{
  z-index:2;
  background:
    radial-gradient(circle at center,rgba(0,0,0,.03) 28%,rgba(0,0,0,.30) 100%);
}
.sdcmb-stage.night [data-render]{
  z-index:4;
  filter:none!important;
}
.sdcmb-stage.night .sdcmb-stage-meta{z-index:6}

/* Lights get brighter at night rather than darker. */
.sdcmb-stage.night .channel-front .face,
.sdcmb-stage.night .channel-front-halo .face{
  filter:brightness(1.34) saturate(1.04);
  text-shadow:
    0 0 4px currentColor,
    0 0 12px currentColor,
    0 0 26px currentColor,
    0 0 42px rgba(255,255,255,.72);
}
.sdcmb-stage.night .channel-halo:before,
.sdcmb-stage.night .channel-front-halo:before,
.sdcmb-stage.night .channel-gold:before,
.sdcmb-stage.night .channel-chrome:before{
  opacity:min(1, calc(var(--halo-opacity,.70) + .20));
  filter:blur(calc(var(--halo-blur,18px) + 4px));
}
.sdcmb-stage.night .channel-gold .face,
.sdcmb-stage.night .channel-chrome .face{
  filter:brightness(1.18);
}
.sdcmb-stage.night .sdcmb-lightbox{
  filter:brightness(1.18);
}
.sdcmb-stage.night .sdcmb-lb-face{
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.98),
    0 0 30px rgba(255,255,255,.48),
    0 0 58px rgba(255,255,255,.24);
}
.sdcmb-stage.night .sdcmb-neon{
  filter:brightness(1.18) saturate(1.12);
}

/* Keep the background reflections subdued at night. */
.sdcmb-stage.night.bg-black-acm:after{opacity:.35}


/* === v0.3.3 — Channel-letter legibility refinement === */
/* Front-lit acrylic should read as a letter first, glow second. */
.sdcmb .channel-front .face{
  -webkit-text-stroke:1px rgba(25,28,33,.38);
  paint-order:stroke fill;
  text-shadow:
    0 0 2px currentColor,
    0 0 6px currentColor,
    0 2px 2px rgba(0,0,0,.25);
}
.sdcmb .channel-front-halo .face{
  -webkit-text-stroke:1px rgba(25,28,33,.34);
  paint-order:stroke fill;
  text-shadow:
    0 0 2px currentColor,
    0 0 5px currentColor,
    0 2px 2px rgba(0,0,0,.22);
}

/* At night, retain crisp edges and add controlled light spill. */
.sdcmb-stage.night .channel-front .face{
  filter:none!important;
  -webkit-text-stroke:1px rgba(20,23,28,.52);
  text-shadow:
    0 0 2px #fff,
    0 0 5px currentColor,
    0 0 11px currentColor,
    0 0 20px color-mix(in srgb,currentColor 55%,transparent),
    0 3px 3px rgba(0,0,0,.32);
}
.sdcmb-stage.night .channel-front-halo .face{
  filter:none!important;
  -webkit-text-stroke:1px rgba(20,23,28,.48);
  text-shadow:
    0 0 2px #fff,
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 2px 3px rgba(0,0,0,.28);
}

/* Preserve a visible return/depth silhouette around illuminated faces. */
.sdcmb-stage.night .channel-front .rear,
.sdcmb-stage.night .channel-front-halo .rear{
  color:#171a1f;
  opacity:1;
  filter:none!important;
}

/* Light-box text stays crisp even when the cabinet is luminous. */
.sdcmb-stage.night .sdcmb-lb-face span{
  filter:none!important;
  text-shadow:0 1px 1px rgba(0,0,0,.12);
}