:root{--primary-blue:#3B82F6;--primary-blue-light:#60A5FA;--primary-blue-dark:#2563EB;--secondary-blue:#38BDF8;--accent-orange:#FF6B35;--accent-gold:#F7931E;--gray-50:#f8f9fa;--gray-100:#f8f9ff;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#a0aec0;--gray-500:#6c757d;--gray-600:#4a5568;--gray-700:#374151;--gray-800:#2d3748;--gray-900:#1f2937;--success-color:#28a745;--error-color:#dc3545;--warning-color:#f59e0b;--info-color:#007bff;--spacing-xs:8px;--spacing-sm:12px;--spacing-md:16px;--spacing-lg:20px;--spacing-xl:24px;--spacing-2xl:30px;--gap-xs:8px;--gap-sm:10px;--gap-md:15px;--gap-lg:20px;--font-xs:0.75rem;--font-sm:0.875rem;--font-base:1rem;--font-lg:1.125rem;--font-xl:1.25rem;--font-2xl:1.5rem;--font-3xl:2rem;--font-4xl:2.5rem;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:50%;--shadow-sm:0 2px 4px rgba(0, 0, 0, 0.1);--shadow-md:0 4px 12px rgba(66, 165, 245, 0.15);--shadow-lg:0 10px 25px rgba(99, 102, 241, 0.1);--shadow-xl:0 20px 40px rgba(79, 70, 229, 0.15);--transition-fast:0.2s ease;--transition-base:0.3s ease;--transition-slow:0.5s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#f0f4ff 0,#e6eeff 100%);min-height:100vh;overflow-x:hidden}.main-container{max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.main-header{text-align:center;margin-bottom:35px}.header-content{background:#fff;padding:40px var(--spacing-2xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);position:relative;overflow:hidden;border:1px solid rgba(224,231,255,.6)}.header-content::before{content:"";position:absolute;top:0;left:0;width:50px;height:50px;background:var(--primary-blue);border-bottom-right-radius:100px;z-index:1}.header-content::after{content:"";position:absolute;bottom:0;right:0;width:50px;height:50px;background:var(--primary-blue);border-top-left-radius:100px;z-index:1}.header-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--primary-blue) 0,var(--primary-blue-light) 100%);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;margin:0 auto 15px;box-shadow:0 10px 25px rgba(59,130,246,.3)}.header-icon i{font-size:var(--font-4xl);color:#fff}.header-title{font-size:var(--font-4xl);color:var(--gray-600);margin-bottom:10px;position:relative;z-index:1}.header-subtitle{font-size:var(--font-lg);color:#718096;font-weight:400;position:relative;z-index:1}.actions-section{display:flex;gap:var(--spacing-lg);margin-bottom:35px;align-items:center;flex-wrap:wrap}.search-container{flex:1;min-width:300px}.search-box{position:relative;display:flex;align-items:center}.search-input{width:100%;padding:var(--spacing-md) var(--spacing-lg) var(--spacing-md) 55px;font-size:var(--font-base);border:1px solid rgb(182 199 255 / 80%);border-radius:var(--radius-lg);background:#fff;transition:var(--transition-base);outline:0;box-shadow:0 0 8px 2px rgba(79,70,229,.1);font-family:Poppins,sans-serif;color:#333}.search-input:focus{border-color:rgba(79,70,229,.4);box-shadow:0 8px 25px rgba(79,70,229,.2);transform:translateY(-1px)}.search-input::placeholder{color:#a0aec0;font-weight:400}.search-icon{position:absolute;left:20px;color:#0061ff;font-size:var(--font-lg);z-index:1}.clear-btn{position:absolute;right:15px;font-size:var(--font-base);background:0 0;border:none;color:var(--gray-500);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-full);transition:var(--transition-fast)}.clear-btn:hover{color:var(--primary-blue);background:rgba(59,130,246,.1)}.create-btn{background:linear-gradient(135deg,#2f75e6 0,#438ae1 100%);color:#fff;border:none;padding:var(--spacing-md) 28px;font-size:var(--font-base);font-weight:600;border-radius:var(--radius-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm);transition:var(--transition-base);white-space:nowrap;box-shadow:0 0 8px 1px rgba(59,130,246,.3);text-shadow:0 1px 2px rgba(0,0,0,.1)}.create-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(59,130,246,.4);background:linear-gradient(135deg,var(--primary-blue-dark) 0,var(--primary-blue-light) 100%)}.create-btn:active{transform:scale(.98);color:#e0e7ff}.create-btn i{font-size:var(--font-xl)}.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;margin-bottom:40px}.group-card{background:#fff;border-radius:var(--radius-2xl);min-height:230px;padding:var(--spacing-xl);position:relative;overflow:hidden;transition:var(--transition-base);box-shadow:var(--shadow-sm);border:1px solid rgb(183 196 242 / 58%);display:flex;flex-direction:column;gap:var(--spacing-md);cursor:pointer;backdrop-filter:blur(5px)}.group-card.hide{opacity:0;transform:scale(.95);pointer-events:none}.group-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:8px;background:linear-gradient(90deg,var(--primary-blue),var(--primary-blue-light))}.group-card::after{content:'';position:absolute;top:0;right:0;width:100px;height:100px;background:radial-gradient(circle at top right,rgba(59,130,246,.1),transparent 70%);z-index:0;border-radius:0 0 0 100%}.group-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(59,130,246,.15);border-color:rgba(199,210,254,.8)}.group-header{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}.group-avatar{width:50px;height:50px;background:var(--primary-blue);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:var(--font-2xl);flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;margin-top:4px}.group-avatar:has(.group-avatar-image){background:0 0}.group-avatar .group-avatar-image{width:100%;height:100%;object-fit:fill;border-radius:0;position:relative}.group-avatar .group-avatar-image.group-avatar-image-loading{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:group-avatar-image-shimmer 1.5s infinite;border:2px dashed #ccc}.group-avatar .group-avatar-image.group-avatar-image-loading::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:15px;height:15px;border:2px solid #3b82f6;border-top:2px solid transparent;border-radius:50%;animation:avatar-loading-spin 1s linear infinite}.group-avatar span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.group-info{flex:1;margin-left:15px;position:relative;z-index:1}.group-name{font-size:var(--font-xl);font-weight:700;color:var(--gray-800);margin-bottom:5px;line-height:1.4;position:relative;padding-right:21px;z-index:1}.group-id{font-size:var(--font-sm);color:#718096;font-family:'Courier New',monospace;position:relative;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:98%}.groupDescription{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:90%;font-size:var(--font-base);color:var(--gray-600);line-height:1.5;margin-bottom:50px}.group-stats{display:flex;align-items:center;justify-content:flex-start;gap:var(--gap-sm);position:absolute;left:18px;bottom:15px;margin:0;border-top:1px solid rgb(185 191 198 / 50%);width:100%;padding-top:10px;z-index:1}.stat-item{display:flex;align-items:center;gap:var(--gap-sm);margin-left:0;color:#64748b;font-size:var(--font-sm);font-weight:500;transition:var(--transition-base);padding:6px 14px;background:rgba(59,130,246,.08);border-radius:var(--radius-md);border:1px solid rgba(59,130,246,.2)}.stat-item:hover{color:#3b82f6;background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.25);transform:translateY(-1px)}.stat-item i{color:#3381ff;font-size:var(--font-base)}.member-count{background:0 0;color:#1f74fd;padding:0;border-radius:0;font-weight:500;font-size:var(--font-sm);margin-left:0;box-shadow:none;transition:var(--transition-base)}.member-count:hover{color:#3b82f6}.memberCount{color:#2c72e4;font-size:var(--font-base);font-weight:600}.private-group-lock{height:23px;width:20px;position:absolute;top:8px;right:0}.private-group{opacity:.8}.private-group:hover{transform:none!important;box-shadow:0 1px 1px 0 rgba(99,102,241,.1)!important;border-color:rgb(183 196 242 / 58%)!important}.user-group{border:2px solid var(--primary-blue)!important;background:linear-gradient(135deg,#f8faff 0,#f0f4ff 100%)!important;position:relative}.user-group:hover{transform:translateY(-5px)!important;box-shadow:0 8px 25px rgba(59,130,246,.2)!important}.user-group-badge{position:absolute;top:5px;right:0;background:var(--primary-blue);color:#fff;border-radius:var(--radius-full);width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);box-shadow:var(--shadow-sm);z-index:10}.user-group-badge i{font-size:var(--font-xs)}.user-group-badge.admin-badge{background:linear-gradient(135deg,var(--accent-orange) 0,var(--accent-gold) 100%);box-shadow:var(--shadow-sm)}.user-group-badge.member-badge{background:var(--primary-blue);box-shadow:var(--shadow-sm)}.join-group-btn{background:linear-gradient(135deg,#4b8ef5 0,var(--primary-blue-dark) 100%);color:#fff;border:none;border-radius:var(--radius-md);padding:10px var(--spacing-md);font-size:var(--font-sm);font-weight:600;cursor:pointer;display:flex;align-items:center;gap:var(--gap-xs);transition:var(--transition-base);box-shadow:var(--shadow-md);position:absolute;bottom:0;right:33px;z-index:10;white-space:nowrap;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.join-group-btn:hover{background:linear-gradient(135deg,var(--primary-blue-dark) 0,#1d4ed8 100%);transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,.45);border-color:rgba(255,255,255,.3)}.join-group-btn i{font-size:var(--font-base);font-weight:600}.join-group-btn.pending{background:linear-gradient(135deg,var(--warning-color) 0,#d97706 100%)}.join-group-btn.pending:hover{transform:none;box-shadow:none}.join-group-btn:active{transform:scale(.98);color:#e0e7ff}.group-loading-spinner{text-align:center;padding:40px 20px;color:#2563eb}.group-load-spinner{width:40px;height:40px;border:4px solid rgba(37,99,235,.2);border-left-color:#2563eb;border-radius:50%;animation:loading-spin 1s linear infinite;margin:0 auto 15px}.no-results{text-align:center;padding:60px 20px;color:#2563eb}.no-results i{font-size:var(--font-4xl);margin-bottom:20px;opacity:.8}.no-results h3{font-size:var(--font-2xl);margin-bottom:10px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(59,130,246,.05);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:1;visibility:visible;transition:opacity .3s ease,visibility .3s ease}.modal-header{display:flex;align-items:center;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);justify-content:space-between;padding:25px 30px 20px 30px;border-bottom:1px solid rgba(226,232,240);position:relative;z-index:1}.modal-title-container{display:flex;align-items:center;gap:var(--gap-md)}.modal-icon{width:40px;height:40px;background:linear-gradient(135deg,#38bdf8 0,#60a5fa 100%);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-xl);box-shadow:0 8px 20px rgba(56,189,248,.2)}.modal-header h2{font-size:var(--font-xl);font-weight:700;color:#fff}.group-modal-close-btn{background:0 0;border:none;font-size:1.2rem;color:#fff;cursor:pointer;padding:10px;border-radius:50%;transition:all .2s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.group-modal-close-btn:hover{background:rgba(255,255,255,.2);color:#fff}.modal-body{padding:25px 30px;position:relative;z-index:1}.group-modal-content{background:#fff;border-radius:var(--radius-2xl);width:100%;max-width:500px;position:relative;overflow:hidden;box-shadow:var(--shadow-xl);transition:var(--transition-base);border:1px solid rgba(224,231,255,.8);max-height:80vh;overflow-y:auto;animation:modalSlideIn .3s ease-out}.group-modal-content::before{content:'';position:absolute;top:0;left:0;width:100%;height:8px;background:linear-gradient(90deg,#38bdf8,#60a5fa)}.group-modal-content::after{content:'';position:absolute;top:0;right:0;width:150px;height:150px;background:radial-gradient(circle at top right,rgba(56,189,248,.1),transparent 70%);z-index:0}.form-group{margin-bottom:25px}.form-group label{display:block;margin-bottom:10px;font-weight:700;color:var(--gray-600);font-size:var(--font-sm)}.input-container{position:relative}.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#2196f3;font-size:var(--font-base);z-index:1}.form-group textarea+.input-icon{top:22px;transform:none}.form-group input,.form-group textarea{width:100%;padding:var(--spacing-md) var(--spacing-lg) var(--spacing-md) 50px;border-radius:var(--radius-md);border:2px solid #64b5f6;font-size:var(--font-base);transition:var(--transition-base);background:var(--gray-100);outline:0;font-family:Poppins,sans-serif;box-shadow:var(--shadow-sm)}.form-group input:focus,.form-group textarea:focus{border-color:#42a5f5;box-shadow:0 0 0 3px rgba(66,165,245,.25);background:#fff;transform:translateY(-1px)}.form-group input::placeholder,.form-group textarea::placeholder{color:#a0aec0;font-weight:400}.form-group textarea{resize:vertical;min-height:90px}.form-group input[type=password]{padding-right:60px}.input-container input[type=file]{display:none}.input-container .file-input-label{display:flex;align-items:center;padding:15px 70px 15px 15px;background-color:#e3f2fd;border:2px solid #64b5f6;border-radius:8px;cursor:pointer;transition:all .3s ease;width:100%;box-sizing:border-box;box-shadow:0 2px 8px rgba(100,181,246,.15)}.input-container .file-input-label:hover{background-color:#bbdefb;border-color:#42a5f5;box-shadow:0 4px 12px rgba(66,165,245,.25);transform:translateY(-1px)}.input-container .file-input-label .file-input-text{margin-left:10px;color:#1976d2;font-weight:500}.input-container .file-input-label .file-input-icon{color:#2196f3;font-size:var(--font-base)}.admin-avatar-btn,.ready-images-btn{background:#fff;color:#1976d2;border:2px solid #64b5f6;border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;font-size:var(--font-base);font-weight:600;display:flex;align-items:center;justify-content:center;transition:var(--transition-base);height:40px;box-shadow:var(--shadow-sm);position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;overflow:hidden;min-width:40px;width:40px}.admin-avatar-btn:hover,.ready-images-btn:hover{background:#f5fbff;border-color:#42a5f5;transform:translateY(-50%) translateY(-2px);box-shadow:0 2px 6px rgba(66,165,245,.4)}.admin-avatar-btn:active,.ready-images-btn:active{transform:translateY(-50%);box-shadow:0 2px 4px rgba(66,165,245,.3)}.admin-avatar-btn i,.ready-images-btn i{font-size:var(--font-base);transition:var(--transition-base)}.admin-avatar-btn:hover i,.ready-images-btn:hover i{transform:scale(1.1)}.input-container select{width:100%;padding:var(--spacing-sm) 40px var(--spacing-sm) 15px;border:2px solid #64b5f6;border-radius:var(--radius-sm);background-color:var(--gray-100);color:#1976d2;font-family:Poppins,sans-serif;font-size:var(--font-base);font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%231976d2' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:12px;box-shadow:var(--shadow-sm)}.input-container select:hover{background-color:#e3f2fd;border-color:#42a5f5;box-shadow:0 4px 12px rgba(66,165,245,.25)}.input-container select:focus{outline:0;border-color:#42a5f5;box-shadow:0 0 0 3px rgba(66,165,245,.25);background-color:#fff}.input-container .select-wrapper{position:relative;width:100%}.input-container .select-wrapper .input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#2196f3;z-index:1}.input-container .select-wrapper select{padding-left:50px}.password-toggle{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:0 0;border:none;color:#6c757d;cursor:pointer;padding:8px;border-radius:50%;transition:all .2s ease;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.password-toggle:hover{background:rgba(108,117,125,.1);color:#495057;transform:translateY(-50%) scale(1.05)}.password-toggle:active{transform:translateY(-50%) scale(.95)}.password-toggle i{font-size:var(--font-lg);transition:var(--transition-fast)}.visibility-info{display:flex;align-items:center;gap:var(--gap-xs);margin-top:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:var(--gray-50);border-radius:6px;font-size:var(--font-xs);color:var(--gray-500);border-left:3px solid #eae4e4}.visibility-info i{color:#69a3d2;font-size:var(--font-sm)}.error-message{color:var(--error-color);font-size:var(--font-sm);margin-top:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:var(--radius-sm);white-space:pre-line;line-height:1.4}.error-message:before{content:"⚠️ ";margin-right:4px}.group-form-actions{display:flex;gap:var(--gap-md);justify-content:flex-end;margin-top:10px;padding-top:20px;border-top:1px solid #e0e0e0}.btn-primary,.btn-secondary{padding:14px 28px;border:none;border-radius:var(--radius-md);font-size:var(--font-base);font-weight:600;cursor:pointer;transition:var(--transition-base);display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}.btn-primary{flex:2;background:linear-gradient(135deg,var(--primary-blue) 0,var(--primary-blue-light) 100%);color:#fff;box-shadow:0 8px 20px rgba(56,189,248,.3);text-shadow:0 1px 2px rgba(0,0,0,.1);border:2px solid var(--primary-blue-dark)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(56,189,248,.4);background:linear-gradient(135deg,#0ea5e9 0,var(--primary-blue-light) 100%);border-color:#1d4ed8}.btn-primary:active{transform:scale(.98);color:#e0e7ff}.btn-secondary{flex:1;background:#fff;color:#38a8f8;border:2px solid #38bdf8;box-shadow:0 2px 8px rgba(0,0,0,.05)}.btn-secondary:hover{background:rgba(56,189,248,.1);transform:translateY(-1px);box-shadow:0 4px 12px rgba(56,189,248,.15)}.btn-secondary:active{transform:scale(.98);color:#e0e7ff}.btn-danger{background:var(--gray-50);color:var(--gray-500);border:2px solid #c4c7cd;padding:var(--spacing-sm) var(--spacing-xl);border-radius:10px;font-size:var(--font-base);font-weight:600;cursor:pointer;transition:var(--transition-base);display:flex;align-items:center;justify-content:center;gap:var(--gap-xs)}.btn-danger:hover{transform:translateY(-2px);background:var(--gray-200);border-color:var(--gray-300);color:var(--gray-700)}.btn-danger i{font-size:var(--font-sm)}.btn-danger:active{transform:scale(.98);color:#e0e7ff}.join-modal-content{background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.15);max-width:500px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:modalSlideIn .3s ease-out;z-index:1}.join-modal-content .modal-body{padding:0}.join-info-section{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff;padding:25px;border-radius:20px 20px 0 0;margin-bottom:0;position:relative}.join-modal-close-btn{background:0 0;border:none;font-size:1.2rem;color:#fff;cursor:pointer;padding:10px;border-radius:50%;transition:all .2s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center;position:absolute;top:20px;right:20px;z-index:10}.join-modal-close-btn:hover{background:rgba(255,255,255,.2);color:#fff}.join-form-content{padding:25px 30px}.join-group-info{display:flex;align-items:center;gap:var(--gap-md)}.join-group-avatar{width:60px;height:60px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.3);flex-shrink:0}.join-group-avatar img{width:100%;height:100%;object-fit:cover}.join-group-details h3{margin:0;font-size:var(--font-xl);font-weight:600}.join-group-details p{margin:5px 0 0 0;opacity:.9;font-size:var(--font-sm)}.form-section{margin-bottom:20px;padding-top:5px}.section-title{display:flex;align-items:center;gap:var(--gap-sm);margin-bottom:var(--spacing-lg);color:var(--gray-700);font-size:var(--font-lg);font-weight:600;border-bottom:2px solid var(--gray-200);padding-bottom:var(--gap-sm)}.section-title i{color:#667eea;font-size:var(--font-base)}.join-status-message{background-color:#f0fdf4;color:#166534;padding:var(--spacing-lg);border:1px solid #b2c9ba;border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);display:flex;align-items:center;gap:var(--gap-md)}.status-icon{font-size:var(--font-3xl);flex-shrink:0}.status-text h4{margin:0 0 5px 0;font-size:var(--font-lg);font-weight:600}.status-text p{margin:0;opacity:.9;font-size:var(--font-sm)}#successActions{display:none;gap:var(--gap-md);justify-content:center;width:100%;flex-direction:row;align-items:center}#successActions.show{display:flex}#successActions button{display:inline-block;visibility:visible;opacity:1;flex:1;min-width:0}.join-avatar-btn{background:#fff;color:#1976d2;border:2px solid #64b5f6;border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;font-size:var(--font-base);font-weight:600;display:flex;align-items:center;justify-content:center;transition:var(--transition-base);height:40px;box-shadow:var(--shadow-sm);position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;overflow:hidden;min-width:40px;width:40px}.join-avatar-btn:hover{background:#f5fbff;border-color:#42a5f5;transform:translateY(-50%) translateY(-2px);box-shadow:0 2px 6px rgba(66,165,245,.4)}.join-avatar-btn:active{transform:translateY(-50%);box-shadow:0 2px 4px rgba(66,165,245,.3)}.ready-images-modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);backdrop-filter:blur(4px)}.ready-images-modal.show{display:flex;align-items:center;justify-content:center}#adminAvatarModal,#joinAvatarModal{z-index:10010!important}.ready-images-modal-content{background-color:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:90vw;max-height:90vh;width:500px;overflow:hidden;animation:modalSlideIn .3s ease-out}.ready-images-modal-content .modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%)}.ready-images-modal-content .modal-header h3{margin:0;font-size:var(--font-lg);font-weight:600;color:#fff;display:flex;align-items:center;gap:var(--gap-xs)}.ready-images-modal-content .modal-header h3 i{color:#fff}.ready-images-modal-content .modal-close-btn{background:0 0;border:none;font-size:1.2rem;color:#fff;cursor:pointer;padding:10px;border-radius:50%;transition:all .2s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.ready-images-modal-content .modal-close-btn:hover{background:rgba(255,255,255,.2);color:#fff}.ready-images-modal-content .modal-body{padding:20px;max-height:60vh;overflow-y:auto;transition:max-height .3s ease-out}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--gap-md);padding:5px;transition:height .3s ease-out}.avatar-item{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .3s ease;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);justify-self:center}.avatar-item:hover{border-color:#5b9bd5;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.avatar-item.selected{border-color:#28a745;box-shadow:0 0 0 2px rgba(40,167,69,.2)}.avatar-item img{width:100%;height:100%;object-fit:fill;transition:transform .3s ease}.avatar-item:hover img{transform:scale(1.05)}.avatar-item .check-icon{position:absolute;top:4px;right:4px;background-color:var(--success-color);color:#fff;border-radius:var(--radius-full);width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);opacity:0;transition:var(--transition-base)}.avatar-item.selected .check-icon{opacity:1}.confirm-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:10000}.confirm-modal-content{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-2xl);max-width:400px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:modalSlideIn .3s ease-out}.confirm-modal-icon{width:60px;height:60px;background:linear-gradient(135deg,var(--warning-color) 0,#d97706 100%);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-lg)}.confirm-modal-icon i{color:#fff;font-size:var(--font-2xl)}.confirm-modal-title{margin:0 0 15px 0;color:var(--gray-700);font-size:var(--font-xl)}.confirm-modal-text{margin:0 0 25px 0;color:var(--gray-500);line-height:1.5}.confirm-modal-actions{display:flex;gap:var(--gap-md);justify-content:center}.btn-cancel-no{background:var(--gray-200);color:var(--gray-700);border:none;padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--radius-sm);font-weight:500;cursor:pointer;transition:var(--transition-base)}.btn-cancel-no:hover{background:var(--gray-300);transform:translateY(-1px)}.btn-cancel-yes{background:linear-gradient(135deg,#ef4444 0,#dc2626 100%);color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--radius-sm);font-weight:500;cursor:pointer;transition:var(--transition-base)}.btn-cancel-yes:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.3)}.notification-toast,.share-toast,.toast{position:fixed;top:50px;right:10px;justify-content:center;align-items:center;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-sm);color:#fff;z-index:10000;font-size:var(--font-sm);font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:slideInRight .3s ease;min-width:80px}.notification-success,.share-success,.toast-success{background:var(--success-color)}.notification-error,.toast-error{background:var(--error-color)}.notification-info,.toast-info{background:var(--info-color)}.notification-hide,.share-hide,.toast-hide{animation:slideOut .3s ease forwards}@keyframes group-avatar-image-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes avatar-loading-spin{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes loading-spin{to{transform:rotate(360deg)}}@keyframes modalSlideIn{from{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}@media (max-width:480px){.header-content{padding:var(--spacing-2xl) var(--spacing-lg)}.header-icon{width:60px;height:60px}.header-icon i{font-size:var(--font-3xl)}.header-title{font-size:var(--font-3xl)}.header-subtitle{font-size:var(--font-base)}.search-input{padding:14px 15px 14px 50px}.create-btn{padding:14px var(--spacing-lg);font-size:var(--font-sm)}.modal-icon{width:35px;height:35px;font-size:var(--font-base)}.modal-header h2{font-size:var(--font-lg)}#successActions button{max-width:100%;font-size:var(--font-sm);padding:var(--spacing-sm) var(--spacing-md)}}@media (max-width:768px){#successActions{flex-direction:column;gap:var(--gap-sm)}#successActions button{width:100%;max-width:280px;flex:none}.main-container{padding:15px}.header-icon{width:70px;height:70px}.header-icon i{font-size:var(--font-3xl)}.header-title{font-size:var(--font-3xl)}.actions-section{flex-direction:column;align-items:stretch}.search-container{min-width:auto}.group-card{padding:22px}.group-desc{width:100%;margin-top:-10px;margin-bottom:10px}.groupDescription{max-width:95%}.group-modal-content{width:95%;margin:15px}.modal-body{padding:22px}.group-form-actions{flex-direction:column}.join-modal-content{width:95%;max-height:95vh}.join-info-section{padding:20px}.join-group-avatar{width:50px;height:50px}.join-group-details h3{font-size:var(--font-xl)}.section-title{font-size:var(--font-base)}.join-status-message{flex-direction:column;text-align:center;gap:var(--gap-sm)}.status-icon{font-size:var(--font-2xl)}}