/* ======================================================================== THE LIGHTBOX (5 Nov 2026; js/designs/x-lightbox.js;
   docs/DESIGNER-LIGHTBOX-PLAN-2026-11-05.md; Junaid approved the Round 2A Lightbox and its bright look). Every rule is scoped to html.dzlb (the
   head script of design.html sets it with data-dzshell="lightbox"), so the Easy Studio and the classic layout never see these rules. Linked
   after css/designer.css; the builders' files (designer-lb-inspector.css, -tools, -phone, -finish) follow it.
   THE BRIGHT LOOK: white chrome on a flat pale neutral workspace (#F1F2F2); quiet Title Case headings (13 px, semibold); one accent: lime for
   the main button and for chosen things (a soft tint with ink words and a deep lime edge), primary (var(--primary)) only for switches and the focus
   ring, amber only for small note badges, violet only for the Spot UV shine drawn on the page; ink line icons (1.6 px); white fields with a
   1 px edge; outlined secondary buttons; every corner a token (var(--radius) / var(--radius-sm) / the tag tokens); nothing under 12 px. */
html.dzlb{
  /* THEMES V3 (Junaid, 6 Nov 2026: the designer follows the six themes too): every Lightbox token is a name of the theme on
     <html>, so Steel, Copper, Forest, Wine, Graphite and Lime each dress the studio; no colour of its own is left here */
  --lb-ws:var(--panel); --lb-ws-line:var(--line); --lb-panel:var(--surface); --lb-raised:var(--panel); --lb-raised-2:var(--tint);
  --lb-line:var(--line); --lb-line-firm:var(--line-strong); --lb-line-strong:var(--line-strong); --lb-line-field:var(--line-strong);
  --lb-ink:var(--ink); --lb-ink-2:var(--muted); --lb-ink-3:var(--muted); --lb-ink-off:var(--muted);
  /* one type scale for every Lightbox file: help = small words that explain; sub = the second line inside a card or row;
     ph = words waiting in an empty box; icon = chrome icons */
  --lb-help:var(--muted); --lb-help-size:11px; --lb-sub:var(--muted); --lb-sub-size:11.5px; --lb-ph:var(--muted); --lb-icon:var(--icon); --lb-icon-w:1.25;
  /* chosen chips: primary, flat */
  --tag-on-bg:var(--primary); --tag-on-ink:var(--on-primary); --tag-on-sh:none;
  /* the main button and chosen things: --lb-lime keeps its old name, now the theme's primary */
  --lb-primary:var(--primary); --lb-lime:var(--primary); --lb-lime-hover:var(--primary-hover); --lb-lime-press:var(--primary-hover);
  --lb-sel:var(--tint); --lb-sel-2:var(--tint); --lb-sel-line:var(--primary);
  --lb-warn:var(--warning); --lb-warn-bg:var(--warning-tint); --lb-warn-icon:var(--warning); --lb-warn-line:var(--warning); --lb-uv:var(--uv);
  --lb-sh-paper:var(--shadow-page);
  --lb-sh-float:var(--shadow-float);
  --lb-focus:var(--focus-ring);
  --dz-sel:var(--primary); --lb-card-bg:var(--surface); --lb-soft:var(--panel); --lb-soft-2:var(--tint);
  --lb-sh-card:var(--shadow-callout);
  --lb-ctx-h:44px;
}
/* the studio follows the shop theme (THEMES V3) and the Lightbox tokens for its own parts */
html.dzlb .dz3{--ring:var(--lb-focus);
  --dz-bar:56px;--dz-tabs:72px;--dz-pw:300px;--dz-iw:300px;--dz-stage:var(--lb-ws);--dz-hair:var(--lb-line);color:var(--lb-ink)}
html.dzlb body.dz-app{background:var(--lb-ws)}
html.dzlb .dz3 :focus-visible{outline:0;box-shadow:var(--lb-focus)}

/* ---------------- desktop and tablet (861 px and up) ---------------- */
@media (min-width:861px){
  /* ===== the top bar ===== */
  /* the right group never shrinks below its buttons (minmax(max-content,1fr)); the sides stay centred while there is room, the name gives way first */
  html.dzlb .dz-bar{grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);height:var(--dz-bar);padding:0 12px 0 8px;gap:12px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--lb-line)}
  html.dzlb .dz-bar-l{gap:4px}
  html.dzlb #dzBack{width:auto;height:44px;padding:0 8px 0 4px;gap:6px;display:inline-flex;align-items:center;border-radius:var(--radius)}
  html.dzlb #dzBack>svg{width:16px;height:16px;color:var(--lb-ink-2)}
  html.dzlb #dzBack:hover{background:var(--lb-raised)}
  html.dzlb .lb-wm{display:inline-flex;align-items:center}
  html.dzlb .lb-wm-full{display:block;width:160px;height:26px}
  html.dzlb .lb-wm-mark{display:none;width:26px;height:26px}
  html.dzlb .dz-doc{display:grid;grid-template-columns:minmax(0,auto);grid-template-areas:"n" "v";align-items:center;column-gap:4px;row-gap:1px;min-width:0;padding:0 6px 0 4px}
  html.dzlb .dz-doc-n{grid-area:n;font-size:14px;font-weight:500;letter-spacing:-.005em;min-width:0;cursor:pointer;border-radius:var(--radius-sm)}
  html.dzlb .dz-doc-n:hover{color:var(--lb-primary)}
  html.dzlb .dz-doc-size{grid-area:s;height:24px;padding:0 6px;font-size:12px;color:var(--lb-ink-2);border-radius:var(--radius-sm)}
  html.dzlb .dz-doc-size:hover:not(:disabled){background:var(--lb-raised);color:var(--lb-ink)}
  html.dzlb .dz-doc .dz-saved{grid-area:v;min-width:0;padding:0;font-size:12px;font-weight:500;color:var(--lb-ink-3);overflow:hidden;text-overflow:ellipsis}
  html.dzlb .dz-doc .dz-saved svg{width:15px;height:15px}
  html.dzlb .lb-hist{display:inline-flex;align-items:center;gap:2px;position:relative;margin-left:6px;padding-left:12px}
  html.dzlb .lb-hist::before{content:"";position:absolute;left:0;top:50%;width:1px;height:24px;margin-top:-12px;background:var(--lb-line)}
  html.dzlb .lb-hist .dz-ib{width:36px;height:36px;color:var(--lb-ink)}
  html.dzlb .dz-bar-r .dz-savegrp{margin:0 2px 0 0}
  html.dzlb .dz-bar .dz-doc-size{display:none}
  html.dzlb .dz-savegrp .dz-btn2{height:34px}
  html.dzlb #dzBeta,html.dzlb .dz-bar .dzx-b-bar,html.dzlb .dz-bar .dzx-fs-btn{display:none!important}
  html.dzlb .dz-bar-c{gap:0;min-width:0}
  html.dzlb .dz-bar-r{gap:6px}
  html.dzlb .dz-bar-r .dz-ib{color:var(--lb-ink)}
  html.dzlb #dzPreviewBtn{background:transparent;box-shadow:none;color:var(--lb-ink);height:40px;font-size:13px;font-weight:500}
  html.dzlb #dzPreviewBtn:hover{background:var(--lb-raised)}
  /* the sides: small thumbnails with their Live Print Check state */
  html.dzlb .lb-sides{display:flex;gap:2px;padding:2px;border-radius:var(--radius);background:var(--lb-soft);box-shadow:none}
  html.dzlb .lb-sides:empty{display:none}
  html.dzlb .lb-side{display:flex;align-items:center;gap:9px;height:42px;padding:0 12px 0 5px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink-2);font:inherit;text-align:left;cursor:pointer;white-space:nowrap}
  html.dzlb .lb-side:hover{background:rgba(255,255,255,.7)}
  html.dzlb .lb-side[aria-checked="true"]{background:#fff;color:var(--lb-ink);box-shadow:0 1px 2px rgba(42,42,51,.10),0 0 0 .5px rgba(42,42,51,.08)}
  html.dzlb .lb-side[aria-checked="true"]:focus-visible{box-shadow:0 1px 2px rgba(42,42,51,.10),var(--lb-focus)}
  html.dzlb .lb-side-th{position:relative;flex:none;height:31px;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius-sm);background:#fff;box-shadow:0 0 0 .5px rgba(42,42,51,.22),0 1px 2px rgba(42,42,51,.16)}
  html.dzlb .lb-side-th img{width:100%;height:100%;object-fit:cover;display:block}
  html.dzlb .lb-side-add .lb-side-th{background:transparent;box-shadow:inset 0 0 0 1px var(--lb-line-firm);color:var(--lb-ink-2)}
  html.dzlb .lb-side-t{display:flex;flex-direction:column;gap:1px;line-height:1.15}
  html.dzlb .lb-side-t b{font-size:13px;font-weight:500}
  html.dzlb .lb-side-s{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--lb-ink-2)}
  html.dzlb .lb-side-s i{width:6px;height:6px;border-radius:50%;background:var(--lb-ink-3)}
  html.dzlb .lb-side-s.warn{color:var(--lb-warn)}
  html.dzlb .lb-side-s.warn i{background:var(--lb-warn-icon)}
  /* the price and the main button */
  html.dzlb .lb-price{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;padding:0 6px 0 12px;margin-left:4px;line-height:1.15;white-space:nowrap;border-left:1px solid var(--lb-line);cursor:default}
  html.dzlb .lb-price[hidden]{display:none}
  html.dzlb .lb-price span{font-size:12px;font-weight:500;color:var(--lb-ink-2)}
  html.dzlb .lb-price b{font-size:14px;font-weight:500;color:var(--lb-ink);font-variant-numeric:tabular-nums}
  html.dzlb .dz-bar .btn.dz-finish{height:40px;padding:0 16px 0 18px;gap:8px;border:0;border-radius:var(--radius);corner-shape:round;background:var(--lb-lime);color:var(--on-primary);font-size:14px;font-weight:500;box-shadow:none}
  html.dzlb .dz-bar .btn.dz-finish:hover{background:var(--lb-lime-hover);color:var(--on-primary)}
  html.dzlb .dz-bar .btn.dz-finish:active{background:var(--lb-lime-press);color:var(--on-primary)}
  html.dzlb .dz-bar .btn.dz-finish svg{color:var(--lb-ink)}

  /* ===== the body: rail, left panel, workspace, right panel ===== */
  html.dzlb .dz-body{grid-template-columns:var(--dz-tabs) var(--dz-pw) minmax(0,1fr) var(--dz-iw);grid-template-rows:minmax(0,1fr);background:var(--lb-ws)}
  html.dzlb .dz3.dz-collapsed .dz-body{grid-template-columns:var(--dz-tabs) 0 minmax(0,1fr) var(--dz-iw)}
  html.dzlb .dz-tabs{display:none}
  /* the rail: icon over a 12 px word, ink icons; the chosen tool on a soft lime tint with a deep lime edge */
  html.dzlb .lb-rail{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;min-height:0;background:#fff;box-shadow:1px 0 0 var(--lb-ws-line);overflow:hidden auto;scrollbar-width:none;z-index:12}
  html.dzlb .lb-rail::-webkit-scrollbar{display:none}
  html.dzlb .lb-rt{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:62px;min-height:56px;padding:6px 2px 5px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink);font:inherit;cursor:pointer;transition:background-color .12s}
  html.dzlb .lb-rt svg{box-sizing:border-box;width:36px;height:36px;padding:8px;border-radius:var(--radius);background:transparent;transition:background .15s;stroke-width:var(--lb-icon-w);color:var(--lb-icon);flex:none}
  html.dzlb .lb-rt:hover svg{color:var(--lb-ink)}
  html.dzlb .lb-rl{font-size:11px;font-weight:500;letter-spacing:.01em;color:var(--lb-ink-2);line-height:1.15;text-align:center;white-space:normal;max-width:60px}
  @media (min-height:860px){ html.dzlb .lb-rail{gap:2px;padding:10px 0} html.dzlb .lb-rt{min-height:58px;gap:5px} }
  /* short windows (under 860 px tall): smaller tiles so every tool still fits */
  @media (max-height:859px){ html.dzlb .lb-rt{min-height:50px;gap:3px;padding:4px 2px} html.dzlb .lb-rt svg{width:30px;height:30px;padding:6px;border-radius:var(--radius)} }
  html.dzlb .lb-rt:hover{background:transparent}
  html.dzlb .lb-rt:hover svg{background:var(--lb-soft-2)}
  html.dzlb .lb-rt:active{background:var(--lb-raised-2)}
  html.dzlb .lb-rt[aria-pressed="true"]{background:transparent;box-shadow:none}
  /* the chosen tool: its icon on a solid tile in the house ink, the icon white, no outline and no tint (5 Nov 2026, Junaid) */
  html.dzlb .lb-rt[aria-pressed="true"] svg{background:var(--lb-primary);color:#fff;box-shadow:0 1px 2px rgba(42,42,51,.18)}
  html.dzlb .lb-rt[aria-pressed="true"]:hover svg{background:var(--ink);color:#fff}
  html.dzlb .lb-rt[aria-pressed="true"] .lb-rl{font-weight:500}
  html.dzlb .lb-rt:focus-visible{box-shadow:var(--lb-focus)}
  html.dzlb .lb-rt[aria-pressed="true"]:focus-visible{box-shadow:var(--lb-focus)}
  html.dzlb .lb-rb{position:absolute;top:3px;right:8px;min-width:18px;height:18px;padding:0 4px;font-style:normal;font-size:12px;font-weight:500;line-height:18px;text-align:center;white-space:nowrap;
    border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--lb-warn-bg);color:var(--lb-warn);box-shadow:inset 0 0 0 1px var(--lb-warn-line);pointer-events:none}
  html.dzlb .lb-grow{flex:1 0 8px}
  /* the left panel, docked beside the rail */
  html.dzlb .dz-panel{position:relative;left:auto;top:auto;bottom:auto;width:auto;grid-column:2;grid-row:1;z-index:11;margin:10px 0 10px 10px;border:0;border-radius:var(--radius);background:var(--lb-card-bg);box-shadow:var(--lb-sh-card);overflow:hidden}
  html.dzlb .dz-body{background:var(--lb-ws)}
  html.dzlb .dz3.dz-collapsed .dz-panel{visibility:hidden}
  html.dzlb .dz-panel-h{align-items:center;padding:16px 10px 10px 20px;min-height:56px;background:transparent}
  html.dzlb .dz-panel-h h3{font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--lb-ink)}
  html.dzlb .dz-panel-h p{font-size:var(--lb-sub-size);line-height:1.45;color:var(--lb-sub);margin-top:3px}
  html.dzlb #dzPanelX{color:var(--lb-ink);width:36px;height:36px}
  html.dzlb .lb-switch{display:flex;margin:0 18px 10px;flex:none}
  html.dzlb .lb-switch[hidden]{display:none}
  html.dzlb .lb-switch>button{flex:1;min-height:32px;font-size:12px}
  html.dzlb .dz-panel-b{padding:4px 18px 48px}
  /* the workspace: flat, pale, clean; the page on a paper shadow */
  html.dzlb .dz-stage{grid-column:3;grid-row:1;background:var(--lb-ws)}
  html.dzlb .dz-canvaswrap{padding:72px 68px 44px 44px}
  html.dzlb .dz3.dz-collapsed .dz-canvaswrap{padding-left:44px}
  html.dzlb .dz3.dz-1side .dz-canvaswrap{padding-bottom:44px}
  html.dzlb .dz-canvasbox{box-shadow:var(--lb-sh-paper)}
  html.dzlb .dz-pages{display:none!important}   /* the sides live in the top bar (.lb-sides mirrors #dzSides) */
  html.dzlb .dz-hist{display:none!important}    /* Undo and Redo live in the top bar */
  html.dzlb .dz-edge,html.dzlb .dz-drawbar{top:68px}
  html.dzlb .lb-crop{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
  html.dzlb .lb-crop path{fill:none;stroke:rgba(42,42,51,.6);stroke-width:.75}
  /* the context strip above the page: nothing picked = the page, its background and a hint */
  html.dzlb .lb-ctx{position:absolute;z-index:13;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);height:var(--lb-ctx-h);display:flex;align-items:center;padding:0 6px;
    border-radius:var(--radius);background:#fff;box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.05);white-space:nowrap}
  html.dzlb .lb-ctx[data-mode="off"]{display:none}
  html.dzlb .lb-ctx-idle,html.dzlb .lb-ctx-piece{display:none;align-items:center;gap:2px;min-width:0}
  html.dzlb .lb-ctx[data-mode="idle"] .lb-ctx-idle,html.dzlb .lb-ctx[data-mode="piece"] .lb-ctx-piece{display:flex}
  html.dzlb .lb-cx-name{display:flex;align-items:center;gap:8px;padding:0 10px 0 8px;white-space:nowrap;flex:none;font-size:13px;font-weight:500;color:var(--lb-ink)}
  html.dzlb .lb-cx-name svg{color:var(--lb-ink-2)}
  html.dzlb .lb-cx-div{width:1px;height:20px;margin:0 4px;background:var(--lb-line);flex:none}
  html.dzlb .lb-cx-btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--lb-ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
  html.dzlb .lb-cx-btn:hover{background:var(--lb-raised)}
  html.dzlb .lb-cx-btn[aria-pressed="true"]{background:var(--lb-sel);box-shadow:inset 0 0 0 1px var(--lb-sel-line)}
  html.dzlb .lb-cx-btn svg{color:var(--lb-ink-2);flex:none}
  html.dzlb .lb-sw{display:inline-block;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(42,42,51,.18);flex:none}
  html.dzlb .lb-cx-hint{padding:0 8px;font-size:12px;color:var(--lb-ink-3);overflow:hidden;text-overflow:ellipsis}
  html.dzlb .lb-cx-props{display:none}
  @container (max-width:760px){ html.dzlb .lb-cx-hint,html.dzlb .lb-cx-hintdiv{display:none} }
  /* a piece picked: the floating bar sits where the strip was (until x-lb-inspector.js claims the strip: lb-ctxown) */
  html.dzlb .dz-float{left:50%!important;top:12px!important;transform:translateX(-50%);max-width:calc(100% - 24px);min-height:var(--lb-ctx-h);padding:5px 6px;border-radius:var(--radius);corner-shape:round;box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.05)}
  html.dzlb .dz-float button{border-radius:var(--radius-sm);color:var(--lb-ink)}
  html.dzlb .dz3.lb-ctxown .dz-float{display:none!important}
  /* the zoom strip: upright at the right of the workspace */
  html.dzlb .dz-view{right:12px!important;bottom:12px;top:auto;flex-direction:column;align-items:center;gap:2px;width:44px;padding:4px 0;border-radius:var(--radius);corner-shape:round;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.05)}
  html.dzlb .dz-view .dz-ib{width:36px;height:36px;color:var(--lb-ink)}
  html.dzlb .dz-view #dzZoomIn{order:1}
  html.dzlb .dz-view #dzZoomLbl{order:2;width:40px;height:28px;padding:0;font-size:12px;font-weight:500;color:var(--lb-ink);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums}
  html.dzlb .dz-view #dzZoomOut{order:3}
  html.dzlb .dz-view .dz-vsep{order:4;width:20px;height:1px;margin:3px 0;background:var(--lb-line)}
  html.dzlb .dz-view #dzGuidesBtn{order:5}
  html.dzlb .dz-view #dzKeysBtn{order:6}
  html.dzlb .dz-view>*:not(#dzZoomIn):not(#dzZoomLbl):not(#dzZoomOut):not(.dz-vsep):not(#dzGuidesBtn):not(#dzKeysBtn){order:7}
  /* the right panel: a header slot over the inspector, docked */
  html.dzlb .lb-right{grid-column:4;grid-row:1;display:flex;flex-direction:column;min-height:0;min-width:0;margin:10px 10px 10px 0;border-radius:var(--radius);overflow:hidden;background:var(--lb-card-bg);box-shadow:var(--lb-sh-card);z-index:11}
  html.dzlb .lb-right-h{flex:none}
  html.dzlb .lb-right-h:empty{display:none}
  html.dzlb .lb-right>.dz-insp{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;flex:1;min-height:0;display:block;border:0;border-radius:0;box-shadow:none;background:transparent}
  html.dzlb .lb-right .dzi-h{border-radius:0}
  html.dzlb .lb-right-x{display:none;position:absolute;top:10px;right:10px;z-index:30;width:36px;height:36px;color:var(--lb-ink)}

  /* ===== the bright look inside the panels (the builders refine their own panes) ===== */
  html.dzlb .dz3 .dz-h{font-size:13px;font-weight:500;color:var(--lb-ink)}
  html.dzlb .dz3 .dz-h small,html.dzlb .dz3 .dz-hint,html.dzlb .dz3 .dz-foot,html.dzlb .dz3 .dz-fhint{font-size:var(--lb-help-size);line-height:1.45;font-weight:400;color:var(--lb-help)}
  html.dzlb .dz3 .dz-fld .dz-fhint{display:none;margin-top:4px}
  html.dzlb .dz3 .dz-fld:focus-within .dz-fhint{display:block}
  html.dzlb .dz3 ::placeholder{color:var(--lb-ph);opacity:1;font-size:12px}
  /* chrome icons: one weight and one soft colour everywhere; ink when hovered or chosen */
  html.dzlb .dz3 button svg[stroke="currentColor"]{stroke-width:var(--lb-icon-w);color:var(--lb-icon)}
  html.dzlb .dz3 button:is(:hover,[aria-pressed="true"],[aria-selected="true"],[aria-checked="true"],.on) svg[stroke="currentColor"]{color:var(--lb-ink)}
  /* icons on a dark button or a chosen dark chip take the button's own white (5 Nov 2026: they were drawn dark on dark, which left a gap
     that made the words look pushed right) */
  html.dzlb .dz3 :is(.btn,.dz-chips button.on,.dz-chips button[aria-pressed="true"]) svg[stroke="currentColor"]{color:currentColor}
  html.dzlb .dz3 #dzFinish svg{color:inherit}
  /* SOFT CONTROLS: fields sit on a soft fill without a hard edge and turn white with a lime ring while typing; buttons are soft fills;
     segmented controls a soft track with a raised white choice (5 Nov 2026, evening; Junaid: "softer, a very cool look, like Apple") */
  html.dzlb .dz-panel :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=search],textarea,select),
  html.dzlb .dz-insp :is(input[type=text],input[type=number],textarea,select),html.dzlb #dzProps :is(.dzf-btn,.dz-popbtn,.dz-step),html.dzlb .dz-panel .dz-search input{background:var(--lb-soft);border:1px solid transparent;border-radius:var(--radius);box-shadow:none;transition:background .15s,box-shadow .15s,border-color .15s}
  html.dzlb .dz-panel :is(input,textarea,select):hover,html.dzlb .dz-insp :is(input,textarea,select):hover{background:var(--lb-soft-2)}
  html.dzlb .dz-panel :is(input,textarea,select):focus,html.dzlb .dz-insp :is(input,textarea,select):focus{background:#fff;border-color:var(--logo);box-shadow:0 0 0 3px rgba(140,165,39,.22);outline:0}
  html.dzlb .dz3 .dz-btn2{background:var(--lb-soft);box-shadow:none;border-radius:var(--radius);color:var(--lb-ink)}
  html.dzlb .dz3 .dz-btn2:hover:not(:disabled){background:var(--lb-soft-2);box-shadow:none}
  html.dzlb .dz3 .dz-seg{background:var(--lb-soft);box-shadow:none;border-radius:var(--radius);padding:2px}
  html.dzlb .dz3 .dz-seg>button{border-radius:var(--radius)}
  html.dzlb .dz3 .dz-seg>button:is([aria-pressed="true"],[aria-selected="true"],[aria-checked="true"]){background:#fff;box-shadow:0 1px 2px rgba(42,42,51,.10),0 0 0 .5px rgba(42,42,51,.08)}
  /* Tick All and Update Design, Use My Brand Here: one family of buttons, one height, one corner (5 Nov 2026, Junaid: "they do not match") */
  html.dzlb .dz3 .dz-det-bar{gap:8px}
  html.dzlb .dz3 .dz-det-bar :is(.btn,.dz-btn2),html.dzlb .dz3 #dzBrandAll{height:40px;min-height:40px;padding:0 16px;border-radius:var(--radius);font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:none}
  html.dzlb .dz3 .dz-det-bar .btn,html.dzlb .dz3 #dzBrandAll{background:var(--lb-primary);color:#fff;border:0}
  html.dzlb .dz3 .dz-det-bar .btn:hover,html.dzlb .dz3 #dzBrandAll:hover{background:var(--ink)}
  html.dzlb .dz3 #dzBrandAll{width:100%}
  html.dzlb .dz3 #dzBrandAll svg{width:18px;height:18px}
  /* the logo's Name on Two Lines choices: soft tiles, the chosen one raised white like a segment */
  html.dzlb .dz3 .dz-lgsplit-o button{background:var(--lb-soft);border-radius:var(--radius)}
  html.dzlb .dz3 .dz-lgsplit-o button:hover{background:var(--lb-soft-2)}
  html.dzlb .dz3 .dz-lgsplit-o button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 2px rgba(42,42,51,.10),0 0 0 1px var(--logo)}
  html.dzlb .dz3 .dz-lgsplit-k{font-weight:500}
  /* the top bar's icon buttons: plain icons that take a soft tile on hover (icon set 5, Phosphor Thin) */
  html.dzlb .dz-bar :is(#dzUndo,#dzRedo,#dzNotif,#dzMore){width:36px;height:36px;border-radius:var(--radius);background:transparent;transition:background .15s}
  html.dzlb .dz-bar :is(#dzUndo,#dzRedo,#dzNotif,#dzMore):hover:not(:disabled){background:var(--lb-soft-2)}
  html.dzlb .dz-bar :is(#dzUndo,#dzRedo):disabled{background:transparent}
  /* RULERS ON: the strip above the page and the page itself step clear of the rulers (18 px bands along the top and left), and the
     rulers wear the same soft paper as the panels, so nothing sits on a ruler */
  html.dzlb #dzStage.dzx-d-hasrulers .lb-ctx{top:30px}
  html.dzlb #dzStage.dzx-d-hasrulers .dz-canvaswrap{padding-top:90px;padding-left:62px}
  html.dzlb #dzStage.dzx-d-hasrulers .dzx-d-ov :is(.dzx-d-rt,.dzx-d-rl,.dzx-d-rc){background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  /* the zoom strip: a soft floating card, its buttons soft tiles */
  html.dzlb .dz-view{border-radius:var(--radius)!important;padding:6px 0;gap:4px;box-shadow:var(--lb-sh-card)}
  html.dzlb .dz-view .dz-ib{width:32px;height:32px;border-radius:var(--radius);background:transparent}
  html.dzlb .dz-view .dz-ib:hover{background:var(--lb-soft)}
  html.dzlb .dz-view .dz-ib.on{background:var(--lb-sel)}
  /* the strip above the page: a soft card too */
  html.dzlb .lb-ctx{border-radius:var(--radius);box-shadow:var(--lb-sh-card)}
  /* the brand offer in Your Details: a quiet card on a hairline, not a tinted box; its button a plain link */
  html.dzlb .dz3 .dz-bc.details{background:#fff;box-shadow:inset 0 0 0 1px var(--lb-line);padding:12px 34px 12px 14px;margin:0 0 16px}
  html.dzlb .dz3 .dz-bc.details .dz-bc-t b{font-size:12.5px;font-weight:500;color:var(--lb-ink)}
  html.dzlb .dz3 .dz-bc.details .dz-bc-t span{font-size:var(--lb-sub-size);line-height:1.45;color:var(--lb-sub);opacity:1}
  html.dzlb .dz3 .dz-bc.details :is(.btn,.dz-btn2){height:auto;padding:0;margin-top:8px;background:none;box-shadow:none;border:0;color:var(--lb-primary);font-size:12px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
  /* fields: calm labels, roomy boxes */
  html.dzlb .dz-panel .dz-fld>span{font-size:12px;font-weight:500;color:var(--lb-ink-2)}
  html.dzlb .dz-panel .dz-form{gap:14px}
  html.dzlb .dz-panel .dz-fld{margin-bottom:0;gap:6px}
  /* a note under a setting ("Typing here unlinks it..."): plain small words, no tinted box */
  html.dzlb .dz3 .dzi-note{background:none;box-shadow:none;padding:0;margin:6px 0 0;color:var(--lb-help);font-size:var(--lb-help-size)}
  html.dzlb .dz3 .dzi-note svg{color:var(--lb-help)}
  html.dzlb .dz3 .dz-btn2:focus-visible{box-shadow:inset 0 0 0 1px var(--lb-line-strong),var(--lb-focus)}
  html.dzlb .dz3 .dz-btn2 svg{color:var(--lb-ink)}
  html.dzlb .dz3 .dz-seg>button{color:var(--lb-ink-2)}
  html.dzlb .dz3 .dz-swrow input:checked+.dz-switch{background:var(--lb-lime)}

  /* ===== More Tools (the foundation's list; js/designs/x-lb-tools.js owns its final shape) ===== */
  html.dzlb .lb-tq{margin:0 0 8px}
  html.dzlb .lb-tl{display:grid;gap:2px}
  html.dzlb .lb-tg{margin:16px 0 6px}
  html.dzlb .lb-tg[hidden],html.dzlb .lb-trow[hidden]{display:none}
  html.dzlb .lb-trow{display:grid;grid-template-columns:36px minmax(0,1fr) 16px;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 8px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink);font:inherit;text-align:left;cursor:pointer}
  html.dzlb .lb-trow:hover{background:var(--lb-raised)}
  html.dzlb .lb-trow>svg{color:var(--lb-ink-2)}
  html.dzlb .lb-tic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius);background:var(--lb-soft);box-shadow:none;color:var(--lb-ink)}
  html.dzlb .lb-tic svg{width:18px;height:18px;visibility:visible;color:var(--lb-ink);opacity:1}
  html.dzlb .lb-tt{display:grid;gap:2px;min-width:0}
  html.dzlb .lb-tt b{font-size:13px;font-weight:500;line-height:1.25}
  html.dzlb .lb-tt small{font-size:var(--lb-sub-size);line-height:1.35;color:var(--lb-sub)}
  html.dzlb .lb-allt{margin-top:18px;padding-top:12px;border-top:1px solid var(--lb-line)}
  html.dzlb .lb-allt small{display:block;font-size:var(--lb-help-size);font-weight:400;color:var(--lb-help);margin-top:2px}
  html.dzlb .lb-tnone[hidden]{display:none}
}

/* laptops: under 1320 px the small mark; the name keeps its room */
@media (min-width:861px) and (max-width:1319px){
  html.dzlb .lb-wm-full{display:none}
  html.dzlb .lb-wm-mark{display:block}
}
/* under 1280 px: Save and Preview as icons, the sides without their state words */
@media (min-width:861px) and (max-width:1279px){
  html.dzlb .dz-savegrp .dz-savebtn span,html.dzlb #dzPreviewBtn span{display:none}
  html.dzlb .dz-savegrp .dz-savebtn,html.dzlb #dzPreviewBtn{width:38px;padding:0;justify-content:center}
  html.dzlb .lb-side{padding-right:10px}
}
/* tablets and small laptops (861 to 1199 px): the right panel is a drawer over the workspace, on a pick or from Page Settings */
@media (min-width:861px) and (max-width:1199px){
  html.dzlb .dz-body{grid-template-columns:var(--dz-tabs) var(--dz-pw) minmax(0,1fr)}
  html.dzlb .dz3.dz-collapsed .dz-body{grid-template-columns:var(--dz-tabs) 0 minmax(0,1fr)}
  html.dzlb .lb-right{position:absolute;grid-column:auto;right:12px;top:12px;bottom:12px;width:var(--dz-iw);z-index:16;display:none;border-radius:var(--radius);overflow:hidden;box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.06)}
  html.dzlb .dz3.dz-has-sel .lb-right,html.dzlb .dz3.lb-right-open .lb-right{display:flex}
  html.dzlb .lb-cx-props{display:inline-flex}
  html.dzlb .lb-price{display:none}
  html.dzlb .lb-side-s{display:none}
  html.dzlb .dz3.dz-has-sel .dz-view,html.dzlb .dz3.lb-right-open .dz-view{right:calc(var(--dz-iw) + 24px)!important}
  html.dzlb .dz3.lb-right-open .lb-ctx{left:calc((100% - var(--dz-iw) - 12px) / 2);max-width:calc(100% - var(--dz-iw) - 36px)}
  html.dzlb .dz3.lb-right-open:not(.dz-has-sel) .lb-right-x{display:inline-grid}
  html.dzlb .dz3.lb-right-open .lb-cx-props span{display:none}
  html.dzlb .dz3.lb-right-open:not(.dz-has-sel) .lb-right .dzi-h{padding-right:52px}
}
/* touch screens with room (tablets): the same layout with 44 px targets */
@media (min-width:861px) and (pointer:coarse){
  html.dzlb .lb-rt{min-height:58px}
  html.dzlb .lb-hist .dz-ib,html.dzlb .dz-view .dz-ib,html.dzlb .dz-bar-r .dz-ib,html.dzlb #dzPanelX{width:44px;height:44px}
  html.dzlb .dz-view{width:52px}
  html.dzlb .lb-cx-btn,html.dzlb .dz-savegrp .dz-btn2,html.dzlb #dzPreviewBtn{min-height:44px}
  html.dzlb .lb-ctx{--lb-ctx-h:52px}
  html.dzlb .lb-trow{min-height:52px}
}
/* short windows: the rail tightens so every tool stays in view */
@media (min-width:861px) and (max-height:800px){
  html.dzlb .lb-rail{gap:0;padding:4px 0}
  html.dzlb .lb-rt{min-height:50px;padding:4px 2px 3px;gap:3px}
}

/* menus (they live on body, outside the studio) */
html.dzlb .dz-menu>button[data-lbh] svg,html.dzlb .dz-menu>button[data-lbbgall] svg{visibility:visible;color:var(--lb-ink)}
html.dzlb .lb-bgm{display:flex;flex-wrap:wrap;gap:8px;padding:4px 8px 10px}
html.dzlb .lb-bgm .dz-sw{width:28px;height:28px}
html.dzlb .lb-bgm .dz-sw.on{box-shadow:inset 0 0 0 1px rgba(42,42,51,.16),0 0 0 2px #fff,0 0 0 3.5px var(--lb-ink)}
html.dzlb .dz-menu-h{font-size:12px;font-weight:500;color:var(--lb-ink-2)}

/* phones (860 px and under) are js/designs/x-lb-phone.js and css/designer-lb-phone.css: here only what the foundation adds stays out */
@media (max-width:860px){
  html.dzlb .lb-rail,html.dzlb .lb-wm,html.dzlb .lb-hist,html.dzlb .lb-sides,html.dzlb .lb-price,html.dzlb .lb-ctx,html.dzlb .lb-switch,html.dzlb .lb-right{display:none}
}

/* ===== MENUS (5 Nov 2026, evening; Junaid: "the menu that appears with the top menu needs to be done for the new layout"): every .dz-menu
   in the Lightbox is a soft white card with rounded rows, quiet group titles, thin icons and soft key tags ===== */
html.dzlb .dz-menu{padding:6px;border:0;border-radius:var(--radius);background:#fff;box-shadow:0 0 0 1px rgba(42,42,51,.06),0 4px 10px rgba(42,42,51,.06),0 24px 48px -16px rgba(42,42,51,.28)}
html.dzlb .dz-menu>button,html.dzlb .dz-menu .dz-menu-link{min-height:36px;padding:0 10px;border-radius:var(--radius);font-size:13px;font-weight:500;color:var(--lb-ink);gap:11px}
html.dzlb .dz-menu>button:hover,html.dzlb .dz-menu .dz-menu-link:hover{background:var(--lb-soft)}
html.dzlb .dz-menu>button svg{stroke-width:var(--lb-icon-w);color:var(--lb-icon);width:17px;height:17px}
html.dzlb .dz-menu :is(.dz-menu-h,.dz-menu-gh){margin:10px 10px 4px;font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--lb-sub);text-transform:none}
html.dzlb .dz-menu :is(.dz-menu-h,.dz-menu-gh):first-child{margin-top:4px}
html.dzlb .dz-menu .dz-menu-sep{height:1px;margin:6px 10px;background:#EFEDE8}
html.dzlb .dz-menu :is(kbd,.dz-kbd,.lbt-k){padding:2px 6px;border:0;border-radius:var(--radius);background:var(--lb-soft);color:var(--lb-sub);font:500 11px/1.4 inherit;box-shadow:none}

/* ===== THE "FILL IN MY DETAILS" OFFER (design.html fillOffer): a soft card like the panels, the lime button, a quiet Not Now ===== */
html.dzlb .dz-edge.dz-fill{padding:10px 10px 10px 12px;gap:10px;border-radius:var(--radius);background:#fff;box-shadow:0 0 0 1px rgba(42,42,51,.06),0 4px 10px rgba(42,42,51,.06),0 24px 48px -16px rgba(42,42,51,.28);font-size:12.5px;color:var(--lb-ink-2)}
html.dzlb .dz-edge.dz-fill>svg{box-sizing:content-box;flex:none;padding:7px;border-radius:var(--radius);background:var(--lb-soft);color:var(--lb-ink)}
html.dzlb .dz-edge.dz-fill b{color:var(--lb-ink);font-weight:500}
html.dzlb .dz-edge.dz-fill #dzFillYes{height:34px;padding:0 14px;border-radius:var(--radius);background:var(--lb-lime);color:var(--on-primary);font-weight:500}
html.dzlb .dz-edge.dz-fill #dzFillYes:hover{background:var(--lb-lime-hover)}
html.dzlb .dz-edge.dz-fill .dz-fill-no{height:34px;padding:0 12px;border-radius:var(--radius);background:var(--lb-soft);color:var(--lb-ink-2)}
html.dzlb .dz-edge.dz-fill .dz-fill-no:hover{background:var(--lb-soft-2)}

/* SIDEWAYS CHIP ROWS (5 Nov 2026): the small round arrows at the ends of a chip row that runs off the panel (x-lightbox.js arrows) */
html.dzlb .lb-chiparw{position:absolute;z-index:3;width:26px;height:26px;margin-top:-13px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#fff;color:var(--lb-ink);box-shadow:0 1px 3px rgba(42,42,51,.18),0 0 0 .5px rgba(42,42,51,.10);cursor:pointer}
html.dzlb .lb-chiparw.l svg{transform:scaleX(-1)}
html.dzlb .lb-chiparw:hover{background:var(--lb-soft)}
html.dzlb .lb-chiparw[hidden]{display:none}

/* ELEMENTS, ONE KIND AT A TIME (5 Nov 2026, js/designs/x-lb-elements.js): the kinds as tiles with room between them, names that fit, and
   the row at the top of a kind's own page */
html.dzlb .dz3 .dz-elgo{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 14px}
/* two across, the icon beside its name, room all round (5 Nov 2026, Junaid: "Illustration and Background are touching the borders") */
/* the icon above its name, the name on one line inside the tile (5 Nov 2026: beside the icon, Background and Illustrations ran to the edge) */
html.dzlb .dz3 .dz-elgo button{box-sizing:border-box;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:64px;padding:10px 6px;border-radius:var(--radius);background:var(--lb-soft);font-size:12px;line-height:1.2;text-align:center}
html.dzlb .dz3 .dz-elgo button span{white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%}
html.dzlb .dz3 .dz-elgo button svg{flex:none;width:20px;height:20px}
html.dzlb .dz3 .dz-elgo button:hover{background:var(--lb-soft-2)}
html.dzlb .dz3 .dz-elgo button span{max-width:100%;color:var(--lb-ink)}
html.dzlb .dz3 .lbe-off{display:none!important}
html.dzlb .dz3 .lbe-kind #dzElGo,html.dzlb .dz3 .lbe-kind .dz-elmode{display:none}
html.dzlb .dz3 .lbe-bar{display:flex;align-items:center;gap:10px;margin:0 0 12px}
html.dzlb .dz3 .lbe-bar[hidden]{display:none}
html.dzlb .dz3 .lbe-back{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 8px;border:0;border-radius:var(--radius);background:var(--lb-soft);color:var(--lb-ink);font:inherit;font-size:12.5px;cursor:pointer}
html.dzlb .dz3 .lbe-back:hover{background:var(--lb-soft-2)}
html.dzlb .dz3 .lbe-t{font-size:14px;font-weight:500;color:var(--lb-ink)}

/* YOUR LOGO FIRST (5 Nov 2026, js/designs/x-lb-logo.js): the Logo tab opens on the customer's own logo; the ideas fold under Make a New Logo */
html.dzlb .dz3 .lbl-card{margin:0 0 12px;padding:14px;border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--lb-line)}
html.dzlb .dz3 .lbl-h{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px}
html.dzlb .dz3 .lbl-h b{display:block;font-size:14px;font-weight:500;color:var(--lb-ink)}
html.dzlb .dz3 .lbl-h small{display:block;margin-top:2px;font-size:var(--lb-help-size);line-height:1.45;color:var(--lb-help)}
html.dzlb .dz3 .lbl-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius);background:var(--lb-soft);color:var(--lb-ink)}
html.dzlb .dz3 .lbl-vers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
html.dzlb .dz3 .lbl-ver{display:grid;gap:5px;padding:0;border:0;background:none;font:inherit;cursor:pointer;text-align:center}
html.dzlb .dz3 .lbl-ver>span{display:grid;place-items:center;aspect-ratio:4/3;padding:10px;border-radius:var(--radius);background:var(--lb-soft);transition:box-shadow .15s}
html.dzlb .dz3 .lbl-ver.dk>span{background:var(--ink)}
html.dzlb .dz3 .lbl-ver img{max-width:100%;max-height:100%;object-fit:contain}
html.dzlb .dz3 .lbl-ver small{font-size:11px;color:var(--lb-sub)}
html.dzlb .dz3 .lbl-ver:hover>span{box-shadow:0 0 0 2px var(--logo)}
html.dzlb .dz3 .lbl-acts{display:grid;gap:8px}
html.dzlb .dz3 .lbl-acts :is(.btn,.dz-btn2){height:40px;min-height:40px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border:0;border-radius:var(--radius);font-size:13px;font-weight:500;box-shadow:none}
html.dzlb .dz3 .lbl-acts .btn{background:var(--lb-primary);color:#fff}
html.dzlb .dz3 .lbl-acts .btn:hover{background:var(--ink)}
html.dzlb .dz3 .lbl-make{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0 0 12px;padding:12px 14px;border:0;border-radius:var(--radius);background:var(--lb-soft);font:inherit;text-align:left;cursor:pointer;color:var(--lb-ink)}
html.dzlb .dz3 .lbl-make:hover{background:var(--lb-soft-2)}
html.dzlb .dz3 .lbl-make b{display:block;font-size:13px;font-weight:500}
html.dzlb .dz3 .lbl-make small{display:block;font-size:var(--lb-help-size);color:var(--lb-help)}
html.dzlb .dz3 .lbl-make[aria-expanded="true"] svg{transform:rotate(90deg)}
html.dzlb .dz3 .lbl-make[hidden]{display:none}
html.dzlb .dz3 .lbl-folded>:not(.lbl-card):not(.lbl-make){display:none!important}

/* boxes of several lines grow with what is typed in them, a line to spare (5 Nov 2026); where a browser cannot, design.html taRows sets the rows */
html.dzlb .dz3 .dz-fld textarea{field-sizing:content;min-height:calc(3lh + 16px);max-height:calc(7lh + 16px)}
/* the old Photo Library of outside stock pictures stays out of My Uploads: Our Library holds the photos (5 Nov 2026) */
html.dzlb .dz3 #dzStock{display:none!important}

/* QUICK ADD (5 Nov 2026, x-lb-elements.js): the top card of the right-hand panel while nothing is picked */
html.dzlb .dz3 .lbq{margin:0 0 12px;padding:14px;border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--lb-line)}
html.dzlb .dz3 .lbq-h{display:block;margin:0 0 10px;font-size:13px;font-weight:500;color:var(--lb-ink)}
html.dzlb .dz3 .lbq-g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
html.dzlb .dz3 .lbq-g button{display:grid;justify-items:center;gap:5px;padding:9px 2px 7px;border:0;border-radius:var(--radius);background:var(--lb-soft);color:var(--lb-ink);font:inherit;font-size:11px;cursor:pointer}
html.dzlb .dz3 .lbq-g button:hover{background:var(--lb-soft-2)}

/* EASY TOOLS / PRO TOOLS in the top bar (5 Nov 2026, x-lb-tools.js): a soft track, the chosen side raised white */
html.dzlb .lb-modeseg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--radius);background:var(--lb-soft);flex:none}
html.dzlb .lb-modeseg button{height:32px;padding:0 12px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink-2);font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
html.dzlb .lb-modeseg button:hover{color:var(--lb-ink)}
html.dzlb .lb-modeseg button[aria-checked="true"]{background:#fff;color:var(--lb-ink);box-shadow:0 1px 2px rgba(42,42,51,.10),0 0 0 .5px rgba(42,42,51,.08)}
html.dzlb .lb-modeseg button:focus-visible{box-shadow:var(--lb-focus)}
@media (max-width:1180px){ html.dzlb .lb-modeseg button{padding:0 9px;font-size:12px} }

/* the top bar stays whole on smaller screens: the switch says Easy / Pro under 1600 px (the product name beside the logo was squeezed out) */
@media (max-width:1599px){ html.dzlb .lb-modeseg .lb-ms-t{display:none} html.dzlb .lb-modeseg button{padding:0 11px} }
@media (max-width:1599px){ html.dzlb .dz-bar .lbf-lensbtn>span{display:none} html.dzlb .dz-bar .lbf-lensbtn{padding:0 10px} }

/* the logo card's buttons stay inside the card and a long name wraps (5 Nov 2026: Match My Logo to the Background ran past the edge) */
html.dzlb .dz3 .lbl-acts :is(.btn,.dz-btn2){box-sizing:border-box;max-width:100%;min-width:0;height:auto;min-height:40px;padding:8px 12px;white-space:normal;line-height:1.25;text-align:center}
html.dzlb .dz3 .lbl-acts :is(.btn,.dz-btn2) svg{flex:none}
html.dzlb .dz3 .lbl-card{box-sizing:border-box;max-width:100%;overflow:hidden}

/* PORTRAIT OR LANDSCAPE (5 Nov 2026, x-lb-page.js): the Page Shape card in the right-hand panel */
html.dzlb .dz3 .lbpg{margin:0 0 12px;padding:14px;border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--lb-line)}
html.dzlb .dz3 .lbpg-h{display:block;margin:0 0 10px;font-size:13px;font-weight:500;color:var(--lb-ink)}
html.dzlb .dz3 .lbpg-seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:2px;border-radius:var(--radius);background:var(--lb-soft)}
html.dzlb .dz3 .lbpg-seg button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink-2);font:inherit;font-size:13px;cursor:pointer}
html.dzlb .dz3 .lbpg-seg button[aria-checked="true"]{background:#fff;color:var(--lb-ink);box-shadow:0 1px 2px rgba(42,42,51,.10),0 0 0 .5px rgba(42,42,51,.08)}
html.dzlb .dz3 .lbpg-s{display:block;margin-top:8px;font-size:var(--lb-help-size);color:var(--lb-help);line-height:1.45}

/* THE DESIGNER AT WORK (5 Nov 2026, Junaid: "some fancy stuff, the designer putting stuff together... wherever we have loading"): a small card where
   the pieces draw in one after another while a pointer places them, the step words turning over and a moving line; design.html PBMaker(). The start
   page's lower half (#dzMine, the tabs, the products) waits behind it and arrives in one go, so nothing shifts; ?d= / ?p= visits show the big one. */
.dz-maker{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 16px;text-align:center;color:var(--ink)}
.dz-maker .dzm-stage{position:relative;width:200px;height:132px;display:grid;place-items:center}
.dz-maker .dzm-card{position:relative;width:176px;height:112px;border-radius:var(--radius);background:#fff;box-shadow:0 1px 2px rgba(42,42,51,.08),0 8px 24px rgba(42,42,51,.10),0 0 0 .5px rgba(42,42,51,.08);overflow:visible}
.dz-maker .dzm-p{position:absolute;display:block;border-radius:var(--radius-sm);background:rgba(42,42,51,.14);opacity:0;transform:scale(.6);transform-origin:left center;animation:dzmIn 5.6s cubic-bezier(.2,.8,.2,1) infinite}
.dz-maker .dzm-logo{left:14px;top:14px;width:24px;height:24px;border-radius:50%;background:var(--logo);transform-origin:center;animation-delay:.1s}
.dz-maker .dzm-t1{left:46px;top:16px;width:74px;height:9px;background:var(--primary);animation-delay:.7s}
.dz-maker .dzm-t2{left:46px;top:30px;width:48px;height:6px;animation-delay:1.2s}
.dz-maker .dzm-l1{left:14px;top:56px;width:64px;height:5px;animation-delay:1.9s}
.dz-maker .dzm-l2{left:14px;top:66px;width:56px;height:5px;animation-delay:2.3s}
.dz-maker .dzm-l3{left:14px;top:76px;width:46px;height:5px;animation-delay:2.7s}
.dz-maker .dzm-pic{left:112px;top:50px;width:50px;height:36px;border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(140,165,39,.45),rgba(42,42,51,.16));transform-origin:center;animation-delay:3.3s}
.dz-maker .dzm-band{left:0;right:0;bottom:0;width:auto;height:12px;border-radius:0 0 var(--radius) var(--radius);background:rgba(140,165,39,.55);transform-origin:center bottom;animation-delay:3.9s}
.dz-maker .dzm-pen{position:absolute;left:0;top:0;color:var(--ink);filter:drop-shadow(0 2px 3px rgba(42,42,51,.25));animation:dzmPen 5.6s ease-in-out infinite;z-index:2}
@keyframes dzmIn{0%{opacity:0;transform:scale(.6)}6%{opacity:1;transform:scale(1.04)}9%{transform:scale(1)}86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
@keyframes dzmPen{0%{transform:translate(30px,30px)}12%{transform:translate(92px,24px)}21%{transform:translate(70px,36px)}34%{transform:translate(52px,62px)}41%{transform:translate(46px,72px)}48%{transform:translate(40px,82px)}60%{transform:translate(140px,72px)}71%{transform:translate(120px,106px)}86%{transform:translate(150px,118px)}100%{transform:translate(30px,30px)}}
.dz-maker .dzm-h{font-size:15px;font-weight:500;letter-spacing:-.01em;margin-top:4px}
.dz-maker .dzm-steps{position:relative;display:block;height:18px;width:min(320px,100%);font-size:13px;color:var(--muted)}
.dz-maker .dzm-steps span{position:absolute;inset:0;opacity:0;animation:dzmStep 5.6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.866s)}
@keyframes dzmStep{0%{opacity:0;transform:translateY(5px)}5%,28%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-5px)}}
.dz-maker .dzm-bar{display:block;width:140px;height:3px;border-radius:var(--radius-sm);background:rgba(42,42,51,.10);overflow:hidden;margin-top:2px}
.dz-maker .dzm-bar i{display:block;width:40%;height:100%;border-radius:var(--radius-sm);background:var(--logo);animation:dzmBar 1.6s ease-in-out infinite}
@keyframes dzmBar{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
.dz-maker.sm{padding:22px 10px}.dz-maker.sm .dzm-stage{transform:scale(.8);margin:-12px 0}
.dz-maker.big{padding:0}
@media (prefers-reduced-motion:reduce){.dz-maker .dzm-p{animation:none;opacity:1;transform:none}.dz-maker .dzm-pen{animation:none;transform:translate(140px,72px)}.dz-maker .dzm-steps span{animation:none}.dz-maker .dzm-steps span:first-child{opacity:1}.dz-maker .dzm-bar i{animation:none;width:60%}}
/* the opening page: only while ?d= / ?p= is on its way; the start page waits underneath it */
.dz-openload{display:none}
html.dz-opening .dz-openload{display:grid;place-items:center;min-height:calc(100vh - 140px)}
html.dz-opening #dzPick{display:none!important}
/* the start page: the doors and the heading show at once, everything below them arrives together */
.dz-pickload{display:none}
#dzPick.dz-pick-wait .dz-pickload{display:block;min-height:420px}
#dzPick.dz-pick-wait :is(#dzMine,.dz-prodbar,#dzProducts){display:none}
/* UNDO AND REDO STAY PUT (5 Nov 2026, Junaid: "when I click on undo or redo, the top menu shifts a lot... the redo button is under my click"): the name
   and its status ("Saved", "Unsaved Changes", "Not Saved Yet") sit in a box of one width, so a change of words never moves the buttons after it;
   a long name ends in an ellipsis and shows in full on hover (its title) */
@media (min-width:861px){
  html.dzlb .dz-bar .dz-doc{width:clamp(150px,14vw,210px);flex:0 0 auto;box-sizing:border-box}
  html.dzlb .dz-bar .dz-doc-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  html.dzlb .dz-bar .dz-doc .dz-saved{white-space:nowrap}
}

/* FRONTS OR BACKS over the Designs grid of a two-sided product (gallery.js) */
.dzg-face{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;margin:2px 0 8px;border-radius:var(--radius);background:var(--lb-soft,#F1F2EE)}
.dzg-face button{min-height:32px;border:0;border-radius:var(--radius);background:transparent;font:inherit;font-size:13px;font-weight:500;color:var(--lb-ink-2,var(--muted));cursor:pointer}
.dzg-face button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(42,42,51,.10),0 0 0 .5px rgba(42,42,51,.08)}
.dzg-face button:focus-visible{outline:0;box-shadow:var(--lb-focus,0 0 0 2px var(--logo))}
.dz-tpl.dzg-one .dz-tplimg{position:relative}
.dz-tpl.dzg-one .dz-tplimg::after{content:"One Side";position:absolute;left:6px;top:6px;padding:2px 6px;font-size:11px;font-weight:500;color:var(--ink);background:rgba(255,255,255,.92);border-radius:var(--tag-radius,var(--radius-sm));corner-shape:var(--tag-shape,round)}

/* the team's CorelDRAW key list (js/designs/x-corelkeys.js, Ctrl+Alt+/): nothing on screen points to it */
.dzx-ck{position:fixed;right:20px;bottom:20px;z-index:3000;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;padding:16px 18px;border-radius:var(--radius);background:#fff;color:var(--ink);box-shadow:0 12px 40px rgba(42,42,51,.22),0 0 0 .5px rgba(42,42,51,.10);font-size:13px}
.dzx-ck b{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.dzx-ck dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0}
.dzx-ck dt{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.dzx-ck dd{margin:0;color:var(--muted)}
.dzx-ck small{display:block;margin-top:10px;color:#6B7785}
/* ONE LABEL SIZE ON EVERY TILE (5 Nov 2026, Junaid: "the text underneath these icons is too big, and not just these, everywhere... keep them
   consistent"): every icon or picture tile with its name underneath uses the rail's label, 11 px at weight 500 (--lb-tile-size); the corners
   follow the website's two sizes, var(--radius) 6 px and var(--radius-sm) 4 px, in every designer file (round 388) */
html.dzlb{--lb-tile-size:11px}
html.dzlb :is(#dzElGo button, .lbq-g button, #dzLogos .dz-lg, .dz-arts .dz-art, .dzx-cl-grid .dzx-cl-t, #dzDrawTools .dz-tool, .dzx-h-qadd button) :is(span,b,small):not(:has(svg,img)),
html.dzlb .dzg-grid .dz-tpl .dzg-n{font-size:var(--lb-tile-size);font-weight:500;line-height:1.25;letter-spacing:0}
html.dzlb .dz3 .dz-elgo button{font-size:var(--lb-tile-size);gap:5px;min-height:58px}
/* ICON BIG, WORDS SMALL, ONE LINE (5 Nov 2026, Junaid: "keep the icon to the size wherever they were... 8-point text underneath to mention what the
   label does... this kind of stuff stays in one line"): every tile label is 8 pt; the icons keep their size (Quick Add's grow to 22 px to match the
   Elements tiles); the short labels of icon tiles stay on one line; the names under drawings and logo ideas may take two lines at 8 pt */
html.dzlb{--lb-tile-size:8pt}
html.dzlb .lb-rail .lb-rt{font-size:8pt;white-space:nowrap}
html.dzlb .lb-rail .lb-rt :is(span,b){font-size:8pt;white-space:nowrap}
html.dzlb :is(#dzElGo button, .lbq-g button, #dzDrawTools .dz-tool, .dzx-h-qadd button) :is(span,b,small):not(:has(svg,img)){white-space:nowrap;font-size:8pt}
html.dzlb .dz3 .lbq-g{gap:4px}
html.dzlb .dz3 .lbq-g button{gap:6px;padding:10px 1px 8px;min-width:0;font-size:8pt}
html.dzlb .dz3 .lbq-g button svg{width:22px;height:22px;flex:none}
html.dzlb .dz3 .dz-elgo button svg{width:22px;height:22px;flex:none}
/* BIGGER ICONS, ONE WEIGHT, WORDS A POINT SMALLER (5 Nov 2026, Junaid: "icons on the left are different and on the right they are stronger...
   the text underneath the icons a point smaller... on the left side menu make the icons bigger... space them out a little bit. And same on the
   top. And same everywhere else"): every icon line is the rail's weight (--lb-icon-w 1.25; a path with its own weight keeps it), the words under
   icons are 7 pt, the icons grow (rail 24 px drawn in a 40 px tile, top bar 20 px, the zoom strip 18 px, the right strip 22 px, panel tiles 24 px)
   and the rail and the top bar groups have a little more room between them */
html.dzlb{--lb-tile-size:7pt;--lb-icon-w:1.25}
html.dzlb :is(#dzStudio,.lb-rail,.lb-right,.dz-bar) :is(button,a,label) svg:not(.dzm-pen){stroke-width:var(--lb-icon-w)}
html.dzlb .lb-rail{gap:6px}
html.dzlb .lb-rail .lb-rt svg{width:40px;height:40px;padding:8px}
html.dzlb .lb-rail .lb-rl,html.dzlb .lb-rail .lb-rt,html.dzlb .lb-rail .lb-rt :is(span,b){font-size:7pt;white-space:nowrap}
@media (max-height:859px){ html.dzlb .lb-rail{gap:3px} html.dzlb .lb-rail .lb-rt svg{width:34px;height:34px;padding:7px} }
html.dzlb .dz-bar :is(#dzUndo,#dzRedo,#dzMore,#lbfLensBtn) svg{width:20px;height:20px}
html.dzlb .dz-bar :is(#dzSaveBtn,#dzPreviewBtn) svg{width:19px;height:19px}
html.dzlb .dz-bar #dzBack svg{width:18px;height:18px}
@media (min-width:1500px){ html.dzlb .lb-hist{gap:6px} html.dzlb .dz-bar .dz-bar-r{column-gap:10px} }
html.dzlb .dz-view .dz-ib svg{width:18px;height:18px}
html.dzlb .dz-view{gap:4px}
html.dzlb .lbi-strip .dz-ib svg{width:22px;height:22px}
html.dzlb .lbi-strip{gap:6px}
html.dzlb .dz3 .dz-elgo button svg,html.dzlb .dz3 .lbq-g button svg{width:24px;height:24px}
html.dzlb #dzDrawTools .dz-tool svg{width:26px;height:26px}
html.dzlb :is(#dzElGo button,.lbq-g button,#dzDrawTools .dz-tool,.dzx-h-qadd button,#dzLogos .dz-lg,.dz-arts .dz-art,.dzx-cl-grid .dzx-cl-t) :is(span,b,small):not(:has(svg,img)),html.dzlb .dzg-grid .dz-tpl .dzg-n{font-size:7pt}
html.dzlb .dz3 .dz-elgo button,html.dzlb .dz3 .lbq-g button{gap:7px}
/* DESIGNS FROM (gallery.js, 6 Nov 2026): one row that scrolls sideways (the chip-row arrows find it), the counts quieter */
html.dzlb .dzg-src{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:2px 0 8px;padding-bottom:2px}
html.dzlb .dzg-src::-webkit-scrollbar{display:none}
html.dzlb .dzg-src button{flex:none;white-space:nowrap}
html.dzlb .dzg-src button span{font-weight:400;opacity:.7;margin-left:3px;font-variant-numeric:tabular-nums}
html.dzlb .dzg-more{margin:10px 0 4px}

/* BRAND PIECES BY HAND (design.html brandManual, 6 Nov 2026): every detail of the brand as a tile to click or drag onto a banner, sign or poster */
html.dzlb .dz-bdets{display:grid;grid-template-columns:1fr;gap:6px;margin:0 0 12px}
html.dzlb .dz-bdet{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border:0;border-radius:var(--radius);background:var(--lb-soft);color:var(--lb-ink);font:inherit;text-align:left;cursor:grab}
html.dzlb .dz-bdet:hover{background:var(--lb-soft-2)}
html.dzlb .dz-bdet svg{flex:none;width:18px;height:18px;stroke-width:var(--lb-icon-w)}
html.dzlb .dz-bdet span{display:grid;min-width:0}
html.dzlb .dz-bdet small{font-size:7pt;font-weight:500;color:var(--lb-sub)}
html.dzlb .dz-bdet b{font-size:13px;font-weight:500;overflow-wrap:anywhere}
html.dzlb .dz-bt-man{margin:0 0 12px}

/* READY-MADE TEXT tiles at the top of the Text tool (design.html textGroup): the Elements tile look */
html.dzlb .dz3 .dz-tcgo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px}
html.dzlb .dz3 .dz-tcgo button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:62px;padding:9px 2px 7px;border:0;border-radius:var(--radius);background:var(--lb-soft);color:var(--lb-ink);font:inherit;cursor:pointer}
html.dzlb .dz3 .dz-tcgo button:hover{background:var(--lb-soft-2)}
html.dzlb .dz3 .dz-tcgo button[aria-pressed="true"]{background:var(--primary);color:#fff}
html.dzlb .dz3 .dz-tcgo button svg{width:22px;height:22px;flex:none}
html.dzlb .dz3 .dz-tcgo button span{font-size:var(--lb-tile-size,7pt);font-weight:500;line-height:1.2;text-align:center}
html.dzlb .dz3 .dz-tcgo button[aria-pressed="true"] svg{color:#fff;stroke:#fff}

/* EVEN GAPS (6 Nov 2026, the overnight audit): the brand tip at the top of Your Details sat 38 px above the hint (the form's 14 px gap plus its
   own margins), and the Elements search box 2 px above the tiles (the Text tool's search has 10 px) */
html.dzlb .dz-form > .dz-bc.details{margin:0}
html.dzlb .dz-form > .dz-bc.details + .dz-hint{margin-top:0}
html.dzlb .dz-search + .dz-elgo{margin-top:10px}

/* the size button in the inspector keeps one line (9 Nov 2026: "A3 Landscape (420 x 297 mm)" broke in two); the full name is in its menu */
html.dzlb #dzPSize{min-width:0;max-width:100%;overflow:hidden}
html.dzlb #dzPSize>span{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
html.dzlb #dzPSize>svg{flex:none}
.lb-price .lb-price-d{display:block;font-size:11px;font-weight:400;color:var(--muted);line-height:1.2}