:root{--primary:#2563eb;--primary-dark:#1d4ed8;--danger:#dc2626;--bg:#f8fafc;--surface:#fff;--border:#e2e8f0;--text:#0f172a;--muted:#64748b;--radius:8px;--shadow-sm:0 1px 2px #0f172a0a;--shadow:0 4px 20px #0f172a0f;--shadow-lg:0 12px 40px #0f172a1f}*{box-sizing:border-box}[hidden]{display:none!important}html,body{min-height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5}button,input,select{font:inherit}.muted{color:var(--muted)}.app-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:20;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex;position:sticky;top:0}.brand{letter-spacing:.5px;color:var(--text);align-items:center;gap:8px;font-size:18px;font-weight:700;text-decoration:none;display:inline-flex}.brand-accent{color:var(--primary)}.brand-icon{border-radius:6px;flex-shrink:0;width:26px;height:26px;display:block}.header-note{color:var(--muted);text-align:right;font-size:13px}main{max-width:960px;margin:0 auto;padding:16px}.screen[hidden]{display:none}.screen{flex-direction:column;gap:16px;min-height:calc(100vh - 82px);display:flex}.screen-header{flex-direction:column;gap:2px;display:flex}.screen-header h2{margin:0;font-size:22px;font-weight:700}.screen-header p{margin:0;font-size:14px}button{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;justify-content:center;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:10px 16px;transition:background .12s,border-color .12s,transform 50ms;display:inline-flex}button:active{transform:translateY(1px)}button:hover{background:#f1f5f9;border-color:#cbd5e1}button:disabled{opacity:.5;cursor:default;transform:none}button.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}button.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}button.danger{color:var(--danger)}button.danger:hover{background:#fef2f2;border-color:#fecaca}button.text-link{color:var(--primary);background:0 0;border:none;min-width:auto;min-height:auto;padding:0;text-decoration:underline}button.text-link:hover{color:var(--primary-dark);background:0 0}.action-main,.action-secondary{width:100%}input[type=text],select{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:100%;min-height:44px;padding:10px 12px}input[type=text]:focus,select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #2563eb1a}.text-field,.select-field{flex-direction:column;gap:6px;font-size:14px;font-weight:600;display:flex}.checkbox-row{cursor:pointer;align-items:center;gap:10px;font-weight:600;display:flex}.checkbox-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary);flex-shrink:0}.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:12px;padding:16px}.status-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;font-size:14px}.sticky-actions{background:var(--bg);padding:12px 0 calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);z-index:10;flex-direction:column;gap:8px;margin-top:auto;display:flex;position:sticky;bottom:0;box-shadow:0 -4px 20px #0f172a0d}.upload-card{flex-direction:column;gap:16px;display:flex}.dropzone{background:var(--surface);text-align:center;cursor:pointer;border:2px dashed #cbd5e1;border-radius:12px;padding:48px 24px;transition:border-color .15s,background .15s;position:relative}.dropzone:hover,.dropzone.dragover{border-color:var(--primary);background:#eff6ff}.dropzone-icon{width:52px;height:52px;color:var(--primary);margin:0 auto}.dropzone-icon path{stroke-linecap:round;stroke-linejoin:round}.dropzone-title{margin:12px 0 4px;font-size:17px;font-weight:600}.dropzone-sub{color:var(--muted);margin:0;font-size:14px}.privacy-note{text-align:center;color:var(--muted);margin:0;font-size:13px}.format-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}.format-bar .select-field{flex-direction:row;justify-content:space-between;align-items:center;gap:12px}.format-bar .select-field span{white-space:nowrap}.format-bar select{width:auto;min-width:140px}.mgmt-toolbar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;display:flex}#select-all{padding:8px 12px;font-size:14px}.selection-count{margin-left:auto;font-size:14px}.toolbar-actions{gap:8px;width:100%;display:flex}.toolbar-actions button{flex:1 1 0;padding:8px 10px;font-size:14px}.thumb-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.thumb-card,.page-add{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);-webkit-user-select:none;user-select:none;flex-direction:column;gap:8px;padding:8px;display:flex;position:relative}.thumb-card{cursor:grab}.thumb-card.selected{border-color:var(--primary);background:#eff6ff}.thumb-card.dragging{opacity:.4}.thumb-card.drop-target{border-color:var(--primary);border-style:dashed}.thumb-check{width:22px;height:22px;accent-color:var(--primary);cursor:pointer;z-index:2;position:absolute;top:8px;left:8px}.thumb-image{background:#f1f5f9;border-radius:4px;justify-content:center;align-items:center;min-height:140px;display:flex;overflow:hidden}.thumb-image img{max-width:100%;max-height:200px;display:block}.thumb-zoom{border-radius:var(--radius);width:32px;height:32px;color:var(--muted);cursor:pointer;z-index:3;background:#ffffffe6;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:6px;right:6px}.thumb-zoom:hover{color:var(--primary);background:#fff}.thumb-zoom svg{stroke-width:2px;width:18px;height:18px}.thumb-footer{justify-content:space-between;align-items:center;gap:6px;display:flex}.thumb-num{color:var(--muted);font-size:13px}.thumb-actions{gap:2px;display:flex}.thumb-actions button{background:0 0;border:none;min-width:36px;min-height:36px;padding:4px 8px;font-size:15px;line-height:1.3}.thumb-actions button:hover{border-radius:var(--radius);background:#e2e8f0}.page-add{cursor:pointer}.page-add-area{min-height:140px;color:var(--muted);border:2px dashed #cbd5e1;border-radius:4px;flex:1;justify-content:center;align-items:center;transition:border-color .15s,background .15s,color .15s;display:flex}.page-add:hover .page-add-area,.page-add.dragover .page-add-area{border-color:var(--primary);color:var(--primary);background:#eff6ff}.page-add-area svg{stroke-width:1.5px;width:28px;height:28px}.page-drop{opacity:0;pointer-events:none;z-index:5;border:2px dashed #0000;border-radius:6px;width:10px;transition:opacity .12s,border-color .12s,background .12s;position:absolute;top:6px;bottom:6px}.page-drop-before{left:-11px}.page-drop-after{right:-11px}.thumb-grid.drag-active .page-drop{opacity:1;pointer-events:auto;border-color:#e2e8f0}.thumb-grid.drag-active .page-drop.drop-marker{border-color:var(--primary);background:#eff6ff}.thumb-card.dragging .page-drop{opacity:0;pointer-events:none}.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:14px;padding:14px;display:flex}.setting-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.setting-row select{width:auto;min-width:140px}.dpi-info{margin:0;font-size:13px;font-style:italic}.ocr-action{flex-direction:column;gap:8px;display:flex}.ocr-action p{margin:0;font-size:14px}.progress{background:#e2e8f0;border-radius:999px;width:100%;height:10px;overflow:hidden}.progress-bar{background:var(--primary);border-radius:999px;width:0;height:100%;transition:width .2s}.status-text{color:var(--muted);min-height:1.4em;margin:0}.ocr-warnings{text-align:left;border-radius:var(--radius);background:#fffbeb;border:1px solid #fde68a;max-height:160px;padding:10px 12px;font-size:13px;overflow:auto}.ocr-warnings p{margin:6px 0}.ocr-warnings .warn-error{color:var(--danger)}.ocr-controls{gap:10px;display:flex}.ocr-controls button{flex:1}.export-form,.export-form label{margin:0}.export-suffix-row{margin-top:10px}.export-options{flex-direction:column;gap:16px;display:flex}.export-option-card{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);border-radius:12px;flex-direction:column;gap:14px;padding:16px;display:flex}.option-header h3{margin:0 0 4px;font-size:16px}.option-header .muted{margin:0;font-size:14px}.reduce-panel{border-top:1px solid var(--border);flex-direction:column;gap:12px;padding-top:12px;display:flex}.reduce-panel[hidden]{display:none}.reduced-status{min-height:1.4em;margin:0;font-size:14px}.reduced-status[hidden]{display:none}.restart{width:100%;margin-top:8px}.modal-backdrop{z-index:100;background:#0f172a73;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--surface);width:100%;max-width:640px;max-height:85vh;box-shadow:var(--shadow-lg);border-radius:12px;padding:20px;overflow:auto}.modal h3{margin-top:0}.modal-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px;display:flex}.modal-actions button{flex:auto}.modal-wide{max-width:960px}.modal .thumb-grid{grid-template-columns:repeat(2,1fr)}.visually-hidden{opacity:0;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.preview-image{max-width:100%;max-height:70vh;margin:0 auto;display:block}.preview-modal{flex-direction:column;padding:0;display:flex;position:relative;overflow:hidden}.preview-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.preview-header h3{margin:0;font-size:16px}.preview-body{background:#f8fafc;flex:1;justify-content:center;align-items:center;min-height:200px;padding:16px;display:flex;overflow:auto}.preview-body img{max-width:100%;max-height:70vh;box-shadow:var(--shadow);display:block}.preview-nav{border-top:1px solid var(--border);justify-content:center;align-items:center;gap:16px;padding:12px 16px;display:flex}.preview-nav button{min-width:100px}.preview-nav button:disabled{opacity:.4;cursor:default}.preview-close{width:36px;height:36px;color:var(--muted);cursor:pointer;z-index:2;background:#ffffffe6;border:none;border-radius:999px;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:10px;right:10px}.preview-close:hover{color:var(--text);background:#fff}.preview-close svg{stroke-width:2px;width:18px;height:18px}@media (min-width:640px){body{font-size:15px}.app-header{padding:14px 24px}.brand{font-size:20px}main{padding:24px}.screen{gap:20px;min-height:calc(100vh - 102px)}.screen-header h2{font-size:24px}.dropzone{padding:64px 32px}.dropzone-icon{width:60px;height:60px}.dropzone-title{font-size:19px}.thumb-grid{grid-template-columns:repeat(3,1fr)}.toolbar-actions{width:auto;margin-left:auto}.toolbar-actions button{flex:none}.sticky-actions{box-shadow:none;background:0 0;border-top:none;flex-direction:row;justify-content:flex-end;margin-left:0;margin-right:0;padding-left:0;padding-right:0}.action-main,.action-secondary{width:auto}.action-main{order:2}.action-secondary{order:1}.ocr-controls{justify-content:center}.ocr-controls button{flex:0 auto;min-width:140px}.export-options{flex-direction:row}.export-option-card{flex:1}.modal{padding:24px}.modal-actions button{flex:0 auto}.modal .thumb-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}@media (min-width:900px){.thumb-grid{grid-template-columns:repeat(4,1fr)}}@media (min-width:1100px){.thumb-grid{grid-template-columns:repeat(5,1fr)}}@media (max-width:639px){.sticky-actions{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}