:root{--bg-primary: #111113;--bg-secondary: #1a1a1c;--bg-surface: #28282c;--bg-surface-hover: #333338;--text-primary: #e8e8ea;--text-secondary: #88888e;--accent: #6e6e76;--accent-hover: #8a8a92;--accent-glow: rgba(110, 110, 118, .2);--border: #2a2a2e;--radius: 10px;--radius-sm: 6px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-primary)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text-primary);min-height:100vh}#app{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg-primary)}header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.75rem}header h1{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}header .page-info{color:var(--text-secondary);font-size:.85rem}.header-right{margin-left:auto;display:flex;align-items:center;gap:1rem}.header-right[hidden]{display:none}.zoom-group{display:flex;align-items:center;gap:.4rem}.zoom-group input[type=range]{width:150px;accent-color:var(--accent)}.zoom-label{color:var(--text-secondary);font-size:.9rem;user-select:none;line-height:1}#dropzone{display:flex;align-items:center;justify-content:center;flex:1;padding:3rem;cursor:pointer}#dropzone[hidden]{display:none}.dropzone-inner{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:4rem 6rem;border:2px dashed var(--border);border-radius:var(--radius);transition:border-color .2s,background .2s;color:var(--text-secondary)}#dropzone:hover .dropzone-inner,#dropzone.drag-over .dropzone-inner{border-color:var(--accent);background:var(--accent-glow)}.dropzone-title{font-size:1.1rem;font-weight:500;color:var(--text-primary)}.dropzone-subtitle{font-size:.85rem}#workspace{display:flex;flex:1;overflow:hidden}#workspace[hidden]{display:none}#settings-panel{width:280px;min-width:280px;padding:1.5rem;border-right:1px solid var(--border);background:var(--bg-secondary);overflow-y:auto;display:flex;flex-direction:column;gap:1rem}#settings-panel h2{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:.5rem}.setting-row{display:flex;flex-direction:column;gap:.4rem;font-size:.875rem}.setting-row-inline{flex-direction:row;align-items:center;justify-content:space-between}.setting-row>span{color:var(--text-secondary);font-size:.8rem}.range-group{display:flex;align-items:center;gap:.75rem}.range-group input[type=range]{flex:1;accent-color:var(--accent)}.range-value{min-width:2.5rem;text-align:right;font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--text-primary)}input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}select{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .6rem;font-size:.85rem}#preview-area{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-wrap:wrap;align-content:flex-start}.preview-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.preview-thumb{box-shadow:0 2px 12px #0006;max-width:100%;height:auto}.input-number{width:64px;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.35rem .5rem;font-size:.8rem;font-variant-numeric:tabular-nums;-moz-appearance:textfield}.input-number::-webkit-outer-spin-button,.input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-number:focus{outline:1px solid var(--accent);border-color:var(--accent)}.input-disabled{opacity:.5;cursor:not-allowed}.dual-input-group{display:flex;align-items:center;gap:.35rem;flex-wrap:nowrap}.dual-input-group .input-number{width:auto;flex:1;min-width:40px;max-width:72px}.dual-input-group .unit-label{font-size:.7rem;color:var(--text-secondary);min-width:1.4rem}.settings-section{border-top:1px solid var(--border);padding-top:.75rem;margin-top:.25rem}.section-header{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none}.section-arrow{font-size:.9rem;color:var(--text-secondary);width:.8rem;text-align:center;line-height:1}.section-title{font-size:.85rem;font-weight:500;color:var(--text-primary);flex:1}.section-toggle{margin-left:auto}.section-body{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem}.section-body[hidden]{display:none}.outline-row{display:flex;align-items:center;gap:.5rem}.outline-row .input-number{width:50px}.dim-row{display:flex;align-items:center;gap:.5rem}.dim-row .dim-label{min-width:1.2rem;font-size:.8rem;color:var(--text-secondary)}.chain-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;padding:.2rem .3rem;font-size:.75rem;line-height:1;transition:color .2s,border-color .2s}.chain-btn.active{color:var(--accent);border-color:var(--accent)}.color-row{display:flex;align-items:center;gap:.5rem}.color-row input[type=color]{width:28px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);background:none;cursor:pointer;padding:0}.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-row input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}.color-row .color-hex{font-size:.8rem;color:var(--text-primary);font-variant-numeric:tabular-nums}.auto-label{font-size:.7rem;color:var(--accent);font-style:normal;opacity:.8}.preview-thumb-no-shadow{box-shadow:none!important}.preview-thumb-container{position:relative}.preview-shadow-half{position:absolute;top:0;height:100%;box-shadow:0 2px 12px #0006;pointer-events:none}.preview-phantom{visibility:hidden}.preview-label{font-size:.75rem;color:var(--text-secondary)}.preview-banner{width:100%;padding:0 0 .5rem;font-size:.8rem;color:var(--text-secondary)}.preview-banner-label{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}.preview-banner-label input[type=checkbox]{accent-color:var(--accent)}.btn-export{padding:.35rem .75rem;font-size:.8rem}.btn{padding:.55rem 1.25rem;border:none;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;cursor:pointer;transition:background .2s,opacity .2s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-surface-hover)}#progress-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}#progress-overlay[hidden]{display:none}.progress-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 3rem;text-align:center;display:flex;flex-direction:column;gap:1rem;min-width:320px}.progress-label{font-size:.95rem;font-weight:500}.progress-bar{width:100%;height:8px;appearance:none;border:none;border-radius:4px;overflow:hidden}.progress-bar::-webkit-progress-bar{background:var(--bg-surface);border-radius:4px}.progress-bar::-webkit-progress-value{background:var(--accent);border-radius:4px;transition:width .2s}.progress-bar::-moz-progress-bar{background:var(--accent);border-radius:4px}.progress-detail{font-size:.8rem;color:var(--text-secondary)}*{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{display:none}.preview-mode-group{display:flex;align-items:center;gap:.35rem}.preview-mode-label{font-size:.8rem;color:var(--text-secondary);margin-right:.15rem}.preview-mode-btn{padding:.25rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.preview-mode-btn:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.preview-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}#preview-area.single-mode{align-items:center;justify-content:center;overflow:hidden;padding:1.5rem}.preview-single-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex:1;width:100%;height:100%}.preview-single-spread{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden}.preview-single-nav{position:absolute;bottom:0;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:#111113bf;backdrop-filter:blur(6px);border-radius:var(--radius);opacity:0;transition:opacity .25s ease;pointer-events:none}.preview-single-nav.visible{opacity:1;pointer-events:auto}.preview-nav-btn{padding:.3rem .7rem;font-size:.85rem;min-width:2rem}.preview-single-canvas{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}.preview-single-canvas-container{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}#preview-area:focus{outline:none}