:root{--primary: #2563eb;--primary-bg: #eff6ff;--bg: #f2f4f8;--card: #ffffff;--border: #e3e7ee;--text: #1f2937;--muted: #6b7280;--danger: #dc2626;--radius: 12px}*{box-sizing:border-box}html,body,#root{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Segoe UI,sans-serif;font-size:15px;line-height:1.5}button{font-family:inherit}.app{max-width:1180px;margin:0 auto;padding:20px 16px 60px}.app-header{text-align:center;margin:8px 0 20px}.app-header h1{font-size:26px;margin:0 0 6px}.subtitle{color:var(--muted);margin:0}.app-main{display:grid;grid-template-columns:410px 1fr;gap:18px;align-items:start}@media (max-width: 980px){.app-main{grid-template-columns:1fr}.preview-pane{position:static!important}}.controls{display:flex;flex-direction:column;gap:14px}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.step-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;margin-bottom:12px}.step-num{width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}.dropzone{border:2px dashed #c7cfdb;border-radius:10px;padding:26px 14px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone.over{border-color:var(--primary);background:var(--primary-bg)}.drop-icon{font-size:30px}.drop-main{font-weight:600;margin-top:6px}.drop-sub{color:var(--muted);font-size:13px;margin-top:4px}.photo-card{display:flex;align-items:center;gap:12px}.thumb{width:56px;height:56px;border-radius:8px;background-size:cover;background-position:center;background-color:#eef1f6;flex:none}.photo-meta{min-width:0;flex:1}.photo-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.photo-dims{color:var(--muted);font-size:13px}.photo-actions{display:flex;gap:6px;flex:none}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.chip{padding:9px 0;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;font-size:15px;color:var(--text);text-align:center}.chip:hover{border-color:#b9c3d4}.chip.active{border-color:var(--primary);color:var(--primary);background:var(--primary-bg);font-weight:600}.chip.mini{padding:5px 10px;font-size:13px}.preset-note{color:var(--muted);font-size:13px;margin:8px 2px 0}.custom-size-row{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px}.custom-size-row label{display:flex;align-items:center;gap:6px;color:var(--muted)}.custom-size-row input{width:76px;padding:7px 8px;border:1px solid var(--border);border-radius:8px;font-size:14px;text-align:right}.times{color:var(--muted)}.count-row{display:flex;align-items:center;gap:6px;margin-top:10px}.count-row input{width:84px;padding:8px;border:1px solid var(--border);border-radius:8px;font-size:15px;text-align:right}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}.setting-row:first-child{margin-top:0}.setting-label{font-size:14px}.seg{display:flex;background:#eef1f6;border-radius:8px;padding:3px;gap:3px;flex:1}.seg.narrow{flex:none;width:auto}.seg-btn{flex:1;border:none;background:transparent;padding:7px 12px;border-radius:6px;cursor:pointer;color:var(--muted);font-size:14px;white-space:nowrap}.seg-btn.active{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 2px #00000014}.num-input{width:76px;padding:7px 8px;border:1px solid var(--border);border-radius:8px;font-size:14px;text-align:right}.unit{color:var(--muted);margin-left:5px;font-size:13px}input.switch{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}.hint{color:var(--muted);font-size:13px;margin:6px 2px 0}.hint.warn{color:#b45309}.error-text{color:var(--danger);font-size:13px;margin:8px 2px 0}.print-hint{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.6}.generate-btn{width:100%;padding:14px;font-size:17px;font-weight:600;color:#fff;background:var(--primary);border:none;border-radius:10px;cursor:pointer}.generate-btn:hover:not(:disabled){background:#1d4ed8}.generate-btn:disabled{background:#c3cad6;cursor:not-allowed}.gen-error{color:var(--danger);font-size:13px;text-align:center}.preview-pane{position:sticky;top:16px}.preview-card{background:#e9edf3;border:1px solid var(--border);border-radius:var(--radius);padding:14px;min-height:420px}.preview-empty{display:flex;align-items:center;justify-content:center;min-height:380px;color:var(--muted);font-size:15px;text-align:center;padding:0 20px}.preview-empty.error{color:var(--danger)}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;max-width:660px;margin:0 auto;font-size:13px}.muted{color:var(--muted)}.page-nav{display:flex;align-items:center;gap:10px}.page-nav button{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:16px;line-height:1}.page-nav button:disabled{opacity:.4;cursor:not-allowed}.paper{background:#fff;box-shadow:0 2px 14px #0f172a29;margin:12px auto;position:relative}.cell{position:absolute;background-repeat:no-repeat;background-color:#fff}.cell.crop-marks{box-shadow:inset 0 0 0 1px #64748b8c}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.stat{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 10px}.stat .k{font-size:12px;color:var(--muted)}.stat .v{font-size:15px;font-weight:600;margin-top:2px}.crop-adjust{margin-top:12px}.crop-box{position:relative;overflow:hidden;background:#d8dee8;border-radius:8px;margin:0 auto;touch-action:none;cursor:grab}.crop-box.dragging{cursor:grabbing}.crop-box.static{cursor:default}.crop-box img{position:absolute;max-width:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.crop-meta{display:flex;justify-content:space-between;align-items:center;max-width:300px;margin:6px auto 0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:8px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:14px;text-decoration:none;color:var(--text)}.btn:hover{border-color:#b9c3d4}.btn.small{padding:5px 10px;font-size:13px}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:#1d4ed8}.btn.danger{color:var(--danger)}.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}.modal{background:#fff;border-radius:14px;padding:22px;max-width:430px;width:100%}.modal h2{margin:0 0 8px;font-size:19px}.file-name{font-weight:600;word-break:break-all;margin:0 0 2px}.modal .muted{margin:0 0 12px;font-size:14px}.modal-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}