@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#18211f;background:#f6f7f9;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#18211f;--muted:#77817e;--line:#e5e9e8;--green:#157a5c;--mint:#eaf5ef;--orange:#ea8b61}
*{box-sizing:border-box}body{margin:0;min-width:320px}.shell{max-width:1120px;padding:0 34px;margin:auto}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8ebed}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 16px Manrope,sans-serif;letter-spacing:-.4px}.brand-mark{height:30px;width:30px;border-radius:9px;background:var(--green);color:white;display:grid;place-items:center;font:bold 10px Manrope;letter-spacing:-.5px}.local-badge{font-size:11px;color:#68736f;display:flex;gap:8px;align-items:center}.local-badge i{height:7px;width:7px;background:#42aa77;border-radius:50%;box-shadow:0 0 0 3px #e3f2e9}.intro{padding:45px 0 30px;max-width:560px}.eyebrow,.preview-kicker{font-size:9px;font-weight:700;letter-spacing:1.7px;color:var(--green)}h1,h2,p{margin-top:0}h1{font:800 38px/1.13 Manrope,sans-serif;letter-spacing:-1.8px;margin:11px 0 12px}h1 span{color:var(--green)}.intro p{font-size:13px;line-height:1.65;color:#68736f;max-width:480px;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(310px,.95fr);background:white;border:1px solid #e8ebed;border-radius:14px;box-shadow:0 10px 30px #263b3310;overflow:hidden}.editor{padding:25px 26px 22px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.section-heading>div{display:flex;align-items:center;gap:10px}.step{color:#9ba5a1;font:600 9px Manrope;letter-spacing:.7px}.section-heading h2,.preview-top h2{font:700 14px Manrope,sans-serif;margin:0;letter-spacing:-.35px}.optional,.standard-tag{font:600 8px Manrope;letter-spacing:.5px;color:#98a19e}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.upload-card{border:1px solid var(--line);border-radius:9px;padding:10px;display:flex;flex-direction:column;min-width:0;cursor:pointer;transition:.16s}.upload-card:hover{border-color:#86bca6;background:#fbfdfb}.upload-card input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.side-label{font-size:8px;font-weight:700;letter-spacing:1px;color:#69736f;display:flex;gap:6px;align-items:center}.side-icon{display:grid;place-items:center;width:17px;height:17px;background:#eef5f1;color:var(--green);border-radius:5px;font-size:12px}.upload-preview{height:91px;margin:9px 0 7px;border:1px dashed #d7dfdb;border-radius:6px;background:#fafbfb;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;color:#83908a;font-size:9px;overflow:hidden}.upload-preview img{height:100%;width:100%;object-fit:cover}.plus{font-size:20px;line-height:1;color:var(--green)}.file-name{font-size:8px;color:#9aa39f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dimensions-heading{margin:21px 0 11px}.standard-tag{color:var(--green);background:#edf7f1;border-radius:4px;padding:5px 7px}.size-panel{padding:12px 13px 10px;background:#f8faf9;border:1px solid #edf0ef;border-radius:8px}.size-fields{display:flex;align-items:end;gap:9px}.size-fields label{display:flex;flex-direction:column;gap:5px;color:#76817d;font-size:9px}.size-fields label span{display:flex;align-items:center;gap:5px;border:1px solid #e2e8e5;background:white;border-radius:5px;padding-right:8px}.size-fields input{width:76px;border:0;background:transparent;padding:8px;font:600 12px Manrope;color:var(--ink);outline:none}.size-fields small{font-size:9px;color:#a0aaa6}.times{font-size:13px;color:#a3ada9;padding-bottom:8px}.size-panel p{font-size:9px;line-height:1.5;color:#8a9490;margin:10px 0 0}.arrangement-heading{margin:20px 0 10px}.arrange-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#6e7975}.arrange-row select{width:175px;padding:9px 10px;border:1px solid #e5eae7;border-radius:6px;background:white;color:#35403b;font:500 10px 'DM Sans',sans-serif;outline:none}.actions{display:flex;gap:9px;margin-top:17px}.button{height:39px;border-radius:6px;padding:0 13px;font:600 10px 'DM Sans',sans-serif;cursor:pointer;transition:.16s}.button:disabled{opacity:.42;cursor:not-allowed}.primary{background:var(--green);color:white;border:1px solid var(--green);flex:1}.primary:hover:not(:disabled){background:#106b50}.primary span{font-size:15px;margin-right:5px}.secondary{background:white;color:#46534e;border:1px solid #dce3df}.secondary:hover:not(:disabled){border-color:#91b9a7}.print-note{font-size:9px;color:#74807a;line-height:1.55;margin:12px 0 0}.print-note span{color:var(--green);margin-right:4px}.print-note b{color:#515e58;font-weight:600}.status{font-size:9px;color:#98a19e;margin:9px 0 0}.preview-panel{background:#f8faf9;border-left:1px solid #edf0ef;padding:23px 25px 20px;display:flex;flex-direction:column}.preview-top{display:flex;justify-content:space-between;align-items:center}.preview-kicker{font-size:8px;letter-spacing:1.25px;color:#8b9691}.preview-top h2{font-size:13px;margin-top:4px}.zoom-pill{font-size:8px;letter-spacing:.5px;color:#7e8984;background:white;border:1px solid #e8ece9;padding:6px 8px;border-radius:4px}.paper-wrap{flex:1;min-height:328px;display:flex;align-items:center;justify-content:center;padding:19px 0}.paper{position:relative;width:min(100%,240px);aspect-ratio:210/297;background:white;border:1px solid #e4e9e6;border-radius:2px;box-shadow:0 5px 18px #33494012}.card-slot{position:absolute;width:40.76%;aspect-ratio:85.6/53.98;border:1px dashed #c9d6cf;background:#f6faf7;border-radius:2px;left:50%;transform:translateX(-50%);display:grid;place-items:center;overflow:hidden}.front-slot{top:29%}.back-slot{top:51%}.card-slot span{font-size:7px;letter-spacing:1.4px;color:#a3b0a9;font-weight:600}.card-slot img{width:100%;height:100%;object-fit:cover}.paper.horizontal .card-slot{width:40.76%;top:50%;transform:translateY(-50%)}.paper.horizontal .front-slot{left:7%}.paper.horizontal .back-slot{left:auto;right:7%;transform:none}.preview-footer{font-size:8px;color:#8c9692;display:flex;align-items:center;gap:6px}.legend-dot{height:6px;width:6px;background:#83b49a;border-radius:50%}.preview-separator{color:#c0c7c3}footer{padding:18px 2px 24px;display:flex;justify-content:space-between;font-size:9px;color:#a0a9a5}footer b{color:#78a68e;margin:0 3px}
@media(max-width:760px){.shell{padding:0 18px}.topbar{height:62px}.intro{padding:34px 0 23px}h1{font-size:32px}.workspace{grid-template-columns:1fr}.editor{padding:22px 18px}.preview-panel{border-left:0;border-top:1px solid #edf0ef;padding:20px 18px}.paper-wrap{min-height:310px}.paper{width:min(74%,240px)}footer{gap:9px;line-height:1.5}footer span:last-child{text-align:right}}
@media(max-width:380px){.shell{padding:0 12px}.editor{padding:18px 13px}.upload-preview{height:78px}.actions{flex-wrap:wrap}.actions button{flex:1 1 100%}.local-badge{font-size:9px}}
.customer-cards{display:grid;gap:12px}.customer-card{border:1px solid #edf0ef;border-radius:8px;padding:9px}.customer-card-heading{display:flex;justify-content:space-between;align-items:center;margin:0 1px 8px;color:#5d6964;font-size:9px;font-weight:600}.customer-number{font:700 8px Manrope;color:var(--green);margin-right:6px}.customer-card .upload-card{padding:8px}.customer-card .upload-preview{height:68px;margin:7px 0 5px}.customer-card .side-label{font-size:7px}.customer-card .file-name{font-size:7px}.remove-card{border:0;background:transparent;color:#a37367;font:500 8px 'DM Sans',sans-serif;padding:4px;cursor:pointer}.add-card-button{width:100%;margin-top:9px;padding:9px;border:1px dashed #bdd2c7;border-radius:6px;background:#fbfdfb;color:var(--green);font:600 9px 'DM Sans',sans-serif;cursor:pointer}.add-card-button span{font-size:13px;margin-right:4px}.pair-note{font-size:9px;color:#78837e;line-height:1.55;margin:-3px 0 0}.preview-row{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:calc(8 / 210 * 100%);aspect-ratio:calc((var(--card-ratio) * 2) + (8 / 210 * 2 * var(--card-ratio)));overflow:hidden}.preview-row img{width:calc((100% - 8 / 210 * 100%) / 2);height:100%;object-fit:cover;outline:1px solid #d5dfd9}.paper-wrap{align-items:flex-start}.paper{margin-top:0}.paper:empty{background:white}.preview-footer{min-height:12px}
.preview-row{gap:var(--pair-gap);aspect-ratio:auto}.preview-row img{width:calc((100% - var(--pair-gap))/2)}.footer-brand{display:flex;align-items:center;gap:10px}.footer-brand img{width:63px;height:22px;object-fit:contain}
.fit-control{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:9px;color:#6e7975}.fit-control select{width:190px;padding:8px 9px;border:1px solid #e5eae7;border-radius:6px;background:white;color:#35403b;font:500 9px 'DM Sans',sans-serif;outline:none}.fit-note{font-size:8px;line-height:1.5;color:#8a9490;margin:6px 0 0}.preview-row img.show-full-photo{object-fit:contain;background:#fff}
@media print{body{background:white}.shell{display:none!important}body.printing #printPages{display:block!important}body.printing .print-page{display:block!important;width:210mm;height:297mm;max-width:none;break-after:page;page-break-after:always}body.printing .print-page:last-child{break-after:auto;page-break-after:auto}@page{size:A4 portrait;margin:0}}
