*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f9fafb;color:#1f2937}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.header{text-align:center;margin-bottom:2rem;padding:2rem 0}.header-icon{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;background-color:#dbeafe;border-radius:50%;margin-bottom:1rem}.header-title{font-size:2rem;font-weight:700;color:#1f2937;margin-bottom:.5rem}.header-subtitle{color:#6b7280;max-width:32rem;margin:0 auto}.search-container{text-align:center;margin-bottom:1.5rem}.search-form{max-width:32rem;margin:0 auto}.search-input-container{position:relative;display:flex}.search-input{width:100%;padding:.75rem 3rem .75rem 2.5rem;border:1px solid #d1d5db;border-radius:.5rem;font-size:1rem;outline:none;transition:border-color .2s,box-shadow .2s}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.search-button{position:absolute;right:0;top:0;bottom:0;padding:0 1rem;background-color:#2563eb;color:#fff;border:none;border-radius:0 .5rem .5rem 0;cursor:pointer;transition:background-color .2s}.search-button:hover:not(:disabled){background-color:#1d4ed8}.search-button:disabled{background-color:#9ca3af;cursor:not-allowed}.book-info{background:white;border-radius:.5rem;box-shadow:0 1px 3px #0000001a;padding:1.5rem;max-width:32rem;margin:0 auto 1.5rem}.book-info-content{display:flex;align-items:flex-start;gap:1.5rem}.book-cover-container{flex-shrink:0}.book-cover{width:6rem;height:8rem;object-fit:cover;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #e5e7eb;transition:transform .2s ease}.book-cover:hover{transform:scale(1.05)}.book-cover-placeholder{width:6rem;height:8rem;background-color:#f3f4f6;border:2px dashed #d1d5db;border-radius:.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9ca3af;font-size:.75rem;text-align:center;gap:.5rem}.book-details-container{flex:1;min-width:0}.book-title{font-size:1.25rem;font-weight:600;color:#1f2937;margin-bottom:.75rem;line-height:1.4}.book-meta{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem;color:#6b7280;margin-bottom:1rem}.book-meta-item{display:flex;align-items:center;gap:.5rem}.page-range-selector{background:white;border-radius:.75rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:1.5rem;max-width:40rem;margin:0 auto 1.5rem;border:1px solid #e5e7eb}.range-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #f3f4f6}.range-header h3{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0}.total-pages{margin-left:auto;font-size:.875rem;color:#6b7280;background:#f3f4f6;padding:.25rem .75rem;border-radius:1rem}.range-options{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.range-option{display:flex;align-items:center;padding:1rem;border:2px solid #e5e7eb;border-radius:.5rem;cursor:pointer;transition:all .2s;background:white}.range-option:hover{border-color:#3b82f6;background:#f8fafc}.range-option input[type=radio]{margin-right:1rem;width:1.25rem;height:1.25rem;accent-color:#3b82f6}.range-option input[type=radio]:checked+.option-content{color:#1f2937}.range-option:has(input[type=radio]:checked){border-color:#3b82f6;background:#eff6ff}.option-content{display:flex;align-items:center;gap:.75rem;flex:1}.option-label{display:block;font-weight:500;color:#1f2937;margin-bottom:.25rem}.option-desc{display:block;font-size:.875rem;color:#6b7280}.custom-range{background:#f8fafc;border-radius:.5rem;padding:1.5rem;margin-bottom:1.5rem}.range-inputs{display:flex;gap:1rem;margin-bottom:1rem}.input-group{flex:1}.input-group label{display:block;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.5rem}.input-group input{width:100%;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;outline:none;transition:border-color .2s,box-shadow .2s}.input-group input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.input-group input.error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.range-error{color:#ef4444;font-size:.875rem;margin-bottom:1rem;padding:.5rem;background:#fef2f2;border:1px solid #fecaca;border-radius:.375rem}.quick-ranges{margin-top:1rem}.quick-label{display:block;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.75rem}.quick-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.quick-btn{padding:.5rem 1rem;background:white;border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;color:#374151;cursor:pointer;transition:all .2s}.quick-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.quick-btn:disabled{opacity:.5;cursor:not-allowed}.range-summary{background:#f8fafc;border-radius:.5rem;padding:1rem;border:1px solid #e5e7eb}.summary-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;font-size:.875rem}.summary-item:first-child{padding-top:0}.summary-item:last-child{padding-bottom:0;border-top:1px solid #e5e7eb;margin-top:.5rem;padding-top:.5rem}.summary-value{font-weight:600;color:#1f2937}.btn-primary{background-color:#2563eb;color:#fff;font-weight:500;padding:.5rem 1rem;border:none;border-radius:.5rem;cursor:pointer;transition:background-color .2s;display:inline-flex;align-items:center;gap:.5rem}.btn-primary:hover:not(:disabled){background-color:#1d4ed8}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background-color:#e5e7eb;color:#374151;font-weight:500;padding:.5rem 1rem;border:none;border-radius:.5rem;cursor:pointer;transition:background-color .2s;display:inline-flex;align-items:center;gap:.5rem}.btn-secondary:hover{background-color:#d1d5db}.btn-danger{background-color:#ef4444;color:#fff;font-weight:500;padding:.5rem 1rem;border:none;border-radius:.5rem;cursor:pointer;transition:background-color .2s;display:inline-flex;align-items:center;gap:.5rem}.btn-danger:hover{background-color:#dc2626}.progress-container{background:white;border-radius:.75rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:2rem;max-width:40rem;margin:0 auto 1.5rem;border:1px solid #e5e7eb}.progress-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.progress-status{font-size:1.25rem;font-weight:600;margin-bottom:.25rem}.progress-message{font-size:.875rem;color:#6b7280;line-height:1.4}.progress-bar-container{margin-bottom:1.5rem}.progress-bar-header{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:#6b7280;margin-bottom:.75rem}.progress-percentage{font-weight:600;color:#1f2937}.progress-bar{width:100%;height:.75rem;background:linear-gradient(90deg,#f3f4f6 0%,#e5e7eb 100%);border-radius:1rem;overflow:hidden;position:relative;box-shadow:inset 0 1px 3px #0000001a}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#3b82f6 0%,#2563eb 50%,#1d4ed8 100%);border-radius:1rem;transition:width .6s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.progress-bar-fill:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}.progress-bar-fill.completed{background:linear-gradient(90deg,#10b981 0%,#059669 50%,#047857 100%)}.progress-bar-fill.failed{background:linear-gradient(90deg,#ef4444 0%,#dc2626 50%,#b91c1c 100%)}.progress-bar-fill.creating-pdf{background:linear-gradient(90deg,#f59e0b 0%,#d97706 50%,#b45309 100%)}@keyframes shimmer{0%{left:-100%}to{left:100%}}.progress-details{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid #f3f4f6}.progress-actions{display:flex;gap:.75rem}.progress-info{font-size:.875rem;color:#6b7280}.progress-container.downloading{border-left:4px solid #3b82f6}.progress-container.completed{border-left:4px solid #10b981}.progress-container.failed{border-left:4px solid #ef4444}.progress-container.creating-pdf{border-left:4px solid #f59e0b}.error-container{background-color:#fef2f2;border:1px solid #fecaca;border-radius:.5rem;padding:1rem;max-width:32rem;margin:0 auto 1.5rem}.error-content{display:flex;align-items:flex-start;gap:.75rem}.error-icon{color:#ef4444;flex-shrink:0;margin-top:.125rem}.error-text h3{font-size:.875rem;font-weight:500;color:#991b1b;margin-bottom:.25rem}.error-text p{font-size:.875rem;color:#7f1d1d;margin-bottom:.75rem}.spinner{width:1rem;height:1rem;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon{width:1rem;height:1rem}.icon-lg{width:1.25rem;height:1.25rem}.icon-xl{width:1.5rem;height:1.5rem}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.progress-container.completed{animation:successPulse .6s ease-in-out}.faq-section{background:white;border-radius:.75rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:2rem;max-width:48rem;margin:0 auto 1.5rem;border:1px solid #e5e7eb}.faq-header{text-align:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #f3f4f6}.faq-header h2{font-size:1.5rem;font-weight:600;color:#1f2937;margin:.5rem 0}.faq-header p{color:#6b7280;font-size:1rem;margin:0}.faq-list{display:flex;flex-direction:column;gap:.75rem}.faq-item{border:1px solid #e5e7eb;border-radius:.5rem;overflow:hidden;transition:all .2s ease}.faq-item:hover{border-color:#3b82f6;box-shadow:0 2px 4px #3b82f61a}.faq-question{width:100%;padding:1rem 1.25rem;background:#f9fafb;border:none;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:1rem;font-weight:500;color:#1f2937;transition:background-color .2s ease}.faq-question:hover{background:#f3f4f6}.faq-question:focus{outline:none;background:#eff6ff;color:#1d4ed8}.faq-answer{padding:1rem 1.25rem;background:white;border-top:1px solid #e5e7eb;color:#4b5563;line-height:1.6}.faq-answer p{margin:0;font-size:.95rem}.faq-footer{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #f3f4f6;text-align:center;color:#6b7280;font-size:.95rem}.faq-footer strong{color:#1f2937}.how-to-use-section{background:white;border-radius:.75rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:2rem;max-width:48rem;margin:0 auto 1.5rem;border:1px solid #e5e7eb}.how-to-header{text-align:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #f3f4f6}.how-to-header h2{font-size:1.5rem;font-weight:600;color:#1f2937;margin:.5rem 0}.how-to-header p{color:#6b7280;font-size:1rem;margin:0}.steps-container{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.step-item{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#f9fafb;transition:all .2s ease}.step-item:hover{border-color:#3b82f6;background:#f0f9ff;box-shadow:0 2px 4px #3b82f61a}.step-number{width:2rem;height:2rem;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;flex-shrink:0}.step-content{flex:1}.step-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.step-icon{color:#2563eb}.step-header h3{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0}.step-description{color:#4b5563;line-height:1.6;margin-bottom:.75rem}.step-tip{background:#fef3c7;border:1px solid #f59e0b;border-radius:.375rem;padding:.75rem;font-size:.875rem;color:#92400e}.features-section{margin:2rem 0;padding:1.5rem 0;border-top:1px solid #f3f4f6;border-bottom:1px solid #f3f4f6}.features-section h3{text-align:center;font-size:1.25rem;font-weight:600;color:#1f2937;margin-bottom:1.5rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.feature-item{text-align:center;padding:1rem;border:1px solid #e5e7eb;border-radius:.5rem;background:white;transition:all .2s ease}.feature-item:hover{border-color:#3b82f6;box-shadow:0 2px 4px #3b82f61a}.feature-icon{color:#2563eb;margin-bottom:.75rem}.feature-item h4{font-size:1rem;font-weight:600;color:#1f2937;margin:0 0 .5rem}.feature-item p{font-size:.875rem;color:#6b7280;margin:0;line-height:1.5}.usage-tips{margin:2rem 0}.usage-tips h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin-bottom:1rem}.usage-tips ul{list-style:none;padding:0;margin:0}.usage-tips li{padding:.5rem 0;color:#4b5563;line-height:1.6;border-bottom:1px solid #f3f4f6}.usage-tips li:last-child{border-bottom:none}.usage-tips strong{color:#1f2937}.start-now{text-align:center;padding:1.5rem;background:#eff6ff;border:1px solid #dbeafe;border-radius:.5rem;margin-top:2rem}.start-now h3{font-size:1.25rem;font-weight:600;color:#1e40af;margin:0 0 .5rem}.start-now p{color:#1e40af;margin:0;font-size:1rem}@media (max-width: 640px){.container{padding:0 .5rem}.header-title{font-size:1.5rem}.book-info-content{flex-direction:column;align-items:center;text-align:center;gap:1rem}.book-cover,.book-cover-placeholder{width:5rem;height:6.5rem}.book-title{font-size:1.125rem}.progress-container{padding:1.5rem;margin:0 .5rem 1.5rem}.progress-actions{flex-direction:column;width:100%}.progress-actions button{width:100%;justify-content:center}.range-inputs,.quick-buttons{flex-direction:column}.quick-btn{width:100%}}
