*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:2rem}.container{max-width:1400px;margin:0 auto}header{text-align:center;color:#fff;margin-bottom:3rem}header h1{font-size:2.5rem;margin-bottom:.5rem;font-weight:700}.subtitle{font-size:1.1rem;opacity:.9}main{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 20px 60px #0000004d}.upload-section{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}.file-upload-zone{border:3px dashed #cbd5e0;border-radius:12px;padding:2rem;text-align:center;cursor:pointer;transition:all .3s;background:#f7fafc}.file-upload-zone:hover,.file-upload-zone.drag-over{border-color:#667eea;background:#edf2f7}.file-upload-zone input[type=file]{display:none}.upload-icon{font-size:3rem;margin-bottom:1rem}.upload-text{font-size:1.1rem;color:#4a5568;margin-bottom:.5rem}.upload-hint{font-size:.9rem;color:#718096}.html-editor{display:flex;flex-direction:column}.html-editor textarea{flex:1;padding:1rem;border:2px solid #cbd5e0;border-radius:8px;font-family:Monaco,Courier New,monospace;font-size:.9rem;resize:vertical;min-height:200px;margin-bottom:1rem}.html-editor textarea:focus{outline:none;border-color:#667eea}.html-editor button{align-self:flex-end;padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.html-editor button:hover{background:#5a67d8}.preview-section{margin-top:2rem;padding-top:2rem;border-top:2px solid #e2e8f0;display:grid;grid-template-columns:350px 1fr;gap:2rem}.preview-sidebar{display:flex;flex-direction:column;gap:1rem}.preview-sidebar h3{margin:0;font-size:1.1rem;color:#2d3748}.preview-main{display:flex;flex-direction:column;gap:1rem}.preview-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.navigation{display:flex;flex-direction:column;gap:1rem}.nav-buttons{display:flex;gap:.5rem;width:100%}.nav-buttons button{flex:1}.nav-button{padding:.75rem 1.5rem;background:#edf2f7;border:1px solid #cbd5e0;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s;white-space:nowrap;font-size:.95rem}.nav-button:hover:not(:disabled){background:#e2e8f0}.nav-button:disabled{opacity:.5;cursor:not-allowed}.file-counter{color:#2d3748;font-size:1.1rem;font-weight:600;text-align:center;margin-top:16px;padding:.5rem;background:#f7fafc;border-radius:6px;border:1px solid #e2e8f0}.download-buttons{display:flex;gap:.5rem}.btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s;font-size:.95rem}.btn-primary{background:#48bb78;color:#fff}.btn-primary:hover:not(:disabled){background:#38a169}.btn-secondary{background:#667eea;color:#fff}.btn-secondary:hover:not(:disabled){background:#5a67d8}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-loading{position:relative;pointer-events:none}.btn-loading:after{content:"";position:absolute;width:16px;height:16px;top:50%;left:50%;margin-left:-8px;margin-top:-8px;border:2px solid #ffffff;border-radius:50%;border-top-color:transparent;animation:spinner .6s linear infinite}@keyframes spinner{to{transform:rotate(360deg)}}.preview-container{position:relative;background:#f7fafc;border-radius:8px;padding:1rem;height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-status{text-align:center;color:#718096;font-style:italic}.preview-iframe{width:100%;height:100%;border:2px solid #cbd5e0;border-radius:8px;background:#fff}.preview-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 4px 6px #0000001a}.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;max-height:500px;overflow-y:auto;padding-right:.5rem}.file-grid::-webkit-scrollbar{width:8px}.file-grid::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.file-grid::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.file-grid::-webkit-scrollbar-thumb:hover{background:#a0aec0}.file-card{display:flex;flex-direction:column;border:2px solid #e2e8f0;border-radius:8px;padding:.5rem;cursor:pointer;transition:all .2s;position:relative;background:#fff}.file-card:hover{border-color:#667eea;box-shadow:0 2px 8px #667eea33}.file-card.active{border-color:#667eea;background:#edf2f7}.file-card-thumbnail{width:100%;aspect-ratio:1;object-fit:cover;background:#f7fafc;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:.5rem}.file-card-info{flex:1;min-width:0}.file-card-name{font-size:.8rem;font-weight:500;color:#2d3748;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.25rem}.file-card-status{font-size:.75rem;color:#718096;display:flex;align-items:center;gap:.25rem;white-space:nowrap}.file-card-delete{position:absolute;top:.25rem;right:.25rem;background:#f56565;color:#fff;border:none;border-radius:4px;width:24px;height:24px;cursor:pointer;font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0}.file-card:hover .file-card-delete{opacity:1}.file-card-delete:hover{background:#e53e3e}@media (max-width: 768px){.upload-section,.preview-section{grid-template-columns:1fr}.preview-sidebar{max-height:300px}.file-grid{max-height:250px}.preview-header{flex-direction:column;align-items:stretch}.download-buttons{flex-direction:column}.preview-container{height:400px}}