.editor-body{height:100vh;overflow:hidden;background:#edf0f1}.editor-topbar{height:76px;background:#fff;border-bottom:1px solid #dce1e4;display:flex;align-items:center;padding:0 1rem;gap:1.2rem;position:relative;z-index:10}.editor-back,.editor-brand,.plain-btn{display:flex;align-items:center;gap:.5rem}.editor-back{font-size:.78rem;color:#667483}.editor-brand{font-family:"Playfair Display",serif;font-size:1.35rem}.editor-brand i{color:var(--orange)}.project-title{margin:auto}.project-title small{display:block;color:#8a959e;font-size:.65rem}.project-title label{display:flex;align-items:center;border-bottom:1px solid #d6dce0}.project-title input{border:0;outline:0;padding:.2rem 0;width:250px;color:var(--ink)}.project-title i{font-size:.75rem;color:var(--blue-2)}.editor-meta{display:flex;align-items:center;gap:.7rem}.plain-btn{border:0;background:#fff;color:var(--blue);font-size:.75rem}.plain-btn i{font-size:1.1rem}.print-total{height:44px;border:1px solid #d5dbe0;border-radius:8px;display:flex;align-items:center}.print-total span,.print-total>strong{padding:0 1rem}.print-total>strong{background:var(--ink);color:#fff;height:100%;display:flex;align-items:center}.editor-shell{height:calc(100vh - 76px);display:grid;grid-template-columns:minmax(0,1fr) 330px}.workspace{min-width:0;display:flex;flex-direction:column}.workspace-toolbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:#f7f8f8;border-bottom:1px solid #dfe4e6}.workspace-toolbar label{display:flex;align-items:center;gap:.5rem;font-size:.75rem}.workspace-toolbar .form-select{width:155px}.zoom-controls{display:flex;align-items:center;gap:.3rem;font-size:.72rem}.zoom-controls button{width:30px;height:30px;border:1px solid #d8dee2;background:#fff;border-radius:6px}.drop-zone{position:relative;flex:1;overflow:auto;padding:1.2rem;transition:.2s}.drop-zone.dragover{background:#e7f0f5;box-shadow:inset 0 0 0 3px var(--blue-2)}.drop-zone.empty{display:grid;place-items:center}.empty-upload{text-align:center}.empty-upload h1{font-size:2.4rem;color:var(--blue);margin:.3rem 0 2rem}.upload-options{display:grid;gap:.7rem;width:300px;margin:auto}.upload-options button,.source-card{border:1px solid #d7dde0;background:#fff;border-radius:8px;padding:1rem;text-align:left;color:var(--ink)}.upload-options button i{width:28px;color:var(--blue);font-size:1.15rem}.empty-upload>p{display:grid;gap:.25rem;margin-top:2rem;color:#7f8a92}.empty-upload>p strong{font-family:"Playfair Display",serif;font-size:1.35rem;color:var(--ink)}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem;align-content:start}.photo-card{background:#fff;border:1px solid #cfd7dc;border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(23,50,77,.06)}.photo-card.selected{border:2px solid var(--blue-2)}.card-file{height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 .65rem;font-size:.72rem;border-bottom:1px solid #d9dfe2}.card-file .filename{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-file label{display:flex;align-items:center;gap:.3rem}.photo-preview{height:260px;background:#e5e7e7;display:flex;align-items:center;justify-content:center;overflow:hidden}.photo-preview img{width:100%;height:100%;object-fit:cover;transition:filter .15s}.photo-card.with-border .photo-preview img{width:86%;height:86%;border:8px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.2)}.card-fields{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e0e4e6}.card-fields .form-select{border:0;border-radius:0;padding:.7rem .55rem;background-position:right .45rem center}.card-fields .form-select+select{border-left:1px solid #e0e4e6}.border-toggle{display:flex;align-items:center;gap:.45rem;padding:.45rem .7rem;font-size:.73rem;border-top:1px solid #e0e4e6}.card-quantity{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid #e0e4e6}.card-quantity button,.card-quantity strong{border:0;background:#fff;text-align:center;padding:.5rem}.card-actions{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e0e4e6}.card-actions button{border:0;background:#fff;padding:.55rem .2rem;font-size:.7rem}.card-actions button+button{border-left:1px solid #e0e4e6}.remove-photo{color:#b54a31}.bulk-panel{background:#fff;border-left:1px solid #d9dfe2;overflow:auto}.bulk-mobile-toggle{display:none}.bulk-inner{padding:1.5rem}.bulk-inner h2{font-family:"Playfair Display",serif;font-size:1.35rem}.bulk-inner h3{font-family:"Playfair Display",serif;font-size:1.1rem;margin-bottom:1.2rem}.bulk-inner label:not(.check-row){display:block;color:#77848d;font-size:.72rem;margin-bottom:1rem}.bulk-inner label select,.bulk-inner label input{margin-top:.35rem}.check-row{display:flex;gap:.5rem;margin:1.5rem 0}.selection-summary{display:flex;justify-content:space-between;font-size:.72rem;color:#88939b}.selection-summary button{border:0;background:transparent;color:var(--blue)}.two-controls{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.segmented{display:grid;grid-template-columns:1fr 1fr}.segmented button{border:1px solid #d7dde0;background:#fff;height:38px}.segmented button+button{border-left:0}.quantity-control{display:grid;grid-template-columns:1fr 2fr 1fr;border:1px solid #d7dde0;border-radius:6px;margin-top:.35rem}.quantity-control>*{border:0;background:#fff;padding:.55rem;text-align:center}.bulk-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.soft-modal,.editor-modal{border:0;border-radius:16px}.soft-modal .modal-header,.editor-modal .modal-header{padding:1.4rem 1.6rem}.soft-modal .modal-title,.editor-modal .modal-title{font-family:"Playfair Display",serif}.source-card{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;margin-bottom:.7rem}.source-card>i:first-child{color:var(--blue);font-size:1.2rem}.source-card span strong,.source-card span small{display:block}.source-card span small{color:#87929a;font-size:.72rem}.qr-panel{display:none;text-align:center;padding:1.5rem;background:var(--paper);border-radius:10px}.qr-panel.show{display:block}.qr-panel i{font-size:5rem;color:var(--ink)}.crop-stage{height:min(62vh,650px);background:#27323a;display:grid;place-items:center;overflow:hidden}.crop-stage img{display:block;max-width:100%}.fine-controls{display:grid;grid-template-columns:repeat(3,110px) repeat(3,minmax(150px,1fr)) 90px;gap:.7rem;padding:1rem;align-items:end;background:#fff}.fine-controls button{height:58px;border:1px solid #d8dee2;background:#fff;border-radius:7px;display:grid;place-items:center;font-size:.7rem}.fine-controls label{font-size:.7rem;color:#67737c}.fine-controls label span{display:flex;justify-content:space-between}.fine-controls input{width:100%}.editor-modal .modal-body{padding:0}.toast{background:var(--ink);color:#fff}.editor-toast-content{display:flex;align-items:center;gap:.5rem}.editor-toast-content .toast-body{flex:1}.editor-toast-content .btn-close{flex:0 0 auto;margin-right:.75rem}
@media(max-width:991.98px){.editor-topbar{height:64px}.editor-brand span{display:none}.project-title{display:none}.plain-btn span{display:none}.print-total span{display:none}.editor-shell{height:calc(100vh - 64px);grid-template-columns:1fr}.workspace-toolbar{height:auto;min-height:64px;padding:.7rem}.workspace-toolbar label{display:none}.bulk-panel{position:fixed;left:0;right:0;bottom:0;z-index:20;max-height:72vh;border:0;border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(23,50,77,.15);overflow:auto}.bulk-mobile-toggle{width:100%;display:flex;justify-content:space-between;border:0;background:var(--ink);color:#fff;padding:.85rem 1rem}.drop-zone{padding-bottom:78px}.fine-controls{grid-template-columns:repeat(4,1fr);overflow:auto}.fine-controls label{grid-column:span 2}.photo-grid{grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}.photo-preview{height:220px}}
@media(max-width:575.98px){.editor-topbar{padding:0 .55rem;gap:.55rem}.editor-back span,.editor-brand strong{display:none}.print-total>strong{padding:0 .65rem}.editor-meta .btn{padding:.55rem .65rem;font-size:.75rem}.workspace-toolbar .zoom-controls{display:none}.workspace-toolbar .btn{width:100%}.photo-grid{grid-template-columns:1fr}.photo-preview{height:280px}.empty-upload{width:100%}.upload-options{width:100%}.fine-controls{grid-template-columns:repeat(3,1fr)}.fine-controls label{grid-column:span 3}.fine-controls button:last-child{grid-column:span 3}.crop-stage{height:50vh}}
.editor-upload-overlay{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;padding:1.5rem;background:rgba(11,22,30,.78);backdrop-filter:blur(7px)}.editor-upload-overlay[hidden]{display:none}.editor-upload-card{width:min(440px,100%);padding:2rem;border-radius:22px;background:#fff;text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.3)}.editor-upload-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;background:#fff0e9;color:#db6538;font-size:1.5rem}.editor-upload-card h2{font:700 1.55rem "Playfair Display",serif}.editor-upload-card p{color:#6f7d87}.editor-upload-card .progress{height:10px;margin:1.35rem 0 .6rem;background:#e8ecef}.editor-upload-card .progress-bar{background:#df6b3d;transition:width .2s}.editor-upload-card>strong{color:#17324d;font-size:.85rem}

/* P1 high-resolution crop and adjustment workspace. */
.editor-modal{overflow:hidden}.editor-modal .modal-header{min-height:112px;gap:1rem}.editor-modal .modal-header>div:first-child{margin-right:auto}.editor-modal .modal-title{font-size:2.15rem;color:var(--ink)}.editor-modal .modal-footer{min-height:72px}.orientation-picker{display:flex;border:1px solid #d6dde1;border-radius:9px;overflow:hidden}.orientation-picker button{min-width:104px;border:0;background:#fff;color:#536572;padding:.55rem .8rem;display:flex;align-items:center;justify-content:center;gap:.45rem;font-size:.78rem}.orientation-picker button+button{border-left:1px solid #d6dde1}.orientation-picker button[aria-pressed="true"]{background:var(--ink);color:#fff}.crop-stage{background:#111a1f;position:relative}.ratio-notice{position:absolute;left:1rem;top:1rem;z-index:2;display:flex;align-items:center;gap:.65rem;max-width:calc(100% - 2rem);margin:0;padding:.5rem .5rem .5rem .75rem;border-radius:8px;background:rgba(255,255,255,.96);color:var(--ink);font-size:.76rem;box-shadow:0 3px 16px rgba(0,0,0,.18)}.ratio-notice[hidden]{display:none}.ratio-notice-copy{min-width:0}.ratio-notice-close{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:#536572}.ratio-notice-close:hover,.ratio-notice-close:focus-visible{background:#e9eef1;color:var(--ink);outline:0}.fine-controls button:hover,.fine-controls button:focus-visible{border-color:var(--blue-2);color:var(--blue-2)}.fine-controls input{accent-color:var(--blue-2)}.export-status{margin:0 auto 0 0;color:#61727f;font-size:.78rem}
@media(min-width:1200px){#editModal .modal-xl{max-width:min(1420px,94vw)}}
@media(max-width:767.98px){.editor-modal .modal-header{align-items:flex-start}.orientation-picker{order:3;width:100%}.orientation-picker button{flex:1}.editor-modal .modal-title{font-size:1.65rem}.ratio-notice{right:1rem}.editor-modal .modal-footer{flex-wrap:wrap}.export-status{width:100%}}

/* Keep the photo board as the dedicated two-axis scroll container. */
.editor-shell{min-height:0;overflow:hidden}.workspace{min-height:0;overflow:hidden}.workspace-toolbar{flex:0 0 68px}.drop-zone{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable both-edges}.photo-grid{width:100%;min-width:210px}.photo-card{min-width:210px}
.sizing-mode-control{min-width:150px;margin:0;color:#677681;font-size:.7rem}.sizing-mode-control span{display:block;margin-bottom:.25rem}.sizing-mode-control .form-select{min-width:150px;height:40px;border-color:#d6dde1;color:var(--ink);font-size:.8rem}.crop-stage .cropper-bg{background-image:none;background:#fff}.crop-stage[data-sizing-mode="fill"] .cropper-bg{background:#111a1f}.crop-stage[data-sizing-mode="no-resize"] .cropper-bg{background:#dfe4e7}
@media(max-width:991.98px){.workspace-toolbar{flex-basis:64px}.photo-grid{width:100%}}
@media(max-width:767.98px){.sizing-mode-control{order:2;min-width:130px}.sizing-mode-control .form-select{min-width:130px}.orientation-picker{order:3}}

/* Single-photo editor: one viewport, aligned mode controls and sticky crop edges. */
#editModal{overflow:hidden}
#editModal .modal-dialog{height:calc(100dvh - 24px);margin:12px auto}
#editModal .editor-modal{height:100%;max-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#editModal .modal-body{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
#editModal .crop-stage{height:auto;min-height:0}
#editModal .modal-header{min-height:104px;display:grid;grid-template-columns:minmax(270px,1fr) auto 36px;align-items:center}
.editor-mode-controls{display:grid;grid-template-columns:160px auto;align-items:start;gap:1rem}
.sizing-mode-control,.orientation-control{display:grid;grid-template-rows:14px 40px;gap:6px;margin:0;color:#677681;font-size:.7rem}
.sizing-mode-control>span,.orientation-control>span{display:flex;align-items:flex-end;height:14px;margin:0;line-height:1}
.sizing-mode-control .form-select{width:160px;min-width:160px;height:40px}
.orientation-picker{height:40px}
.crop-stage.snap-x .cropper-crop-box{box-shadow:0 0 0 2px #35a9ff,0 0 18px rgba(53,169,255,.8)}
.crop-stage.snap-y .cropper-crop-box{outline:2px solid #72c7ff;outline-offset:-2px}
@media(max-height:760px){#editModal .modal-header{min-height:88px;padding-top:1rem;padding-bottom:1rem}#editModal .editor-modal .modal-title{font-size:1.7rem}.fine-controls{padding:.65rem}.fine-controls button{height:50px}#editModal .modal-footer{min-height:58px;padding:.5rem 1rem}}
@media(max-width:767.98px){#editModal{overflow:auto}#editModal .modal-dialog{height:auto;min-height:calc(100dvh - 16px);margin:8px}#editModal .editor-modal{min-height:calc(100dvh - 16px)}#editModal .modal-header{grid-template-columns:1fr 36px}.editor-mode-controls{grid-column:1/-1;width:100%;grid-template-columns:1fr}.sizing-mode-control .form-select{width:100%}.orientation-picker{order:initial;width:100%}}
.crop-stage[data-product="instax"] .cropper-crop-box::after,.crop-stage[data-product="passport"] .cropper-crop-box::after{content:attr(data-frame-label);position:absolute;z-index:0;left:calc(-1 * var(--frame-left,0%));right:calc(-1 * var(--frame-right,0%));top:calc(-1 * var(--frame-top,0%));bottom:calc(-1 * var(--frame-bottom,0%));display:flex;align-items:flex-end;justify-content:center;padding:.4rem;pointer-events:none;background:#fff;color:#4b5965;font:700 .68rem "DM Sans",sans-serif;letter-spacing:.02em;box-shadow:0 6px 24px rgba(0,0,0,.28)}.crop-stage[data-product="instax"] .cropper-view-box,.crop-stage[data-product="passport"] .cropper-view-box{position:relative;z-index:1;pointer-events:none}.crop-stage[data-product="instax"] .cropper-face,.crop-stage[data-product="passport"] .cropper-face{z-index:2;cursor:move}.crop-stage[data-product="instax"] .cropper-line,.crop-stage[data-product="instax"] .cropper-point,.crop-stage[data-product="passport"] .cropper-line,.crop-stage[data-product="passport"] .cropper-point{z-index:3}.crop-stage[data-product="passport"] .cropper-crop-box::after{outline:1px dashed #a8b1b8;outline-offset:-7px;color:#273746}.crop-stage[data-product="instax"] .cropper-crop-box,.crop-stage[data-product="passport"] .cropper-crop-box{overflow:visible}.crop-stage[data-product="instax"] .ratio-notice-copy::after{content:" The white frame is a preview only; production stores the printable image opening."}.crop-stage[data-product="passport"] .ratio-notice-copy::after{content:" The outer sheet is a preview only; production stores the cropped identity photo."}

/* Keep Instax controls above its white frame while retaining Cropper's native style. */
.crop-stage[data-product="instax"] .cropper-line{z-index:4}.crop-stage[data-product="instax"] .cropper-point{z-index:5}
.crop-stage[data-product="instax"] .cropper-crop-box::after,.crop-stage[data-product="passport"] .cropper-crop-box::after{pointer-events:auto;cursor:move}

/* Mobile editor viewport: keep the image list visible around the bottom sheet. */
.bulk-panel>#bulkContent.collapse{display:block}
@supports(height:100dvh){.editor-body{height:100dvh}.editor-shell{height:calc(100dvh - 76px)}}
@media(max-width:991.98px){
  @supports(height:100dvh){.editor-shell{height:calc(100dvh - 64px)}}
  .bulk-panel{display:flex;flex-direction:column;max-height:min(58dvh,520px);overflow:hidden;padding-bottom:env(safe-area-inset-bottom);border-radius:16px 16px 0 0}
  .bulk-mobile-toggle{flex:0 0 auto;min-height:54px;align-items:center;touch-action:manipulation}
  .bulk-mobile-toggle>i{transition:transform .2s ease}
  .bulk-mobile-toggle[aria-expanded="true"]>i{transform:rotate(180deg)}
  .bulk-panel>#bulkContent{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .bulk-panel>#bulkContent.collapse:not(.show){display:none}
  .drop-zone{padding-bottom:calc(var(--bulk-panel-height,54px) + 1rem)}
}
@media(max-width:767.98px){
  #editModal .editor-modal-heading{grid-column:1;grid-row:1;min-width:0}
  #editModal .modal-header>.btn-close{grid-column:2;grid-row:1;align-self:start;justify-self:end;width:2rem;height:2rem;margin:0;padding:.5rem}
  #editModal .editor-mode-controls{grid-column:1/-1;grid-row:2}
}

/* WebKit does not always include trailing flex-scroll padding in its scroll range. */
@media(max-width:991.98px){
  .drop-zone{padding-bottom:1rem}
  .photo-grid::after{content:"";display:block;grid-column:1/-1;height:calc(var(--bulk-panel-height,54px) + 1.25rem);pointer-events:none}
  .editor-shell.no-photos .photo-grid::after{display:none}
}