/* KHMER HRMS — Professional Visual Template Designer */
.tpl-designer-layout{display:grid;grid-template-columns:190px minmax(360px,1fr) 280px;gap:14px;align-items:start;margin-top:12px}
.tpl-designer-layout,.tpl-designer-layout *{box-sizing:border-box}
.tpl-designer-rail,.tpl-designer-inspector,.tpl-designer-preview-panel{background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:12px}
.tpl-designer-rail{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow:auto;display:flex;flex-direction:column}
/* PATCH — "when there are many OBJECTS, can't see all of them" request:
   LAYERS previously shared ONE scroll region with the OBJECTS grid
   above it, so a long list either pushed the grid out of the visible
   area or was itself squeezed with no obvious way to see there was
   more. The OBJECTS grid + "LAYERS" title above now stay fixed
   (ordinary flex children), and ONLY this list scrolls, in its own
   right-sized space, with a visible (not OS-default-invisible) thin
   scrollbar so "there's more below" is obvious at a glance. */
.tpl-designer-layers-list{flex:1 1 auto;overflow-y:auto;min-height:70px;padding-right:3px;scrollbar-width:thin;scrollbar-color:var(--border,#cbd5e1) transparent}
.tpl-designer-layers-list::-webkit-scrollbar{width:7px}
.tpl-designer-layers-list::-webkit-scrollbar-track{background:transparent}
.tpl-designer-layers-list::-webkit-scrollbar-thumb{background:var(--border,#cbd5e1);border-radius:5px}
.tpl-designer-layers-list::-webkit-scrollbar-thumb:hover{background:var(--text-muted,#94a3b8)}
.tpl-designer-layer-count{font-weight:600;opacity:.65;text-transform:none;letter-spacing:0}
.tpl-designer-inspector{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow:auto}
.tpl-designer-rail-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:2px 0 8px}
.tpl-designer-object-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.tpl-designer-object-btn{border:1px solid var(--border,#e2e8f0);background:var(--surface,#fff);border-radius:9px;padding:9px 6px;font-size:11px;color:var(--text,#1f2937);cursor:pointer;text-align:center;min-height:56px}
.tpl-designer-object-btn:hover{border-color:var(--primary,#2563eb);background:var(--surface-alt,rgba(37,99,235,.06))}
.tpl-designer-object-btn .obj-icon{display:block;font-size:17px;line-height:20px;margin-bottom:3px}
.tpl-designer-rail-item{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;text-align:left;padding:8px 9px;margin-bottom:4px;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;font-size:12px;color:var(--text);}
.tpl-designer-rail-item:hover{background:var(--surface-alt,rgba(0,0,0,.03))}.tpl-designer-rail-item.active{border-color:var(--primary,#2563eb);background:var(--surface-alt,rgba(37,99,235,.08));font-weight:600}
.tpl-designer-rail-del{color:var(--danger,#dc2626);opacity:.7;font-size:11px;padding:3px 5px}.tpl-designer-rail-del:hover{opacity:1}
/* FIX (S35 — "can't find/select the object" request): the label + value
   subtitle stacked inside each LAYERS row, so e.g. two "QR Code" rows read
   as "QR Code / {{qr_payload}}" vs "QR Code / {{cert_number}}" instead of
   being visually identical. */
.tpl-designer-rail-item-main{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;overflow:hidden;flex:1}
.tpl-designer-rail-item-sub{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;font-weight:400;opacity:.6}
.tpl-designer-add-btn{width:100%;margin-top:6px;padding:8px 10px;border:1px dashed var(--border,#cbd5e1);border-radius:8px;background:transparent;color:var(--text-muted);font-size:12px;cursor:pointer}
.tpl-designer-add-btn:hover{border-color:var(--primary,#2563eb);color:var(--primary,#2563eb)}
.tpl-designer-canvas-wrap{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.tpl-designer-toolbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:7px 9px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--surface,#fff)}
.tpl-designer-toolbar-group{display:flex;align-items:center;gap:4px}.tpl-designer-toolbar button{border:1px solid var(--border,#e2e8f0);background:var(--surface,#fff);border-radius:6px;padding:5px 9px;font-size:11px;cursor:pointer}.tpl-designer-toolbar button:hover{border-color:var(--primary,#2563eb)}
.tpl-designer-canvas{position:relative;overflow:visible;flex:none;background:#fff;box-shadow:0 8px 28px rgba(15,23,42,.14);border:1px solid #d9dee7;transition:width .15s,height .15s;}
.tpl-designer-canvas.cert{width:min(560px,100%);aspect-ratio:210/297}.tpl-designer-canvas.cert.landscape{aspect-ratio:297/210}.tpl-designer-canvas.card{width:min(560px,100%);aspect-ratio:54/85.6}.tpl-designer-canvas.card.landscape{aspect-ratio:85.6/54}
.tpl-designer-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(100,116,139,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(100,116,139,.08) 1px,transparent 1px);background-size:10% 10%;}
.tpl-designer-safe-area{position:absolute;pointer-events:none;z-index:2;border:1px dashed rgba(37,99,235,.55);border-radius:2px;}
.tpl-designer-safe-area::before{content:'Safe area';position:absolute;top:-15px;left:-1px;font-size:9px;line-height:1;color:#2563eb;background:#fff;padding:2px 4px;border-radius:3px;white-space:nowrap;}
.tpl-designer-editable{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:move;user-select:none;touch-action:none;outline:1px dashed transparent;padding:3px;}
.tpl-designer-editable:hover{outline-color:rgba(37,99,235,.45)}.tpl-designer-editable.selected{outline:2px solid var(--primary,#2563eb);outline-offset:1px;background:rgba(37,99,235,.05)}
.tpl-designer-editable.line{display:block;padding:0;height:0}.tpl-designer-editable.shape{display:block}.tpl-designer-editable.image img{width:100%;height:100%;display:block;pointer-events:none}.tpl-designer-editable.icon{overflow:visible}.tpl-designer-editable.qr,.tpl-designer-editable.barcode{background:#fff;border:1px solid #d8dee8}
.tpl-designer-handle{position:absolute;width:9px;height:9px;background:var(--primary,#2563eb);border:2px solid #fff;border-radius:2px;right:-6px;bottom:-6px;cursor:nwse-resize;z-index:9999}.tpl-designer-editable.line .tpl-designer-handle{right:-6px;bottom:auto;top:-6px}
.tpl-designer-inspector .form-group{margin-bottom:9px}.tpl-designer-inspector label{font-size:11px;font-weight:700}.tpl-designer-inspector input,.tpl-designer-inspector select,.tpl-designer-inspector textarea{font-size:12px}
.tpl-designer-position-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tpl-designer-position-grid input{width:100%}
.tpl-designer-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.tpl-designer-actions button{font-size:11px;padding:5px 7px}
.tpl-designer-preview-strip{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid var(--border,#e2e8f0);border-radius:9px;background:var(--surface,#fff);font-size:11px}.tpl-live-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;margin-right:5px}
.tpl-designer-data-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.tpl-designer-data-chip{border:1px solid var(--border,#e2e8f0);border-radius:999px;padding:4px 7px;font-size:10px;cursor:pointer;background:var(--surface,#fff)}
.tpl-designer-hint{font-size:11px;color:var(--text-muted);text-align:center;max-width:560px}.tpl-designer-hint code{background:var(--surface-alt,rgba(0,0,0,.05));padding:1px 4px;border-radius:4px}
.tpl-designer-empty{padding:14px;text-align:center;color:var(--text-muted);font-size:11px;border:1px dashed var(--border,#cbd5e1);border-radius:8px}
@media(max-width:1200px){.tpl-designer-layout{grid-template-columns:170px minmax(320px,1fr) 250px}}
@media(max-width:900px){.tpl-designer-layout{grid-template-columns:1fr}.tpl-designer-rail,.tpl-designer-inspector{position:static;max-height:none;height:auto}.tpl-designer-layers-list{max-height:340px}.tpl-designer-object-grid{grid-template-columns:repeat(4,1fr)}.tpl-designer-canvas{width:min(650px,100%)} }
/* PATCH — Remove Frame button + hint (Design Settings bar + Frame
   Artwork Only box) and the Image object's Upload/Browse row
   (OBJECT PROPERTIES panel, Image Source field). */
.tpl-frame-remove-btn{margin-top:6px;width:100%}
.tpl-frame-removed-note{display:block;margin-top:4px;color:var(--danger,#dc2626)}
.tpl-image-upload-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.tpl-image-upload-btn{cursor:pointer;white-space:nowrap}
.tpl-image-upload-status{font-size:11px;color:var(--text-muted)}
@media(max-width:600px){.tpl-designer-object-grid{grid-template-columns:repeat(2,1fr)}.tpl-designer-canvas{width:100%}.tpl-designer-toolbar{justify-content:center}.tpl-designer-editable{touch-action:none}.tpl-designer-handle{width:14px;height:14px;right:-8px;bottom:-8px}}

/* When a visual card layout is saved, the designer elements become the authoritative front-face layout. */
.staff-card-face.designer-active > .card-header,.staff-card-face.designer-active > .card-body,.staff-card-face.designer-active > .card-footer{visibility:hidden}
.staff-card-face.designer-active > .tpl-el-layer{visibility:visible}
/* Teal Wave patch: a template's uploaded background must fill the WHOLE face (the face has 3mm padding + gradient by default). */
.staff-card-face.designer-active{padding:0}
.staff-card-face > .tpl-bg-image,.staff-card-face > .tpl-bg-color{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;pointer-events:none}
.staff-card-face.designer-active > .tpl-el-layer{z-index:1}


/* BUGFIX (S34 template rendering audit): `.tpl-el-layer` is the div
   every render_template_elements() consumer wraps its output in —
   certifications/templates/index.php (list thumbnails),
   staff_cards/templates/index.php (list thumbnails),
   certifications/certificate_print.php (real printed certificate),
   and app/Views/partials/staff_card_face.php (the real issued staff
   card, shown/printed/verified everywhere). Only certificate_print.php
   was setting `position:absolute;inset:0` on it inline; the other
   three left it a plain static block, so on those three the whole
   layer sat in normal flow instead of filling its already-positioned
   parent (.cert-frame / .staff-card-face both have position:relative)
   — pushing the rest of the card/certificate down and, combined with
   the text/line position fix in render_template_elements() above,
   made every free-form Designer layout misplaced wherever this rule
   was missing. Made a single global rule here so every current AND
   future consumer of this shared class gets it automatically — no
   per-view CSS to remember.
   `container-type: inline-size` turns this layer into the reference
   box for the `cqw` (container-query-width) units the thumbnail-only
   font-size overrides below use, so text shrinks relative to the
   ACTUAL thumbnail box (144–280px) instead of the browser viewport.
   pointer-events:none on the whole layer (and everything in it) keeps
   a decorative/preview overlay from ever swallowing clicks meant for
   whatever the frame sits inside of (e.g. the template card's own
   Edit/Delete buttons) — none of the four consumer contexts need the
   overlay itself to be interactive. */
.tpl-el-layer{position:absolute;inset:0;container-type:inline-size;pointer-events:none;}
.tpl-el-layer,.tpl-el-layer *{pointer-events:none;}

.tpl-frame-upload-box{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--surface-alt,rgba(0,0,0,.02))}.tpl-frame-upload-preview{width:110px;height:145px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border,#cbd5e1);border-radius:8px;background-image:linear-gradient(45deg,#f1f5f9 25%,transparent 25%),linear-gradient(-45deg,#f1f5f9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f5f9 75%),linear-gradient(-45deg,transparent 75%,#f1f5f9 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}.tpl-frame-upload-preview img{max-width:100%;max-height:100%;object-fit:contain}.tpl-frame-upload-info{display:flex;flex-direction:column;gap:5px;font-size:11px}.tpl-frame-upload-info strong{font-size:13px}.tpl-frame-upload-info input[type=file]{margin-top:4px}@media(max-width:600px){.tpl-frame-upload-box{align-items:flex-start;flex-direction:column}.tpl-frame-upload-preview{width:90px;height:120px}}
.tpl-live-frame,.tpl-live-frame-image,.tpl-live-seal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.tpl-live-frame{z-index:1}.tpl-live-frame-image{z-index:2;object-fit:cover}.tpl-live-seal{z-index:3;object-fit:contain;width:70px;height:70px;left:auto;top:auto;right:7%;bottom:7%}.tpl-designer-canvas > .tpl-designer-editable{z-index:10}.tpl-el-shape{position:absolute;transform:translate(-50%,-50%);}.tpl-el-image{position:absolute;transform:translate(-50%,-50%);object-fit:contain}.tpl-el-icon{position:absolute;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%)}/* BUGFIX (S34 addendum) — a Designer-placed QR object's box is sized by
   widthPct/heightPct (the % box the user drags in the Designer), but the
   encoder in assets/vendor/qrcode/qrcode.js emits an <svg> with a FIXED
   pixel width/height derived from cellSize/margin/module-count, unrelated
   to that box. With nothing forcing the svg to fill its container, it
   rendered at its own native size — usually larger than a small card's
   designer box — got centered via transform:translate(-50%,-50%), and
   spilled past the card edge where print clips it, leaving only a
   fragment of 1-2 finder-pattern corners visible (the "glyph blob" seen
   on staff-cards/{id}/print). `.tpl-el-qr svg{width:100%;height:100%}`
   below makes the injected code always scale to the designer's box
   (SVG's own viewBox keeps it square/undistorted). The checkerboard +
   inset box-shadow are the Designer CANVAS's placeholder-swatch styling
   only — scoped with :not(.qr-rendered) so they no longer sit on top of
   the real code once staff-card-qr.js swaps it in (see that file). */
.tpl-el-qr{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden}.tpl-el-qr:not(.qr-rendered){background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 50%/8px 8px;box-shadow:inset 0 0 0 5px #fff}.tpl-el-qr span{background:#fff;padding:3px;font-size:9px}.tpl-el-qr svg{width:100%;height:100%;display:block}.tpl-el-barcode{position:absolute;display:flex;align-items:flex-end;justify-content:center;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 8px);padding-bottom:2px}.tpl-el-barcode span{background:#fff;font-size:7px;line-height:9px;padding:0 2px}


/* S34 Studio UX — keep the designer visible without requiring a long scroll. */
.tpl-designer-shell{margin-top:14px;padding:14px;background:var(--surface-alt,#f8fafc);border:1px solid var(--border,#e2e8f0);border-radius:14px;}
.tpl-designer-shell .tpl-designer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.tpl-designer-shell .tpl-designer-heading h3{margin:0;font-size:17px;}
.tpl-designer-shell .tpl-designer-heading p{margin:3px 0 0;color:var(--text-muted);font-size:11px;}
.tpl-designer-studio{display:grid;grid-template-columns:230px minmax(430px,1fr) 320px;gap:12px;align-items:stretch;min-height:calc(100vh - 210px);}
.tpl-designer-rail,.tpl-designer-inspector{height:calc(100vh - 235px);min-height:520px;overflow:auto;position:sticky;top:84px;}
.tpl-designer-rail{display:flex;flex-direction:column;overflow:hidden}
.tpl-designer-rail .tpl-designer-layers-list{overflow-y:auto}
.tpl-designer-canvas-wrap{min-width:0;min-height:calc(100vh - 235px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
.tpl-designer-canvas-wrap .tpl-designer-toolbar,.tpl-designer-canvas-wrap .tpl-designer-preview-strip{max-width:760px;}
.tpl-designer-canvas{max-height:calc(100vh - 330px);max-width:min(760px,100%);width:min(760px,100%);}
.tpl-designer-quick-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:9px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--surface,#fff);margin-bottom:8px;width:100%;}
.tpl-designer-quick-settings .quick-title{grid-column:1/-1;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);}
.tpl-designer-quick-settings .form-group{margin:0;min-width:0;}
.tpl-designer-quick-settings label{display:block;font-size:10px;font-weight:700;margin-bottom:4px;}
.tpl-designer-quick-settings input,.tpl-designer-quick-settings select{height:32px;font-size:11px;width:100%;}
.tpl-designer-quick-settings .color-input-pair{display:flex;gap:5px;align-items:center;}
.tpl-designer-quick-settings input[type=color]{width:32px;min-width:32px;padding:2px;}
.tpl-designer-quick-settings .color-hex-input{min-width:0;}
.tpl-designer-setting-note{grid-column:1/-1;font-size:10px;color:var(--text-muted);margin-top:-2px;}
.tpl-designer-frame-quick{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:2px;}
.tpl-designer-frame-quick input[type=file]{font-size:10px;max-width:270px;}
.tpl-designer-canvas-stats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-size:10px;color:var(--text-muted);margin-top:4px;}
.tpl-designer-canvas-stats span{padding:3px 7px;border:1px solid var(--border,#e2e8f0);border-radius:999px;background:var(--surface,#fff);}
.tpl-designer-live-badge{white-space:nowrap;}
@media(max-width:1250px){.tpl-designer-studio{grid-template-columns:205px minmax(360px,1fr) 285px}.tpl-designer-quick-settings{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:950px){.tpl-designer-studio{grid-template-columns:1fr;min-height:0}.tpl-designer-rail,.tpl-designer-inspector{height:auto;min-height:0;position:static}.tpl-designer-canvas-wrap{min-height:0}.tpl-designer-canvas{max-height:none}.tpl-designer-quick-settings{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.tpl-designer-quick-settings{grid-template-columns:1fr}.tpl-designer-frame-quick{align-items:flex-start;flex-direction:column}.tpl-designer-canvas{width:100%;}}


/* ================================================================
   S34 VISUAL DESIGN STUDIO — Premium UI refinement
   Keeps the canvas dominant, settings immediately visible and
   interactions visually clear without changing the data model.
   ================================================================ */
.tpl-designer-shell{
  margin:12px 0 18px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
}
.tpl-designer-shell .tpl-designer-heading{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 2px 12px;margin:0;
}
.tpl-designer-shell .tpl-designer-heading h3{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--text,#172033)}
.tpl-designer-shell .tpl-designer-heading p{font-size:11px;margin:3px 0 0;color:var(--text-muted,#64748b)}
.tpl-designer-live-badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.18);color:#15803d;font-size:11px;font-weight:800;
}
.tpl-designer-live-badge .tpl-live-dot{margin:0;width:7px;height:7px;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.tpl-designer-quick-settings{
  display:grid;grid-template-columns:110px minmax(145px,1fr) minmax(145px,1fr) 110px 110px 135px minmax(190px,1.2fr);
  gap:8px;align-items:end;padding:10px 12px;margin-bottom:10px;
  border:1px solid var(--border,#e2e8f0);border-radius:12px;background:var(--surface,#fff);
  box-shadow:0 3px 14px rgba(15,23,42,.045);
}
.tpl-designer-quick-settings .quick-title{grid-column:1/-1;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b;padding-bottom:1px}
.tpl-designer-quick-settings .form-group{margin:0;min-width:0}
.tpl-designer-quick-settings label{display:block;font-size:9px;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:.035em;margin-bottom:4px}
.tpl-designer-quick-settings input,.tpl-designer-quick-settings select{height:31px;border-radius:7px;font-size:11px;width:100%;padding:5px 8px}
.tpl-designer-quick-settings input[type=range]{padding:0;accent-color:var(--primary,#2563eb)}
.tpl-designer-quick-settings input[type=color]{width:31px;min-width:31px;height:31px;padding:2px}
.tpl-designer-quick-settings .color-input-pair{display:flex;gap:5px;align-items:center}
.tpl-designer-quick-settings .color-hex-input{min-width:0}
.tpl-designer-frame-quick{grid-column:auto;display:flex;align-items:center;gap:7px;min-width:0;padding:0;border:1px dashed #cbd5e1;border-radius:8px;height:31px;padding:0 7px}
.tpl-designer-frame-quick label{margin:0;white-space:nowrap}
.tpl-designer-frame-quick input[type=file]{font-size:9px;max-width:150px}
.tpl-designer-setting-note{grid-column:1/-1;font-size:9px;color:#64748b;margin:0}
.tpl-designer-studio{
  display:grid;grid-template-columns:210px minmax(480px,1fr) 300px;gap:10px;align-items:stretch;
  min-height:calc(100vh - 205px);padding:10px;
  background:#eef2f7;border:1px solid #dfe5ec;border-radius:14px;
}
.tpl-designer-rail,.tpl-designer-inspector{
  height:calc(100vh - 225px);min-height:500px;overflow:auto;position:sticky;top:76px;
  padding:11px;background:rgba(255,255,255,.94);border:1px solid #dce3eb;border-radius:11px;
  box-shadow:0 4px 18px rgba(15,23,42,.045);
}
.tpl-designer-rail{scrollbar-width:thin}
.tpl-designer-canvas-wrap{min-width:0;min-height:calc(100vh - 225px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:auto;padding:0 4px 8px}
.tpl-designer-toolbar,.tpl-designer-preview-strip{max-width:900px;width:100%;box-shadow:0 2px 10px rgba(15,23,42,.04)}
.tpl-designer-toolbar{padding:6px 8px;border-radius:9px;background:#fff;border:1px solid #dce3eb}
.tpl-designer-toolbar button{height:28px;border-radius:6px;padding:4px 8px;font-size:10px;background:#fff}
.tpl-designer-preview-strip{padding:6px 9px;margin-top:6px;border-radius:8px;background:#fff;border:1px solid #dce3eb;font-size:10px;color:#475569}
.tpl-designer-canvas{
  max-height:calc(100vh - 315px);max-width:min(900px,100%);width:min(900px,100%);
  border-radius:3px;box-shadow:0 20px 55px rgba(15,23,42,.18);margin-top:10px!important;
}
.tpl-designer-grid{background-image:linear-gradient(rgba(100,116,139,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(100,116,139,.055) 1px,transparent 1px);background-size:5% 5%}
.tpl-designer-editable{outline:1px dashed transparent;transition:outline-color .12s,box-shadow .12s}
.tpl-designer-editable:hover{outline-color:rgba(37,99,235,.5);box-shadow:0 0 0 3px rgba(37,99,235,.045)}
.tpl-designer-editable.selected{outline:2px solid #2563eb;outline-offset:1px;background:rgba(37,99,235,.045);box-shadow:0 0 0 4px rgba(37,99,235,.08)}
.tpl-designer-handle{width:10px;height:10px;background:#2563eb;border:2px solid #fff;border-radius:50%;right:-6px;bottom:-6px;box-shadow:0 1px 4px rgba(15,23,42,.25)}
.tpl-designer-rail-title{font-size:9px;letter-spacing:.09em;color:#64748b;margin:3px 0 7px}
.tpl-designer-object-grid{gap:6px}
.tpl-designer-object-btn{min-height:58px;border-color:#e1e7ee;background:#fff;border-radius:8px;padding:7px 4px;font-size:10px;transition:all .12s}
.tpl-designer-object-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.08)}
.tpl-designer-object-btn .obj-icon{font-size:16px}
.tpl-designer-rail-item{padding:7px 8px;margin-bottom:3px;font-size:10px;border-color:transparent}
.tpl-designer-rail-item.active{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.tpl-designer-inspector .form-group{margin-bottom:8px}
.tpl-designer-inspector label{font-size:9px;text-transform:uppercase;letter-spacing:.035em;color:#475569}
.tpl-designer-inspector input,.tpl-designer-inspector select,.tpl-designer-inspector textarea{border-radius:7px;font-size:11px}
.tpl-designer-inspector input,.tpl-designer-inspector select{height:31px}
.tpl-designer-actions{padding-top:7px;border-top:1px solid #e5e7eb}
.tpl-designer-actions button{border-radius:6px;font-size:10px}
.tpl-designer-canvas-stats span{font-size:9px}
@media(max-width:1250px){
 .tpl-designer-quick-settings{grid-template-columns:repeat(4,minmax(0,1fr))}
 .tpl-designer-frame-quick{grid-column:span 2}
 .tpl-designer-studio{grid-template-columns:190px minmax(390px,1fr) 275px}
}
@media(max-width:950px){
 .tpl-designer-quick-settings{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tpl-designer-frame-quick{grid-column:1/-1}
 .tpl-designer-studio{grid-template-columns:1fr;min-height:0}
 .tpl-designer-rail,.tpl-designer-inspector{height:auto;min-height:0;position:static}
 .tpl-designer-canvas-wrap{min-height:0;overflow:visible}
 .tpl-designer-canvas{max-height:none}
}
@media(max-width:600px){
 .tpl-designer-shell .tpl-designer-heading{align-items:flex-start;flex-direction:column}
 .tpl-designer-quick-settings{grid-template-columns:1fr}
 .tpl-designer-frame-quick{grid-column:auto;align-items:center}
 .tpl-designer-studio{padding:7px}
}

/* =========================================================
   S34 Visual Designer V4 — clean, responsive design studio
   ========================================================= */
.tpl-studio-v4{padding:12px;background:#f6f8fb;border:1px solid #dfe5ec;border-radius:14px;box-shadow:0 8px 28px rgba(15,23,42,.05)}
.tpl-studio-v4 .tpl-designer-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:2px 2px 11px}
.tpl-studio-v4 .tpl-designer-title{display:flex;align-items:center;gap:10px;min-width:0}
.tpl-studio-v4 .tpl-title-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#eaf2ff;color:#2563eb;font-size:16px;font-weight:800;flex:0 0 auto}
.tpl-studio-v4 .tpl-designer-title h3{margin:0;font-size:16px;line-height:1.2;color:#182230;font-weight:750}
.tpl-studio-v4 .tpl-designer-title p{margin:3px 0 0;font-size:10px;color:#718096}
.tpl-studio-v4 .tpl-designer-status{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #d9e1eb;border-radius:999px;background:#fff;color:#64748b;font-size:10px;white-space:nowrap}
.tpl-studio-v4 .tpl-designer-status strong{font-size:9px;letter-spacing:.06em;color:#2563eb}
.tpl-studio-v4 .tpl-designer-settings-bar{display:grid;grid-template-columns:145px repeat(6,minmax(90px,1fr)) 1.35fr;gap:8px;align-items:end;padding:9px;margin-bottom:10px;background:#fff;border:1px solid #dfe5ec;border-radius:10px;box-shadow:0 2px 10px rgba(15,23,42,.035)}
.tpl-studio-v4 .tpl-settings-heading{display:flex;align-items:center;gap:7px;height:34px}
.tpl-studio-v4 .tpl-settings-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:#f1f5f9;color:#475569;font-size:12px}
.tpl-studio-v4 .tpl-settings-heading strong{display:block;font-size:10px;color:#334155}
.tpl-studio-v4 .tpl-settings-heading small{display:block;margin-top:1px;font-size:8px;color:#94a3b8}
.tpl-studio-v4 .tpl-setting{min-width:0}
.tpl-studio-v4 .tpl-setting label{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0 0 4px;font-size:8px;font-weight:750;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
.tpl-studio-v4 .tpl-setting label b{font-size:8px;color:#334155;text-transform:none;letter-spacing:0}
.tpl-studio-v4 .tpl-setting select,.tpl-studio-v4 .tpl-setting input[type=number]{width:100%;height:32px;padding:5px 7px;border:1px solid #d8e0e9;border-radius:7px;background:#fff;font-size:10px;color:#334155;outline:none}
.tpl-studio-v4 .tpl-setting select:focus,.tpl-studio-v4 .tpl-setting input:focus{border-color:#8fb4f4;box-shadow:0 0 0 2px rgba(37,99,235,.08)}
.tpl-studio-v4 .tpl-color-control{display:flex;align-items:center;gap:4px;height:32px}
.tpl-studio-v4 .tpl-color-control input[type=color]{width:32px;height:32px;padding:2px;border:1px solid #d8e0e9;border-radius:7px;background:#fff;cursor:pointer;flex:0 0 auto}
.tpl-studio-v4 .tpl-color-control input[type=text]{min-width:0;width:100%;height:32px;padding:5px 6px;border:1px solid #d8e0e9;border-radius:7px;font-size:10px;color:#475569}
.tpl-studio-v4 .tpl-setting-range input[type=range]{width:100%;height:24px;accent-color:#2563eb}
.tpl-studio-v4 .tpl-frame-setting input[type=file]{width:100%;height:32px;font-size:9px;color:#475569}
.tpl-studio-v4 .tpl-frame-setting small{display:block;margin-top:2px;color:#94a3b8;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-studio-v4 .tpl-frame-setting small b{color:#64748b}
.tpl-studio-v4 .tpl-designer-studio{grid-template-columns:205px minmax(420px,1fr) 290px;gap:10px;min-height:calc(100vh - 200px);align-items:stretch}
/* PATCH — "make the Live Preview/Layers area taller" request: with the
   Design Settings quick bar collapsed by default now (see the
   accordion rules below), there's more headroom above this row —
   claim it here instead of leaving it unused, so the canvas and the
   full LAYERS list are visible with noticeably less scrolling. */
.tpl-studio-v4 .tpl-designer-rail,.tpl-studio-v4 .tpl-designer-inspector{height:calc(100vh - 200px);min-height:560px;position:sticky;top:76px;padding:10px;background:#fff;border:1px solid #dfe5ec;border-radius:10px;box-shadow:0 3px 14px rgba(15,23,42,.035)}
/* FIX ("when there are many OBJECTS/LAYERS, can't see the layers at
   all" report): this rule used to set the whole rail to
   `overflow:auto`, which — at this `.tpl-studio-v4` scope's higher
   selector specificity — silently WON over the earlier, correct
   `.tpl-designer-rail{overflow:hidden}` + `.tpl-designer-layers-list{
   flex:1 1 auto;overflow-y:auto}` split defined above (line ~127),
   the exact split that was already built to keep the OBJECTS grid
   permanently visible while only the LAYERS list scrolls in its own
   right-sized space. With the whole rail scrolling as one flex column
   instead, a template with many layers (see the "LAYERS (14)" case)
   pushed the layers list's own scroll region to have no reliable
   resolved height in most browsers' flex-with-overflow:auto
   calculation, so the list rendered with zero visible rows below the
   OBJECTS grid — appearing to have "no layers" even though the data
   was there. Restoring `overflow:hidden` + explicit flex column here
   (re-declared at this same higher specificity so it can no longer be
   silently out-prioritized by a future edit either) makes the rail
   itself a fixed-height clipping box again; the dedicated override for
   `.tpl-designer-layers-list` right below gives that list an explicit
   `flex:1 1 0` + `min-height:0`, which is what actually lets a flex
   child compute a real, scrollable height smaller than its content
   instead of growing to fit it. */
.tpl-studio-v4 .tpl-designer-rail{overflow:hidden;display:flex;flex-direction:column}
.tpl-studio-v4 .tpl-designer-rail .tpl-designer-layers-list{flex:1 1 0;min-height:0;max-height:none;overflow-y:auto}
.tpl-studio-v4 .tpl-designer-inspector{overflow:auto}
.tpl-studio-v4 .tpl-designer-canvas-wrap{height:calc(100vh - 250px);min-height:470px;overflow:hidden;padding:0 2px 4px;background:#eef2f7;border:1px solid #dfe5ec;border-radius:10px}
.tpl-studio-v4 .tpl-designer-toolbar{max-width:none;flex:0 0 auto;padding:7px 9px;border:0;border-bottom:1px solid #e1e7ee;border-radius:10px 10px 0 0;box-shadow:none;background:#fff}
.tpl-studio-v4 .tpl-designer-preview-strip{max-width:none;margin:0;padding:5px 9px;border:0;border-bottom:1px solid #e7ebf0;border-radius:0;box-shadow:none;background:#fff;color:#64748b;font-size:9px}
.tpl-studio-v4 .tpl-designer-canvas-wrap .tpl-designer-canvas{margin:auto!important;max-width:calc(100% - 24px);height:calc(100% - 78px);max-height:calc(100% - 78px);width:auto;box-shadow:0 18px 42px rgba(15,23,42,.2);border-color:#cfd7e2;flex:0 1 auto}
.tpl-studio-v4 .tpl-designer-hint{max-width:none;margin:3px auto 0;padding:0 8px;font-size:8px;color:#94a3b8;flex:0 0 auto}
.tpl-studio-v4 .tpl-designer-data-list{max-width:760px;width:100%;justify-content:center;margin:3px auto 0;overflow:auto;white-space:nowrap;flex:0 0 auto}
.tpl-studio-v4 .tpl-designer-data-chip{padding:3px 6px;font-size:8px;background:#fff}
.tpl-studio-v4 .tpl-designer-rail-title{font-size:8px;letter-spacing:.1em;font-weight:800;margin:2px 0 6px;color:#7b8794}
.tpl-studio-v4 .tpl-designer-object-grid{gap:5px;margin-bottom:11px}
.tpl-studio-v4 .tpl-designer-object-btn{min-height:53px;border-color:#e1e7ee;border-radius:8px;padding:6px 4px;font-size:9px;color:#475569;background:#fff}
.tpl-studio-v4 .tpl-designer-object-btn:hover{border-color:#93b4e9;background:#f8fbff;transform:none;box-shadow:0 3px 10px rgba(37,99,235,.07)}
.tpl-studio-v4 .tpl-designer-object-btn .obj-icon{font-size:15px;margin-bottom:2px;color:#334155}
.tpl-studio-v4 .tpl-designer-rail-item{font-size:9px;padding:6px 7px;border-radius:7px}
.tpl-studio-v4 .tpl-designer-inspector label{font-size:8px;letter-spacing:.04em}
.tpl-studio-v4 .tpl-designer-inspector input,.tpl-studio-v4 .tpl-designer-inspector select{height:29px;font-size:10px}
.tpl-studio-v4 .tpl-designer-inspector textarea{font-size:10px}
.tpl-studio-v4 .tpl-designer-inspector .form-group{margin-bottom:7px}
.tpl-studio-v4 .tpl-designer-position-grid{gap:5px}
.tpl-studio-v4 .tpl-designer-actions button{font-size:9px;padding:5px 6px}
.tpl-studio-v4 .tpl-designer-editable.selected{outline:2px solid #2563eb;background:rgba(37,99,235,.035);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.tpl-studio-v4 .tpl-designer-grid{background-size:5% 5%;opacity:.65}

@media(max-width:1280px){
  .tpl-studio-v4 .tpl-designer-settings-bar{grid-template-columns:130px repeat(4,minmax(95px,1fr)) 1.4fr}
  .tpl-studio-v4 .tpl-setting-range{grid-column:auto}
  .tpl-studio-v4 .tpl-frame-setting{grid-column:span 2}
  .tpl-studio-v4 .tpl-designer-studio{grid-template-columns:185px minmax(380px,1fr) 270px}
}
@media(max-width:1050px){
  .tpl-studio-v4 .tpl-designer-settings-bar{grid-template-columns:repeat(4,minmax(100px,1fr))}
  .tpl-studio-v4 .tpl-settings-heading{grid-column:1/-1}
  .tpl-studio-v4 .tpl-frame-setting{grid-column:span 2}
  .tpl-studio-v4 .tpl-designer-studio{grid-template-columns:175px minmax(360px,1fr);min-height:calc(100vh - 290px)}
  .tpl-studio-v4 .tpl-designer-inspector{grid-column:1/-1;position:static;height:auto;min-height:0;max-height:none}
  .tpl-studio-v4 .tpl-designer-canvas-wrap{height:calc(100vh - 290px);min-height:430px}
}
@media(max-width:760px){
  .tpl-studio-v4{padding:8px;border-radius:11px}
  .tpl-studio-v4 .tpl-designer-topbar{padding-bottom:8px}
  .tpl-studio-v4 .tpl-designer-status span:last-child{display:none}
  .tpl-studio-v4 .tpl-designer-settings-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px}
  .tpl-studio-v4 .tpl-settings-heading,.tpl-studio-v4 .tpl-frame-setting{grid-column:1/-1}
  .tpl-studio-v4 .tpl-designer-studio{display:flex;flex-direction:column;min-height:0;gap:8px}
  .tpl-studio-v4 .tpl-designer-rail{position:static;width:100%;height:auto;min-height:0;max-height:none}
  /* Mobile: the rail's own height goes back to `auto` (it's stacked in
     normal page flow here, not a fixed sidebar), so the LAYERS list's
     `flex:1 1 0` from the desktop rule above has nothing to grow/shrink
     against and would otherwise render at its `min-height:0`, i.e.
     invisible — the same "can't see the layers" symptom, mobile-sized.
     A fixed cap here keeps it a real, independently scrollable region
     on small screens too, instead of relying on flex sizing against an
     auto-height parent. */
  .tpl-studio-v4 .tpl-designer-rail .tpl-designer-layers-list{flex:0 1 auto;max-height:220px}
  .tpl-studio-v4 .tpl-designer-object-grid{grid-template-columns:repeat(8,minmax(58px,1fr));overflow-x:auto;padding-bottom:2px}
  .tpl-studio-v4 .tpl-designer-object-btn{min-width:58px;min-height:48px}
  .tpl-studio-v4 .tpl-designer-rail-title:nth-of-type(2){margin-top:7px}
  .tpl-studio-v4 .tpl-designer-rail-item{display:inline-flex;width:auto;min-width:110px;margin-right:4px}
  .tpl-studio-v4 .tpl-designer-rail > template + *{white-space:nowrap;overflow-x:auto}
  .tpl-studio-v4 .tpl-designer-canvas-wrap{height:auto;min-height:0;overflow:visible;padding:0 0 6px}
  .tpl-studio-v4 .tpl-designer-canvas-wrap .tpl-designer-canvas{max-width:100%;width:100%;max-height:none}
  .tpl-studio-v4 .tpl-designer-inspector{position:static;width:100%;height:auto;min-height:0;max-height:none}
  .tpl-studio-v4 .tpl-designer-toolbar{flex-wrap:wrap;justify-content:center}
  .tpl-studio-v4 .tpl-designer-preview-strip{justify-content:center}
  .tpl-studio-v4 .tpl-designer-data-list{justify-content:flex-start;overflow-x:auto}
}
@media(max-width:430px){
  .tpl-studio-v4 .tpl-designer-title h3{font-size:14px}
  .tpl-studio-v4 .tpl-designer-title p{font-size:9px}
  .tpl-studio-v4 .tpl-setting label{font-size:7px}
  .tpl-studio-v4 .tpl-setting select,.tpl-studio-v4 .tpl-setting input[type=number]{height:30px;font-size:9px}
  .tpl-studio-v4 .tpl-color-control input[type=color]{width:30px;height:30px}
  .tpl-studio-v4 .tpl-designer-handle{width:13px;height:13px;right:-8px;bottom:-8px}
}


/* S34 V5 — full-screen Add Staff Card Template + gallery previews
   S34 V6 — same full-screen treatment extended to Certificate Templates.
   BUGFIX: .template-designer-layout (s31-staff-cards.css, left over from
   the old S32 designer that had a separate 340px static side-preview
   column) was still being applied to this page's outer wrapper and was
   NOT being cancelled by anything below — its `display:grid;
   grid-template-columns:1fr 340px` survived the cascade (different
   class, same specificity, declared first) and silently reserved an
   empty 340px gutter on the right of the studio even though there is
   only one child (the form) to lay out. `display:block` below cancels
   that grid outright so the studio actually gets the full page width. */
.tpl-card-template-page,.tpl-cert-template-page{width:100%;max-width:none;display:block}
.tpl-card-template-form,.tpl-cert-template-form{width:100%;max-width:none;padding:10px;background:transparent;border:0;box-shadow:none}
.tpl-card-template-form>.form-row,.tpl-cert-template-form>.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 8px;padding:0 2px}
.tpl-card-template-form>.form-row .form-group,.tpl-cert-template-form>.form-row .form-group{margin:0}
.tpl-card-template-header,.tpl-cert-template-header{margin-bottom:2px}
.tpl-card-template-header h1,.tpl-cert-template-header h1{font-size:18px}
/* PATCH — "Layers list gets hidden below the visible area" report
   (screenshot: "LAYERS (14)" cut off after ~4 rows with the rest
   unreachable-looking). The studio/rail/canvas heights below used to
   be tightly clamped to a shallow slice of the viewport (145px/104px
   offsets, 600px floor) — comfortable on a tall monitor but on a
   normal laptop-height browser window it left almost no room for the
   LAYERS list once the fixed OBJECTS grid above it was accounted for.
   Reducing the top offsets and raising every floor here gives the
   whole Studio (and therefore the rail's LAYERS scroll region) a lot
   more real height on every screen, while keeping the same
   viewport-fit + internal-scroll architecture (Rule: no page-level
   redesign) — a very long layer list still scrolls inside its own
   already-visible thin scrollbar (see .tpl-designer-layers-list
   above), it just now has enough room to show far more rows before
   that scroll is ever needed. */
.tpl-card-template-form .tpl-studio-v4,.tpl-cert-template-form .tpl-studio-v4{margin-top:4px;height:calc(100vh - 90px);min-height:860px;padding:9px}
.tpl-card-template-form .tpl-studio-v4 .tpl-designer-studio,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-studio{height:calc(100% - 90px);min-height:720px}
.tpl-card-template-form .tpl-studio-v4 .tpl-designer-rail,.tpl-card-template-form .tpl-studio-v4 .tpl-designer-inspector,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-rail,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-inspector{height:100%;min-height:720px;position:relative;top:0}
.tpl-card-template-form .tpl-studio-v4 .tpl-designer-canvas-wrap,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-canvas-wrap{height:100%;min-height:660px}
.staff-template-thumb{position:relative;overflow:hidden;aspect-ratio:1.586/1;border-radius:12px;background:#fff;border:1px solid #dfe5ec;box-shadow:0 7px 22px rgba(15,23,42,.07)}
.staff-template-thumb-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--tpl-primary),var(--tpl-secondary));opacity:.12}
.staff-template-thumb-content{position:absolute;inset:4%;overflow:hidden;background:#fff;border-radius:9px;border:1px solid rgba(100,116,139,.2)}
/* BUGFIX (S34 template rendering audit): this used to clamp on `vw`
   (viewport width) — 1.1% of the BROWSER WINDOW, not of this small
   ~150–280px thumbnail box. On a normal desktop viewport that always
   evaluated near (or past) the clamp's own upper bound regardless of
   how narrow the actual thumbnail was, so a title authored at
   fontSize:30 in the Designer (a fine size for the ~560px Designer
   canvas) still rendered at a near-fixed ~11px in a 150px-wide
   certificate thumbnail — visually enormous relative to the frame,
   which is exactly the overflowing/cut-off text seen in both the
   Card and Certificate template lists. Switched to `cqw`, which is a
   percentage of `.tpl-el-layer`'s own width (see the container-type
   rule above) — so text now actually shrinks with the thumbnail it's
   sitting in, on any screen size. */
.staff-template-thumb-content .tpl-el-text{font-size:clamp(5px,3.6cqw,12px)!important;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;}
.staff-template-thumb-content .tpl-el-icon{font-size:clamp(8px,4.5cqw,16px)!important}
.staff-template-thumb-content .tpl-el-qr{background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 50%/5px 5px}
.staff-template-thumb-content .tpl-el-barcode span{font-size:6px!important}

/* Certificate list thumbnails (certifications/templates/index.php)
   had NO size override at all for Designer-built elements — every
   title/name/body text box rendered at its full literal fontSize
   (commonly 18–30px) inside a frame capped at 150px wide, which is
   the "TE OF ... MPLE ... ION" fragment-only overflow the Certificate
   Templates grid showed for every seeded template that uses the
   Designer. Same `cqw`-based fix as the Card thumbnails above, so
   both galleries behave the same way. */
.cert-frame-thumb .tpl-el-text{font-size:clamp(5px,3.6cqw,12px)!important;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;}
.cert-frame-thumb .tpl-el-icon{font-size:clamp(8px,4.5cqw,16px)!important}
.cert-frame-thumb .tpl-el-qr{background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 50%/5px 5px}
.cert-frame-thumb .tpl-el-barcode span{font-size:6px!important}
.cert-frame-thumb .tpl-el-shape,.cert-frame-thumb .tpl-el-line{opacity:.9}
.staff-template-thumb-meta-badge{position:absolute;right:8px;bottom:7px;font-size:8px;font-weight:700;color:#64748b;background:rgba(255,255,255,.92);padding:3px 6px;border-radius:999px;border:1px solid #e2e8f0}
@media(max-width:1100px){.tpl-card-template-form>.form-row,.tpl-cert-template-form>.form-row{grid-template-columns:1fr}.tpl-card-template-form .tpl-studio-v4,.tpl-cert-template-form .tpl-studio-v4{height:auto;min-height:calc(100vh - 110px)}.tpl-card-template-form .tpl-studio-v4 .tpl-designer-studio,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-studio{height:auto;min-height:640px}.tpl-card-template-form .tpl-studio-v4 .tpl-designer-rail,.tpl-card-template-form .tpl-studio-v4 .tpl-designer-inspector,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-rail,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-inspector{min-height:640px}.tpl-card-template-form .tpl-studio-v4 .tpl-designer-canvas-wrap,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-canvas-wrap{height:calc(100vh - 380px);min-height:420px}}
@media(max-width:760px){.tpl-card-template-form,.tpl-cert-template-form{padding:6px}.tpl-card-template-form .tpl-studio-v4,.tpl-cert-template-form .tpl-studio-v4{height:auto;min-height:0}.tpl-card-template-form .tpl-studio-v4 .tpl-designer-canvas-wrap,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-canvas-wrap{height:auto;min-height:0}}

/* =========================================================================
   S34 V6 — "Atelier" studio redesign
   Pure re-skin: every selector below already exists in the DOM (V4 markup),
   so nothing here needs an HTML/Alpine change — these rules simply load
   after V4's and win on equal specificity. Design language borrows the
   product's own certificate palette (deep navy + engraved gold) instead of
   a generic SaaS blue, so the designer chrome itself reads like an atelier
   for official documents rather than a generic admin panel.
   ========================================================================= */
:root{
  --tpl-navy-950:#0B1626; --tpl-navy-900:#122443; --tpl-navy-800:#1B3459;
  --tpl-navy-700:#28466F; --tpl-gold-600:#B4872A; --tpl-gold-500:#D4AF37;
  --tpl-gold-200:#F1E1B0; --tpl-paper:#EEF1F6; --tpl-paper-line:#DCE2EC;
  --tpl-ink:#16202E; --tpl-ink-soft:#57677C;
}
.tpl-studio-v4{
  padding:0; background:var(--tpl-paper); border:1px solid var(--tpl-paper-line);
  border-radius:16px; box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 34px rgba(15,30,55,.09);
  overflow:hidden;
}
.tpl-studio-v4 .tpl-designer-topbar{
  padding:14px 18px; margin:0; border-radius:0;
  background:linear-gradient(120deg,var(--tpl-navy-950),var(--tpl-navy-800) 68%,var(--tpl-navy-700));
  position:relative;
}
.tpl-studio-v4 .tpl-designer-topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--tpl-gold-600),var(--tpl-gold-500) 45%,transparent 90%);
}
.tpl-studio-v4 .tpl-title-mark{
  width:36px;height:36px;border-radius:9px;font-size:15px;font-weight:800;
  background:linear-gradient(160deg,var(--tpl-gold-200),var(--tpl-gold-500));
  color:var(--tpl-navy-950); box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.tpl-studio-v4 .tpl-designer-title h3{color:#fff;font-weight:700;letter-spacing:-.01em}
.tpl-studio-v4 .tpl-designer-title p{color:rgba(255,255,255,.6)}
.tpl-studio-v4 .tpl-designer-status{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.75);
  backdrop-filter:blur(2px);
}
.tpl-studio-v4 .tpl-designer-status strong{color:var(--tpl-gold-500)}
.tpl-studio-v4 .tpl-live-dot{background:#39d98a;box-shadow:0 0 0 3px rgba(57,217,138,.22)}

.tpl-studio-v4 .tpl-designer-settings-bar{
  margin:14px 18px 12px; border-radius:12px; border-color:var(--tpl-paper-line);
  background:#fff; box-shadow:0 1px 2px rgba(15,30,55,.04);
}
.tpl-studio-v4 .tpl-settings-icon{background:var(--tpl-navy-950);color:var(--tpl-gold-200)}
.tpl-studio-v4 .tpl-settings-heading strong{color:var(--tpl-ink)}
.tpl-studio-v4 .tpl-setting label{color:var(--tpl-ink-soft)}
.tpl-studio-v4 .tpl-setting select,.tpl-studio-v4 .tpl-setting input[type=number],
.tpl-studio-v4 .tpl-color-control input[type=color],.tpl-studio-v4 .tpl-color-control input[type=text]{
  border-color:var(--tpl-paper-line);
}
.tpl-studio-v4 .tpl-setting select:focus,.tpl-studio-v4 .tpl-setting input:focus{
  border-color:var(--tpl-gold-500); box-shadow:0 0 0 3px rgba(212,175,55,.16);
}
.tpl-studio-v4 .tpl-setting-range input[type=range]{accent-color:var(--tpl-navy-800)}

.tpl-studio-v4 .tpl-designer-studio{margin:0 18px 18px;gap:14px}
.tpl-studio-v4 .tpl-designer-rail,.tpl-studio-v4 .tpl-designer-inspector{
  background:#fff; border-color:var(--tpl-paper-line); border-radius:12px;
  box-shadow:0 1px 2px rgba(15,30,55,.04);
}
.tpl-studio-v4 .tpl-designer-rail-title{color:var(--tpl-navy-700);font-weight:800}
.tpl-studio-v4 .tpl-designer-object-btn{
  border-color:var(--tpl-paper-line); border-radius:10px; background:var(--tpl-paper);
  transition:transform .12s,box-shadow .12s,border-color .12s,background .12s;
}
.tpl-studio-v4 .tpl-designer-object-btn .obj-icon{color:var(--tpl-navy-800)}
.tpl-studio-v4 .tpl-designer-object-btn:hover{
  border-color:var(--tpl-gold-500); background:#fff; transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(180,135,42,.16);
}
.tpl-studio-v4 .tpl-designer-rail-item.active{
  background:var(--tpl-navy-950); border-color:var(--tpl-navy-950); color:#fff;
}
.tpl-studio-v4 .tpl-designer-rail-item.active .tpl-designer-rail-del{color:var(--tpl-gold-200)}

.tpl-studio-v4 .tpl-designer-canvas-wrap{
  background:
    radial-gradient(circle at 1px 1px,rgba(27,52,89,.10) 1px,transparent 0) 0 0/16px 16px,
    linear-gradient(180deg,#E4E9F1,#EDF1F6 60%);
  border-color:var(--tpl-paper-line); border-radius:12px;
}
.tpl-studio-v4 .tpl-designer-toolbar{background:#fff;border-bottom-color:var(--tpl-paper-line)}
.tpl-studio-v4 .tpl-designer-toolbar button{border-color:var(--tpl-paper-line);font-weight:600;color:var(--tpl-ink-soft)}
.tpl-studio-v4 .tpl-designer-toolbar button:hover{border-color:var(--tpl-navy-800);color:var(--tpl-navy-900)}
.tpl-studio-v4 .tpl-designer-preview-strip{background:#fff;border-bottom-color:var(--tpl-paper-line);color:var(--tpl-ink-soft)}
.tpl-studio-v4 .tpl-designer-canvas-wrap .tpl-designer-canvas{
  box-shadow:0 26px 50px -14px rgba(11,22,38,.32),0 3px 8px rgba(11,22,38,.12);
  border-color:#c9d2e0;
}
.tpl-studio-v4 .tpl-designer-editable.selected{
  outline-color:var(--tpl-gold-500); background:rgba(212,175,55,.08);
  box-shadow:0 0 0 3px rgba(212,175,55,.16);
}
.tpl-studio-v4 .tpl-designer-handle{background:var(--tpl-gold-500)}
.tpl-studio-v4 .tpl-designer-data-chip{border-color:var(--tpl-paper-line);color:var(--tpl-ink-soft)}
.tpl-studio-v4 .tpl-designer-data-chip:hover{border-color:var(--tpl-navy-800);color:var(--tpl-navy-900)}
.tpl-studio-v4 .tpl-designer-actions button{border-color:var(--tpl-paper-line)}
.tpl-studio-v4 .tpl-designer-hint{color:var(--tpl-ink-soft)}
.tpl-card-template-form .tpl-studio-v4,.tpl-cert-template-form .tpl-studio-v4{margin-top:0}

@media(max-width:760px){
  .tpl-studio-v4 .tpl-designer-settings-bar{margin:12px}
  .tpl-studio-v4 .tpl-designer-studio{margin:0 12px 12px}
}

@media(max-width:1100px){.tpl-card-template-form>.form-row,.tpl-cert-template-form>.form-row{grid-template-columns:1fr}.tpl-card-template-form .tpl-studio-v4,.tpl-cert-template-form .tpl-studio-v4{height:auto;min-height:calc(100vh - 110px)}.tpl-card-template-form .tpl-studio-v4 .tpl-designer-studio,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-studio{height:auto;min-height:640px}.tpl-card-template-form .tpl-studio-v4 .tpl-designer-rail,.tpl-card-template-form .tpl-studio-v4 .tpl-designer-inspector,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-rail,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-inspector{min-height:640px}.tpl-card-template-form .tpl-studio-v4 .tpl-designer-canvas-wrap,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-canvas-wrap{height:calc(100vh - 380px);min-height:420px}}
@media(max-width:760px){.tpl-card-template-form,.tpl-cert-template-form{padding:6px}.tpl-card-template-form .tpl-studio-v4,.tpl-cert-template-form .tpl-studio-v4{height:auto;min-height:0}.tpl-card-template-form .tpl-studio-v4 .tpl-designer-canvas-wrap,.tpl-cert-template-form .tpl-studio-v4 .tpl-designer-canvas-wrap{height:auto;min-height:0}}

/* PATCH — collapsible accordion sections (Design Settings quick bar +
   every "classic" flat-field group below the Designer Studio: Border
   Style, Border Override, Frame Image, Background, Colors, Seal &
   Signature, Footer Note). Closed by default (see the `panels` state
   in hrmsCertificateTemplateDesigner()) so the Studio's own canvas +
   LAYERS list is visible near the top of the page without first
   scrolling past a long wall of settings. Shared by both the
   Certificate and Staff Card template forms since they use the same
   .form-section-title / .tpl-designer-settings-bar markup. */
.form-section-title.tpl-accordion-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; user-select:none;
}
.tpl-accordion-header:hover{opacity:.85}
.tpl-accordion-toggle{
  flex:0 0 auto; width:24px; height:24px; border-radius:6px;
  border:1px solid var(--border,#d8e0e9); background:var(--surface-alt,#f8fafc);
  font-size:15px; font-weight:800; line-height:1; color:var(--text-muted,#64748b);
  cursor:pointer; display:grid; place-items:center;
}
.tpl-accordion-toggle:hover{background:var(--surface,#eef2f7)}

/* Design Settings quick bar: the toggle sits as a small floating
   button pinned to the bar's own top-right corner (the bar is a CSS
   grid of sibling fields, not a flex row, so it can't share the same
   inline header pattern as the plain <h3> sections above). Collapsed
   state simply hides every field via x-show — the grid's row height
   then shrinks to fit only the heading that's left, so the bar
   itself visually shrinks down to one slim row. */
.tpl-studio-v4 .tpl-designer-settings-bar{position:relative}
.tpl-settings-bar-toggle{position:absolute; top:8px; right:10px; z-index:1}
.tpl-studio-v4 .tpl-designer-settings-bar.tpl-panel-collapsed{padding-bottom:9px}

/* =========================================================================
   S35 PATCH — "Layers list still hidden when scrolling; Quick Insert row
   below the canvas still hidden — move it to the right" report.
   ========================================================================= */

/* 1) Quick Insert, now living inside the INSPECTOR column instead of below
   the canvas (see the matching HTML change in both templates/form.php
   files). The inspector already scrolls internally
   (.tpl-designer-inspector{overflow:auto}), so this list is guaranteed
   fully reachable regardless of how many chips it holds or how short the
   browser window is — it no longer competes with the canvas for the
   canvas-wrap's fixed, overflow:hidden height budget. */
.tpl-designer-data-list-inspector{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:0;
}
.tpl-designer-quick-insert-hint{
  font-size:10px;color:var(--text-muted,#64748b);margin:0 0 8px;line-height:1.4;
}
.tpl-designer-inspector-divider{
  height:1px;background:var(--border,#e2e8f0);margin:2px 0 12px;border:0;
}

/* 2) FINAL, highest-specificity guarantee for the LAYERS list: many prior
   patches (see the long comment trail above in this same file) each fixed
   this for one particular studio version/selector combination, only for a
   later rule at equal specificity to silently re-break it. This block is
   deliberately the LAST rule in the file targeting these selectors, at the
   same specificity every earlier attempt used, plus !important — so on an
   equal-specificity tie it wins purely by being declared last, and no
   future edit ABOVE this comment can accidentally out-prioritize it again.
   Anyone patching this area next should add ANOTHER block after this one,
   not edit the rules above. */
.tpl-studio-v4 .tpl-designer-rail{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
.tpl-studio-v4 .tpl-designer-rail > .tpl-designer-rail-title,
.tpl-studio-v4 .tpl-designer-rail > .tpl-designer-object-grid{
  flex:0 0 auto !important;
}
.tpl-studio-v4 .tpl-designer-rail .tpl-designer-layers-list{
  flex:1 1 0 !important;
  min-height:90px !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
.tpl-studio-v4 .tpl-designer-inspector{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  display:block !important;
}
@media(max-width:950px){
  .tpl-studio-v4 .tpl-designer-rail{height:auto !important;min-height:0 !important;max-height:420px !important;}
  .tpl-studio-v4 .tpl-designer-rail .tpl-designer-layers-list{max-height:240px !important;}
  .tpl-studio-v4 .tpl-designer-inspector{height:auto !important;min-height:0 !important;max-height:none !important;}
}