/* styles are embedded in the HTML from previous answer – kept here for completeness */
        .tool-wrapper { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; max-width: 1400px; margin: 0 auto; }
        .error-message, .quota-message { color: #d32f2f; background: #ffebee; padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; display: none; }
        .quota-message .quota-content { display: flex; align-items: center; gap: 1rem; }
        .editor-layout { display: flex; gap: 2rem; flex-wrap: wrap; }
        .preview-box { flex: 2; min-width: 280px; background: #f5f7fa; border-radius: 16px; padding: 1rem; }
        .preview-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
        .preview-title { font-weight: 600; font-size: 1.1rem; }
        .download-all-btn { background: #2e7d32; color: white; border: none; padding: 0.4rem 1rem; border-radius: 20px; cursor: pointer; }
        .preview-canvas-wrap { min-height: 300px; max-height: 70vh; overflow-y: auto; }
        .gallery-placeholder { text-align: center; padding: 3rem; color: #6c757d; }
        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
        .gallery-item { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.1); padding: 0.5rem; }
        .image-thumb { height: 140px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; }
        .thumb-img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .image-info { margin: 0.5rem 0; font-size: 0.8rem; word-break: break-all; }
        .image-name { font-weight: 500; display: block; }
        .image-size { color: #666; }
        .image-actions { text-align: center; }
        .btn-download-single { background: #0067b8; color: white; border: none; padding: 0.25rem 0.75rem; border-radius: 20px; cursor: pointer; font-size: 0.75rem; }
        .tool-settings { flex: 1; min-width: 260px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.5rem; }
        .file-box { background: #f8fafc; border-radius: 12px; padding: 0.75rem; margin-bottom: 1.5rem; }
        .file-name { font-weight: 500; }
        .file-pages, .file-size { font-size: 0.85rem; color: #475569; }
        .options-grid { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
        .option-group label { display: block; font-weight: 500; margin-bottom: 0.4rem; }
        .form-control { width: 100%; padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 8px; }
        .action-buttons { display: flex; gap: 1rem; margin-top: 1rem; }
        .action-btn, .btn-secondary { flex: 1; padding: 0.7rem; border-radius: 40px; font-weight: 600; cursor: pointer; border: none; }
        .action-btn { background: #0067b8; color: white; }
        .btn-secondary { background: #e2e8f0; color: #1e293b; }
        .processing-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; }
        .processing-spinner { width: 48px; height: 48px; border: 5px solid #fff; border-top-color: #0067b8; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 1rem; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .processing-text { color: white; font-size: 1.2rem; background: rgba(0,0,0,0.7); padding: 0.5rem 1rem; border-radius: 40px; }
        .hidden { display: none; }
        .add-file-wrapper { text-align: center; margin-top: 1rem; }
        .add-file-btn { background: #e2e8f0; border: none; padding: 0.5rem 1rem; border-radius: 30px; cursor: pointer; }