.container{flex-direction:column;max-width:1200px;min-height:100vh;margin:0 auto;padding:20px;display:flex}.header{text-align:center;color:#fff;margin-bottom:40px}.logo{justify-content:center;align-items:center;gap:15px;margin-bottom:10px;display:flex}.logo i{color:gold;font-size:2.5rem}.logo h1{text-shadow:0 2px 4px rgba(0,0,0,.3);font-size:2.5rem;font-weight:700}.subtitle{opacity:.9;font-size:1.1rem;font-weight:300}.main-content{background:#fff;border-radius:20px;flex:1;margin-bottom:30px;padding:40px;box-shadow:0 20px 40px rgba(0,0,0,.1)}.upload-section{margin-bottom:40px}.upload-area{text-align:center;cursor:pointer;background:#fafafa;border:3px dashed #e0e0e0;border-radius:15px;padding:60px 20px;transition:all .3s}.upload-area:hover{background:#f0f4ff;border-color:#667eea;transform:translateY(-2px)}.upload-area.dragover{background:#e8f2ff;border-color:#667eea;transform:scale(1.02)}.upload-content{pointer-events:none}.upload-icon{color:#667eea;margin-bottom:20px;font-size:4rem;display:block}.upload-content h3{color:#333;margin-bottom:10px;font-size:1.5rem;font-weight:600}.upload-content p{color:#666;margin-bottom:25px;font-size:1rem}.upload-btn{color:#fff;cursor:pointer;pointer-events:all;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:50px;align-items:center;gap:10px;padding:15px 30px;font-size:1rem;font-weight:600;transition:all .3s;display:inline-flex}.upload-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(102,126,234,.3)}.conversion-options{background:#f8f9fa;border-radius:15px;margin-bottom:40px;padding:30px}.conversion-options h3{color:#333;margin-bottom:20px;font-size:1.3rem;font-weight:600}.options-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;display:grid}.option-group{flex-direction:column;display:flex}.option-group label{color:#555;margin-bottom:8px;font-weight:500}.option-group select{cursor:pointer;background:#fff;border:2px solid #e0e0e0;border-radius:10px;padding:12px 15px;font-size:1rem;transition:all .3s}.option-group select:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.option-group select:disabled{color:#999;cursor:not-allowed;background:#f5f5f5}.file-list{margin-bottom:30px}.file-list h3{color:#333;margin-bottom:15px;font-size:1.3rem;font-weight:600}.file-item{background:#f8f9fa;border-left:4px solid #667eea;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:15px 20px;transition:all .3s;display:flex}.file-item:hover{background:#e8f2ff;transform:translate(5px)}.file-info{align-items:center;gap:15px;display:flex}.file-icon{color:#667eea;font-size:1.5rem}.file-details h4{color:#333;margin-bottom:5px;font-size:1rem}.file-details p{color:#666;font-size:.9rem}.file-actions{gap:10px;display:flex}.file-action-btn{color:#666;cursor:pointer;background:0 0;border:none;border-radius:5px;padding:8px;transition:all .3s}.file-action-btn:hover{color:#333;background:#e0e0e0}.file-action-btn.remove:hover{color:#f44336;background:#ffebee}.convert-section{text-align:center;margin-bottom:30px}.convert-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4caf50 0%,#45a049 100%);border:none;border-radius:50px;align-items:center;gap:12px;padding:18px 40px;font-size:1.1rem;font-weight:600;transition:all .3s;display:inline-flex;box-shadow:0 4px 15px rgba(76,175,80,.3)}.convert-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px rgba(76,175,80,.4)}.convert-btn:disabled{cursor:not-allowed;box-shadow:none;background:#ccc}.progress-section{background:#f8f9fa;border-radius:15px;margin-bottom:30px;padding:30px}.progress-section h3{color:#333;margin-bottom:20px;font-size:1.3rem;font-weight:600}.progress-bar{background:#e0e0e0;border-radius:4px;width:100%;height:8px;margin-bottom:15px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);border-radius:4px;width:0%;height:100%;transition:width .3s}.progress-text{text-align:center;color:#666;font-weight:500}.results-section{background:#f8f9fa;border-radius:15px;padding:30px}.results-section h3{color:#333;margin-bottom:20px;font-size:1.3rem;font-weight:600}.result-item{background:#fff;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:15px;padding:20px;transition:all .3s;display:flex;box-shadow:0 2px 10px rgba(0,0,0,.05)}.result-item:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.1)}.result-item.error{background:#ffebee;border-left:4px solid #f44336}.result-item.error:hover{background:#ffcdd2}.result-info{align-items:center;gap:15px;display:flex}.result-icon{color:#4caf50;font-size:1.5rem}.result-details h4{color:#333;margin-bottom:5px;font-size:1rem}.result-details p{color:#666;font-size:.9rem}.download-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:25px;align-items:center;gap:8px;padding:12px 25px;font-size:.9rem;font-weight:600;transition:all .3s;display:inline-flex}.download-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.3)}.footer{text-align:center;color:#fff;margin-top:auto}.features{flex-wrap:wrap;justify-content:center;gap:40px;margin-bottom:20px;display:flex}.feature{opacity:.9;align-items:center;gap:10px;font-size:.9rem;display:flex}.feature i{color:gold;font-size:1.2rem}.footer p{opacity:.7;font-size:.9rem}@media (max-width:768px){.container{padding:15px}.main-content{padding:25px}.logo h1{font-size:2rem}.upload-area{padding:40px 15px}.upload-icon{font-size:3rem}.options-grid{grid-template-columns:1fr}.features{gap:20px}.file-item{flex-direction:column;align-items:flex-start;gap:15px}.file-actions{align-self:flex-end}}@media (max-width:480px){.logo{flex-direction:column;gap:10px}.logo h1{font-size:1.8rem}.upload-content h3{font-size:1.2rem}.convert-btn{padding:15px 30px;font-size:1rem}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.file-item,.result-item{animation:.5s fadeInUp}.loading{border:3px solid #f3f3f3;border-top-color:#667eea;border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.notification{z-index:1000;border-radius:10px;max-width:300px;padding:15px 20px;font-weight:500;animation:.3s slideInRight;position:fixed;top:20px;right:20px;box-shadow:0 4px 15px rgba(0,0,0,.2)}.notification-success{color:#fff;background:#4caf50}.notification-error{color:#fff;background:#f44336}.notification-info{color:#fff;background:#2196f3}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}