*{box-sizing:border-box}body{margin:0;background:#f3f6ff;color:#102344;font:14px system-ui}main{max-width:1500px;margin:18px auto;padding:0 14px;display:grid;grid-template-columns:minmax(320px,1fr) minmax(320px,1fr);gap:16px;align-items:start}.editor,.results{background:white;border:1px solid #dce5f1;border-radius:12px;padding:18px;min-width:0}h1,h2{margin:0;font-size:23px}.heading,.options,.actions,.toggles{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.heading{justify-content:space-between;margin-bottom:18px}.toggles label{display:flex;gap:7px;align-items:center;font-weight:600}.toggles input{width:32px;height:18px;accent-color:#16864c}button,.upload{border:0;border-radius:8px;background:#0641ad;color:white;padding:12px 18px;font:600 14px system-ui;cursor:pointer}#create{background:#ffe000;color:#102344}#print{background:#16864c}#clear{background:#eef2f8;color:#243b61}button:disabled{opacity:.5;cursor:wait}.upload{display:block;text-align:center;padding:24px;border:2px dashed #a6bee8;background:#edf4ff;color:#0641ad}.upload input{display:block;margin:12px auto 0;max-width:100%}.options{margin:18px 0}.options label{display:flex;align-items:center;gap:10px}select,input[type=number]{padding:10px;border:1px solid #c7d4e5;border-radius:7px;font:16px system-ui}.photo{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #e5ebf4}.photo img{width:64px;height:80px;object-fit:contain}.photo .name{flex:1;min-width:0;overflow-wrap:anywhere}.photo label{display:flex;flex-direction:column;gap:5px}.photo input{width:72px}.photo button{padding:8px}.sheet img{width:100%;height:auto;border:1px solid #d6dfec}.sheet{margin-bottom:15px}.sheet p{font-weight:600}#status{overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:760px){main{grid-template-columns:1fr;margin:12px auto;padding:0 8px}.editor,.results{padding:12px}.heading{gap:12px}.toggles{gap:14px}.photo{gap:8px}.photo img{width:45px;height:60px}.photo button{padding:8px 5px}}
.toggles input{appearance:none;position:relative;width:34px;height:20px;border-radius:12px;background:#bcc8d9;cursor:pointer;margin:0}.toggles input:before{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:white;transition:transform .15s}.toggles input:checked{background:#16864c}.toggles input:checked:before{transform:translateX(14px)}.toggles input:focus-visible{outline:2px solid #0641ad;outline-offset:3px}
.editor:only-child{grid-column:1/-1}
main{max-width:1360px;margin:10px auto;gap:12px;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr)}
.editor,.results{padding:14px;border-radius:10px}
.heading{margin-bottom:12px;gap:8px}h1,h2{font-size:20px;line-height:1.3}
button,.upload{padding:9px 14px;font-size:13px;min-height:38px}
.upload{padding:16px 12px}.upload input{margin-top:8px;font-size:13px}
.options{margin:12px 0;gap:10px}.options label{gap:8px}
select,input[type=number]{padding:7px 9px;font-size:16px;min-height:36px}
.photo{gap:10px;padding:8px 0}.photo img{width:50px;height:64px}.photo .name{font-size:13px}.photo label{font-size:12px}.photo input{width:64px}.photo button{min-width:32px}
#status{margin:8px 0 0}#status:empty{display:none}
.sheet img{display:block;max-height:68vh;object-fit:contain;background:#f7f9fc}.sheet p{margin:8px 0;font-size:12px}
button:focus-visible,.upload:focus-within{outline:2px solid #0641ad;outline-offset:3px}
@media(max-width:760px){main{grid-template-columns:minmax(0,1fr);margin:8px auto;gap:10px;padding:0 8px}.editor,.results{padding:12px}.heading{gap:8px}h1,h2{font-size:18px}.toggles{gap:12px;font-size:12px}.toggles label{gap:5px}.photo{gap:7px}.photo img{width:42px;height:54px}.photo .name{font-size:12px}.photo input{width:56px}.photo button{padding:7px;min-width:30px}.sheet img{max-height:none}.actions{gap:8px}.upload{padding:14px 8px}}
@media(max-width:360px){.heading{align-items:flex-start}.toggles{gap:8px}.photo{flex-wrap:wrap}.photo .name{flex-basis:calc(100% - 60px)}.photo label{margin-left:49px;flex-direction:row;align-items:center}}
main:has(#results[hidden]){grid-template-columns:minmax(0,1fr)}
@media(max-width:760px){main{margin-top:24px}}
main{max-width:1180px;padding:0 24px;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr)}main:has(#results[hidden]){max-width:760px}.upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:118px;cursor:pointer}.upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}.upload-symbol{font-size:24px;line-height:1;color:#0641ad}.upload-note{font-size:11px;font-weight:400;color:#536783}.upload:hover{background:#e4eeff;border-color:#0641ad}@media(max-width:760px){main{padding:0 10px;grid-template-columns:minmax(0,1fr)}.upload{min-height:100px}}
.background-choice input{width:38px;height:34px;padding:3px;border:1px solid #c7d4e5;border-radius:6px;background:white;cursor:pointer}.background-note{font-size:11px;color:#536783;margin:0 0 10px}.options{flex-wrap:wrap}

.photo-modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.photo-modes label{display:flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid #c7d4e5;border-radius:7px;font-size:12px;cursor:pointer}.photo-modes label:has(input:checked){background:#ffe000;border-color:#d6bd00}.photo-modes input{margin:0;accent-color:#0641ad}#joint-options .options{gap:8px}#joint-options input{width:65px}#joint-options label{font-size:12px}

.selection{background:white;border:1px solid #dce5f1;border-radius:10px;padding:14px;min-width:0}
main:has(#selection:not([hidden])){max-width:1180px;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr)}
#photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#photos .photo{display:grid;grid-template-columns:54px minmax(0,1fr) 30px;align-items:center;border:1px solid #dce5f1;border-radius:8px;padding:10px;gap:8px}
#photos .photo img{grid-row:1 / 3;width:54px;height:72px}#photos .photo .name{font-size:11px;line-height:1.4}#photos .photo label{grid-column:2;flex-direction:row;align-items:center;gap:7px}#photos .photo input{width:58px}#photos .photo button{grid-column:3;grid-row:1 / 3}
@media(max-width:1000px){#photos{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){main:has(#selection:not([hidden])){grid-template-columns:minmax(0,1fr)}.selection{padding:12px}#photos .photo label{margin-left:0}}

.toggles{gap:10px;flex-wrap:nowrap}.toggles label{white-space:nowrap;font-size:12px}.toggles input{flex-shrink:0}.heading{align-items:center}@media(max-width:420px){.heading>.toggles{width:100%;justify-content:space-between;gap:6px}.toggles label{font-size:11px}}

.plain-number{appearance:textfield;min-width:64px;min-height:38px;padding:8px;border:1px solid #b3c6e0;border-radius:6px;font:600 16px system-ui;text-align:center;color:#102344;background:white}
.pair-card{border:1px solid #dce5f1;border-radius:8px;padding:12px;min-width:0}.pair-card>strong{font-size:13px}.pair-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}.pair-tile{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}.pair-tile img{width:70px;height:90px;object-fit:contain}.pair-tile span{font-weight:600;font-size:12px}.pair-tile small{font-size:10px;max-width:100%;overflow-wrap:anywhere;text-align:center}.pair-controls{display:flex;gap:12px;flex-wrap:wrap}.pair-controls label{display:flex;flex-direction:column;gap:5px;font-size:12px}.pair-controls input{width:80px}

.remove-pair{margin-top:10px;padding:6px 10px;min-height:30px;background:#f4e9e9;color:#963131;font-size:11px}

.customer-mode main{width:min(1280px,100%);margin:14px auto;padding:0 14px;box-sizing:border-box}.customer-mode .editor,.customer-mode .selection,.customer-mode .results{min-width:0}.customer-mode .heading{flex-wrap:wrap;gap:10px}.customer-mode .actions{flex-wrap:wrap}.customer-mode .sheet img{max-width:100%;height:auto}@media(max-width:600px){.customer-mode main{padding:0 8px;margin:8px auto;grid-template-columns:minmax(0,1fr)}.customer-mode .editor{padding:12px}.customer-mode .options{flex-wrap:wrap}.customer-mode .options>button{width:100%}.customer-mode .actions button{padding:8px 10px;font-size:12px}}

.editable-photo{cursor:pointer}.editable-photo:focus-visible{outline:2px solid #0641ad;outline-offset:3px}
.photo-frame-dialog{width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:16px;border:0;border-radius:16px;background:#fff;color:#18304c;box-sizing:border-box}.photo-frame-dialog::backdrop{background:#10234499}.frame-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.frame-close{border:0;background:transparent;color:#dc2626;font-size:28px;padding:0 6px}.photo-frame-dialog canvas{display:block;width:min(100%,calc(60dvh * 384 / 504));height:auto;margin:auto;touch-action:none;background:#eef3fa}.frame-zoom{display:flex;gap:12px;align-items:center;margin-top:12px}.frame-zoom input{flex:1;min-width:0}.photo-frame-dialog p{font-size:12px;line-height:1.5}.frame-apply{display:block;margin-left:auto;background:#0641ad;color:white;border:0;border-radius:8px;padding:10px 24px}
.background-presets{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.photo-bg-swatch{width:32px;height:32px;min-width:32px;padding:0;border:1px solid #bdc7d5;border-radius:50%;background:var(--photo-bg);color:#0641ad;display:grid;place-items:center}.photo-bg-swatch span{visibility:hidden;background:white;border-radius:50%;font-size:14px;width:19px;height:19px}.photo-bg-swatch[aria-checked=true]{outline:2px solid #0641ad;outline-offset:2px}.photo-bg-swatch[aria-checked=true] span{visibility:visible}.photo-bg-swatch:focus-visible{outline:3px solid #efb900;outline-offset:3px}#resume-job[hidden],.ganit-print-quality[hidden]{display:none!important}#resume-job{margin-top:10px}

.photo-modes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.photo-modes .join-mode-choice{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border:1px solid #d9e3f2;border-radius:10px;cursor:pointer}
.join-mode-choice img{width:min(150px,100%);height:auto;border-radius:6px;object-fit:contain}
.join-mode-choice span{display:flex;align-items:center;gap:6px;font-size:14px}
.join-mode-choice:has(input:checked){border-color:#0641ad;background:#f0f6ff}
#form.awaiting-join-mode>:not(.photo-modes){display:none!important}

.photo-modes{grid-template-columns:repeat(2,minmax(0,160px));justify-content:start;gap:8px}
.photo-modes .join-mode-choice{padding:6px 8px;gap:5px;border-radius:8px}
.photo-modes .join-mode-choice img{width:min(80px,100%);height:auto}
.photo-modes .join-mode-choice span{font-size:12px;gap:4px}
@media(max-width:360px){.photo-modes{grid-template-columns:repeat(2,minmax(0,1fr))}}

.photo-modes .join-mode-choice img{width:min(140px,100%);height:auto;aspect-ratio:24/11}

#status.processing{display:flex;align-items:center;gap:10px;min-height:48px;padding:12px;background:#edf5ff;border-radius:10px;color:#0641ad}
#status.processing:before{content:'';flex-shrink:0;width:22px;height:22px;border:3px solid #c4d7f2;border-top-color:#0641ad;border-radius:50%;animation:join-spin .8s linear infinite}
@keyframes join-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#status.processing:before{animation:none}}

.results.is-processing>.heading{display:none}.results.is-processing #sheets{min-height:180px;background:white;border:1px solid #e1e7ef;border-radius:8px}.results #status{margin:0 0 12px}

/* Processing and finished A4 sheets share the right-hand preview area. */
@media(min-width:900px){main{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}main>section:first-child{grid-column:1;grid-row:1}#selection{grid-column:1;grid-row:2}#results{grid-column:2;grid-row:1 / span 2;min-width:0;margin-top:0}.photo-id-guide{grid-column:1 / -1}}
.results.is-processing #status{justify-content:flex-end;text-align:right}.results.is-processing #sheets{aspect-ratio:210 / 297;max-width:420px;margin-left:auto;min-height:0;box-shadow:2px 4px 12px #18334b16}.results #sheets .sheet{margin-top:0}

@media(min-width:900px){main{grid-template-columns:minmax(270px,330px) minmax(0,1fr);max-width:1100px;margin-left:auto;margin-right:auto}#results>.heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}#results .actions{display:flex;flex-wrap:wrap;gap:8px}#results .actions button{padding:8px 12px;min-height:36px}#results .sheet img{max-width:100%;height:auto}}
.photo-modes{gap:8px}.photo-modes label{padding:7px 9px!important;min-height:0!important;font-size:13px}.photo-modes img{max-width:110px!important;height:50px!important;object-fit:contain}.photo-modes input{flex-shrink:0}.upload{padding:12px!important;min-height:75px!important}.upload-symbol{font-size:22px!important}.upload-note{font-size:11px!important}
@media(max-width:899px){#results .heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}#results .actions{display:flex;flex-wrap:wrap;gap:6px}#results .actions button{padding:8px 10px}}

/* One compact control column beside a centered, complete A4 result. */
main,main:has(#results[hidden]),main:has(#selection:not([hidden])),.customer-mode main{display:grid;width:100%;max-width:1180px;grid-template-columns:minmax(0,1fr) 322px;gap:18px;padding:0 14px;margin:12px auto;align-items:start}
.join-controls{grid-column:2;grid-row:1;min-width:0;display:grid;gap:10px}
.join-controls .editor,.join-controls .selection{padding:12px;min-width:0}
#selection{grid-column:auto;grid-row:auto}
#results{grid-column:1;grid-row:1;min-width:0;margin:0;align-self:start}
.photo-id-guide{grid-column:1 / -1}
.join-controls .heading{gap:7px;margin-bottom:10px}.join-controls h1{font-size:18px}.join-controls h2{font-size:15px}
.join-controls .heading>.toggles{width:100%;justify-content:space-between}
.join-controls .photo-modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.join-controls .photo-modes label{padding:6px!important;min-width:0}
.join-controls .photo-modes img{max-width:90px!important;height:40px!important}
.join-controls .join-mode-choice span{font-size:11px;gap:3px;white-space:nowrap}
.join-controls .upload{min-height:64px!important;padding:8px!important;gap:4px}
.join-controls .options{gap:8px;margin:10px 0}.join-controls #create{width:100%}
.join-controls .background-presets{gap:7px}.join-controls .photo-bg-swatch{width:26px;height:26px;min-width:26px;min-height:26px}
.join-controls #photos{grid-template-columns:minmax(0,1fr)}
#sheets .sheet{width:100%;max-width:460px;margin:0 auto 12px}
#sheets .sheet img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;box-shadow:0 5px 16px #18334b18}
#results.is-processing #sheets{display:none!important}#results.is-processing{min-height:70px}#results .heading[hidden]{display:none!important}
@media(max-width:700px){main,main:has(#results[hidden]),main:has(#selection:not([hidden])),.customer-mode main{display:flex;flex-direction:column;gap:12px;padding:0 10px;margin:10px auto}.join-controls,#results{width:100%;min-width:0}.join-controls{order:0}#results{order:1}.photo-id-guide{order:2}.join-controls .photo-modes img{max-width:110px!important;height:45px!important}.join-controls .heading>.toggles{width:auto;flex-wrap:wrap}.heading .actions{gap:8px}.heading .actions button{min-height:42px}.pair-controls{gap:8px}.photo-pair{min-width:0;max-width:100%}}

/* Choose in the center, then controls / A4 / uploaded photos. */
main,main:has(#results[hidden]),main:has(#selection:not([hidden])),.customer-mode main{max-width:1500px;grid-template-columns:322px minmax(0,1fr) 250px;gap:16px}
.join-controls{grid-column:1;grid-row:1}
#results{grid-column:2;grid-row:1}
#selection{grid-column:3;grid-row:1;padding:12px}
#photos{grid-template-columns:minmax(0,1fr)}
main:has(.awaiting-join-mode) .join-controls{grid-column:1 / -1;width:min(420px,100%);justify-self:center}
main:has(.awaiting-join-mode) .editor>.heading{display:none}
.results.is-processing #status{justify-content:center;text-align:center}
@media(min-width:701px) and (max-width:1100px){main,main:has(#results[hidden]),main:has(#selection:not([hidden])),.customer-mode main{grid-template-columns:260px minmax(0,1fr)}#selection{grid-column:2;grid-row:2}.join-controls{grid-row:1 / span 2}}
@media(max-width:700px){main,main:has(#results[hidden]),main:has(#selection:not([hidden])),.customer-mode main{display:flex;flex-direction:column}.join-controls,#results,#selection{width:100%;min-width:0}.join-controls{order:0}#selection{order:1}#results{order:2}.photo-id-guide{order:3}}

main:has(.awaiting-join-mode) .join-controls{width:min(650px,100%)}
.awaiting-join-mode .photo-modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}
.join-controls .awaiting-join-mode .photo-modes label{padding:16px!important;gap:12px}
.join-controls .awaiting-join-mode .photo-modes img{width:100%;max-width:260px!important;height:120px!important}
.join-controls .awaiting-join-mode .join-mode-choice span{font-size:16px}
@media(max-width:450px){.awaiting-join-mode .photo-modes{gap:8px}.join-controls .awaiting-join-mode .photo-modes label{padding:10px!important}.join-controls .awaiting-join-mode .photo-modes img{height:80px!important}.join-controls .awaiting-join-mode .join-mode-choice span{font-size:12px}}

#sheet-summary{display:inline-flex;align-items:center;padding:5px 9px;border-radius:8px;background:#eaf2ff;color:#164b8c;font-size:12px;font-weight:600;white-space:nowrap}#results>.heading{flex-wrap:wrap;gap:8px}#results>.heading h2{margin:0}@media(max-width:700px){#sheet-summary{font-size:11px;padding:4px 7px}}

@media(min-width:1101px){#sheets .sheet{width:min(100%,calc((100dvh - 230px)*210/297));max-width:430px}#sheets .sheet img{width:100%;height:auto}}

/* Full A4 paper remains ready before a result is generated. */
.join-empty-sheet{width:min(100%,320px);aspect-ratio:210/297;margin:12px auto 18px;background:linear-gradient(115deg,#fff 80%,#f2f4f7);border:1px solid #dce2eb;box-shadow:3px 3px 0 #e7ebf0,6px 6px 0 #dce2e9,0 14px 25px #18334b26;border-radius:2px}
main:has(.awaiting-join-mode) #results{grid-column:1 / -1;grid-row:2;width:min(460px,100%);justify-self:center}
#sheets .sheet img{box-shadow:3px 3px 0 #e7ebf0,6px 6px 0 #dce2e9,0 12px 22px #18334b26}
@media(max-width:700px){.join-empty-sheet{width:min(75vw,270px);margin:8px auto 16px}}

#sheets>canvas{display:block;width:min(100%,320px);height:auto;aspect-ratio:210/297;margin:12px auto 18px;box-shadow:3px 3px 0 #e7ebf0,6px 6px 0 #dce2e9,0 14px 25px #18334b26}.join-live-pages{display:flex;align-items:center;justify-content:center;gap:12px}.join-live-pages[hidden]{display:none}.join-live-pages button{min-width:36px}

/* Show the paper itself, without a second white panel around it. */
main #results.results{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
#results>.heading{margin:0 0 10px}
#results>.heading h2{font-size:16px}
#sheets .join-empty-sheet,#sheets>canvas,#sheets .sheet{width:min(100%,360px);margin:10px auto 18px}
#sheets .join-empty-sheet,#sheets>canvas,#sheets .sheet img{background:#fff;border:1px solid #dce2eb;border-radius:0;box-shadow:2px 3px 0 #e2e7ed,0 9px 20px #18334b20}
@media(min-width:701px){#sheets .join-empty-sheet,#sheets>canvas,#sheets .sheet{width:min(100%,360px,calc((100dvh - 210px)*210/297))}}
@media(max-width:700px){#sheets .join-empty-sheet,#sheets>canvas,#sheets .sheet{width:min(100%,290px)}}