.editor-layout{grid-template-columns:minmax(280px,410px) minmax(320px,1fr)}.editor-controls label{display:block;font-size:12px;font-weight:650;margin-bottom:6px}
.editor-controls input:not([type=file]),.editor-controls select{width:100%;padding:10px;border:1px solid #dfe2e5;border-radius:8px;background:white}
.editor-controls input[type=color]{width:100%;height:42px;border:1px solid #dfe2e5;border-radius:8px;background:white;padding:4px}
.editor-controls input[type=file]{max-width:100%;font-size:12px}

.preview-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.preview-actions button{font-size:12px}.editor-status{min-height:20px;font-size:12px;color:#62666d}
@media(max-width:900px){.editor-layout{grid-template-columns:1fr}.editor-preview{position:static}}

.face-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.face-tabs button.selected{background:#17191d;color:white}
.editor-note{font-size:12px;color:#737782}.edit-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.element-visibility{display:flex;align-items:center;gap:8px;font-size:12px}.element-visibility input{width:auto}
 
.editor-row{display:flex;gap:8px;flex-wrap:wrap}.editor-row button{font-size:12px}
.editor-small{font-size:12px;color:#777}.stamp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.stamp-grid button{min-width:0;padding:8px 4px;border:1px solid #d7dbe0;border-radius:8px;background:#fff}
.stamp-grid button.selected{background:#17191d;color:#fff}
.stamp-settings{padding:12px;border:1px solid #e0e2e5;border-radius:10px;display:grid;gap:10px}
.editor-field{display:grid;gap:5px}.editor-field input[type=range]{width:100%}
.align-control{display:flex;gap:4px;width:max-content;border:1px solid #d9dde2;padding:4px;border-radius:9px}.align-control button{display:grid;place-items:center;width:43px;height:38px;padding:5px;background:white;border:0;border-radius:6px;color:#222}.align-control button[aria-pressed="true"]{background:#d9e9ff;color:#174c94}.align-control svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}#designFont{max-width:none;accent-color:#2383ed}.size-control{display:flex;gap:12px;align-items:center}.size-control output{min-width:48px;text-align:right;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.action-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.action-row button{font-size:12px}.effects-panel{display:grid;gap:11px;padding:15px;border:1px solid #cddde9;border-radius:12px;background:#f7fbff}.effects-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.effects-pill{font-size:10px;letter-spacing:.05em;color:#0870a3;background:#dff4ff;border-radius:20px;padding:4px 8px}.effects-panel input[type=color]{height:42px;width:100%}.effects-panel input[type=range]{width:100%}#designFont{width:100%;cursor:pointer;touch-action:pan-x}

/* v8: preview always above the controls; compact, centered and sticky on desktop */
.editor-layout{display:flex;flex-direction:column;gap:18px;align-items:stretch;margin-top:14px}
.editor-preview{order:0;position:sticky;top:8px;z-index:15;background:#f8f9fb;padding:12px;border:1px solid #e3e6eb;border-radius:16px;box-shadow:0 6px 22px #0000000d}
.editor-preview .loyalty-card{max-width:570px;margin:0 auto;box-shadow:0 10px 22px #0002}
.editor-preview .preview-actions{justify-content:center;margin-top:9px}
.editor-preview>p{margin:5px auto 0;text-align:center;font-size:11px}
.editor-controls{order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.editor-controls>div,.editor-controls>section,.editor-controls>label{min-width:0}
.editor-controls>.effects-panel{grid-row:span 3}
.preview-toolbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:9px;font-size:12px}
.preview-toolbar label{display:flex;align-items:center;gap:5px}.preview-toolbar button{font-size:11px;padding:7px 10px}
.snap-guide{position:absolute;display:none;pointer-events:none;z-index:20;background:#00cfff;box-shadow:0 0 3px #00cfff}
.snap-guide-x{top:0;bottom:0;width:1px}.snap-guide-y{left:0;right:0;height:1px}
@media(max-width:760px){.editor-controls{grid-template-columns:1fr}.editor-preview{position:sticky;top:0;padding:8px}.preview-toolbar{gap:5px}.preview-toolbar button{font-size:10px;padding:5px}.editor-preview>p{display:none}}

/* v8.1: clean studio layout, no overlapping sticky panels */
#designerView .main{width:100%;margin-inline:auto}
#designerView .editor-layout{display:flex;flex-direction:column;gap:20px;align-items:stretch}
#designerView .editor-preview{position:relative!important;top:auto!important;order:0;z-index:1;background:#fff;border:1px solid #e8ebef;box-shadow:none;border-radius:20px;overflow:visible}
#designerView .editor-preview .loyalty-card{max-width:590px;margin:0 auto;box-shadow:0 16px 35px #00000017}
#designerView .preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 auto 16px;max-width:800px}
#designerView .preview-toolbar>span{font-size:12px;font-weight:650;color:#4c5563}
#designerView .preview-toolbar label{font-size:12px;white-space:nowrap}
#designerView .editor-preview>p{max-width:620px;margin:12px auto 0;text-align:center;font-size:11px;line-height:1.5;color:#858b95}
#designerView .editor-controls{display:block!important;order:1;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.studio{border:1px solid #e6e9ed;border-radius:18px;background:#fff;overflow:hidden}
.studio-tabs{display:flex;gap:4px;padding:10px;background:#f6f8fa;border-bottom:1px solid #e6e9ed;flex-wrap:wrap}
.studio-tabs button{border:0;border-radius:10px;padding:11px 15px;font-weight:650;font-size:12px;color:#616b78;background:transparent;cursor:pointer}
.studio-tabs button.active{background:#fff;color:#141820;box-shadow:0 2px 8px #0000000c}
.studio-panel{display:none;padding:22px}
.studio-panel.active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;align-items:start}
.studio-panel>div,.studio-panel>section,.studio-panel>label{min-width:0}
.studio-panel>div>label,.studio-panel .editor-field>label{display:block;font-weight:650;font-size:12px;margin-bottom:7px;color:#303640}
.studio-panel input:not([type=checkbox]):not([type=range]),.studio-panel select{max-width:100%;box-sizing:border-box}
.studio-panel input[type=range]{width:100%;padding:0}
.studio-panel .effects-panel{grid-row:auto;grid-column:1/-1;max-width:none;background:#f8fbfd;border:1px solid #e1edf4;border-radius:12px;padding:18px}
.studio-panel .stamp-settings{grid-column:1/-1;background:#f8f9fb;border-color:#edf0f3}
.studio-panel .editor-row{align-items:center}
.studio-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 22px;border-top:1px solid #e9ecf0;background:#fafbfc}
.studio-footer .preview-actions{display:flex;gap:10px;margin:0}
.studio-footer .editor-status{flex:1;min-width:150px}
.section-hint{font-size:12px;color:#828a96;margin:0 0 10px;grid-column:1/-1}
.studio-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;max-width:850px;margin:0 auto 14px}
.guide-actions{display:flex;gap:7px;flex-wrap:wrap}
.guide-actions button{padding:8px 10px!important;font-size:11px!important}
@media(max-width:850px){.studio-panel.active{grid-template-columns:1fr}.studio-panel .effects-panel,.studio-panel .stamp-settings{grid-column:auto}#designerView .editor-preview{padding:12px}#designerView .preview-toolbar{justify-content:center}#designerView .preview-toolbar>span{display:none}.studio-panel{padding:16px}.studio-tabs button{padding:9px 10px}}

/* v8.2 — two-pane studio: preview always visible, tools scroll independently */
@media (min-width: 1024px) {
 #designerView .main{max-width:none;width:calc(100% - 235px);padding:24px 30px 26px;box-sizing:border-box}
 #designerView .editor-layout{display:grid;grid-template-columns:minmax(390px,1.1fr) minmax(340px,.9fr);gap:18px;align-items:stretch;margin-top:14px;height:calc(100dvh - 255px);min-height:540px;max-height:900px;overflow:visible}
 #designerView .editor-preview{grid-column:1;grid-row:1;position:relative!important;top:auto!important;min-height:0;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:18px!important}
 #designerView .editor-preview .loyalty-card{width:100%;max-width:590px;flex:0 0 auto;margin:8px auto 0}
 #designerView .editor-preview .preview-toolbar{flex:0 0 auto;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
 #designerView .editor-preview .preview-actions{flex:0 0 auto;justify-content:center;flex-wrap:wrap}
 #designerView .editor-preview>p{flex:0 0 auto;margin:12px auto 0;max-width:590px}
 #designerView .editor-controls{grid-column:2;grid-row:1;order:2;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0!important;border:1px solid #e6e9ed!important;border-radius:18px;background:#fff!important}
 #designerView .studio{border:0;border-radius:0;min-height:100%;display:flex;flex-direction:column}
 #designerView .studio-tabs{position:sticky;top:0;z-index:5;flex:0 0 auto}
 #designerView .studio-panel.active{grid-template-columns:1fr;gap:16px;padding:20px}
 #designerView .studio-panel .effects-panel,#designerView .studio-panel .stamp-settings{grid-column:auto}
 #designerView .studio-footer{position:sticky;bottom:0;z-index:5;margin-top:auto;background:#fff;box-shadow:0 -8px 18px #00000008}
}
@media (min-width:1024px) and (max-height:760px){
 #designerView .editor-layout{height:calc(100dvh - 200px);min-height:450px}
 #designerView .editor-preview>p{display:none}
 #designerView .editor-preview{padding:10px!important}
 #designerView .editor-preview .loyalty-card{max-width:500px}
}
@media (max-width:1023px){
 #designerView .editor-layout{display:flex;flex-direction:column;gap:14px}
 #designerView .editor-preview{z-index:8;padding:12px!important;box-shadow:0 8px 24px #00000015}
 #designerView .editor-preview .loyalty-card{max-width:min(440px,100%)}
 #designerView .editor-preview>p{display:none}
 #designerView .editor-controls{overflow:visible}
}
@media (max-width:650px){
 #designerView .editor-preview{max-height:49dvh}
 #designerView .editor-preview .preview-toolbar button{padding:5px!important}
 #designerView .editor-preview .preview-actions button{font-size:11px;padding:7px}
}

.stamp-effects{grid-column:1/-1;display:grid;gap:12px;border:1px solid #cbdce7;background:#f6fbff;padding:16px;border-radius:12px}
.stamp-effects .editor-field{display:grid;gap:6px}
.stamp-effects input[type=range]{width:100%}

/* v9.1: efficient desktop workspace */
@media(min-width:1100px){
#designerView .main{max-width:none!important;width:calc(100% - 24px)!important;padding-left:24px;padding-right:24px}
#designerView .editor-layout{display:grid!important;gap:14px!important;align-items:start!important}
#designerView .editor-preview{position:sticky!important;padding:16px!important;max-width:none!important;width:100%!important}
#designerView .loyalty-card{width:100%!important;max-width:700px!important;margin-inline:auto!important}
#designerView .editor-controls{max-height:calc(100vh - 24px)!important;overflow-y:auto!important;min-height:570px!important}
#designerView .studio-panel.active{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
}
#designerView .studio-panel .editor-field,#designerView .studio-panel>div{min-width:0}
#designerView .section-hint{grid-column:1/-1}
#designerView .undo-button{white-space:nowrap}
#designerView [data-element="backStamps"]{cursor:default!important;touch-action:auto!important}
#designerView #previewStamps .card-stamp{cursor:pointer;pointer-events:auto;transition:transform .16s ease}
#designerView #previewStamps .card-stamp:hover{transform:scale(1.06)}
@media(max-width:1099px){#designerView .editor-layout{display:flex!important;flex-direction:column!important}#designerView .editor-controls{width:100%!important}}

/* v9.2 · Compact, screen-first designer header; other dashboard views unchanged */
#designerView .main{max-width:none!important;margin:0!important;padding:12px 20px 16px!important;min-width:0}
#designerView .sidebar{padding:12px 12px!important;gap:8px!important}
#designerView .sidebar .logo{height:45px!important;width:120px!important}
#designerView .editor-topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:44px;margin-bottom:5px}
#designerView .editor-topbar .back{flex:none;margin:0!important;padding:9px 12px!important;font-size:12px}
#designerView .editor-topbar #designerTitle{font-size:20px!important;line-height:1.15!important;margin:0!important;letter-spacing:-.025em}
#designerView .editor-topbar .face-tabs{margin:0 0 0 auto!important;display:flex;gap:6px;flex:none}
#designerView .editor-topbar .face-tabs button{padding:9px 13px!important;font-size:12px}
#designerView .editor-compact-caption{font-size:11px!important;margin:0 0 8px!important;line-height:1.4!important;color:#81868d}
#designerView .editor-layout{margin-top:5px!important}
#designerView .editor-preview{padding:12px!important}
#designerView .editor-preview .muted.small{font-size:10px!important;line-height:1.35!important;margin-bottom:0!important}
#designerView .editor-controls{min-height:0!important}
@media(min-width:1100px){
 #designerView.shell{grid-template-columns:170px minmax(0,1fr)!important}
 #designerView .editor-layout{grid-template-columns:minmax(430px,1.22fr) minmax(390px,1fr)!important}
 #designerView .editor-controls{max-height:calc(100dvh - 100px)!important}
 #designerView .editor-preview{top:8px!important}
}
@media(max-width:1099px){
 #designerView .main{padding:12px!important}
 #designerView .editor-topbar{gap:8px}
 #designerView .editor-topbar .face-tabs{margin-left:0!important}
}

/* v9.3: logo, slightly smaller fixed stamps, symmetric powered-by rules */
.logo-remover-tool{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:9px}
.logo-remover-tool button{font-size:12px;padding:9px 12px}
.logo-remover-modal{position:fixed;inset:0;background:#0b121b99;z-index:200;display:none;align-items:center;justify-content:center;padding:18px}
.logo-remover-modal.open{display:flex}
.logo-remover-dialog{width:min(95vw,690px);max-height:92vh;overflow:auto;background:white;border-radius:16px;padding:20px;display:grid;gap:12px}
.logo-remover-dialog canvas{display:block;max-width:100%;max-height:38vh;margin:auto;border:1px solid #ddd;background-color:#eee;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.logo-remover-dialog .logo-remover-actions{display:flex;gap:8px;flex-wrap:wrap}

/* v9.4: visible-size brand asset and slightly elevated, shorter footer rules */
#loginView .logo{width:min(430px,85vw)!important;height:auto!important;max-height:150px!important;object-fit:contain!important}
#appView .sidebar .logo,#detailView .sidebar .logo,#designerView .sidebar .logo{width:145px!important;height:auto!important;max-height:72px!important;object-fit:contain!important;object-position:left center!important}
/* Logo is a precise selectable object; resizing stays within the visible card. */
#designerView [data-element="frontLogo"].selected{outline-offset:2px}
#designerView .resize-handle{position:absolute;right:-8px;bottom:-8px;width:17px;height:17px;border-radius:5px;background:#00bfff;border:2px solid white;box-shadow:0 1px 5px #0005;cursor:nwse-resize;z-index:40;touch-action:none}

/* v9.5.14: custom stamp library UI only; circle geometry untouched */
.stamp-library{grid-column:1/-1;border:1px solid #dfe4e8;border-radius:12px;padding:14px;display:grid;gap:10px;background:#fafbfd}
.stamp-library input[type=file]{max-width:100%}.stamp-library-list{display:flex;gap:9px;flex-wrap:wrap}
.stamp-choice{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #d5d9df;background:white;border-radius:9px;cursor:pointer;min-height:48px}
.stamp-choice[aria-pressed=true]{border-color:#0089b6;box-shadow:0 0 0 2px #b9e8f7}
.stamp-choice img{width:30px;height:30px;object-fit:contain}.stamp-library-note{font-size:12px;color:#67717b}

.message-control textarea{width:100%;min-height:72px;resize:vertical;padding:11px;border:1px solid #d8dce2;border-radius:9px;font:inherit;box-sizing:border-box}
.message-control small,.preset-control small{display:block;color:#707988;font-size:11px;line-height:1.5;margin-top:5px}
.preset-control button{width:100%;min-height:43px;margin-top:5px}

/* v9.5.11 — Layout-only refinement. Do not modify card/stamp geometry. */
#designerView .editor-preview{
  justify-content:flex-start !important;
  gap:0 !important;
  padding-top:14px !important;
}
#designerView .editor-preview .preview-heading{
  width:100%;max-width:500px;margin:0 auto 8px;
  color:#4c5563;font-size:12px;font-weight:650;
}
#designerView .editor-preview #previewCard{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
#designerView .editor-preview .preview-actions{
  margin-top:12px !important;
  margin-bottom:0 !important;
}
#designerView .editor-preview .preview-toolbar{
  width:100%;max-width:500px;margin:12px auto 0 !important;
  padding:11px 10px;border:1px solid #e7eaf0;border-radius:12px;
  background:#f8fafc;box-sizing:border-box;
  justify-content:center !important;gap:8px;
}
#designerView .editor-preview .preview-toolbar>span{display:none !important}
#designerView .editor-preview .preview-toolbar .guide-actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
}
#designerView .editor-preview .preview-toolbar label{white-space:normal}
#designerView .editor-preview>p{margin-top:9px !important}
@media(max-width:1023px){
 #designerView .editor-preview{max-height:none !important;overflow:visible !important;position:relative !important;top:auto !important}
}
@media(max-width:650px){
 #designerView .editor-preview{padding:10px !important}
 #designerView .editor-preview .preview-toolbar{padding:8px 5px;gap:5px}
 #designerView .editor-preview .preview-toolbar button{font-size:10px !important}
}

/* v9.5.12: keep editor category tabs visible while scrolling controls.
   Does not change loyalty card or stamp styles. */
#designerView .studio{overflow:visible!important;}
#designerView .studio-tabs{position:sticky!important;top:0!important;z-index:50!important;background:#f6f8fa!important;border-bottom:1px solid #e6e9ed;box-shadow:0 3px 8px rgba(0,0,0,.05);}
@media(max-width:1099px){
 #designerView .editor-controls{overflow:visible!important;max-height:none!important;}
 #designerView .studio{overflow:visible!important;}
 #designerView .studio-tabs{top:0!important;}
}

#stampRemoverModal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:10000;display:none;align-items:center;justify-content:center;padding:16px}
#stampRemoverModal.open{display:flex}
#stampRemoverModal .stamp-remover-dialog{background:#fff;color:#17191d;border-radius:16px;padding:20px;max-width:570px;width:100%;max-height:94vh;overflow:auto;display:grid;gap:12px}
#stampRemoverCanvas{display:block;max-width:100%;height:auto;margin:auto;border:1px solid #ddd;background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
#stampRemoverModal .stamp-remover-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* What only the editor does to a card. */
.card-element:focus,.card-element.selected{outline:1px dashed #00bfff;outline-offset:5px}
.card-element:active{cursor:grabbing}

.design-picker{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:0 0 12px}
.design-picker label{display:grid;gap:5px;font-size:12px;font-weight:650}
.design-picker select,.design-picker input{min-width:170px;padding:9px 10px;border:1px solid #dfe2e5;border-radius:8px;background:#fff;font:inherit}
.color-code-tools{display:flex;gap:8px;align-items:center;margin:8px 0}.color-code-tools input{min-width:0;max-width:130px;font:13px ui-monospace,monospace;padding:9px}.color-code-tools button{padding:9px 12px}.color-code-tools+button{margin-top:6px}