*{box-sizing:border-box} :root{--navy:#10243a;--blue:#2563eb;--ink:#182536;--muted:#718096;--line:#e4eaf0;--bg:#f4f7fa}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 5%;gap:12px}.brand-mark{width:36px;height:36px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:19px}.topbar strong{display:block;font-size:14px}.topbar span{display:block;color:var(--muted);font-size:11px;margin-top:3px}.local-tag{margin-left:auto!important;border:1px solid #dce9e1;background:#f2faf5;color:#28734a!important;padding:7px 10px;border-radius:20px;font-size:11px!important}.app{max-width:1440px;margin:0 auto;padding:30px 4% 50px}.intro{margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:700;color:var(--blue);margin:0 0 8px}.intro h1{font-size:28px;letter-spacing:-.7px;margin:0 0 8px;color:#122238}.sub{margin:0;color:var(--muted);font-size:14px}.workspace{display:grid;grid-template-columns:minmax(310px,390px) minmax(0,1fr);gap:22px;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 4px 16px rgba(20,40,60,.035)}.section-heading{display:flex;justify-content:space-between;margin-bottom:15px}.section-heading h2,.preview-toolbar h2{font-size:15px;margin:0 0 5px}.section-heading p,.preview-toolbar p{font-size:11px;color:var(--muted);margin:0}.upload-zone{border:1.5px dashed #b9c9dc;background:#f8fbff;border-radius:10px;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:5px;color:#31445b}.upload-zone:hover{border-color:var(--blue);background:#f2f7ff}.upload-icon{width:29px;height:29px;border-radius:50%;background:#e7efff;color:var(--blue);display:grid;place-items:center;font-size:20px}.upload-zone strong{font-size:12px}.upload-zone small{font-size:10px;color:var(--muted)}.upload-zone input{display:none}.photo-list-head{display:flex;justify-content:space-between;margin:18px 0 9px;font-size:11px}.photo-list-head span{color:var(--muted)}.photo-list{display:grid;gap:8px;max-height:330px;overflow:auto}.empty-list{font-size:11px;color:#98a4b2;padding:13px 4px;text-align:center}.photo-item{display:grid;grid-template-columns:48px minmax(0,1fr) 54px 26px;align-items:center;gap:8px;padding:7px;border:1px solid var(--line);border-radius:9px}.photo-item img{width:48px;height:58px;object-fit:cover;border-radius:5px;background:#edf2f7}.photo-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.photo-meta{font-size:9px;color:var(--muted);margin-top:4px}.photo-item label{font-size:9px;color:var(--muted)}.photo-item input{width:48px;padding:5px;border:1px solid var(--line);border-radius:5px;font-size:11px}.remove-photo{border:0;background:#f3f5f8;color:#718096;border-radius:6px;width:25px;height:25px;cursor:pointer}.remove-photo:hover{background:#feecec;color:#b42318}.tip{background:#f7f9fc;color:#65758a;border-radius:7px;padding:10px;font-size:10px;line-height:1.5;margin-top:12px}.divider{height:1px;background:var(--line);margin:22px 0}.field{margin:12px 0}.field label{display:block;font-size:10px;font-weight:700;color:#526174;margin-bottom:6px}.field input,.field select{width:100%;height:36px;border:1px solid #dce3eb;border-radius:7px;background:#fff;padding:0 10px;color:#27384d;font-size:11px;outline:none}.field input:focus,.field select:focus{border-color:var(--blue)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.button-row{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-top:20px}.btn{height:39px;border-radius:7px;padding:0 12px;font-size:11px;font-weight:700;cursor:pointer}.btn.primary{background:var(--blue);color:#fff;border:1px solid var(--blue)}.btn.primary:hover{background:#1d4ed8}.btn.secondary{background:#fff;border:1px solid #dce3eb;color:#405168}.btn.outline{background:#fff;border:1px solid #cbd8e8;color:#2457a7}.btn.full{width:100%;margin-top:9px}.btn:disabled{opacity:.45;cursor:not-allowed}.privacy-note{font-size:9px;color:#8995a4;line-height:1.5;margin:13px 0 0}.preview-area{min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;margin:3px 2px 16px}.page-pill{font-size:10px;background:#e9eff7;color:#53657b;border-radius:20px;padding:7px 11px}.preview-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;align-items:flex-start;min-height:450px;padding:20px;background:#e9eef4;border:1px solid #dce4ec;border-radius:12px;overflow:auto}.preview-empty{min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#8b98a8;gap:8px}.empty-art{font-size:38px;color:#b7c5d4}.preview-empty strong{font-size:13px;color:#607086}.preview-empty span{font-size:11px}.sheet{background:#fff;box-shadow:0 4px 18px rgba(24,40,60,.12);position:relative;display:grid;align-content:center;justify-content:center;flex:none;overflow:hidden}.photo-cell{overflow:hidden;position:relative;background:#e8edf2;line-height:0}.photo-cell img{display:block;width:100%;height:100%;object-fit:cover}.photo-cell.contain img{object-fit:contain}.photo-cell.border{outline:1px solid #aab4bf;outline-offset:-.5px}.preview-caption{text-align:center;font-size:9px;color:#718096;margin-top:8px}.print-help{font-size:11px;color:#718096;margin:13px 2px}.print-help strong{color:#405168}footer{text-align:center;padding:20px;color:#9aa5b2;font-size:10px}footer span{padding:0 5px}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.controls{order:1}.preview-area{order:2}.app{padding:22px 4% 35px}.preview-pages{justify-content:center}.intro h1{font-size:24px}}
@media(max-width:480px){.topbar{padding:0 4%}.local-tag{font-size:9px!important}.panel{padding:16px}.app{padding-top:22px}.preview-pages{padding:12px}.photo-item{grid-template-columns:42px minmax(0,1fr) 48px 24px}.photo-item img{width:42px;height:52px}}
@media print{body{background:#fff!important}.topbar,main,.app,.intro,.workspace,.controls,.preview-toolbar,.print-help,footer{display:none!important}body.printing #printRoot{display:block!important}.print-page{page-break-after:always;break-after:page}.print-page:last-child{page-break-after:auto;break-after:auto}.print-sheet{display:grid;align-content:center;justify-content:center;width:var(--paper-w);height:var(--paper-h);padding:var(--page-margin);overflow:hidden;grid-template-columns:repeat(var(--cols),var(--photo-w));grid-template-rows:repeat(var(--rows),var(--photo-h));column-gap:var(--gap);row-gap:var(--gap);box-sizing:border-box}.print-cell{width:var(--photo-w);height:var(--photo-h);overflow:hidden;line-height:0}.print-cell img{width:100%;height:100%;display:block;object-fit:var(--fit)}.print-cell.border{outline:.2mm solid #aab4bf;outline-offset:-.2mm}}