*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(to bottom,#f0f4f8,#e2e8f0);color:#1e293b;min-height:100vh;padding:20px}.app{max-width:1400px;margin:0 auto}.container{padding:20px}.header{text-align:center;margin-bottom:40px;padding:30px 20px;background:#fff;border-radius:20px;box-shadow:0 4px 6px #0000000d}.title{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;letter-spacing:-.5px}.subtitle{font-size:1.1rem;color:#64748b;font-weight:500}.message{padding:14px 20px;border-radius:12px;margin-bottom:20px;font-weight:500;box-shadow:0 2px 4px #0000000d}.message.error{background:#fee2e2;border:1px solid #fecaca;color:#dc2626}.message.success{background:#d1fae5;border:1px solid #a7f3d0;color:#059669}.editor{display:grid;grid-template-columns:1fr 1fr;gap:30px}.editor-left,.editor-right{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:30px;box-shadow:0 4px 6px #0000000d}.section{margin-bottom:24px}.section-label{font-size:1rem;font-weight:700;color:#1e293b;margin-bottom:12px}.hint{font-size:.85rem;color:#64748b;margin-bottom:10px}.input{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;background:#f8fafc;color:#1e293b;font-size:.9rem;transition:all .2s}.input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.textarea{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;background:#f8fafc;color:#1e293b;font-size:.9rem;resize:vertical;font-family:inherit;transition:all .2s}.textarea:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.upload-area{border:2px dashed #cbd5e1;border-radius:16px;padding:30px 20px;text-align:center;transition:all .3s;background:#f8fafc;min-height:180px}.upload-area:hover{border-color:#667eea;background:#f1f5f9}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px}.upload-icon{font-size:3rem}.image-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.image-slot{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;transition:all .3s}.image-slot.filled{border:2px solid #10b981;background:#fff}.image-slot.empty{border:2px dashed #cbd5e1;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#f8fafc}.image-slot.empty:hover{border-color:#667eea;background:#f1f5f9}.preview-image{width:100%;height:100%;object-fit:cover}.remove-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:#ef4444;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:all .2s;box-shadow:0 2px 4px #0003}.remove-btn:hover{background:#dc2626;transform:scale(1.1)}.add-more{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;color:#64748b}.add-icon{font-size:2rem;color:#667eea;font-weight:300}.model-tabs{display:flex;gap:10px}.model-tab{flex:1;padding:14px 18px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;color:#64748b;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s}.model-tab:hover{border-color:#667eea;color:#1e293b;background:#fff}.model-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff;box-shadow:0 4px 12px #667eea4d}.ratio-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.ratio-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;color:#64748b;font-size:.75rem;cursor:pointer;transition:all .3s}.ratio-btn:hover{border-color:#667eea;color:#1e293b;background:#fff}.ratio-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff;box-shadow:0 4px 12px #667eea40}.ratio-icon{font-size:1.2rem}.resolution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.resolution-btn{padding:12px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;color:#64748b;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s}.resolution-btn:hover{border-color:#10b981;color:#1e293b;background:#fff}.resolution-btn.active{background:linear-gradient(135deg,#10b981,#059669);border-color:transparent;color:#fff;box-shadow:0 4px 12px #10b9814d}.btn{padding:14px 24px;border:none;border-radius:12px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary{background:#fff;color:#1e293b;border:2px solid #e2e8f0}.btn-secondary:hover{background:#f8fafc;border-color:#667eea}.processing-text{display:flex;align-items:center;gap:10px}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.result-container{min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center}.result-placeholder{text-align:center;padding:40px 20px}.placeholder-icon{font-size:4rem;margin-bottom:16px;filter:grayscale(30%)}.result-placeholder p{color:#64748b;font-size:.95rem}.processing-state{text-align:center;padding:40px 20px}.processing-spinner{width:60px;height:60px;border:4px solid #e2e8f0;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}.processing-state p{color:#64748b;margin-bottom:8px;font-weight:500}.sub-text{font-size:.85rem;color:#94a3b8}.result-display{width:100%}.result-image-container{margin-bottom:20px;background:#f8fafc;border-radius:16px;padding:16px;border:1px solid #e2e8f0}.result-image{max-width:100%;max-height:400px;object-fit:contain;border-radius:12px;box-shadow:0 4px 12px #0000001a}.result-actions{display:flex;justify-content:center}@media(max-width:1024px){.editor{grid-template-columns:1fr}}@media(max-width:768px){.title{font-size:2rem}.subtitle{font-size:1rem}.editor-left,.editor-right{padding:20px}.ratio-grid{grid-template-columns:repeat(4,1fr)}}