/* Signtility Designer (designer.js) */
body.designing main { max-width: none; padding: var(--header-h) 0 0; }
body.designing #nav { display: none; }
@media (min-width: 900px) { body.designing main { padding: var(--header-h) 0 0; margin-left: 0; } }
body.designing { overflow: hidden; }

.dz-editor { --iz: 1; display: flex; flex-direction: column; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: var(--bg); }
.dz-top { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dz-top .dz-name { flex: 0 1 320px; width: 320px !important; min-width: 120px; min-height: 38px !important; border-color: transparent !important; background: transparent !important; font: 600 1.05rem var(--head-font) !important; color: var(--ink) !important; }
.dz-top .dz-name:hover, .dz-top .dz-name:focus { border-color: var(--line-strong) !important; background: var(--panel) !important; }
.dz-sp { flex: 1; }
.dz-group { display: flex; align-items: center; gap: 2px; padding: 0 .3rem; border-left: 1px solid var(--line); }
.dz-zoomlabel { min-width: 58px; font-variant-numeric: tabular-nums; }
.dz-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; }

/* left */
.dz-left { display: flex; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.dz-tabs { display: flex; flex-direction: column; gap: 2px; padding: .5rem .35rem; border-right: 1px solid var(--line); width: 74px; flex: none; }
.dz-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: .55rem .2rem; border: 0; border-radius: 8px; background: none; color: var(--muted);
  font: 600 .68rem var(--head-font); cursor: pointer; }
.dz-tabs button:hover { color: var(--ink); background: var(--pill); }
.dz-tabs button.on { color: var(--brand); background: var(--brand-soft); }
.dz-leftbody { flex: 1; min-width: 0; overflow: auto; padding: .9rem; }
.dz-leftbody h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1rem 0 .5rem; }
.dz-leftbody h3:first-child { margin-top: 0; }
.dz-textbtn { display: block; width: 100%; text-align: left; padding: .65rem .8rem; margin-bottom: .45rem; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink); cursor: grab; font-family: var(--head-font); }
.dz-textbtn:hover { border-color: var(--brand); }
.dz-tb1 { font-size: 1.35rem; font-weight: 700; }
.dz-tb2 { font-size: 1.02rem; font-weight: 600; }
.dz-tb3 { font: 400 .88rem "Open Sans", system-ui, sans-serif; }
.dz-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.dz-tile { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .2rem .55rem; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink); cursor: grab; font: 600 .72rem var(--head-font); }
.dz-tile:hover { border-color: var(--brand); color: var(--brand); }
.dz-tile svg.i { width: 24px; height: 24px; }
.dz-tip { font-size: .8rem; color: var(--muted); margin: .8rem 0 0; line-height: 1.45; }
.dz-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.dz-mthumb { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: grab; overflow: hidden; }
.dz-mthumb:hover { border-color: var(--brand); }
.dz-mthumb.on { border-color: var(--brand); }
.dz-mthumb .thumb { border-radius: 6px; pointer-events: none; }
.dz-tgrid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.dz-tcard { display: flex; flex-direction: column; gap: .35rem; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink);
  font: 600 .82rem var(--head-font); }
.dz-tthumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #000; }
.dz-tcard.tall .dz-tthumb { aspect-ratio: 9 / 16; width: 56%; }
.dz-tthumb .slbox { position: absolute; inset: 0; }
.dz-tcard:hover .dz-tthumb { border-color: var(--brand); }
.dz-layers { display: flex; flex-direction: column; gap: 3px; }
.dz-layer { display: flex; align-items: center; gap: .45rem; padding: .4rem .45rem; border-radius: 7px; cursor: pointer; color: var(--ink); font-size: .85rem; border: 1px solid transparent; }
.dz-layer:hover { background: var(--pill); }
.dz-layer.on { background: var(--brand-soft); border-color: var(--brand); }
.dz-layer.off { opacity: .5; }
.dz-layer.dragging { opacity: .35; }
.dz-layer.over { box-shadow: 0 -2px 0 var(--brand); }
.dz-layer svg.i { width: 16px; height: 16px; color: var(--muted); }
.dz-grip { cursor: grab; display: grid; place-items: center; }
.dz-lname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-mini { border: 0; background: none; padding: 3px; border-radius: 5px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.dz-mini:hover { background: var(--panel); color: var(--ink); }

/* stage */
.dz-center { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dz-stage { flex: 1; overflow: auto; position: relative; background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(127,127,127,.22) 1px, transparent 1.2px); background-size: 22px 22px; user-select: none; -webkit-user-select: none; touch-action: none; }
.dz-stage.dropping { box-shadow: inset 0 0 0 3px var(--brand); }
.dz-scroller { position: relative; }
.dz-editcanvas { position: absolute; transform-origin: 0 0; box-shadow: 0 10px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(127,127,127,.25); overflow: hidden; }
.dz-editcanvas .dz-el { cursor: move; }
.dz-editcanvas .dz-el:hover { outline: calc(2px * var(--iz)) solid rgba(77, 141, 255, .7); }
.dz-editcanvas .dz-el.dz-locked { cursor: default; }
.dz-editcanvas .dz-el.dz-hidden { opacity: .15 !important; pointer-events: none; }
.dz-editcanvas [contenteditable] { outline: none; cursor: text; user-select: text; -webkit-user-select: text; caret-color: currentColor; }
.dz-hint { padding: .45rem .9rem; font-size: .76rem; color: var(--muted); text-align: center; border-top: 1px solid var(--line); background: var(--panel); }

.dz-overlay { position: absolute; pointer-events: none; }
.dz-selbox { position: absolute; outline: 2px solid #4d8dff; outline-offset: 0; transform-origin: center center; }
.dz-selbox.locked { outline-color: #f59e0b; outline-style: dashed; }
.dz-groupbox { position: absolute; outline: 1px dashed #4d8dff; }
.dz-handle { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 3px; background: #fff; border: 2px solid #4d8dff; pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.dz-h-nw { left: 0; top: 0; cursor: nwse-resize; } .dz-h-n { left: 50%; top: 0; cursor: ns-resize; } .dz-h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.dz-h-e { left: 100%; top: 50%; cursor: ew-resize; } .dz-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .dz-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.dz-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .dz-h-w { left: 0; top: 50%; cursor: ew-resize; }
.dz-h-n, .dz-h-s { width: 20px; height: 8px; margin: -4px 0 0 -10px; border-radius: 4px; }
.dz-h-e, .dz-h-w { width: 8px; height: 20px; margin: -10px 0 0 -4px; border-radius: 4px; }
.dz-rot { position: absolute; left: 50%; top: -34px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 2px solid #4d8dff;
  pointer-events: auto; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.dz-rot::after { content: ""; position: absolute; left: 50%; top: 16px; height: 16px; border-left: 2px solid #4d8dff; transform: translateX(-50%); }
.dz-size { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); padding: 2px 7px; border-radius: 5px; background: #4d8dff; color: #fff;
  font: 600 11px var(--head-font); white-space: nowrap; }
.dz-guide { position: absolute; background: #ff3d8b; }
.dz-guide.v { width: 1px; } .dz-guide.h { height: 1px; }
.dz-marquee { position: absolute; background: rgba(77, 141, 255, .12); outline: 1px solid #4d8dff; }

/* right */
.dz-right { background: var(--panel); border-left: 1px solid var(--line); overflow: auto; padding: .2rem 0 2rem; }
.dz-rhead { display: flex; align-items: center; gap: .5rem; padding: .9rem 1rem .5rem; color: var(--ink); font-family: var(--head-font); }
.dz-rhead b { font-size: 1rem; }
.dz-rhead svg.i { color: var(--brand); }
.dz-rhead small { margin-left: auto; }
.dz-sec { padding: .8rem 1rem; border-top: 1px solid var(--line); }
.dz-sec:first-of-type { border-top: 0; }
.dz-sec h4 { margin: 0 0 .6rem; font: 700 .72rem var(--head-font); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dz-sec textarea { min-height: 70px; font-size: .9rem; }
.dz-row { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .55rem; }
.dz-row > * { flex: 1; min-width: 0; margin-bottom: 0 !important; }
.dz-row > .btn { flex: none; }
.dz-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .6rem; }
.dz-flabel { font: 600 .74rem var(--head-font); color: var(--text); }
.dz-field select, .dz-field input[type=text], .dz-field input[type=datetime-local] { min-height: 36px; padding: .3rem .55rem; font-size: .88rem; }
.dz-field input[type=datetime-local] { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); background: var(--panel); color: var(--ink); font: inherit; }
.dz-field input[type=range] { width: 100%; accent-color: var(--brand); }
.dz-num { display: flex; align-items: center; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); background: var(--panel); overflow: hidden; }
.dz-num span { padding: 0 .1rem 0 .55rem; font: 600 .72rem var(--head-font); color: var(--muted); white-space: nowrap; }
.dz-num input { border: 0 !important; min-height: 34px !important; padding: .2rem .45rem !important; font-size: .88rem !important; min-width: 0; outline-offset: -2px; }
.dz-num em { font-style: normal; font-size: .75rem; color: var(--muted); padding-right: .5rem; }
.dz-seg { display: flex; width: 100%; }
.dz-seg button { flex: 1; display: grid; place-items: center; padding: .35rem .3rem; font-size: .76rem; }
.dz-seg svg.i { width: 17px; height: 17px; }
.dz-toggles { display: flex; gap: .3rem; margin-bottom: .6rem; }
.dz-tog { flex: 1; min-height: 32px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: 700 .8rem var(--head-font); cursor: pointer; }
.dz-tog:nth-child(2) { font-style: italic; } .dz-tog:nth-child(3) { text-decoration: underline; }
.dz-tog.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.dz-color { margin-bottom: .7rem; }
.dz-colorrow { display: flex; gap: .4rem; margin-top: .3rem; }
.dz-colorrow input[type=text] { min-height: 34px; padding: .2rem .5rem; font: 500 .82rem ui-monospace, Menlo, monospace; }
.dz-sw { position: relative; flex: none; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-strong); }
.dz-sw input { position: absolute; inset: -8px; width: 50px; height: 50px; border: 0; padding: 0; cursor: pointer; }
.dz-sw.none { background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.dz-swatches { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .4rem; }
.dz-swatches button { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(127,127,127,.4); cursor: pointer; padding: 0; }
.dz-swatches .dz-none { background: linear-gradient(135deg, #fff 45%, #e11d48 45% 55%, #fff 55%); }
.dz-iconrow { display: flex; gap: 3px; margin-bottom: .5rem; flex-wrap: wrap; }
.dz-ibtn { flex: 1; min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); cursor: pointer; }
.dz-ibtn:hover { border-color: var(--brand); color: var(--brand); }
.dz-ibtn svg.i { width: 17px; height: 17px; }
.dz-keys { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; margin: 0; font-size: .78rem; }
.dz-keys dt { font: 600 .74rem var(--head-font); color: var(--ink); white-space: nowrap; }
.dz-keys dd { margin: 0; color: var(--muted); }
.dz-bgpick { margin-bottom: .6rem; }

@media (max-width: 1180px) { .dz-body { grid-template-columns: 260px minmax(0, 1fr) 260px; } }
@media (max-width: 899px) {
  .dz-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; }
  .dz-center { order: 1; min-height: 50vh; }
  .dz-left { order: 2; max-height: 34vh; border-right: 0; border-top: 1px solid var(--line); }
  .dz-right { order: 3; max-height: 40vh; border-left: 0; border-top: 1px solid var(--line); }
  body.designing #nav { display: none; }
  .dz-hint { display: none; }
}

/* live data settings */
.dz-findrow { display: flex; gap: .4rem; } .dz-findrow input { flex: 1; min-width: 0; }
.dz-places { display: flex; flex-direction: column; gap: .25rem; margin: -.2rem 0 .6rem; font-size: .82rem; color: var(--muted); }
.dz-place { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; }
.dz-place:hover { border-color: var(--brand); } .dz-place span { color: var(--muted); font-size: .78rem; }
.dz-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: -.2rem 0 .7rem; }
.dz-chip { font: 600 .75rem var(--head-font); padding: .3rem .6rem; border-radius: 99px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer; }
.dz-chip:hover { border-color: var(--brand); color: var(--ink); }

/* Icons tab */
.dz-isearch { width: 100%; margin-bottom: .55rem; }
.dz-icats { margin: 0 0 .6rem; max-height: 5.4rem; overflow-y: auto; }
.dz-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); }
.dz-igrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.dz-itile { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: var(--bg); color: var(--ink); cursor: pointer; padding: 0; }
.dz-itile:hover { border-color: var(--brand); background: var(--brand-soft); }
.dz-itile svg { width: 26px; height: 26px; }
.dz-pickbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; margin-bottom: .6rem; border-radius: 8px;
  background: var(--brand-soft); color: var(--ink); font-size: .8rem; font-weight: 600; }
.dz-iconnow { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.dz-iconnow b { flex: 1; text-transform: capitalize; font-size: .85rem; }
.dz-iconprev { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #232a52; flex: none; }
.dz-iconprev svg { width: 28px; height: 28px; }
/* Templates tab */
.dz-tsearch { width: 100%; margin-bottom: .55rem; }
.dz-tcat { font: 700 .68rem var(--head-font); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: .9rem 0 .4rem; grid-column: 1 / -1; }

/* tips inside the right panel's sections: room above and below, so they never run into the next label */
.dz-sec .dz-tip { margin: .15rem 0 .85rem; }
.dz-sec .dz-tip.dz-tip-tight { margin: -.35rem 0 .6rem; }

/* saving status next to the name */
.dz-savenote { font-size: .78rem; color: var(--muted); white-space: nowrap; margin-left: .5rem; }
.dz-savenote.busy { color: var(--muted); } .dz-savenote.ok { color: var(--muted); } .dz-savenote.bad { color: var(--bad, #e11d48); }
.dz-retry { margin-left: .3rem; font: 600 .78rem var(--head-font); color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
/* History */
.dz-hlist { display: flex; flex-direction: column; gap: .3rem; }
.dz-hday { font: 700 .68rem var(--head-font); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: .8rem 0 .2rem; }
.dz-hday:first-child { margin-top: 0; }
.dz-hrow { text-align: left; padding: .55rem .65rem; border-radius: 9px; border: 1px solid transparent; background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; }
.dz-hrow:hover { border-color: var(--line-strong); } .dz-hrow.on { border-color: var(--brand); background: var(--brand-soft); }
.dz-hrow.current { border-color: var(--line-strong); }
.dz-htop { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.dz-hbadge { font: 700 .62rem var(--head-font); text-transform: uppercase; letter-spacing: .06em; padding: .15rem .4rem; border-radius: 99px; background: var(--line-strong); color: var(--ink); }
.dz-hbadge.cur { background: var(--brand); color: #fff; }
.dz-hsum { font-size: .8rem; color: var(--text); margin-top: .15rem; }
.dz-hwho { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.dz-center { position: relative; }
.dz-histview { position: absolute; inset: 0 0 46px 0; z-index: 5; background: var(--bg); padding: 24px; display: flex; }
.dz-histview .slbox { flex: 1; position: relative; }
.dz-histbar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: .5rem;
  padding: .45rem .5rem .45rem .9rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-size: .85rem; color: var(--ink); white-space: nowrap; }

/* auto color */
.dz-auto { width: auto !important; padding: 0 .45rem !important; font: 700 .66rem var(--head-font); color: var(--ink); border: 1px solid var(--line-strong) !important;
  background: linear-gradient(135deg, #ffffff 0 50%, #1f2233 50% 100%) !important; color: transparent; position: relative; min-width: 2.6rem; }
.dz-auto::after { content: "Auto"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.dz-auto.on { outline: 2px solid var(--brand); outline-offset: 1px; }
.dz-sw.auto { background: linear-gradient(135deg, #ffffff 0 50%, #1f2233 50% 100%); }
.dz-warn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .5rem 0 .2rem; padding: .45rem .6rem; border-radius: 8px;
  background: rgba(245, 158, 11, .14); color: var(--ink); font-size: .78rem; font-weight: 600; }
.dz-histview .sl, .dz-histview .sl-design { background: transparent; }