.image-upload-container{width:100%;margin-top:8px}.modal-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background-color:#fff;border-radius:10px;flex-direction:column;width:100%;max-width:500px;max-height:90vh;display:flex;overflow-y:auto;box-shadow:0 4px 6px #0000001a}.modal-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-header h2{color:#1a202c;margin:0;font-size:20px;font-weight:700}.close-modal-button{cursor:pointer;color:#718096;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;margin:0;padding:0;font-size:24px;display:flex}.close-modal-button:hover{color:#4a5568;background-color:#f7fafc}.modal-body{flex:1;padding:20px}.error-message{color:#b91c1c;background-color:#fee2e2;border-radius:6px;margin-bottom:16px;padding:12px;font-size:14px}.form-group{margin-bottom:20px}.form-group label{color:#4a5568;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.form-input,.form-textarea{border:1px solid #e2e8f0;border-radius:6px;width:100%;padding:10px 12px;font-size:16px;transition:border-color .2s}.form-input:focus,.form-textarea:focus{border-color:#4299e1;outline:none;box-shadow:0 0 0 3px #4299e126}.form-textarea{resize:vertical;min-height:100px}.input-help-text{color:#718096;text-align:right;margin-top:4px;font-size:12px}.color-picker-container{align-items:center;gap:12px;display:flex}.color-picker{cursor:pointer;border:none;border-radius:6px;width:40px;height:40px;overflow:hidden}.color-value{font-family:var(--font-mono,monospace);color:#4a5568}.modal-footer{border-top:1px solid #e2e8f0;justify-content:flex-end;gap:12px;padding:16px 20px;display:flex}.cancel-button,.save-button{cursor:pointer;border-radius:6px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s}.cancel-button{color:#4a5568;background-color:#0000;border:1px solid #e2e8f0}.save-button{color:#fff;background-color:#4299e1;border:1px solid #4299e1}.cancel-button:hover{background-color:#f7fafc;border-color:#cbd5e0}.save-button:hover{background-color:#3182ce;border-color:#3182ce}.cancel-button:disabled,.save-button:disabled{opacity:.6;cursor:not-allowed}@media (max-width:600px){.modal-content{width:95%;max-height:80vh}.modal-body{padding:16px}.form-input,.form-textarea{font-size:14px}}@media (max-width:480px){.modal-header h2{font-size:18px}.modal-footer{padding:12px 16px}.cancel-button,.save-button{padding:8px 12px;font-size:14px}}.banner-preview{border-radius:8px;width:100%;max-height:150px;margin-bottom:10px;position:relative;overflow:hidden}.banner-preview-image{object-fit:cover;width:100%;height:auto;max-height:150px;display:block}.profile-preview{border-radius:50%;width:100px;height:100px;margin-bottom:10px;position:relative;overflow:hidden}.profile-preview-image{object-fit:cover;width:100%;height:100%;display:block}.image-remove-button{color:#fff;cursor:pointer;background-color:#0009;border:none;border-radius:4px;padding:4px 8px;font-size:12px;transition:background-color .2s;position:absolute;top:8px;right:8px}.image-remove-button:hover{background-color:#000c}.banner-upload-placeholder,.profile-upload-placeholder{cursor:pointer;background-color:#f9fafb;border:2px dashed #e5e7eb;border-radius:8px;justify-content:center;align-items:center;width:100%;margin-bottom:10px;padding:20px;transition:all .2s;display:flex}.banner-upload-placeholder:hover,.profile-upload-placeholder:hover{background-color:#f3f4f6;border-color:#d1d5db}.upload-button{color:#4f46e5;cursor:pointer;background-color:#0000;border:none;border-radius:6px;align-items:center;gap:8px;padding:8px 12px;font-size:14px;font-weight:500;transition:background-color .2s;display:flex}.upload-button:hover{background-color:#4f46e51a}.upload-button svg{stroke:#4f46e5}.upload-progress{flex-direction:column;gap:4px;width:100%;margin-bottom:12px;display:flex}.upload-progress-bar{background-color:#e5e7eb;border-radius:3px;width:100%;height:6px;overflow:hidden}.upload-progress-inner{background-color:#4f46e5;width:100%;height:100%;animation:1.5s ease-in-out infinite progress-animation}.upload-status-text{color:#6b7280;font-size:12px}@keyframes progress-animation{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}
