*{box-sizing: border-box} body{font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;margin: 0;padding: 0;background: #f8f9fa;line-height: 1.6} .converter-container{max-width: 1200px;margin: 0 auto;padding: 20px} .breadcrumbs{margin-bottom: 20px} .breadcrumbs ol{display: flex;list-style: none;padding: 0;margin: 0;font-size: 0.9rem} .breadcrumbs li{display: flex;align-items: center} .breadcrumbs li:not(:last-child)::after{content: "›";margin: 0 8px;color: #7f8c8d} .breadcrumbs a{color: #3498db;text-decoration: none;transition: color 0.3s ease} .breadcrumbs a:hover{color: #2980b9;text-decoration: underline} .breadcrumbs li[aria-current="page"]{color: #7f8c8d} .converter-header{text-align: center;margin-bottom: 30px;background: white;padding: 40px 30px;border-radius: 12px;box-shadow: 0 2px 10px rgba(0,0,0,0.1)} .converter-header h1{font-size: 3rem;font-weight: 700;color: #2c3e50;margin: 0 0 20px 0} .converter-header .subtitle{font-size: 1.1rem;color: #5a6c7d;margin-bottom: 20px;max-width: 800px;margin-left: auto;margin-right: auto} .converter-header .instructions{font-size: 1rem;color: #34495e;margin-bottom: 15px;font-weight: 500} .converter-header .break-text{font-size: 0.95rem;color: #7f8c8d;font-style: italic} .language-selector{text-align: center;margin-bottom: 30px} .quick-converters{text-align: center;margin: 20px 0 30px 0;padding: 15px;background: linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius: 8px;border: 1px solid #dee2e6} .quick-title{margin: 0 0 10px 0;font-size: 0.9rem;color: #6c757d;font-weight: 500} .quick-links{display: flex;justify-content: center;gap: 15px;flex-wrap: wrap} .quick-link{background: white;color: #495057;text-decoration: none;padding: 8px 16px;border-radius: 20px;font-size: 0.85rem;font-weight: 500;border: 1px solid #dee2e6;transition: all 0.3s ease;box-shadow: 0 1px 3px rgba(0,0,0,0.1)} .quick-link:hover{background: #3498db;color: white;border-color: #3498db;transform: translateY(-1px);box-shadow: 0 2px 8px rgba(52,152,219,0.3);text-decoration: none} .language-selector select{padding: 10px 15px;border: 2px solid #e1e8ed;border-radius: 8px;font-size: 1rem;background: white;cursor: pointer;transition: border-color 0.3s ease} .language-selector select:focus{outline: none;border-color: #3498db} .upload-section{margin-bottom: 40px} .upload-area{background: white;border: 3px dashed #bdc3c7;border-radius: 12px;padding: 60px 30px;text-align: center;transition: all 0.3s ease;cursor: pointer;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;position: relative} .upload-area:hover,.upload-area.dragover{border-color: #3498db;background: #f8f9ff;transform: translateY(-2px);box-shadow: 0 4px 15px rgba(52,152,219,0.2)} .upload-area:active{transform: translateY(0)} .upload-area.processing{pointer-events: none;opacity: 0.7} .upload-content .upload-icon{font-size: 4rem;margin-bottom: 20px} .upload-content h3{font-size: 1.5rem;color: #2c3e50;margin: 0 0 10px 0} .upload-content p{color: #7f8c8d;margin: 10px 0} .upload-btn{background: #3498db;color: white;border: none;padding: 15px 30px;font-size: 1.1rem;font-weight: 600;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;margin: 20px 0;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none} .upload-btn:hover{background: #2980b9;transform: translateY(-1px)} .upload-btn:active{transform: translateY(0);background: #21618c} .upload-btn:disabled{background: #bdc3c7;cursor: not-allowed;transform: none} .upload-info{font-size: 0.9rem;color: #95a5a6} .file-list-section{background: white;border-radius: 12px;padding: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);margin-bottom: 30px} .file-list-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;padding-bottom: 15px;border-bottom: 2px solid #ecf0f1} .file-list-header h3{margin: 0;color: #2c3e50;font-size: 1.3rem} .batch-actions{display: flex;gap: 10px} .file-list{display: grid;gap: 15px} .file-item{display: flex;align-items: center;padding: 20px;border: 2px solid #ecf0f1;border-radius: 8px;transition: all 0.3s ease} .file-item:hover{border-color: #bdc3c7} .file-item.converting{border-color: #f39c12;background: #fef9e7} .file-item.completed{border-color: #27ae60;background: #eafaf1} .file-item.error{border-color: #e74c3c;background: #fdf2f2} .file-preview{width: 60px;height: 60px;border-radius: 6px;object-fit: cover;margin-right: 15px;border: 1px solid #ddd} .file-info{flex: 1;min-width: 0} .file-name{font-weight: 600;color: #2c3e50;margin-bottom: 5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis} .file-size{font-size: 0.9rem;color: #7f8c8d} .file-status{margin-right: 15px;font-size: 0.9rem;font-weight: 500} .file-status.pending{color: #95a5a6} .file-status.converting{color: #f39c12} .file-status.completed{color: #27ae60} .file-status.error{color: #e74c3c} .file-actions{display: flex;gap: 10px} .progress-bar{width: 100%;height: 6px;background: #ecf0f1;border-radius: 3px;margin-top: 8px;overflow: hidden} .progress-fill{height: 100%;background: #3498db;border-radius: 3px;transition: width 0.3s ease} .progress-text{font-size: 12px;color: #666;margin-top: 4px;font-style: italic} .progress-fill.completed{background: #27ae60} .btn{padding: 8px 16px;border: none;border-radius: 6px;font-size: 0.9rem;font-weight: 500;cursor: pointer;transition: all 0.3s ease;text-decoration: none;display: inline-block;text-align: center} .btn:disabled{opacity: 0.6;cursor: not-allowed} .btn-primary{background: #3498db;color: white} .btn-primary:hover:not(:disabled){background: #2980b9} .btn-secondary{background: #95a5a6;color: white} .btn-secondary:hover:not(:disabled){background: #7f8c8d} .btn-success{background: #27ae60;color: white} .btn-success:hover:not(:disabled){background: #219a52} .btn-danger{background: #e74c3c;color: white} .btn-danger:hover:not(:disabled){background: #c0392b} .btn-large{padding: 15px 30px;font-size: 1.1rem;font-weight: 600} .download-section{text-align: center;margin-top: 30px;padding-top: 20px;border-top: 2px solid #ecf0f1} .nav-links{display: flex;flex-wrap: wrap;gap: 15px;justify-content: center;margin: 40px 0;padding: 20px;background: white;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1)} .nav-link{color: #3498db;text-decoration: none;font-weight: 500;padding: 8px 12px;border-radius: 4px;transition: all 0.3s ease} .nav-link:hover,.nav-link.active{background: #3498db;color: white} .converter-grid{background: white;border-radius: 12px;padding: 40px;margin: 40px 0;box-shadow: 0 2px 10px rgba(0,0,0,0.1)} .grid-title{text-align: center;color: #2c3e50;font-size: 1.8rem;margin-bottom: 30px;font-weight: 600} .converter-cards{display: grid;grid-template-columns: repeat(auto-fit,minmax(280px,1fr));gap: 20px;max-width: 1200px;margin: 0 auto} .converter-card{background: #f8f9fa;border: 2px solid #e9ecef;border-radius: 12px;padding: 30px 20px;text-align: center;text-decoration: none;color: inherit;transition: all 0.3s ease;position: relative;cursor: pointer} .converter-card:hover{transform: translateY(-5px);box-shadow: 0 8px 25px rgba(52,152,219,0.15);border-color: #3498db;text-decoration: none;color: inherit} .converter-card.active{background: linear-gradient(135deg,#3498db,#2980b9);color: white;border-color: #2980b9;cursor: default} .converter-card.active:hover{transform: none;box-shadow: 0 4px 15px rgba(52,152,219,0.3)} .card-icon{font-size: 3rem;margin-bottom: 15px;display: block} .converter-card h3{font-size: 1.3rem;margin: 0 0 10px 0;font-weight: 600} .converter-card p{margin: 0 0 20px 0;opacity: 0.8;font-size: 0.95rem;line-height: 1.4} .card-action{display: inline-block;background: #3498db;color: white;padding: 8px 16px;border-radius: 20px;font-size: 0.9rem;font-weight: 500;transition: all 0.3s ease} .converter-card:hover .card-action{background: #2980b9;transform: translateX(3px)} .card-status{display: inline-block;background: rgba(255,255,255,0.2);color: white;padding: 8px 16px;border-radius: 20px;font-size: 0.9rem;font-weight: 500} .converter-card.active .card-action,.converter-card.active .card-status{background: rgba(255,255,255,0.2)} .seo-content{background: white;padding: 40px;border-radius: 12px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);margin-bottom: 30px} .seo-content h2{color: #2c3e50;font-size: 1.8rem;margin-bottom: 20px} .seo-content h3{color: #34495e;font-size: 1.3rem;margin: 30px 0 15px 0} .seo-content p{color: #5a6c7d;line-height: 1.7;margin-bottom: 15px} .seo-content ul,.seo-content ol{margin: 15px 0;padding-left: 20px} .seo-content li{color: #5a6c7d;line-height: 1.7;margin-bottom: 8px} .seo-content strong{color: #2c3e50;font-weight: 600} .seo-content ol li{font-weight: 500} .faq-section{margin-top: 20px} .faq-item{margin-bottom: 25px;padding: 20px;background: #f8f9fa;border-radius: 8px;border-left: 4px solid #3498db} .faq-item h4{color: #2c3e50;font-size: 1.1rem;margin: 0 0 10px 0;font-weight: 600} .faq-item p{margin: 0;color: #5a6c7d;line-height: 1.6} .info-section{background: white;padding: 40px;border-radius: 12px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);margin-bottom: 30px} .info-section h2{color: #2c3e50;font-size: 1.8rem;margin-bottom: 20px} .info-section h3{color: #34495e;font-size: 1.3rem;margin: 30px 0 15px 0} .info-section p{color: #5a6c7d;line-height: 1.7;margin-bottom: 15px} .converter-footer{text-align: center;padding: 20px;color: #7f8c8d;font-size: 0.9rem} @media (max-width: 768px){.converter-container{padding: 15px} .converter-header{padding: 30px 20px} .converter-header h1{font-size: 2.2rem} .file-list-header{flex-direction: column;gap: 15px;align-items: stretch} .batch-actions{justify-content: center} .file-item{flex-direction: column;text-align: center;gap: 15px} .file-preview{margin: 0} .nav-links{flex-direction: column;align-items: center} .seo-content{padding: 25px 20px} .info-section{padding: 25px 20px} .faq-item{padding: 15px} .converter-grid{padding: 25px 20px} .converter-cards{grid-template-columns: 1fr;gap: 15px} .converter-card{padding: 25px 15px} .card-icon{font-size: 2.5rem} } @media (max-width: 480px){.converter-header h1{font-size: 1.8rem} .upload-area{padding: 40px 20px} .file-list-section{padding: 20px 15px} } @keyframes fadeInUp{from{opacity: 0;transform: translateY(20px)} to{opacity: 1;transform: translateY(0)} } .file-item{animation: fadeInUp 0.3s ease} .spinner{display: inline-block;width: 16px;height: 16px;border: 2px solid #f3f3f3;border-top: 2px solid #3498db;border-radius: 50%;animation: spin 1s linear infinite} @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } .quality-banner{background: #fffbe6;border: 1px solid #ffe58f;color: #7a6a00;padding: 12px 16px;border-radius: 8px;margin: 16px 0 12px 0} .quality-banner .quality-summary{font-weight: 600} .quality-banner .quality-note{font-size: 0.9rem;color: #8c8c8c} .tabs{display: inline-flex;background: #f1f3f5;border-radius: 8px;padding: 4px;gap: 4px} .tabs .tab{padding: 8px 12px;border-radius: 6px;cursor: pointer;color: #495057;user-select: none} .tabs .tab.active{background: #ffffff;color: #2c3e50;box-shadow: 0 1px 3px rgba(0,0,0,0.08)} .card{background: #ffffff;border: 1px solid #e9ecef;border-radius: 10px;padding: 16px} .card + .card{margin-top: 12px} .settings-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: 12px} .segmented{display: inline-flex;border: 1px solid #dee2e6;border-radius: 8px;overflow: hidden} .segmented label{padding: 8px 12px;cursor: pointer;background: #fff;color: #495057} .segmented input{display: none} .segmented input:checked + span{background: #3498db;color: #fff} .actions-sticky{position: sticky;bottom: 0;background: #ffffff;border-top: 1px solid #e9ecef;padding: 12px;display: flex;gap: 10px;z-index: 2} .preview-frame{border: 1px dashed #e1e8ed;border-radius: 8px;background: #ffffff;min-height: 240px;overflow: auto} .spinner-overlay{position: fixed;inset: 0;background: rgba(0,0,0,0.35);display: none;align-items: center;justify-content: center;z-index: 9999} .spinner{width: 48px;height: 48px;border: 4px solid #f3f3f3;border-top: 4px solid #3498db;border-radius: 50%;animation: spin 1s linear infinite} @keyframes spin{from{transform: rotate(0)} to{transform: rotate(360deg)} } .helper{font-size: 0.9rem;color: #6c757d} .status-text{display: block;margin-bottom: 5px} .progress-bar{width: 100%;height: 6px;background-color: #e0e0e0;border-radius: 3px;overflow: hidden;margin-top: 5px} .progress-fill{height: 100%;background-color: #4CAF50;border-radius: 3px;transition: width 0.3s ease} .progress-fill.converting{background: linear-gradient(90deg,#4CAF50,#2196F3,#4CAF50);background-size: 200% 100%;animation: progressShimmer 2s infinite} @keyframes progressShimmer{0%{background-position: 200% 0} 100%{background-position: -200% 0} } .format-selector{background: #f8f9fa;border: 1px solid #e9ecef;border-radius: 12px;padding: 20px;margin-bottom: 30px;text-align: center} .format-selector h2{margin: 0 0 15px 0;font-size: 1.4rem;color: #333;font-weight: 600} .format-buttons{display: flex;flex-wrap: wrap;gap: 8px;justify-content: center;margin-bottom: 15px} .format-btn{background: #fff;border: 2px solid #e9ecef;border-radius: 8px;padding: 8px 16px;text-decoration: none;color: #666;font-weight: 500;font-size: 0.9rem;transition: all 0.2s ease;white-space: nowrap} .format-btn:hover{border-color: #7C3AED;color: #7C3AED;transform: translateY(-1px)} .format-btn.active{background: #7C3AED;border-color: #7C3AED;color: white} .reverse-conversion{margin-top: 15px;padding-top: 15px;border-top: 1px solid #e9ecef} .reverse-conversion p{margin: 0;font-size: 0.9rem;color: #666} .reverse-conversion a{color: #7C3AED;text-decoration: none;font-weight: 500} .reverse-conversion a:hover{text-decoration: underline} @media (max-width: 768px){.format-buttons{flex-direction: column;align-items: center} .format-btn{width: 100%;max-width: 200px} }