*{margin:0;padding:0;box-sizing:border-box}.app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;text-align:center;box-shadow:0 2px 20px #0000001a}.app-header h1{color:#2d3748;font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.app-header p{color:#4a5568;font-size:1.1rem;max-width:600px;margin:0 auto}.app-main{max-width:1200px;margin:0 auto;padding:2rem}.upload-section{margin-bottom:3rem}.upload-section h2{color:#fff;font-size:1.5rem;margin-bottom:1rem;text-align:center}.upload-area{border:3px dashed rgba(255,255,255,.3);border-radius:12px;padding:3rem;text-align:center;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.upload-area:hover{border-color:#fff9;background:#ffffff26}.upload-area.drag-over{border-color:#4caf50;border-width:4px;background:#4caf5033;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);transform:scale(1.02);box-shadow:0 8px 32px #4caf504d}.upload-area.drag-over .upload-content{color:#4caf50;font-weight:600}.upload-area.drag-over .upload-icon{animation:bounce .6s ease-in-out infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-10px)}}.file-input{display:none}.upload-label{cursor:pointer;display:block;width:100%}.upload-content{display:flex;flex-direction:column;align-items:center;gap:1rem;color:#fff;transition:all .3s ease}.upload-icon{font-size:3rem;transition:all .3s ease}.upload-content span{font-size:1.2rem;font-weight:500}.upload-content small{font-size:.9rem;opacity:.8}.files-section{margin-bottom:3rem}.files-section h2{color:#fff;font-size:1.5rem;margin-bottom:1rem;text-align:center}.reorder-hint{color:#fffc;text-align:center;margin-bottom:1.5rem;font-size:.9rem;font-style:italic}.handle-icon{display:inline-block;background:#000000b3;color:#fff;padding:2px 4px;border-radius:4px;font-size:.8rem;font-weight:700;letter-spacing:-1px;margin:0 2px;font-style:normal}.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}.file-item{background:#fffffff2;border-radius:12px;padding:1rem;box-shadow:0 4px 20px #0000001a;transition:transform .2s ease,box-shadow .2s ease;cursor:grab}.file-item:hover{transform:translateY(-4px);box-shadow:0 8px 30px #00000026}.file-item.dragging{opacity:.8;transform:rotate(5deg) scale(1.05);box-shadow:0 10px 40px #0000004d;z-index:1000;cursor:grabbing}.file-preview{position:relative;margin-bottom:1rem}.file-preview img{width:100%;object-fit:cover;border-radius:8px}.file-preview.portrait img,.file-preview.portrait .converting-placeholder,.file-preview.portrait .processing-placeholder,.file-preview.portrait .error-placeholder{height:200px}.file-preview.landscape img,.file-preview.landscape .converting-placeholder,.file-preview.landscape .processing-placeholder,.file-preview.landscape .error-placeholder{height:130px}.converting-placeholder,.processing-placeholder,.error-placeholder{width:100%;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f8f9fa;border-radius:8px;gap:.5rem;color:#6c757d;font-size:.9rem}.processing-placeholder{background:linear-gradient(45deg,#e8f5e8 25%,transparent 25%),linear-gradient(-45deg,#e8f5e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8f5e8 75%),linear-gradient(-45deg,transparent 75%,#e8f5e8 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;animation:shimmer 2s linear infinite;color:#2d5a2d}.converting-placeholder{background:linear-gradient(45deg,#e3f2fd 25%,transparent 25%),linear-gradient(-45deg,#e3f2fd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3f2fd 75%),linear-gradient(-45deg,transparent 75%,#e3f2fd 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;animation:shimmer 2s linear infinite}@keyframes shimmer{0%{background-position:0 0,0 10px,10px -10px,-10px 0px}to{background-position:20px 20px,20px 30px,30px 10px,10px 20px}}.spinner{width:24px;height:24px;border:3px solid #e3f2fd;border-top:3px solid #2196f3;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-placeholder{background:#ffebee;color:#c62828}.error-placeholder span:first-child{font-size:2rem}.error-message{font-size:.8rem;text-align:center;max-width:180px;line-height:1.3;margin-top:.5rem;padding:.5rem;background:#c628281a;border-radius:4px;border:1px solid rgba(198,40,40,.2)}.remove-file{position:absolute;top:8px;right:8px;background:#ef4444e6;color:#fff;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .2s ease;z-index:10}.remove-file:hover{background:#ef4444}.drag-handle{position:absolute;top:8px;left:8px;background:#000000b3;color:#fff;border:none;border-radius:6px;width:30px;height:30px;cursor:grab;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;font-weight:700;letter-spacing:-2px;z-index:10}.drag-handle:hover{background:#000000e6;transform:scale(1.1)}.drag-handle:active{cursor:grabbing}.processed-badge{position:absolute;bottom:8px;left:8px;background:#059669e6;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:default;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:10;box-shadow:0 2px 8px #0596694d}.file-item.processed{border:2px solid rgba(5,150,105,.3)}.file-controls{display:flex;justify-content:center;padding:.5rem 0;margin-bottom:.5rem;border-bottom:1px solid rgba(0,0,0,.1)}.rotate-button{background:#6366f11a;border:1px solid rgba(99,102,241,.3);border-radius:8px;padding:.5rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:#6366f1;width:32px;height:32px}.rotate-button:hover{background:#6366f133;border-color:#6366f180;transform:translateY(-2px);box-shadow:0 4px 12px #6366f133}.rotate-button:active{transform:translateY(0);box-shadow:0 2px 6px #6366f133}.rotate-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.rotate-button svg{transition:transform .2s ease}.rotate-button:hover svg{transform:rotate(90deg)}.file-info{display:flex;flex-direction:column;gap:.5rem}.file-name{font-weight:500;color:#2d3748;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-order{font-size:.8rem;color:#4a5568;font-weight:500}.file-status{font-size:.7rem;color:#059669;font-weight:500;background:#0596691a;padding:2px 6px;border-radius:4px;align-self:flex-start}.processed-status{font-size:.7rem;color:#7c3aed;font-weight:500;background:#7c3aed1a;padding:2px 6px;border-radius:4px;align-self:flex-start}.options-section{margin-bottom:3rem}.options-section h2{color:#fff;font-size:1.5rem;margin-bottom:1.5rem;text-align:center}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.option-item{display:flex;align-items:flex-start;gap:1rem;background:#fffffff2;padding:1.5rem;border-radius:12px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 20px #0000001a}.option-item:hover{background:#fff;transform:translateY(-2px)}.option-item.disabled{opacity:.5;cursor:not-allowed}.option-item.disabled:hover{background:transparent;transform:none}.coming-soon{background:#ffc10733;color:#ffc107;font-size:.7rem;padding:2px 6px;border-radius:12px;margin-left:8px;font-weight:400}.option-item input[type=checkbox]{width:20px;height:20px;margin-top:2px;cursor:pointer;accent-color:#667eea}.option-content{display:flex;flex-direction:column;gap:.5rem}.option-content strong{color:#2d3748;font-size:1rem}.option-content span{color:#4a5568;font-size:.9rem;line-height:1.4}.process-section{text-align:center}.process-button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:1rem 3rem;font-size:1.2rem;font-weight:600;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #4caf504d}.process-button:hover{background:linear-gradient(135deg,#45a049,#4caf50);transform:translateY(-2px);box-shadow:0 6px 25px #4caf5066}.process-button:active{transform:translateY(0)}.process-button.processing{background:linear-gradient(135deg,#6366f1,#8b5cf6);cursor:not-allowed;animation:pulse 2s ease-in-out infinite alternate}@keyframes pulse{0%{box-shadow:0 4px 20px #6366f14d}to{box-shadow:0 6px 25px #6366f180}}.process-button:disabled{opacity:.7;cursor:not-allowed}.download-pdf-btn{display:inline-block;margin:2rem auto 1rem;padding:.75rem 2.5rem;background:#2563eb;color:#fff;font-size:1.2rem;font-weight:600;border:none;border-radius:8px;box-shadow:0 2px 8px #2563eb14;cursor:pointer;text-align:center;text-decoration:none;transition:background .2s,box-shadow .2s}.download-pdf-btn:hover{background:#1d4ed8;box-shadow:0 4px 16px #2563eb26}.pdf-section{display:flex;flex-direction:column;align-items:center;margin-top:2rem}.pdf-viewer{width:100%;max-width:800px;margin:0 auto}@media (max-width: 768px){.app-main{padding:1rem}.app-header{padding:1.5rem}.app-header h1{font-size:2rem}.upload-area{padding:2rem 1rem}.files-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.options-grid{grid-template-columns:1fr}.option-item{padding:1rem}.drag-handle{width:25px;height:25px;font-size:10px}.remove-file{width:25px;height:25px;font-size:12px}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}