.hpd-open{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;background:#176f64!important;color:#fff!important;border:0!important;border-radius:12px!important;padding:16px 24px!important;font:600 16px/1.3 system-ui,sans-serif!important;cursor:pointer;margin:12px 0}.hpd-open:hover{background:#12584f!important}.hpd-dialog,.hpd-dialog *{box-sizing:border-box}.hpd-dialog{border:0;border-radius:22px;padding:0;width:min(1120px,94vw);max-width:1120px;max-height:94dvh;color:#24342f;background:#fff;font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 24px 100px #0003;overflow:auto}.hpd-dialog::backdrop{background:#182d2ac9;backdrop-filter:blur(5px)}.hpd-dialog h2,.hpd-dialog h3,.hpd-dialog p{font-family:inherit;color:inherit;letter-spacing:normal}.hpd-dialog button,.hpd-dialog input{font:inherit;box-shadow:none}.hpd-dialog button{cursor:pointer}.hpd-dialog button:focus-visible,.hpd-open:focus-visible,.hpd-dialog input:focus-visible{outline:3px solid #1d9083;outline-offset:4px}.hpd-header{padding:25px 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8ece8;gap:16px}.hpd-eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#65766f}.hpd-header h2{font-size:25px;font-weight:650;line-height:1.3;margin:7px 0 0}.hpd-icon{border:1px solid #e1e6e2;background:#fff;color:#34473f;width:42px;height:42px;flex-shrink:0;border-radius:50%;padding:0}.hpd-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr)}.hpd-preview{background:#f1f4ef;padding:25px;display:flex;flex-direction:column;min-width:0}.hpd-preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#5b6a61}.hpd-badge{white-space:nowrap;background:#fff;border-radius:20px;padding:6px 10px;font-size:10px;color:#237264}.hpd-stage-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:260px;padding:20px 0}.hpd-stage{position:relative;width:100%;max-width:520px;line-height:0;isolation:isolate}.hpd-stage>img{width:100%;height:auto;display:block;border-radius:8px;pointer-events:none;user-select:none}.hpd-stage #hpd-canvas-host{position:absolute;inset:0}.hpd-stage .canvas-container{position:absolute!important;inset:0;touch-action:none}.hpd-stage canvas{touch-action:none}.hpd-stage #hpd-print-guide{position:absolute;border:1.5px dashed #288e7c;pointer-events:none}.hpd-preview-note{font-size:11px;text-align:center;color:#748076!important;margin:10px 0 0}.hpd-tools{padding:30px;min-width:0}.hpd-tools h3{font-size:22px;margin:8px 0;font-weight:650}.hpd-tools>p{font-size:13px;color:#748076;margin:0 0 20px}.hpd-upload{border:1.5px dashed #b2ccc3;border-radius:12px;background:#f7faf8;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 10px;gap:6px;cursor:pointer;color:#246b5e}.hpd-upload>span{font-size:25px;line-height:1}.hpd-upload strong{font-size:14px}.hpd-upload small{font-size:10px;color:#78847c}.hpd-file{display:block;max-width:100%;font-size:11px!important;margin:8px 0 12px;color:#66766e}.hpd-file::file-selector-button{border:0;border-radius:5px;padding:5px 9px;background:#edf4ef;color:#2e6251}.hpd-status{font-size:12px!important;min-height:36px;margin:12px 0!important}.hpd-status.hpd-error{color:#b23333!important}.hpd-tools fieldset{margin:0;padding:16px 0 0;border:0;border-top:1px solid #e7ece8;min-width:0}.hpd-tools legend{font-size:10px;letter-spacing:2px;color:#65766f;padding:0 8px 0 0}.hpd-tools fieldset:disabled{opacity:.4}.hpd-range-label{display:flex;justify-content:space-between;font-size:12px;margin:12px 0 4px}.hpd-range-label output{color:#63776c}.hpd-tools input[type=range]{width:100%;accent-color:#207b6c;min-height:24px;margin:0}.hpd-move{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.hpd-move button,.hpd-actions button{border:1px solid #e0e8e2;border-radius:8px;min-height:40px;background:white;color:#3e5849;padding:7px}.hpd-actions{display:flex;gap:8px}.hpd-actions button{flex:1;font-size:11px}.hpd-spec{display:flex;justify-content:space-between;font-size:12px;margin:22px 0 14px;padding:12px 0;border-top:1px solid #e7ece8}.hpd-privacy{font-size:11px!important;line-height:1.6;background:#f5f6f2;padding:12px;border-radius:8px;margin:0!important;color:#747c70!important}.hpd-footer{border-top:1px solid #e8ece8;padding:17px 30px;display:flex;justify-content:space-between;align-items:center;gap:15px}.hpd-footer span{font-size:12px;color:#7e8b82}.hpd-footer button{border:0;background:#1b7265;color:#fff;border-radius:9px;padding:12px 18px;font-size:12px}@media(max-width:700px){.hpd-dialog{width:100%;height:100dvh;max-height:100dvh;max-width:100%;border-radius:0;margin:0}.hpd-header{padding:18px}.hpd-header h2{font-size:21px}.hpd-layout{grid-template-columns:1fr}.hpd-preview{padding:18px}.hpd-stage-wrap{min-height:180px;padding:12px 0}.hpd-stage{max-width:330px}.hpd-tools{padding:24px 20px}.hpd-footer{padding:16px 20px}.hpd-footer span{font-size:10px}}

/* Keep the native picker keyboard-accessible without browser-language chrome. */
.hpd-dialog .hpd-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hpd-tools:has(.hpd-file:focus-visible) .hpd-upload{outline:3px solid #1d9083;outline-offset:4px}.hpd-dialog{position:fixed;inset:0;margin:auto}@media(max-width:700px){.hpd-dialog{margin:0}}

.hpd-launcher{position:fixed;left:20px;bottom:20px;z-index:99990}.hpd-launcher[hidden]{display:none!important}.hpd-launcher .hpd-open{box-shadow:0 6px 24px #163e3933}.hpd-launcher-inline{position:static;margin:12px 0}.hpd-launcher-inline .hpd-open{box-shadow:none}

#hpd-confirm:disabled{opacity:.5;cursor:not-allowed}.hpd-footer>div{display:flex;gap:8px}@media(max-width:700px){.hpd-footer{flex-direction:column;align-items:stretch}.hpd-footer>div{flex-wrap:wrap}.hpd-footer #hpd-confirm{flex:1}}

.hpd-open[hidden]{display:none!important}

#hpd-surface-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}#hpd-surface-tabs button{padding:8px 16px;border:1px solid #147d70;border-radius:20px;background:white;color:#14574f}#hpd-surface-tabs button[aria-pressed=true]{background:#147d70;color:white}

/* Keep the mockup directly below its surface tabs, independent of tool-column height. */
.hpd-dialog .hpd-layout{align-items:start}
.hpd-dialog .hpd-preview{align-self:stretch;justify-content:flex-start}
.hpd-dialog .hpd-stage-wrap{flex:0 0 auto;min-height:0;align-items:flex-start;padding:6px 0 12px}
.hpd-dialog .hpd-stage{max-width:520px}
.hpd-dialog .hpd-header{padding:18px 26px}
.hpd-dialog .hpd-tools{padding:24px}
.hpd-dialog .hpd-preview-note{margin:0}
@media(max-width:700px){.hpd-dialog .hpd-header{padding:16px 18px}.hpd-dialog .hpd-tools{padding:20px}.hpd-dialog .hpd-stage{max-width:330px}}