/* Theobald Home — slide designer (full-screen editor over the manager app). */
body.dz-open{overflow:hidden}
#designer{position:fixed;inset:0;z-index:40;background:#14161f;color:#e9ecf3;display:flex;flex-direction:column}
#designer .muted{color:#8b93a7}
.dz-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#1a1d29;border-bottom:1px solid #262a3a}
.dz-top .btn{background:#252a3b;border-color:#30364a;color:#e9ecf3;box-shadow:none}
.dz-top .btn:hover{background:#2e3448}
.dz-top .btn.primary{background:var(--accent);border-color:transparent}
.dz-name{max-width:320px;background:#12141c;border-color:#30364a;color:#fff;font-weight:600}
.dz-inline{display:flex;align-items:center;gap:6px;margin:0;color:#b9c0d0;white-space:nowrap}
.dz-inline input{width:72px;background:#12141c;border-color:#30364a;color:#fff;padding:6px 8px}
.dz-body{flex:1;display:flex;min-height:0}
.dz-tools{width:78px;flex:none;background:#1a1d29;border-right:1px solid #262a3a;display:flex;flex-direction:column;gap:4px;padding:10px 6px;overflow:auto}
.dz-tools button{background:none;border:none;color:#cfd5e4;border-radius:10px;padding:9px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600}
.dz-tools button i{font-size:22px}
.dz-tools button:hover{background:#262b3d;color:#fff}
.dz-sep{height:1px;background:#2a2f41;margin:6px 8px}
.dz-canvas-wrap{flex:1;position:relative;overflow:hidden;background:
  radial-gradient(circle at 1px 1px,#262a3a 1px,transparent 0) 0 0/22px 22px,#101218}
.dz-canvas{position:absolute;width:1920px;height:1080px;transform-origin:0 0;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden}
.dz-bgimg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dz-el{position:absolute;cursor:move;outline:calc(1px * var(--inv,1)) dashed transparent}
.dz-el:hover{outline-color:rgba(255,179,107,.55)}
.dz-el.sel{outline:calc(2px * var(--inv,1)) solid #ffb36b}
.dz-inner{position:absolute;inset:0;pointer-events:none}
.dz-handle{position:absolute;background:#fff;border:calc(2px * var(--inv,1)) solid #e8740c;border-radius:50%;transform:translate(-50%,-50%);z-index:3}
.dz-handle.nw{left:0;top:0;cursor:nwse-resize}.dz-handle.n{left:50%;top:0;cursor:ns-resize}.dz-handle.ne{left:100%;top:0;cursor:nesw-resize}
.dz-handle.e{left:100%;top:50%;cursor:ew-resize}.dz-handle.se{left:100%;top:100%;cursor:nwse-resize}.dz-handle.s{left:50%;top:100%;cursor:ns-resize}
.dz-handle.sw{left:0;top:100%;cursor:nesw-resize}.dz-handle.w{left:0;top:50%;cursor:ew-resize}
#dzGuides{position:absolute;inset:0;pointer-events:none;z-index:5}
.dz-guide{position:absolute;background:#ff3fa4}
.dz-guide.v{top:0;bottom:0;width:calc(2px * var(--inv,1))}
.dz-guide.h{left:0;right:0;height:calc(2px * var(--inv,1))}

.dz-props{width:310px;flex:none;background:#1a1d29;border-left:1px solid #262a3a;overflow:auto;padding:16px 16px 40px}
.dz-props h3{font-size:15px;margin-bottom:4px}
.dz-props label{color:#9aa2b6;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;margin:14px 0 5px}
.dz-props input,.dz-props select,.dz-props textarea{background:#12141c;border-color:#30364a;color:#fff;padding:7px 9px;font-size:13px}
.dz-props textarea{min-height:70px}
.dz-props .btn{background:#252a3b;border-color:#30364a;color:#e9ecf3;box-shadow:none}
.dz-props .btn.danger{color:#ff8a80}
.dz-props .pill{background:#2e3448;color:#ffb36b}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 6px}
.dz-props .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
.dz-color{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dz-color input[type=color]{width:38px;height:34px;padding:2px;flex:none;cursor:pointer}
.dz-color input:not([type]){flex:1;min-width:0}
.dz-sw{display:flex;flex-wrap:wrap;gap:4px;width:100%}
.dz-sw button{width:20px;height:20px;border-radius:5px;border:1px solid #3a4057;cursor:pointer}
.dz-seg{display:inline-flex;background:#12141c;border:1px solid #30364a;border-radius:9px;overflow:hidden;margin-right:6px}
.dz-seg button{background:none;border:none;color:#cfd5e4;padding:6px 9px;cursor:pointer}
.dz-seg button:hover{background:#262b3d}
.dz-seg button.on{background:var(--accent);color:#fff}
.dz-help{margin-top:22px;font-size:12.5px;line-height:1.55;color:#aab1c2;background:#12141c;border:1px solid #262a3a;border-radius:10px;padding:12px}
.dz-help code,#designer code{background:#262b3d;color:#ffb36b;border-radius:5px;padding:1px 5px;font-size:12px}

.dz-sheet{z-index:45}
.dz-sheet .modal-card{color:var(--text)}
.dz-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:14px}
.dz-tpls button{border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:10px;text-align:left;cursor:pointer}
.dz-tpls button:hover{border-color:var(--accent);background:var(--accent-tint)}
.dz-tpl-prev{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;margin-bottom:8px;background:#0b0d14}
.dz-tpls b{display:block;font-size:13.5px}.dz-tpls span{font-size:12px;color:var(--text-2)}

.dz-preview{position:absolute;inset:0;z-index:46;background:#000;display:flex;flex-direction:column}
.dz-preview-stage{position:relative;flex:1}
.dz-preview-bar{padding:10px 16px;background:#1a1d29;display:flex;gap:12px;align-items:center;justify-content:center;font-size:13px;color:#cfd5e4}

@media (max-width:900px){
  .dz-props{width:250px}
  .dz-top .muted{display:none}
}

/* ── Polish pass: zoom, side tabs, layers, inline edit, context menu ─── */
.dz-zoom{display:inline-flex;background:#252a3b;border:1px solid #30364a;border-radius:9px;overflow:hidden}
.dz-zoom button{background:none;border:none;color:#e9ecf3;padding:7px 9px;cursor:pointer;font-weight:600;font-size:12.5px;min-width:34px}
.dz-zoom button:hover{background:#2e3448}
#dzZoomFit{min-width:52px;border-left:1px solid #30364a;border-right:1px solid #30364a}
.dz-canvas-wrap{overflow:auto}
#dzSizer{position:absolute;left:0;top:0;pointer-events:none}
.dz-side{width:310px;flex:none;display:flex;flex-direction:column;background:#1a1d29;border-left:1px solid #262a3a;min-height:0}
.dz-side .dz-props{width:auto;border-left:none;flex:1}
.dz-tabs{display:flex;border-bottom:1px solid #262a3a;flex:none}
.dz-tabs button{flex:1;background:none;border:none;color:#9aa2b6;padding:11px 8px;font-weight:650;cursor:pointer;border-bottom:2px solid transparent}
.dz-tabs button.on{color:#fff;border-bottom-color:var(--accent)}
.dz-el.locked{pointer-events:none}
.dz-inline-edit{position:absolute;inset:0;width:100%;height:100%;background:rgba(0,0,0,.25);border:none;outline:calc(2px * var(--inv,1)) solid #ffb36b;
  resize:none;overflow:hidden;z-index:4;white-space:pre-wrap;caret-color:#ffb36b}
.dz-layers{display:flex;flex-direction:column;gap:2px}
.dz-layer{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:8px;cursor:pointer;color:#dfe3ee;font-size:13px}
.dz-layer:hover{background:#232838}
.dz-layer.sel{background:rgba(232,116,12,.22);color:#fff}
.dz-layer.is-hidden .dz-lname{opacity:.4;text-decoration:line-through}
.dz-layer.dragging{opacity:.5}
.dz-lgrip{color:#5e667c;cursor:grab;touch-action:none}
.dz-ltype{color:#ffb36b}
.dz-lname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-layer button{background:none;border:none;color:#8b93a7;cursor:pointer;padding:3px 4px;border-radius:5px}
.dz-layer button:hover{color:#fff;background:#2e3448}
.dz-layer button.on{color:#ffb36b}
.dz-ctx{position:fixed;z-index:60;background:#1f2333;border:1px solid #343a52;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.45);padding:6px;min-width:230px;color:#e9ecf3}
.dz-ctx button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:inherit;padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left;font-size:13px}
.dz-ctx button:hover{background:#2e3448}
.dz-ctx button span{flex:1}
.dz-ctx button.danger{color:#ff8a80}
.dz-ctx kbd{font:inherit;font-size:11px;color:#8b93a7}
.dz-ctx hr{border:none;border-top:1px solid #343a52;margin:4px 0}
.dz-tpl-h{font-size:13px;margin:16px 0 0;color:var(--text-2)}
.dz-tpls button{position:relative}
.dz-tpl-del{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.6);color:#fff;border-radius:7px;padding:5px;font-size:15px}
.dz-tpl-del:hover{background:var(--bad)}
@media (max-width:900px){ .dz-side{width:250px} }

/* ── Data tab (drag cards onto the slide) ───────────────────────────── */
.dz-data-help{display:flex;gap:9px;align-items:flex-start;background:#12141c;border:1px solid #2a2f41;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#cfd5e4;line-height:1.45}
.dz-data-help i{font-size:20px;color:#ffb36b}
.dz-data-search{margin:10px 0 4px}
.dz-dgroup h4{display:flex;align-items:center;gap:6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#9aa2b6;margin:14px 0 6px}
.dz-dgroup .dcard,.dz-showing .dcard{background:#12141c;border-color:#2a2f41;color:#e9ecf3;margin-bottom:6px;padding:10px 11px;gap:6px;box-shadow:none}
.dz-dgroup .dcard:hover{border-color:#e8740c;background:#181b26}
.dz-dgroup .dcard[draggable]{cursor:grab}
#designer .dc-ico{background:#262b3d;color:#ffb36b;width:30px;height:30px;font-size:16px}
#designer .dc-name span,#designer .dc-live span{color:#8b93a7}
#designer .dc-chips span{background:#1f2333;border-color:#2e3448;color:#dfe3ee}
#designer .dc-val.big{font-size:20px}
#designer .dc-live b{font-size:17px}
.dc-grip{color:#5e667c}
.dz-showing{display:flex;flex-direction:column;gap:6px}
#designer.dz-dropping .dz-canvas{outline:4px dashed #ffb36b;outline-offset:6px}
#designer .dz-tabs button{font-size:12.5px}