/* ===== VARIÁVEIS E RESET ===== */
         :root {
             --primary-color: #00ff88;
             --primary-dark: #00cc6a;
             --primary-light: #33ff9c;
             --primary-rgb: 0, 255, 136;

             --bg-primary: #0a0a0a;
             --bg-secondary: #111111;
             --bg-tertiary: #1a1a1a;
             --bg-card: #151515;

             --text-primary: #ffffff;
             --text-secondary: #a0a0a0;
             --text-tertiary: #666666;

             --border-color: #2a2a2a;
             --success-color: #00ff88;
             --danger-color: #ff4444;
             --warning-color: #ffaa00;
             --info-color: #00a8ff;

             --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
             --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
             --shadow-primary: 0 4px 20px rgba(0, 255, 136, 0.3);

             --radius-md: 8px;
             --radius-lg: 12px;
             --radius-full: 50%;

             --transition: 250ms ease;
         }

         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }

         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             background: var(--bg-primary);
             color: var(--text-primary);
             line-height: 1.6;
         }

         .container {
             max-width: 1200px;
             margin: 0 auto;
             padding: 0 20px;
         }

         /* ===== HEADER COMPLETO ===== */
         .main-header {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             z-index: 1000;
             background: rgba(10, 10, 10, 0.95);
             backdrop-filter: blur(10px);
             border-bottom: 1px solid var(--border-color);
         }

         .top-bar {
             height: 70px;
         }

         .top-bar-content {
             display: flex;
             align-items: center;
             justify-content: space-between;
             height: 100%;
             gap: 20px;
         }

         .logo-section {
             display: flex;
             align-items: center;
             gap: 15px;
         }

         .menu-toggle {
             display: none;
             background: none;
             border: none;
             color: var(--text-primary);
             font-size: 1.25rem;
             cursor: pointer;
             padding: 8px;
             border-radius: var(--radius-md);
             transition: background var(--transition);
         }

         @media (max-width: 992px) {
             .menu-toggle {
                 display: block;
             }
         }

         .menu-toggle:hover {
             background: var(--bg-secondary);
         }

         .logo {
             display: flex;
             align-items: center;
             gap: 10px;
             text-decoration: none;
             font-weight: 700;
         }

         .logo i {
             color: var(--primary-color);
             font-size: 1.5rem;
         }

         .logo-text {
             display: flex;
             flex-direction: column;
             line-height: 1;
         }

         .logo-primary {
             color: var(--text-primary);
             font-size: 0.9rem;
             font-weight: 400;
         }

         .logo-secondary {
             color: var(--primary-color);
             font-size: 1.1rem;
             font-weight: 700;
         }

         /* Menu de Navegação */
         .main-navigation {
             background: var(--bg-secondary);
             border-bottom: 1px solid var(--border-color);
         }

         .nav-menu {
             display: flex;
             list-style: none;
             gap: 5px;
             overflow-x: auto;
             scrollbar-width: none;
         }

         .nav-menu::-webkit-scrollbar {
             display: none;
         }

         .nav-item {
             flex-shrink: 0;
         }

         .nav-item a {
             display: flex;
             align-items: center;
             gap: 10px;
             padding: 15px 20px;
             color: var(--text-secondary);
             text-decoration: none;
             white-space: nowrap;
             border-radius: var(--radius-md);
             transition: all var(--transition);
         }

         .nav-item a:hover {
             color: var(--text-primary);
             background: var(--bg-tertiary);
         }

         .nav-item.active a {
             color: var(--primary-color);
             background: rgba(var(--primary-rgb), 0.1);
         }

         .nav-item a i {
             font-size: 1.1rem;
         }

         .nav-badge {
             position: absolute;
             top: 8px;
             right: 8px;
             background: var(--primary-color);
             color: var(--bg-primary);
             font-size: 0.7rem;
             min-width: 18px;
             height: 18px;
             border-radius: 9px;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 0 4px;
             font-weight: 600;
         }

         /* User Section */
         .user-section {
             display: flex;
             align-items: center;
             gap: 15px;
         }

         .notification-btn {
             background: none;
             border: none;
             color: var(--text-primary);
             font-size: 1.25rem;
             cursor: pointer;
             padding: 8px;
             border-radius: var(--radius-md);
             position: relative;
             transition: background var(--transition);
         }

         .notification-btn:hover {
             background: var(--bg-secondary);
         }

         .notification-badge {
             position: absolute;
             top: 5px;
             right: 5px;
             background: var(--danger-color);
             color: white;
             font-size: 0.7rem;
             min-width: 18px;
             height: 18px;
             border-radius: 9px;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 0 4px;
             font-weight: 600;
         }

         .quick-action-btn {
             background: var(--primary-color);
             color: var(--bg-primary);
             border: none;
             width: 40px;
             height: 40px;
             border-radius: var(--radius-md);
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             font-size: 1.25rem;
             transition: all var(--transition);
         }

         .quick-action-btn:hover {
             background: var(--primary-dark);
             transform: rotate(90deg);
         }

         .profile-toggle {
             display: flex;
             align-items: center;
             gap: 10px;
             background: none;
             border: none;
             color: var(--text-primary);
             cursor: pointer;
             padding: 8px;
             border-radius: var(--radius-lg);
             transition: all var(--transition);
         }

         .profile-toggle:hover {
             background: var(--bg-secondary);
             transform: scale(1.05);
         }

         .profile-avatar {
             position: relative;
         }

         .profile-avatar img {
             width: 40px;
             height: 40px;
             border-radius: var(--radius-full);
             object-fit: cover;
             border: 2px solid transparent;
             transition: border-color var(--transition);
         }

         .profile-toggle:hover .profile-avatar img {
             border-color: var(--primary-color);
         }

         .user-status {
             position: absolute;
             bottom: 0;
             right: 0;
             width: 12px;
             height: 12px;
             border-radius: 50%;
             background: var(--success-color);
             border: 2px solid var(--bg-card);
         }

         .profile-info {
             text-align: left;
         }

         .profile-name {
             display: block;
             font-weight: 600;
             font-size: 0.95rem;
         }

         .profile-level {
             display: block;
             color: var(--text-secondary);
             font-size: 0.85rem;
         }

         .user-status {
             position: absolute;
             bottom: 0;
             right: 0;
             width: 12px;
             height: 12px;
             border-radius: 50%;
             background: var(--success-color);
             border: 2px solid var(--bg-card);
         }

         .user-status.online {
             background: var(--success-color);
         }

         .user-status.away {
             background: var(--warning-color);
         }

         .user-status.busy {
             background: var(--danger-color);
         }

         .user-status.offline {
             background: var(--text-tertiary);
         }

         .profile-info {
             text-align: left;
         }

         .profile-name {
             display: block;
             font-weight: 600;
             font-size: 0.95rem;
         }

         .profile-level {
             display: block;
             color: var(--text-secondary);
             font-size: 0.85rem;
         }

         /* ===== CONTEÚDO PRINCIPAL ===== */
         .main-content {
             margin-top: 140px;
             padding: 30px 0;
             min-height: calc(100vh - 200px);
         }

         /* Header da Comunidade */
         .community-header {
             margin-bottom: 40px;
             text-align: center;
         }

         .community-title {
             font-size: 2rem;
             margin-bottom: 10px;
             color: var(--primary-color);
         }

         .community-subtitle {
             color: var(--text-secondary);
             margin-bottom: 30px;
         }

         /* Barra de Pesquisa */
         .search-container {
             max-width: 600px;
             margin: 0 auto 40px;
             position: relative;
         }

         .search-box {
             width: 100%;
             padding: 15px 50px 15px 20px;
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
             border-radius: var(--radius-lg);
             color: var(--text-primary);
             font-size: 1rem;
             transition: all var(--transition);
         }

         .search-box:focus {
             outline: none;
             border-color: var(--primary-color);
             box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
         }

         .search-icon {
             position: absolute;
             right: 20px;
             top: 50%;
             transform: translateY(-50%);
             color: var(--text-secondary);
         }

         /* Filtros */
         .community-filters {
             display: flex;
             flex-wrap: wrap;
             gap: 15px;
             margin-bottom: 40px;
             justify-content: center;
         }

         .filter-btn {
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
             color: var(--text-secondary);
             padding: 10px 20px;
             border-radius: var(--radius-md);
             cursor: pointer;
             transition: all var(--transition);
             font-weight: 500;
             display: flex;
             align-items: center;
             gap: 10px;
         }

         .filter-btn:hover {
             background: var(--bg-tertiary);
             color: var(--text-primary);
         }

         .filter-btn.active {
             background: rgba(var(--primary-rgb), 0.1);
             color: var(--primary-color);
             border-color: var(--primary-color);
         }

         /* Grid de Grupos */
         .groups-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
             gap: 25px;
             margin-bottom: 40px;
         }

         /* Card de Grupo */
         .group-card {
             background: var(--bg-card);
             border: 1px solid var(--border-color);
             border-radius: var(--radius-lg);
             overflow: hidden;
             transition: all var(--transition);
         }

         .group-card:hover {
             border-color: var(--primary-color);
             transform: translateY(-5px);
             box-shadow: var(--shadow-lg);
         }

         .group-card.featured {
             border-color: var(--primary-color);
             border-width: 2px;
         }

         .group-cover {
             position: relative;
         }

         .group-banner {
             width: 100%;
             height: 180px;
             object-fit: cover;
             display: block;
         }

         .group-avatar {
             position: absolute;
             bottom: -25px;
             left: 20px;
             width: 60px;
             height: 60px;
             border-radius: var(--radius-full);
             border: 3px solid var(--bg-card);
             background: var(--bg-secondary);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 1.5rem;
             color: var(--primary-color);
         }

         .group-status {
             position: absolute;
             top: 15px;
             right: 15px;
             padding: 5px 12px;
             border-radius: var(--radius-md);
             font-size: 0.75rem;
             font-weight: 600;
             display: flex;
             align-items: center;
             gap: 5px;
             background: rgba(0, 0, 0, 0.8);
             color: var(--text-primary);
         }

         .group-status.active {
             background: rgba(0, 255, 136, 0.8);
         }

         .group-status.private {
             background: rgba(255, 68, 68, 0.8);
         }

         .group-body {
             padding: 40px 20px 20px;
         }

         .group-title {
             font-size: 1.25rem;
             margin-bottom: 10px;
             color: var(--text-primary);
             line-height: 1.3;
         }

         .group-description {
             color: var(--text-secondary);
             font-size: 0.9rem;
             margin-bottom: 15px;
             line-height: 1.5;
             display: -webkit-box;
             -webkit-line-clamp: 3;
             line-clamp: 3;
             -webkit-box-orient: vertical;
             overflow: hidden;
         }

         .group-meta {
             display: flex;
             justify-content: space-between;
             margin-bottom: 20px;
             font-size: 0.85rem;
             color: var(--text-tertiary);
         }

         .group-members {
             display: flex;
             align-items: center;
             gap: 5px;
         }

         .group-category {
             display: flex;
             align-items: center;
             gap: 5px;
         }

         .group-actions {
             display: flex;
             gap: 10px;
         }

         /* ===== BOTÕES ===== */
         .btn {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             gap: 10px;
             padding: 12px 24px;
             border: none;
             border-radius: var(--radius-md);
             font-family: inherit;
             font-weight: 600;
             font-size: 0.95rem;
             cursor: pointer;
             transition: all var(--transition);
             text-decoration: none;
             white-space: nowrap;
         }

         .btn-primary {
             background: var(--primary-color);
             color: var(--bg-primary);
         }

         .btn-primary:hover {
             background: var(--primary-dark);
             transform: translateY(-2px);
             box-shadow: var(--shadow-primary);
         }

         .btn-secondary {
             background: transparent;
             color: var(--primary-color);
             border: 2px solid var(--primary-color);
         }

         .btn-secondary:hover {
             background: rgba(var(--primary-rgb), 0.1);
         }

         .btn-outline {
             background: transparent;
             color: var(--text-primary);
             border: 2px solid var(--border-color);
         }

         .btn-outline:hover {
             border-color: var(--primary-color);
             color: var(--primary-color);
         }

         .btn-sm {
             padding: 8px 16px;
             font-size: 0.85rem;
         }

         .btn-icon {
             width: 40px;
             height: 40px;
             padding: 0;
             justify-content: center;
         }

         /* ===== MODAL DO CHAT ===== */
         .modal {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: rgba(0, 0, 0, 0.95);
             display: flex;
             align-items: center;
             justify-content: center;
             z-index: 2000;
             opacity: 0;
             visibility: hidden;
             transition: all var(--transition);
             padding: 20px;
         }

         .modal.active {
             opacity: 1;
             visibility: visible;
         }

         .modal-content {
             background: var(--bg-card);
             border-radius: var(--radius-lg);
             padding: 30px;
             width: 90%;
             max-width: 500px;
             max-height: 90vh;
             overflow-y: auto;
             border: 1px solid var(--border-color);
             box-shadow: var(--shadow-lg);
             transform: translateY(-20px);
             transition: transform var(--transition);
         }

         .modal.active .modal-content {
             transform: translateY(0);
         }

         .modal-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 20px;
             border-bottom: 1px solid var(--border-color);
             background: var(--bg-card);
             flex-shrink: 0;
         }

         .modal-header h3 {
             margin: 0;
             display: flex;
             align-items: center;
             gap: 10px;
             font-size: 1.5rem;
             color: var(--primary-color);
         }

         .modal-close {
             background: none;
             border: none;
             color: var(--text-secondary);
             font-size: 1.25rem;
             cursor: pointer;
             padding: 5px;
             border-radius: var(--radius-md);
             transition: all var(--transition);
         }

         .modal-close:hover {
             color: var(--text-primary);
             background: var(--bg-secondary);
         }

         /* Chat Container */
         .chat-container {
             display: flex;
             flex-direction: column;
             height: 100%;
             overflow: hidden;
         }

         /* Chat Messages */
         .chat-messages {
             flex: 1;
             overflow-y: auto;
             padding: 20px;
             display: flex;
             flex-direction: column;
             gap: 15px;
         }

         .message {
             display: flex;
             gap: 10px;
             max-width: 80%;
             animation: fadeIn 0.3s ease;
         }

         @keyframes fadeIn {
             from {
                 opacity: 0;
                 transform: translateY(10px);
             }

             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }

         .message.received {
             align-self: flex-start;
         }

         .message.sent {
             align-self: flex-end;
             flex-direction: row-reverse;
         }

         .message-avatar {
             width: 36px;
             height: 36px;
             border-radius: var(--radius-full);
             object-fit: cover;
             flex-shrink: 0;
         }

         .message-content {
             display: flex;
             flex-direction: column;
             gap: 5px;
         }

         .message.received .message-content {
             align-items: flex-start;
         }

         .message.sent .message-content {
             align-items: flex-end;
         }

         .message-bubble {
             padding: 12px 16px;
             border-radius: 18px;
             max-width: 100%;
             word-wrap: break-word;
             line-height: 1.4;
         }

         .message.received .message-bubble {
             background: var(--bg-tertiary);
             color: var(--text-primary);
             border-radius: 18px 18px 18px 4px;
         }

         .message.sent .message-bubble {
             background: rgba(var(--primary-rgb), 0.2);
             color: var(--primary-color);
             border-radius: 18px 18px 4px 18px;
         }

         .message-info {
             display: flex;
             gap: 8px;
             align-items: center;
             font-size: 0.8rem;
             color: var(--text-tertiary);
         }

         .message-time {
             font-size: 0.75rem;
         }

         .message-status {
             font-size: 0.7rem;
         }

         .message-status.read {
             color: var(--success-color);
         }

         /* Chat Input */
         .chat-input-container {
             padding: 20px;
             border-top: 1px solid var(--border-color);
             background: var(--bg-card);
             flex-shrink: 0;
         }

         .chat-input-form {
             display: flex;
             gap: 10px;
             align-items: flex-end;
         }

         .message-input {
             flex: 1;
             padding: 12px 16px;
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
             border-radius: var(--radius-lg);
             color: var(--text-primary);
             font-size: 0.95rem;
             resize: none;
             min-height: 44px;
             max-height: 120px;
             font-family: inherit;
             line-height: 1.4;
         }

         .message-input:focus {
             outline: none;
             border-color: var(--primary-color);
         }

         .send-button {
             background: var(--primary-color);
             color: var(--bg-primary);
             border: none;
             width: 44px;
             height: 44px;
             border-radius: var(--radius-md);
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: all var(--transition);
             flex-shrink: 0;
         }

         .send-button:hover {
             background: var(--primary-dark);
             transform: scale(1.05);
         }

         .send-button:disabled {
             opacity: 0.5;
             cursor: not-allowed;
             transform: none;
         }

         /* Chat Actions */
         .chat-actions {
             display: flex;
             gap: 10px;
             margin-top: 10px;
         }

         .chat-action-btn {
             background: none;
             border: none;
             color: var(--text-secondary);
             cursor: pointer;
             padding: 8px;
             border-radius: var(--radius-md);
             transition: all var(--transition);
         }

         .chat-action-btn:hover {
             color: var(--primary-color);
             background: var(--bg-tertiary);
         }

         /* Members Sidebar */
         .members-sidebar {
             position: absolute;
             right: 0;
             top: 0;
             width: 300px;
             height: 100%;
             background: var(--bg-card);
             border-left: 1px solid var(--border-color);
             transform: translateX(100%);
             transition: transform var(--transition);
             z-index: 2;
             overflow-y: auto;
             display: flex;
             flex-direction: column;
         }

         .members-sidebar.active {
             transform: translateX(0);
         }

         .members-header {
             padding: 20px;
             border-bottom: 1px solid var(--border-color);
             display: flex;
             justify-content: space-between;
             align-items: center;
         }

         .members-list {
             padding: 15px;
             flex: 1;
             overflow-y: auto;
         }

         .member-item {
             display: flex;
             align-items: center;
             gap: 12px;
             padding: 12px;
             border-radius: var(--radius-md);
             transition: all var(--transition);
             cursor: pointer;
         }

         .member-item:hover {
             background: var(--bg-tertiary);
         }

         .member-avatar {
             width: 40px;
             height: 40px;
             border-radius: var(--radius-full);
             object-fit: cover;
         }

         .member-info {
             flex: 1;
         }

         .member-name {
             font-weight: 600;
             font-size: 0.95rem;
             margin-bottom: 2px;
         }

         .member-role {
             color: var(--text-secondary);
             font-size: 0.8rem;
         }

         .member-status {
             width: 10px;
             height: 10px;
             border-radius: 50%;
             border: 2px solid var(--bg-card);
         }

         .member-status.online {
             background: var(--success-color);
         }

         .member-status.offline {
             background: var(--text-tertiary);
         }

         .member-status.away {
             background: var(--warning-color);
         }

         /* ===== MODAL DE CONFIRMAÇÃO ===== */
         .confirm-modal .modal-content {
             max-width: 400px;
             height: auto;
             max-height: 90vh;
         }

         .confirm-content {
             text-align: center;
             padding: 20px;
         }

         .confirm-icon {
             font-size: 3rem;
             color: var(--primary-color);
             margin-bottom: 20px;
         }

         /* ===== MODAL DE DETALHES DO GRUPO ===== */
         .details-modal .modal-content {
             max-width: 800px;
             height: auto;
             max-height: 90vh;
             overflow-y: auto;
         }

         .details-header {
             display: grid;
             grid-template-columns: 200px 1fr;
             gap: 30px;
             margin-bottom: 30px;
         }

         .detail-cover {
             width: 100%;
             height: 200px;
             object-fit: cover;
             border-radius: var(--radius-md);
             box-shadow: var(--shadow-md);
         }

         .detail-info h2 {
             font-size: 1.75rem;
             margin-bottom: 10px;
         }

         .detail-meta {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 15px;
             margin: 20px 0;
         }

         .meta-item {
             text-align: center;
             padding: 15px;
             background: var(--bg-tertiary);
             border-radius: var(--radius-md);
         }

         .meta-value {
             font-size: 1.5rem;
             font-weight: 700;
             color: var(--primary-color);
             margin-bottom: 5px;
         }

         .meta-label {
             color: var(--text-secondary);
             font-size: 0.85rem;
         }

         .detail-section {
             margin-bottom: 25px;
         }

         .detail-section h4 {
             margin-bottom: 10px;
             color: var(--primary-color);
         }

         .category-tag {
             display: inline-block;
             padding: 5px 12px;
             background: var(--bg-tertiary);
             color: var(--text-secondary);
             border-radius: var(--radius-md);
             font-size: 0.85rem;
             margin-right: 8px;
             margin-bottom: 8px;
         }

         /* ===== MENSAGENS ===== */
         .toast {
             position: fixed;
             bottom: 20px;
             right: 20px;
             background: var(--bg-card);
             border-left: 4px solid var(--info-color);
             padding: 15px 20px;
             border-radius: var(--radius-md);
             box-shadow: var(--shadow-lg);
             display: flex;
             align-items: center;
             gap: 15px;
             z-index: 3000;
             transform: translateX(100%);
             opacity: 0;
             transition: all var(--transition);
         }

         .toast.show {
             transform: translateY(0);
             opacity: 1;
         }

         .toast.success {
             border-left-color: var(--success-color);
         }

         .toast.error {
             border-left-color: var(--danger-color);
         }

         .toast.warning {
             border-left-color: var(--warning-color);
         }

         .toast-icon {
             font-size: 1.25rem;
         }

         .toast.success .toast-icon {
             color: var(--success-color);
         }

         .toast.error .toast-icon {
             color: var(--danger-color);
         }

         .toast.warning .toast-icon {
             color: var(--warning-color);
         }

         .toast.info .toast-icon {
             color: var(--info-color);
         }

         .toast-content {
             flex: 1;
         }

         .toast-title {
             font-weight: 600;
             margin-bottom: 5px;
         }

         .toast-message {
             color: var(--text-secondary);
             font-size: 0.9rem;
         }

         .toast-close {
             background: none;
             border: none;
             color: var(--text-secondary);
             cursor: pointer;
             padding: 5px;
             border-radius: var(--radius-md);
             transition: all var(--transition);
         }

         .toast-close:hover {
             color: var(--text-primary);
             background: var(--bg-secondary);
         }

         /* ===== FOOTER ===== */
         .main-footer {
             background: var(--bg-secondary);
             border-top: 1px solid var(--border-color);
             padding: 30px 0;
             text-align: center;
         }

         .footer-content {
             display: flex;
             flex-direction: column;
             align-items: center;
             gap: 20px;
         }

         .footer-logo {
             display: flex;
             align-items: center;
             gap: 10px;
             font-size: 1.25rem;
             font-weight: 700;
             color: var(--primary-color);
         }

         .footer-logo i {
             font-size: 1.5rem;
         }

         .footer-links {
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
             gap: 25px;
         }

         .footer-links a {
             color: var(--text-secondary);
             text-decoration: none;
             transition: color var(--transition);
         }

         .footer-links a:hover {
             color: var(--primary-color);
         }

         .footer-copyright {
             color: var(--text-tertiary);
             font-size: 0.9rem;
         }

         /* ===== ESTATÍSTICAS ===== */
         .community-stats {
             text-align: center;
             margin-top: 50px;
             padding: 30px;
             background: var(--bg-card);
             border-radius: var(--radius-lg);
             border: 1px solid var(--border-color);
         }

         .community-stats h3 {
             margin-bottom: 20px;
             color: var(--primary-color);
         }

         .stats-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
             gap: 20px;
         }

         .stat-item {
             text-align: center;
         }

         .stat-value {
             font-size: 2.5rem;
             font-weight: 700;
             color: var(--primary-color);
             margin-bottom: 5px;
         }

         .stat-label {
             color: var(--text-secondary);
         }

         /* ===== RESPONSIVIDADE ===== */
         @media (max-width: 992px) {
             .menu-toggle {
                 display: block;
             }


             .nav-menu {
                 flex-direction: column;
                 padding: 15px;
             }

             .nav-item a {
                 justify-content: space-between;
                 padding: 15px;
             }

             .main-content {
                 margin-top: 70px;
             }

             .profile-info {
                 display: none;
             }

             .groups-grid {
                 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
             }

             .modal-content {
                 width: 98%;
                 height: 98vh;
             }

             .members-sidebar {
                 width: 100%;
                 max-width: 300px;
             }

             .details-header {
                 grid-template-columns: 1fr;
             }

             .detail-cover {
                 height: 150px;
             }
         }

         @media (max-width: 768px) {
             .groups-grid {
                 grid-template-columns: 1fr;
             }

             .community-filters {
                 flex-direction: column;
                 align-items: center;
             }

             .filter-btn {
                 width: 100%;
                 max-width: 300px;
             }

             .group-actions {
                 flex-direction: column;
             }

             .group-actions .btn {
                 width: 100%;
                 justify-content: center;
             }

             .message {
                 max-width: 90%;
             }

             .modal-header {
                 flex-direction: column;
                 align-items: flex-start;
                 gap: 10px;
             }

             .chat-input-form {
                 flex-direction: column;
                 gap: 10px;
             }

             .message-input {
                 width: 100%;
             }

             .send-button {
                 width: 100%;
                 height: 44px;
             }
         }

         @media (max-width: 480px) {
             .search-box {
                 padding: 12px 45px 12px 15px;
                 font-size: 0.95rem;
             }

             .toast {
                 left: 20px;
                 right: 20px;
                 bottom: 20px;
             }

             .group-body {
                 padding: 40px 15px 15px;
             }

             .modal-header h3 {
                 font-size: 1.2rem;
             }

             .detail-meta {
                 grid-template-columns: 1fr;
             }

             .stats-grid {
                 grid-template-columns: repeat(2, 1fr);
             }
         }

         /* Modal do Perfil */
         .profile-modal .modal-content {
             max-width: 600px;
             height: auto;
             max-height: 90vh;
             overflow-y: auto;
         }

         .profile-header {
             display: flex;
             flex-direction: column;
             align-items: center;
             text-align: center;
             margin-bottom: 30px;
         }

         .profile-avatar-large {
             position: relative;
             margin-bottom: 20px;
         }

         .profile-avatar-large img {
             width: 150px;
             height: 150px;
             border-radius: var(--radius-full);
             object-fit: cover;
             border: 4px solid var(--primary-color);
             box-shadow: var(--shadow-primary);
         }

         .change-avatar-btn {
             position: absolute;
             bottom: 10px;
             right: 10px;
             width: 40px;
             height: 40px;
             background: var(--primary-color);
             color: var(--bg-primary);
             border: none;
             border-radius: var(--radius-full);
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             font-size: 1rem;
             transition: all var(--transition);
         }

         .change-avatar-btn:hover {
             background: var(--primary-dark);
             transform: scale(1.1);
         }

         .profile-info-large h2 {
             font-size: 1.75rem;
             margin-bottom: 5px;
             color: var(--text-primary);
         }

         .profile-info-large .email {
             color: var(--text-secondary);
             margin-bottom: 15px;
             font-size: 0.95rem;
         }

         .profile-stats {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 15px;
             margin: 30px 0;
         }

         .stat-item-large {
             text-align: center;
             padding: 20px 15px;
             background: var(--bg-tertiary);
             border-radius: var(--radius-md);
             transition: all var(--transition);
         }

         .stat-item-large:hover {
             transform: translateY(-2px);
             background: rgba(var(--primary-rgb), 0.1);
         }

         .stat-value-large {
             display: block;
             font-size: 2rem;
             font-weight: 700;
             color: var(--primary-color);
             margin-bottom: 5px;
             line-height: 1;
         }

         .stat-label-large {
             display: block;
             color: var(--text-secondary);
             font-size: 0.85rem;
         }

         .profile-tabs {
             display: flex;
             gap: 10px;
             margin-bottom: 25px;
             border-bottom: 1px solid var(--border-color);
             padding-bottom: 15px;
         }

         .profile-tab {
             background: none;
             border: none;
             color: var(--text-secondary);
             padding: 10px 20px;
             border-radius: var(--radius-md);
             cursor: pointer;
             font-weight: 500;
             transition: all var(--transition);
             position: relative;
         }

         .profile-tab:hover {
             color: var(--text-primary);
             background: var(--bg-tertiary);
         }

         .profile-tab.active {
             color: var(--primary-color);
             background: rgba(var(--primary-rgb), 0.1);
         }

         .profile-tab.active::after {
             content: '';
             position: absolute;
             bottom: -16px;
             left: 0;
             right: 0;
             height: 3px;
             background: var(--primary-color);
             border-radius: 3px 3px 0 0;
         }

         .tab-content {
             display: none;
         }

         .tab-content.active {
             display: block;
             animation: fadeIn 0.3s ease;
         }

         /* Formulários */
         .form-group {
             margin-bottom: 20px;
         }

         .form-group label {
             display: block;
             margin-bottom: 8px;
             color: var(--text-secondary);
             font-weight: 500;
             font-size: 0.9rem;
         }

         .form-control {
             width: 100%;
             padding: 12px 15px;
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
             border-radius: var(--radius-md);
             color: var(--text-primary);
             font-size: 0.95rem;
             transition: all var(--transition);
         }

         .form-control:focus {
             outline: none;
             border-color: var(--primary-color);
             box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
         }

         .form-row {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 15px;
         }

         /* Listas */
         .settings-list {
             list-style: none;
         }

         .settings-list li {
             padding: 15px 0;
             border-bottom: 1px solid var(--border-color);
             display: flex;
             justify-content: space-between;
             align-items: center;
         }

         .settings-list li:last-child {
             border-bottom: none;
         }

         .setting-label {
             color: var(--text-primary);
             font-weight: 500;
         }

         .setting-description {
             color: var(--text-secondary);
             font-size: 0.85rem;
             margin-top: 5px;
         }

         .toggle-switch {
             position: relative;
             display: inline-block;
             width: 50px;
             height: 26px;
         }

         .toggle-switch input {
             opacity: 0;
             width: 0;
             height: 0;
         }

         .toggle-slider {
             position: absolute;
             cursor: pointer;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background-color: var(--bg-tertiary);
             transition: .4s;
             border-radius: 34px;
         }

         .toggle-slider:before {
             position: absolute;
             content: "";
             height: 18px;
             width: 18px;
             left: 4px;
             bottom: 4px;
             background-color: var(--text-primary);
             transition: .4s;
             border-radius: 50%;
         }

         input:checked+.toggle-slider {
             background-color: var(--primary-color);
         }

         input:checked+.toggle-slider:before {
             transform: translateX(24px);
         }

         /* Modal de Trocar Avatar */
         .avatar-modal .modal-content {
             max-width: 500px;
             height: auto;
             max-height: 90vh;
         }

         .avatar-options {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             gap: 15px;
             margin: 20px 0;
         }

         .avatar-option {
             cursor: pointer;
             border-radius: var(--radius-full);
             overflow: hidden;
             border: 3px solid transparent;
             transition: all var(--transition);
         }

         .avatar-option:hover {
             transform: scale(1.1);
             border-color: var(--primary-light);
         }

         .avatar-option.selected {
             border-color: var(--primary-color);
             box-shadow: var(--shadow-primary);
         }

         .avatar-option img {
             width: 100%;
             height: 100px;
             object-fit: cover;
             display: block;
         }

         .upload-avatar {
             text-align: center;
             padding: 30px;
             border: 2px dashed var(--border-color);
             border-radius: var(--radius-lg);
             margin: 20px 0;
             cursor: pointer;
             transition: all var(--transition);
         }

         .upload-avatar:hover {
             border-color: var(--primary-color);
             background: rgba(var(--primary-rgb), 0.05);
         }

         .upload-avatar i {
             font-size: 3rem;
             color: var(--primary-color);
             margin-bottom: 15px;
         }

         .upload-avatar p {
             color: var(--text-secondary);
             margin-bottom: 10px;
         }

         .upload-hint {
             font-size: 0.85rem;
         }

         .modal-actions {
             display: flex;
             gap: 10px;
             margin-top: 30px;
             padding-top: 20px;
             border-top: 1px solid var(--border-color);
         }

         /* ===== RESPONSIVIDADE ===== */
         @media (max-width: 992px) {
             .menu-toggle {
                 display: block;
             }

             .main-navigation {
                 position: fixed;
                 top: 70px;
                 left: -100%;
                 right: 0;
                 bottom: 0;
                 background: var(--bg-primary);
                 z-index: 999;
                 transition: left var(--transition);
                 overflow-y: auto;
             }

             .main-navigation.active {
                 left: 0;
             }

             .nav-menu {
                 flex-direction: column;
                 padding: 15px;
             }

             .nav-item a {
                 justify-content: space-between;
                 padding: 15px;
             }

             .main-content {
                 margin-top: 70px;
             }

             .profile-info {
                 display: none;
             }

             .groups-grid {
                 grid-template-columns: 1fr;
             }

             .modal-content {
                 width: 95%;
                 padding: 20px;
             }

             .profile-tabs {
                 flex-wrap: wrap;
             }

             .form-row {
                 grid-template-columns: 1fr;
             }
         }

         @media (max-width: 768px) {
             .groups-grid {
                 grid-template-columns: 1fr;
             }

             .community-filters {
                 flex-direction: column;
                 align-items: center;
             }

             .filter-btn {
                 width: 100%;
                 max-width: 300px;
                 justify-content: center;
             }

             .group-actions {
                 flex-direction: column;
             }

             .group-actions .btn {
                 width: 100%;
                 justify-content: center;
             }

             .modal-actions {
                 flex-direction: column;
             }

             .modal-actions .btn {
                 width: 100%;
                 justify-content: center;
             }

             .profile-stats {
                 grid-template-columns: repeat(2, 1fr);
             }
         }

         @media (max-width: 480px) {
             .community-title {
                 font-size: 1.5rem;
             }

             .toast {
                 left: 15px;
                 right: 15px;
                 bottom: 15px;
             }

             .profile-stats {
                 grid-template-columns: 1fr;
             }

             .profile-avatar-large img {
                 width: 120px;
                 height: 120px;
             }

             .modal-header h3 {
                 font-size: 1.1rem;
             }

             /* ===== MENU MOBILE DROPDOWN ===== */
             @media (max-width: 992px) {
                 .main-navigation {
                     position: fixed !important;
                     top: 70px !important;
                     left: 0 !important;
                     right: 0 !important;
                     bottom: auto !important;
                     background: rgba(10, 10, 10, 0.98) !important;
                     backdrop-filter: blur(15px) !important;
                     border-top: 1px solid var(--border-color) !important;
                     border-bottom: 1px solid var(--border-color) !important;
                     padding: 10px 0 !important;
                     z-index: 999 !important;
                     transform: translateY(-20px) !important;
                     opacity: 0 !important;
                     visibility: hidden !important;
                     pointer-events: none !important;
                     transition: all 0.3s ease !important;
                     max-height: calc(100vh - 70px) !important;
                     overflow-y: auto !important;
                 }

                 .main-navigation.active {
                     transform: translateY(0) !important;
                     opacity: 1 !important;
                     visibility: visible !important;
                     pointer-events: all !important;
                 }
             }

         }