*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;padding:5px;background:#f5f7fa;}.container{min-width:100%;margin-top:40px;margin-bottom:5px;background:white;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,0.1);overflow:hidden;}.header{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:white;padding:20px;text-align:center;}.header h1{font-size:1.6em;margin-bottom:5px;}.header p{font-size:.8em;opacity:0.9;}.content{padding:10px;}.main-content{display:flex;gap:20px;margin-bottom:20px;}.upload-section{width:100%;}.preview-process-section{width:70%;display:flex;gap:20px;display:none;border:2px dashed #18defe;border-radius:8px;padding:1px;transition:all 0.3s ease;}.preview-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}.process-section{flex:1;display:flex;align-items:center;justify-content:center;}.result-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}.upload-area{border:2px dashed #4facfe;border-radius:8px;padding:5px;text-align:center;margin-bottom:20px;transition:all 0.3s ease;cursor:pointer;}.upload-area:hover{border-color:#667eea;background:#f8f9ff;}.upload-area.dragover{border-color:#667eea;background:#e3f2fd;}.upload-icon{font-size:3em;color:#4facfe;margin-bottom:10px;}.preview-image{max-width:100%;max-height:200px;border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,0.1);}.format-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;margin-bottom:20px;}.format-option{padding:5px;border:2px solid #0de6fe;border-radius:6px;text-align:center;cursor:pointer;transition:all 0.3s ease;}.format-option:hover{border-color:#4facfe;transform:translateY(-2px);}.format-option.selected{border-color:#4facfe;background:#4facfe;color:white;}.size-selector{display:none;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:5px;margin-bottom:15px;}.size-option{padding:8px;border:2px solid #e0e0e0;border-radius:4px;text-align:center;cursor:pointer;transition:all 0.3s ease;font-size:0.8em;}.size-option:hover{border-color:#4facfe;}.size-option.selected{border-color:#4facfe;background:#4facfe;color:white;}.button-container{display:flex;gap:10px;margin-bottom:5px;justify-content:center;}.convert-btn{padding:12px 30px;background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:white;border:none;border-radius:6px;font-size:1.1em;cursor:pointer;transition:all 0.3s ease;}.convert-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(79,172,254,0.3);}.convert-btn:disabled{background:#35c3fe;cursor:not-allowed;transform:none;box-shadow:none;}.download-btn{padding:12px 30px;background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:white;border:none;border-radius:6px;font-size:1.1em;cursor:pointer;transition:all 0.3s ease;text-decoration:none;display:inline-block;text-align:center;}.download-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(79,172,254,0.3);}.result{margin-top:20px;padding:15px;border-radius:8px;background:#f8f9ff;display:none;}.result.show{display:block;animation:fadeIn 0.5s ease;}.preview-container{display:flex;gap:15px;margin-bottom:15px;flex-wrap:wrap;}.preview-box{flex:1;min-width:150px;text-align:center;}.preview-box img{max-width:100%;max-height:150px;border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,0.1);}.loading{display:none;text-align:center;padding:15px;}.loading.show{display:block;}.spinner{border:3px solid #f3f3f3;border-top:3px solid #4facfe;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite;margin:0 auto 10px;}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.error{background:#ffebee;color:#c62828;padding:10px;border-radius:6px;margin-top:15px;display:none;}.error.show{display:block;}.ico-preview-note{color:#666;font-size:0.8em;margin-top:5px;}.crop-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:1000;}.crop-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;border-radius:10px;padding:15px;max-width:90%;max-height:90%;}.crop-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #eee;}.crop-title{font-size:1.2em;font-weight:bold;}.crop-close{background:none;border:none;font-size:1.5em;cursor:pointer;color:#666;}.crop-content{display:flex;gap:15px;margin-bottom:10px;}.crop-canvas-container{flex:1;min-width:300px;position:relative;}#cropCanvas{border:1px solid #ddd;border-radius:5px;max-width:100%;}.crop-controls{display:flex;flex-direction:column;gap:8px;min-width:120px;}.crop-btn{padding:8px 12px;border:1px solid #4facfe;background:white;color:#4facfe;border-radius:4px;cursor:pointer;transition:all 0.3s ease;}.crop-btn:hover{background:#4facfe;color:white;}.crop-actions{display:flex;gap:8px;justify-content:flex-end;}.crop-confirm-btn{padding:8px 20px;background:#4caf50;color:white;border:none;border-radius:4px;cursor:pointer;}.crop-cancel-btn{padding:8px 20px;background:#f44336;color:white;border:none;border-radius:4px;cursor:pointer;}@media (min-width:1025px){.preview-section,.result-section{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px 0;}.preview-image{max-height:150px;height:auto;width:auto;max-width:100%;}.preview-process-section{height:200px;align-items:center;justify-content:space-around;padding:5px;}.upload-section{width:100%;}.preview-process-section{width:70%;}.upload-area{height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;}.has-image .upload-section{width:30%;}.has-image .preview-process-section{width:70%;}}@media (max-width:1024px){.main-content{flex-direction:column;gap:15px;}.upload-section{width:100%;order:1;}.preview-process-section{width:100%;flex-direction:column;gap:15px;order:2;align-items:center;min-height:auto;}.preview-section{order:1;width:100%;text-align:center;}.process-section{order:2;width:100%;text-align:center;}.result-section{order:3;width:100%;text-align:center;}.format-selector{order:3;margin-top:20px;}.size-selector{order:4;}.button-container{order:5;flex-direction:row;justify-content:center;}.error{order:6;}.upload-area{padding:15px;width:100%;}.upload-icon{font-size:2.5em;}.preview-image{max-height:150px;}.convert-btn,.download-btn{width:auto;}.crop-content{flex-direction:column;}.crop-controls{flex-direction:row;justify-content:center;min-width:auto;}}@media (max-width:820px){.main-content{flex-direction:column;gap:15px;}.upload-section{width:100%;order:1;}.preview-process-section{width:100%;flex-direction:column;gap:15px;order:2;align-items:center;min-height:auto;}.preview-section{order:1;width:100%;text-align:center;}.process-section{order:2;width:100%;text-align:center;}.result-section{order:3;width:100%;text-align:center;}.format-selector{order:3;margin-top:20px;}.size-selector{order:4;}.button-container{order:5;flex-direction:row;justify-content:center;}.error{order:6;}.upload-area{padding:15px;width:100%;}.upload-icon{font-size:2.5em;}.preview-image{max-height:150px;}.convert-btn,.download-btn{width:auto;}.crop-content{flex-direction:column;}.crop-controls{flex-direction:row;justify-content:center;min-width:auto;}}@media (max-width:768px){.main-content{flex-direction:column;gap:15px;}.upload-section{width:100%;order:1;}.preview-process-section{width:100%;flex-direction:column;gap:15px;order:2;align-items:center;min-height:auto;}.preview-section{order:1;width:100%;text-align:center;}.process-section{order:2;width:100%;text-align:center;}.result-section{order:3;width:100%;text-align:center;}.format-selector{order:3;margin-top:20px;}.size-selector{order:4;}.button-container{order:5;flex-direction:row;justify-content:center;}.error{order:6;}.upload-area{padding:15px;width:100%;}.upload-icon{font-size:2.5em;}.preview-image{max-height:150px;}.convert-btn,.download-btn{width:auto;}.crop-content{flex-direction:column;}.crop-controls{flex-direction:row;justify-content:center;min-width:auto;}}@media (max-width:450px){.main-content{flex-direction:column;gap:15px;}.upload-section{width:100%;order:1;}.preview-process-section{width:100%;flex-direction:column;gap:15px;order:2;align-items:center;min-height:auto;}.preview-section{order:1;width:100%;text-align:center;}.process-section{order:2;width:100%;text-align:center;}.result-section{order:3;width:100%;text-align:center;}.format-selector{order:3;margin-top:20px;grid-template-columns:repeat(3,1fr);}.size-selector{order:4;}.button-container{order:5;flex-direction:row;justify-content:center;flex-wrap:wrap;}.error{order:6;}.upload-area{padding:15px;width:100%;}.upload-icon{font-size:2.5em;}.preview-image{max-height:150px;}.convert-btn,.download-btn{width:auto;padding:10px 20px;}.crop-content{flex-direction:column;}.crop-controls{flex-direction:row;justify-content:center;min-width:auto;}}