.config-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;animation:fadeIn 0.3s ease;}.config-modal.show{display:block;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.config-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(3px);}.config-modal-content{position:relative;width:90%;max-width:700px;max-height:90vh;margin:5vh auto;background:var(--color-bg-white);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.3);overflow:hidden;display:flex;flex-direction:column;animation:slideIn 0.3s ease;}@keyframes slideIn{from{transform:translateY(-50px);opacity:0;}to{transform:translateY(0);opacity:1;}}.config-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:var(--color-text-white);border-bottom:2px solid rgba(255,255,255,0.2);}.config-modal-header h2{margin:0;font-size:1.5rem;font-weight:600;}.config-modal-close{background:transparent;border:none;color:var(--color-text-white);cursor:pointer;padding:8px;border-radius:50%;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;}.config-modal-close:hover{background:rgba(255,255,255,0.2);transform:rotate(90deg);}.config-modal-body{padding:24px;overflow-y:auto;flex:1;}.config-avatar-section h3{margin:0 0 20px 0;font-size:1.25rem;color:var(--color-text-primary);border-bottom:2px solid #f0f0f0;padding-bottom:10px;}.config-avatar-container{display:grid;grid-template-columns:180px 1fr;gap:24px;margin-bottom:24px;}.config-avatar-preview{position:relative;width:180px;height:180px;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.1);transition:all 0.3s ease;}.config-avatar-preview:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,0.2);}.config-avatar-preview img{width:100%;height:100%;object-fit:cover;}.config-avatar-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;}.config-avatar-preview:hover .config-avatar-overlay{opacity:1;}.config-avatar-overlay span{color:var(--color-text-white);font-size:0.9rem;font-weight:600;text-align:center;padding:0 10px;}.config-avatar-info{display:flex;flex-direction:column;justify-content:center;}.config-avatar-info p{margin:8px 0;font-size:0.95rem;color:var(--color-text-secondary);}.config-avatar-info strong{color:var(--color-text-primary);}.config-avatar-hint{margin-top:16px !important;padding:12px;background:#f8f9fa;border-left:4px solid #667eea;border-radius:4px;font-size:0.85rem !important;line-height:1.6;color:var(--color-text-secondary)!important;}.config-upload-progress{margin:20px 0;}.config-progress-bar{width:100%;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px;}.config-progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width 0.3s ease;width:0%;}.config-progress-text{text-align:center;font-size:0.9rem;color:var(--color-text-secondary);}.config-status-message{padding:12px 16px;border-radius:6px;margin:16px 0;font-size:0.9rem;display:flex;align-items:center;gap:8px;}.config-status-message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb;}.config-status-message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;}.config-status-message.warning{background:#fff3cd;color:#856404;border:1px solid #ffeaa7;}.config-avatar-actions{display:flex;gap:12px;margin-top:20px;}.config-avatar-actions .btn{flex:1;padding:12px 24px;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;}.config-avatar-actions .btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#ffffff;}.config-avatar-actions .btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,0.4);}.config-avatar-actions .btn-primary:disabled{background:#cccccc;cursor:not-allowed;opacity:0.6;}.config-avatar-actions .btn-secondary{background:#6c757d;color:#ffffff;}.config-avatar-actions .btn-secondary:hover{background:#5a6268;transform:translateY(-2px);box-shadow:0 4px 12px rgba(108,117,125,0.3);}.config-image-preview{margin-top:24px;padding:20px;background:#f8f9fa;border-radius:8px;border:2px dashed #dee2e6;}.config-image-preview h4{margin:0 0 16px 0;color:#333;}.config-preview-container{display:flex;justify-content:center;margin-bottom:16px;}.config-preview-container canvas{max-width:100%;max-height:300px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);}.config-image-details{text-align:center;}.config-image-details p{margin:8px 0;font-size:0.9rem;color:#555;}.config-warning{color:#856404 !important;background:#fff3cd;padding:8px 12px;border-radius:4px;font-weight:600;}@media(max-width:768px){.config-modal-content{width:95%;margin:2.5vh auto;max-height:95vh;}.config-avatar-container{grid-template-columns:1fr;gap:16px;}.config-avatar-preview{width:150px;height:150px;margin:0 auto;}.config-modal-header h2{font-size:1.25rem;}.config-avatar-actions{flex-direction:column;}.config-social-grid{grid-template-columns:1fr;gap:12px;}.config-social-actions{flex-direction:column;}}.config-social-section{margin-top:30px;padding-top:30px;border-top:2px solid #e0e0e0;}.config-social-section h3{margin:0 0 16px 0;font-size:1.25rem;color:#1D4F73;border-bottom:2px solid #f0f0f0;padding-bottom:10px;}.config-social-hint{margin-bottom:20px;padding:12px;background:#f5f7fa;border-left:4px solid #206A8D;border-radius:4px;font-size:0.85rem;line-height:1.6;color:#666;}.config-social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:20px 0;}.config-social-field{display:flex;flex-direction:column;}.config-social-field label{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:8px;color:#333;font-size:0.9rem;}.config-social-field label i{font-size:1.1rem;color:#206A8D;width:20px;text-align:center;}.config-input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:0.9rem;transition:all 0.2s ease;background:#ffffff;color:#333;}.config-input:focus{border-color:#206A8D;outline:none;box-shadow:0 0 0 3px rgba(32,106,141,0.1);}.config-input::placeholder{color:#999;font-size:0.85rem;}.config-social-actions{display:flex;gap:12px;margin-top:20px;}.config-social-actions .btn{flex:1;padding:12px 24px;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;}.config-social-actions .btn-primary{background:linear-gradient(135deg,#1D4F73 0%,#206A8D 100%);color:#ffffff;}.config-social-actions .btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px rgba(32,106,141,0.4);}.config-social-actions .btn-primary:disabled{background:#cccccc;cursor:not-allowed;opacity:0.6;}.config-social-actions .btn-secondary{background:#6c757d;color:#ffffff;}.config-social-actions .btn-secondary:hover{background:#5a6268;transform:translateY(-2px);box-shadow:0 4px 12px rgba(108,117,125,0.3);}@media(prefers-color-scheme:dark){.config-modal-content{background:#2d2d2d;}.config-avatar-section h3{color:#ffffff;border-bottom-color:#444;}.config-avatar-info p{color:#cccccc;}.config-avatar-info strong{color:#ffffff;}.config-avatar-hint{background:#3a3a3a;color:#cccccc !important;}.config-image-preview{background:#3a3a3a;border-color:#555;}.config-image-preview h4{color:#ffffff;}.config-image-details p{color:#cccccc;}.config-social-section{border-top-color:#444;}.config-social-section h3{color:#A7E3FA;border-bottom-color:#444;}.config-social-hint{background:#3a3a3a;color:#cccccc;border-left-color:#206A8D;}.config-social-field label{color:#ffffff;}.config-input{background:#3a3a3a;color:#ffffff;border-color:#555;}.config-input:focus{border-color:#A7E3FA;box-shadow:0 0 0 3px rgba(167,227,250,0.1);}.config-input::placeholder{color:#777;}}