*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#f5f5f4;--color-surface:#fff;--color-border:#d6d3d1;--color-text:#1c1917;--color-text-muted:#78716c;--color-primary:#036;--color-primary-hover:#048;--color-danger:#dc2626;--color-danger-hover:#b91c1c;--navbar-height:1.25rem;--radius:6px;--shadow:0 1px 3px #0000001a;color:var(--color-text);background:var(--color-bg);font-family:system-ui,-apple-system,sans-serif;font-size:14px}body{min-height:100dvh}a{color:#00f}#app{flex-direction:column;min-height:100dvh;display:flex}.loading-overlay{background:var(--color-bg);z-index:99;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-overlay__text{color:var(--color-text-muted);font-size:1rem;animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.navbar{height:var(--navbar-height);background:var(--color-primary);flex-shrink:0;align-items:center;padding:0 1rem;display:flex}.navbar__title{color:#fff;letter-spacing:-.01em;font-size:1rem;line-height:1.2}.main-layout{flex:1;grid-template-columns:1fr 280px;display:grid}.main-layout__content{flex-direction:column;gap:1.25rem;min-height:0;padding:1.25rem;display:flex;overflow-y:auto}.btn{border-radius:var(--radius);cursor:pointer;white-space:nowrap;border:1px solid #0000;align-items:center;gap:.4rem;padding:.45rem .9rem;font-size:.875rem;font-weight:500;transition:background .15s,border-color .15s;display:inline-flex}.btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn--primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn--primary:disabled{opacity:.5;cursor:not-allowed}.btn--ghost{color:var(--color-text-muted);border-color:var(--color-border);background:0 0}.btn--ghost:hover{background:var(--color-bg);color:var(--color-text)}.btn--sm{padding:.25rem .55rem;font-size:.8rem}.dropzone-wrapper{display:contents}.dropzone{border:2px dashed var(--color-border);border-radius:var(--radius);background:var(--color-surface);cursor:pointer;outline-offset:2px;transition:border-color .15s,background .15s}.dropzone:focus-visible{outline:2px solid var(--color-primary)}.dropzone--over,.dropzone:focus-within{border-color:var(--color-primary);background:#0033660d}.dropzone__inner{text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:.5rem;padding:2.5rem 1rem;display:flex}.dropzone__icon{width:2.5rem;height:2.5rem;color:var(--color-text-muted);flex-shrink:0}.dropzone__label{font-size:.95rem}.dropzone__browse{pointer-events:all;color:var(--color-primary);cursor:pointer;font-size:inherit;background:0 0;border:none;text-decoration:underline}.dropzone__hint{color:var(--color-text-muted);font-size:.8rem}.dropzone__welcome{color:var(--color-text-muted);padding:0 1.25rem 1rem;font-size:.9rem;line-height:1.4}.image-list-wrap{flex-direction:column;gap:.5rem;display:flex}.image-list-wrap[hidden]{display:none!important}.image-list-wrap--dragover{outline:2px dashed var(--color-primary);outline-offset:4px;border-radius:var(--radius)}.image-list__header{align-items:center;gap:.4rem;padding:0 .25rem;display:flex}.image-list__header .btn{min-width:24px;min-height:24px}.image-list__title{margin-right:auto;font-size:.95rem;font-weight:600}.image-list{flex-direction:column;gap:.5rem;list-style:none;display:flex}.image-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);align-items:flex-start;gap:.75rem;padding:.75rem;display:flex}.image-item--dragging{opacity:.4}.image-item--dragover{border-color:var(--color-primary)}.slideInFromDown{animation:.3s cubic-bezier(.4,1.4,.6,1) slideInDown}.slideInFromUp{animation:.3s cubic-bezier(.4,1.4,.6,1) slideInUp}.image-item--removing{animation:.3s linear forwards fadeOutShrink}@keyframes slideInDown{0%{opacity:.5;transform:translateY(-3rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:.5;transform:translateY(3rem)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutShrink{0%{opacity:1}50%{opacity:0;border-width:1px;height:auto;padding:.75rem}to{opacity:0;border-width:0;height:0;margin-bottom:-.5rem;padding:0}}.image-item__drag-handle{cursor:grab;color:var(--color-text-muted);-webkit-user-select:none;user-select:none;touch-action:none;flex-shrink:0;margin-top:.15rem;font-size:1.1rem}.image-item__thumb{object-fit:contain;border:1px solid var(--color-border);background:var(--color-bg);border-radius:3px;flex-shrink:0;width:200px;height:200px}.image-item__info{flex-direction:column;flex:1;gap:.5rem;padding-top:1.5rem;display:flex;position:relative}.image-item__name{text-overflow:ellipsis;white-space:normal;word-break:break-word;font-size:.9rem;font-weight:500;overflow:hidden}.image-item__page{color:var(--color-text-muted);font-size:.78rem}.image-item__controls{flex-wrap:wrap;align-items:center;gap:.2rem;display:flex}.image-item__rotate-btn{border-color:var(--color-border);justify-content:center;align-items:center;gap:.2rem;width:50px;min-width:24px;min-height:24px;margin-right:.6rem;padding:.25rem .3rem;font-size:.75rem;display:flex}.image-item__move-btn{justify-content:center;align-items:center;min-width:24px;min-height:24px;padding:.3rem .35rem;font-size:.8rem;display:flex}.image-item__remove{cursor:pointer;color:var(--color-text-muted);background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;min-width:24px;min-height:24px;padding:.25rem .3rem;font-size:.8rem;transition:color .15s,background .15s;display:flex;position:absolute;top:.5rem;right:.5rem}.image-item__remove:hover{color:var(--color-danger);background:#fee2e2}.options-panel{background:var(--color-surface);border-left:1px solid var(--color-border);max-height:calc(100dvh - var(--navbar-height));flex-direction:column;gap:1rem;padding:1rem;display:flex;position:sticky;top:0;overflow-y:auto}.options-panel__title{padding-bottom:.5rem;font-size:.95rem;font-weight:700}.options-group{border:1px solid var(--color-border);border-radius:var(--radius);flex-direction:column;gap:.5rem;padding:.6rem .75rem;display:flex}.options-group__legend{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);padding:0 .25rem;font-size:.78rem;font-weight:600}.option-row{align-items:center;gap:.5rem;font-size:.85rem;display:flex}.option-row__label{color:var(--color-text);flex:1}.option-row__control{border:1px solid var(--color-border);background:var(--color-bg);border-radius:3px;flex-shrink:0;width:110px;padding:.25rem .4rem;font-size:.8rem}.option-row input[type=range].option-row__control{accent-color:var(--color-primary);padding:0}.option-row input[type=checkbox]{width:auto;accent-color:var(--color-primary);flex-shrink:0}.option-subgroup{flex-direction:column;gap:.4rem;padding-top:.2rem;display:flex}.option-subgroup[hidden]{display:none!important}.options-panel__convert-area{flex-direction:column;gap:.5rem;margin-top:auto;padding-top:.5rem;display:flex}.options-panel__status{color:var(--color-text-muted);min-height:1.2em;font-size:.8rem}.options-panel__status:empty{display:none}.options-panel__convert-area .btn--primary{justify-content:center;width:100%}.options-panel__copyright-area{border-top:1px solid var(--color-border);padding-top:.5rem}@media (width<=700px){.main-layout{grid-template-columns:1fr}.options-panel{border-left:none;border-top:1px solid var(--color-border);max-height:none;position:static}.image-item__page{display:none}.btn{touch-action:manipulation}.btn--sm{padding:.35rem .65rem}}