*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #faf8f5;--color-surface: #ffffff;--color-surface-elevated: #fefefe;--color-text-primary: #1a1614;--color-text-secondary: #6b6560;--color-text-tertiary: #9c9691;--color-border: #e8e4df;--color-border-subtle: #f2eeea;--color-accent: #d97706;--color-accent-hover: #b45309;--color-accent-light: #fef3c7;--color-success: #059669;--color-success-light: #d1fae5;--color-error: #dc2626;--color-error-light: #fee2e2;--shadow-sm: 0 1px 2px rgba(26, 22, 20, .04);--shadow-md: 0 4px 8px rgba(26, 22, 20, .06), 0 1px 3px rgba(26, 22, 20, .04);--shadow-lg: 0 12px 24px rgba(26, 22, 20, .08), 0 4px 8px rgba(26, 22, 20, .04);--shadow-xl: 0 24px 48px rgba(26, 22, 20, .12), 0 8px 16px rgba(26, 22, 20, .06);--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Monaco, "Courier New", monospace;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1)}body{font-family:var(--font-system);background:var(--color-bg);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;position:relative}.grain{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.03;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100%" height="100%" filter="url(%23noise)" /></svg>');z-index:9999;animation:grain 8s steps(10) infinite}@keyframes grain{0%,to{transform:translate(0)}10%{transform:translate(-5%,-10%)}20%{transform:translate(-15%,5%)}30%{transform:translate(7%,-25%)}40%{transform:translate(-5%,25%)}50%{transform:translate(-15%,10%)}60%{transform:translate(15%)}70%{transform:translateY(15%)}80%{transform:translate(3%,35%)}90%{transform:translate(-10%,10%)}}.container{max-width:900px;margin:0 auto;padding:var(--space-xl) var(--space-lg)}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--space-lg);margin-bottom:var(--space-lg);border-bottom:1px solid var(--color-border-subtle);gap:var(--space-xl)}.header-brand{display:flex;flex-direction:column;gap:2px}.title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--color-text-primary);line-height:1.2}.subtitle{font-size:.875rem;color:var(--color-text-secondary);font-weight:400}.privacy-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--color-accent-light);border:1px solid #fde68a;border-radius:var(--radius-sm);color:var(--color-accent-hover);font-size:.8125rem;font-weight:600;white-space:nowrap;flex-shrink:0}.privacy-badge svg{color:var(--color-accent);flex-shrink:0}.main{display:flex;flex-direction:column;gap:var(--space-xl)}.upload-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2xl);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-3xl) var(--space-xl);text-align:center;cursor:pointer;transition:all var(--transition-base);background:var(--color-bg)}.drop-zone:hover{border-color:var(--color-accent);background:var(--color-accent-light);transform:translateY(-2px)}.drop-zone.drag-over{border-color:var(--color-accent);background:var(--color-accent-light);border-style:solid;transform:scale(1.02)}.drop-zone-icon{margin-bottom:var(--space-lg);color:var(--color-text-tertiary);transition:all var(--transition-base)}.drop-zone:hover .drop-zone-icon{color:var(--color-accent);transform:translateY(-4px)}.drop-zone-title{font-size:1.5rem;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-xs);letter-spacing:-.02em}.drop-zone-subtitle{font-size:1rem;color:var(--color-text-secondary);margin-bottom:var(--space-xl)}.file-info{margin-top:var(--space-xl);padding:var(--space-lg);background:var(--color-bg);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-lg)}.file-info-item{display:flex;flex-direction:column;gap:var(--space-xs)}.file-info-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);font-weight:600}.file-info-value{font-size:.9375rem;color:var(--color-text-primary);font-weight:500;font-family:var(--font-mono)}.editor-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2xl);box-shadow:var(--shadow-md);animation:slideUp .6s var(--transition-slow)}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.editor-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-2xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--color-border-subtle);gap:var(--space-lg)}.editor-title{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;color:var(--color-text-primary);margin-bottom:var(--space-xs)}.editor-subtitle{font-size:.9375rem;color:var(--color-text-secondary)}.editor-actions{display:flex;gap:var(--space-sm);flex-shrink:0}.metadata-form{margin-bottom:var(--space-2xl)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-xl)}.form-group{display:flex;flex-direction:column;gap:var(--space-sm)}.form-label{font-size:.875rem;font-weight:600;color:var(--color-text-primary);letter-spacing:-.01em}.input-wrapper{display:flex;gap:var(--space-sm);align-items:center;position:relative}.input-wrapper.modified:before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:4px;background:var(--color-accent);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:translateY(-50%) scale(1)}50%{opacity:.5;transform:translateY(-50%) scale(1.2)}}.form-input{flex:1;padding:var(--space-sm) var(--space-md);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:.9375rem;font-family:var(--font-system);color:var(--color-text-primary);background:var(--color-surface);transition:all var(--transition-base)}.form-input::placeholder{color:var(--color-text-tertiary)}.form-input:hover{border-color:var(--color-text-tertiary)}.form-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-light)}.input-wrapper.modified .form-input{border-color:var(--color-accent);background:var(--color-accent-light)}.button-primary,.button-secondary,.button-text{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-sm);font-size:.9375rem;font-weight:600;font-family:var(--font-system);cursor:pointer;transition:all var(--transition-base);border:none;white-space:nowrap}.button-primary{background:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm)}.button-primary:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.button-primary:active{transform:translateY(0)}.button-secondary{background:var(--color-surface);color:var(--color-text-primary);border:1.5px solid var(--color-border)}.button-secondary:hover{background:var(--color-bg);border-color:var(--color-text-secondary)}.button-text{background:transparent;color:var(--color-text-secondary);padding:var(--space-sm) var(--space-md)}.button-text:hover{color:var(--color-accent);background:var(--color-accent-light)}.reset-field{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-tertiary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.reset-field:hover{background:var(--color-bg);border-color:var(--color-accent);color:var(--color-accent);transform:rotate(-90deg)}.files-status{background:var(--color-bg);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-lg)}.files-status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.files-count{font-size:.8125rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.files-list{display:flex;flex-direction:column;gap:var(--space-sm)}.file-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background:var(--color-bg);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);transition:all var(--transition-base)}.file-item:hover{background:var(--color-surface);border-color:var(--color-border);transform:translate(2px)}.file-item-info{display:flex;align-items:center;gap:var(--space-md);flex:1;min-width:0}.file-item-icon{color:var(--color-accent);flex-shrink:0}.file-item-details{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.file-item-name{font-size:.9375rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.file-item-size{font-size:.75rem;color:var(--color-text-tertiary);font-family:var(--font-mono)}.file-item-remove{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text-tertiary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.file-item-remove:hover{background:var(--color-error-light);color:var(--color-error);transform:scale(1.1)}.tabs-nav{position:relative;display:flex;gap:4px;background:var(--color-bg);padding:4px;border-radius:var(--radius-md);margin-bottom:var(--space-md);border:1px solid var(--color-border-subtle)}.tabs-slider{position:absolute;bottom:4px;left:4px;height:calc(100% - 8px);background:var(--color-accent);border-radius:calc(var(--radius-md) - 2px);transition:all .2s cubic-bezier(.4,0,.2,1);z-index:0}.tab-button{flex:1;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border:none;background:transparent;color:var(--color-text-secondary);font-size:.875rem;font-weight:600;font-family:var(--font-system);border-radius:calc(var(--radius-md) - 2px);cursor:pointer;transition:color var(--transition-fast);white-space:nowrap}.tab-button:hover{color:var(--color-text-primary)}.tab-button.active{color:#fff}.tab-button svg{flex-shrink:0}.tabs-content{position:relative}.tab-pane{display:none}.tab-pane.active{display:block}.tab-header{margin-bottom:var(--space-xl)}.tab-title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--color-text-primary);margin-bottom:var(--space-xs)}.tab-subtitle{font-size:.875rem;color:var(--color-text-secondary)}.operations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-lg);margin-bottom:var(--space-xl)}.operation-card{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-xl);transition:all var(--transition-base);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-md)}.operation-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md);transform:translateY(-4px)}.operation-card:active{transform:translateY(-2px)}.operation-card.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.operation-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-accent-light);color:var(--color-accent);border-radius:var(--radius-sm);transition:all var(--transition-base)}.operation-card:hover .operation-icon{background:var(--color-accent);color:#fff;transform:scale(1.1)}.operation-title{font-size:1.125rem;font-weight:700;color:var(--color-text-primary);letter-spacing:-.01em}.operation-description{font-size:.875rem;color:var(--color-text-secondary);line-height:1.5}.file-select{width:100%;padding:var(--space-sm) var(--space-md);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:.9375rem;font-family:var(--font-system);color:var(--color-text-primary);background:var(--color-surface);cursor:pointer;transition:all var(--transition-base)}.file-select:hover{border-color:var(--color-text-tertiary)}.file-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-light)}.download-section{padding-top:var(--space-2xl);border-top:1px solid var(--color-border-subtle);text-align:center}.button-large{padding:var(--space-md) var(--space-2xl);font-size:1.0625rem}.button-block{width:100%;justify-content:center}.loading{position:fixed;inset:0;background:#1a161499;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);z-index:1000;animation:fadeIn .3s var(--transition-fast)}.spinner{width:48px;height:48px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:#fff;font-size:1rem;font-weight:500}.error-overlay,.modal-overlay{position:fixed;inset:0;background:#1a161499;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1001;padding:var(--space-lg);animation:fadeIn .3s var(--transition-fast)}.error-content,.modal-content{background:var(--color-surface);padding:var(--space-2xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:480px;width:100%;animation:scaleIn .4s var(--transition-slow)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.modal-title{font-size:1.25rem;font-weight:700;color:var(--color-text-primary);letter-spacing:-.01em}.modal-close{background:transparent;border:none;color:var(--color-text-tertiary);cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-sm);transition:all var(--transition-base)}.modal-close:hover{background:var(--color-bg);color:var(--color-text-primary)}.modal-body{margin-bottom:var(--space-xl)}.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-md)}.toast-container{position:fixed;bottom:var(--space-xl);right:var(--space-xl);z-index:2000;display:flex;flex-direction:column;gap:var(--space-md);pointer-events:none}.toast{pointer-events:auto;min-width:300px;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);animation:slideInRight .3s var(--transition-base);border-left:4px solid var(--color-text-secondary)}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-success{border-left-color:var(--color-success)}.toast-error{border-left-color:var(--color-error)}.toast-info{border-left-color:var(--color-accent)}.toast-warning{border-left-color:#f59e0b}.toast-content{font-size:.9375rem;font-weight:500;color:var(--color-text-primary)}.toast-close{background:transparent;border:none;color:var(--color-text-tertiary);cursor:pointer;font-size:1.25rem;line-height:1;padding:0 var(--space-xs);transition:color var(--transition-fast)}.toast-close:hover{color:var(--color-text-primary)}.pages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:var(--space-md);padding:var(--space-xs)}.page-sort-item{position:relative;cursor:grab;transition:transform .2s,box-shadow .2s}.page-sort-item:hover{transform:translateY(-2px);z-index:5}.page-number-badge{position:absolute;bottom:4px;right:4px;background:#0009;color:#fff;font-size:.75rem;padding:2px 6px;border-radius:4px;font-weight:500}.thumbnail-container canvas{display:block;box-shadow:var(--shadow-sm);transition:box-shadow .2s}.page-sort-item:hover canvas{box-shadow:var(--shadow-md)}.error-icon{margin-bottom:var(--space-lg);color:var(--color-error)}.error-text{color:var(--color-text-primary);font-size:1rem;margin-bottom:var(--space-xl);line-height:1.6}.success-overlay{position:fixed;inset:0;background:#1a161499;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1002;padding:var(--space-lg);animation:fadeIn .3s var(--transition-fast)}.success-content{background:var(--color-surface);padding:var(--space-2xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:480px;width:100%;text-align:center;animation:successPop .5s var(--transition-slow)}@keyframes successPop{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.success-icon{margin-bottom:var(--space-lg);color:var(--color-success);animation:checkmarkDraw .6s var(--transition-slow) .2s both}@keyframes checkmarkDraw{0%{opacity:0;transform:scale(0) rotate(-45deg)}50%{transform:scale(1.1) rotate(5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.success-title{font-size:1.75rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-sm);letter-spacing:-.02em}.success-message{font-size:1rem;color:var(--color-text-secondary);margin-bottom:var(--space-2xl);line-height:1.6}.success-actions{display:flex;flex-direction:column;gap:var(--space-md);align-items:center}.footer{margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:1px solid var(--color-border);animation:fadeIn 1s var(--transition-slow) .4s both}.footer-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-lg)}.footer-link{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);color:var(--color-text-secondary);text-decoration:none;font-size:.9375rem;font-weight:500;border-radius:var(--radius-sm);transition:all var(--transition-base)}.footer-link:hover{color:var(--color-accent);background:var(--color-accent-light)}.footer-link svg{transition:transform var(--transition-base)}.footer-link:hover svg{transform:translateY(-2px)}.coffee-button{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);background:var(--color-accent);color:#fff;text-decoration:none;font-size:1rem;font-weight:600;border-radius:100px;box-shadow:var(--shadow-md);transition:all var(--transition-base)}.coffee-button:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.coffee-button svg{transition:transform var(--transition-base)}.coffee-button:hover svg{transform:rotate(-10deg) scale(1.1)}.footer-credit{font-size:.875rem;color:var(--color-text-tertiary);text-align:center}.hidden{display:none!important}@media(max-width:768px){.container{padding:var(--space-lg) var(--space-md)}.header{flex-direction:column;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-md)}.privacy-badge{align-self:stretch;justify-content:center}.upload-section,.editor-section{padding:var(--space-xl)}.drop-zone{padding:var(--space-xl) var(--space-lg)}.editor-header{flex-direction:column;align-items:flex-start}.editor-actions{width:100%;flex-direction:column}.editor-actions .button-primary,.editor-actions .button-secondary{width:100%;justify-content:center}.form-grid{grid-template-columns:1fr;gap:var(--space-lg)}.tabs-nav{gap:4px;padding:4px}.tab-button{padding:var(--space-sm) var(--space-md);font-size:.875rem}.operations-grid{grid-template-columns:1fr;gap:var(--space-md)}.operation-card{padding:var(--space-lg)}.files-status{padding:var(--space-md)}.file-item{padding:var(--space-sm)}.footer-links{flex-direction:column;align-items:center;gap:var(--space-sm)}}@media(max-width:480px){.privacy-badge{font-size:.75rem;padding:var(--space-xs) var(--space-md)}.drop-zone-title{font-size:1.25rem}.editor-title{font-size:1.5rem}}@media print{.grain,.footer,.privacy-badge,.upload-new{display:none}body{background:#fff}.container{max-width:100%}}