*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#e2cfea;padding-top:70px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.navbar{z-index:1000;background-color:#4a1d8a;grid-template-columns:1fr auto 1fr;align-items:center;padding:1rem 2rem;display:grid;position:fixed;top:0;left:0;right:0;box-shadow:0 2px 8px #00000026}.navbar-brand{color:#fff;letter-spacing:-.5px;font-size:1.5rem;font-weight:800;text-decoration:none}.navbar-links{align-items:center;gap:1rem;display:flex;position:absolute;left:50%;transform:translate(-50%)}.navbar-links a{color:#fff;text-decoration:none}.navbar-link{color:#fff;border-radius:6px;padding:.3rem .6rem;font-size:.95rem;font-weight:600;text-decoration:none;transition:background-color .2s}.navbar-link:hover{background-color:#ffffff26}.navbar-signin{color:#4a1d8a;background-color:#fff;border-radius:8px;padding:.45rem 1.2rem;font-size:.95rem;font-weight:700;text-decoration:none;transition:background-color .2s}.navbar-signin:hover{background-color:#ede9f7}.navbar-center{justify-content:center;align-items:center;gap:1.5rem;display:flex}.navbar-right{grid-column:3;justify-content:flex-end;align-items:center;display:flex}.navbar-link-active{text-underline-offset:4px;text-decoration:underline}.dark-mode-toggle{cursor:pointer;background:0 0;border:none;align-items:center;margin-right:.8rem;padding:.2rem;font-size:1.2rem;display:flex}body.dark-mode{color:#e0e0e0;background-color:#240046}body.dark-mode .navbar{background-color:#2d1457}body.dark-mode .group-card,body.dark-mode .post-card,body.dark-mode .event-card,body.dark-mode .create-form,body.dark-mode .members-section,body.dark-mode .settings-section,body.dark-mode .auth-container,body.dark-mode .modal,body.dark-mode .avatar-dropdown{color:#e0e0e0;border-color:#2d1457}body.dark-mode .post-card h3,body.dark-mode .event-info h3,body.dark-mode .home-header h1,body.dark-mode .posts-header h2,body.dark-mode .members-section h2,body.dark-mode .settings-page h1,body.dark-mode .settings-section h2,body.dark-mode .group-header h1,body.dark-mode .delete-modal h2{color:#e0e0e0}body.dark-mode .group-card p,body.dark-mode .post-card p,body.dark-mode .post-card small,body.dark-mode .event-info p,body.dark-mode .event-info small,body.dark-mode .delete-modal p,body.dark-mode .create-form input,body.dark-mode .create-form textarea,body.dark-mode .search-bar input,body.dark-mode .form-group input,body.dark-mode .settings-form input{color:#2d1457}body.dark-mode .avatar-placeholder{color:#2d1457;background-color:#e0e0e0}body.dark-mode .group-avatar-placeholder,body.dark-mode .member-avatar-placeholder,body.dark-mode .settings-avatar-placeholder{color:#e0e0e0;background-color:#2d1457}body.dark-mode .member-item{border-color:#2d1457}body.dark-mode .dropdown-name{color:#e0e0e0;border-bottom-color:#2d1457}body.dark-mode .group-header{border-color:#2d1457}body.dark-mode .group-header p{color:#aaa}body.dark-mode .modal h2,body.dark-mode .modal label,body.dark-mode .dropdown-name,body.dark-mode .settings-section h2,body.dark-mode .settings-page h1,body.dark-mode .form-group label,body.dark-mode .settings-danger p{color:#4a1d8a}body.dark-mode .settings-page h1{color:#e0e0e0}body.dark-mode .settings-danger h2{color:#e74c3c}body.dark-mode .settings-danger p{color:#666}body.dark-mode .mobile-menu{background-color:#2d1457}.container{max-width:960px;margin:2.5rem auto;padding:0 1.5rem}.auth-container{background:#fff;border-radius:16px;max-width:420px;margin:5rem auto;padding:2.5rem;box-shadow:0 4px 24px #4a1d8a1a}.auth-container h2{color:#4a1d8a;margin-bottom:1.5rem;font-size:1.8rem;font-weight:800}.form-group{margin-bottom:1.2rem}.form-group label{color:#555;margin-bottom:.4rem;font-size:.9rem;font-weight:600;display:block}.form-group input{border:1.5px solid #ddd;border-radius:8px;width:100%;padding:.65rem .9rem;font-size:1rem;transition:border-color .2s}.form-group input:focus{border-color:#4a1d8a;outline:none}.error{color:#e74c3c;margin-top:.25rem;font-size:.82rem}.auth-container button[type=submit]{color:#fff;cursor:pointer;background-color:#4a1d8a;border:none;border-radius:8px;width:100%;margin-top:.5rem;padding:.7rem;font-size:1rem;font-weight:700;transition:background-color .2s}.auth-container button[type=submit]:hover{background-color:#3b1570}.auth-container p{text-align:center;color:#4a1d8a;margin-top:1.2rem;font-size:.9rem}.auth-container a{color:#4a1d8a;font-weight:600;text-decoration:none}.home-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.home-header h1{color:#2d1457;font-size:2rem;font-weight:800}.home-header button{color:#fff;cursor:pointer;background-color:#4a1d8a;border:none;border-radius:8px;padding:.55rem 1.2rem;font-size:.95rem;font-weight:600;transition:background-color .2s}.home-header button:hover{background-color:#3b1570}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#fff;border-radius:12px;width:100%;max-width:480px;padding:32px;position:relative}.modal h2{margin-bottom:24px}.modal-close{cursor:pointer;color:#555;background:0 0;border:none;padding:4px 8px;font-size:1.1rem;position:absolute;top:16px;right:16px}.modal-close:hover{color:#000}.groups-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.5rem;display:grid}.group-card{cursor:pointer;background:#fff;border:1.5px solid #ede9f7;border-radius:16px;padding:1.5rem;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 12px #4a1d8a14}.group-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #4a1d8a26}.group-card-header{align-items:center;gap:.8rem;margin-bottom:.8rem;display:flex}.group-card h3{color:#2d1457;font-size:1.1rem;font-weight:700}.group-card p{color:#2d1457;margin-bottom:1rem;font-size:.9rem;line-height:1.5}.group-card button{color:#fff;cursor:pointer;background-color:#4a1d8a;border:none;border-radius:8px;padding:.45rem 1rem;font-size:.9rem;font-weight:600;transition:background-color .2s}.group-card button:hover{background-color:#3b1570}.group-avatar{object-fit:cover;border-radius:50%;flex-shrink:0;width:48px;height:48px}.group-avatar-placeholder{color:#4a1d8a;background-color:#ede9f7;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.2rem;font-weight:800;display:flex}.group-header-top{justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;display:flex}.group-header-left{align-items:center;gap:16px;display:flex}.create-form{background:#fff;border:1.5px solid #ede9f7;border-radius:16px;flex-direction:column;gap:.8rem;margin-bottom:2rem;padding:1.5rem;display:flex;box-shadow:0 2px 12px #4a1d8a14}.create-form input,.create-form textarea{border:1.5px solid #ddd;border-radius:8px;padding:.65rem .9rem;font-family:inherit;font-size:1rem;transition:border-color .2s}.create-form input:focus,.create-form textarea:focus{border-color:#4a1d8a;outline:none}.create-form textarea{resize:vertical;min-height:100px}.create-form button{color:#fff;cursor:pointer;background-color:#4a1d8a;border:none;border-radius:8px;padding:.65rem;font-size:1rem;font-weight:700;transition:background-color .2s}.create-form button:hover{background-color:#3b1570}.group-header h1{color:#2d1457;margin-bottom:.4rem;font-size:1.8rem;font-weight:800}.group-header p{color:#2d1457;font-size:.95rem}.group-actions{align-items:center;gap:.8rem;margin-top:1rem;display:flex}.group-actions button{cursor:pointer;border:none;border-radius:8px;padding:.45rem 1rem;font-size:.9rem;font-weight:600;transition:opacity .2s}.group-actions button:first-child{color:#fff;background-color:#e74c3c}.group-actions button:last-child{color:#fff;background-color:#f39c12}.group-actions button:hover{opacity:.85}.group-details-avatar{object-fit:cover;border-radius:50%;width:80px;height:80px;margin-bottom:12px}.group-details-avatar-placeholder{color:#fff;background-color:indigo;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:12px;font-size:2rem;font-weight:700;display:flex}.group-header{box-shadow:none;background:0 0;border:none;align-items:center;gap:1.5rem;margin-bottom:2rem;padding:24px 0;display:flex}.posts-header{justify-content:space-between;align-items:center;margin-bottom:1.2rem;display:flex}.posts-header h2{color:#2d1457;font-size:1.4rem;font-weight:800}.posts-header button{color:#fff;cursor:pointer;background-color:#4a1d8a;border:none;border-radius:8px;padding:.5rem 1.1rem;font-size:.9rem;font-weight:600;transition:background-color .2s}.posts-header button:hover{background-color:#3b1570}.posts-list{flex-direction:column;gap:1rem;display:flex}.post-card{background:#fff;border:1.5px solid #ede9f7;border-radius:16px;padding:1.5rem;box-shadow:0 2px 12px #4a1d8a14}.post-card h3{color:#2d1457;margin-bottom:.4rem;font-size:1.1rem;font-weight:700}.post-card p{color:#555;margin-bottom:.5rem;line-height:1.6}.post-card small{color:#999;margin-top:.5rem;font-size:.82rem;display:block}.post-image{object-fit:cover;border-radius:8px;width:200px;height:150px;margin:.8rem 0}.post-actions{gap:.5rem;margin-top:.8rem;display:flex}.post-actions button{cursor:pointer;border:none;border-radius:6px;padding:.35rem .8rem;font-size:.85rem;font-weight:600;transition:opacity .2s}.post-actions button:first-child{color:#fff;background-color:#3498db}.post-actions button:last-child{color:#fff;background-color:#e74c3c}.post-actions button:hover{opacity:.85}.post-club{color:#666;margin-bottom:.3rem;font-size:.85rem}.post-club-name{color:#4a1d8a;font-weight:600}.avatar-wrapper{position:relative}.avatar{cursor:pointer;border-radius:50%;width:40px;height:40px;overflow:hidden}.avatar-img{object-fit:cover;width:100%;height:100%}.avatar-placeholder{color:#4a1d8a;background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.1rem;font-weight:800;display:flex}.avatar-dropdown{z-index:100;background:#fff;border:1.5px solid #ede9f7;border-radius:12px;flex-direction:column;gap:.6rem;min-width:220px;padding:1rem;display:flex;position:absolute;top:50px;right:0;box-shadow:0 8px 24px #0000001f}.dropdown-name{color:#2d1457;border-bottom:1px solid #ede9f7;padding-bottom:.6rem;font-size:.95rem;font-weight:700}.dropdown-upload{color:#4a1d8a;cursor:pointer;font-size:.9rem;font-weight:600}.dropdown-upload:hover{text-decoration:underline}.dropdown-settings{color:#4a1d8a;cursor:pointer;font-size:.9rem;font-weight:600;text-decoration:none}.dropdown-settings:hover{text-decoration:underline}.avatar-dropdown button{color:#e74c3c;cursor:pointer;text-align:left;background:0 0;border:none;padding:0;font-size:.9rem;font-weight:600}.avatar-dropdown button:hover{text-decoration:underline}.settings-page{max-width:600px;margin:0 auto}.settings-page h1{color:#2d1457;margin-bottom:2rem;font-size:2rem;font-weight:800}.settings-section{background:#fff;border:1.5px solid #ede9f7;border-radius:16px;margin-bottom:1.5rem;padding:1.5rem;box-shadow:0 2px 12px #4a1d8a14}.settings-section h2{color:#2d1457;margin-bottom:1rem;font-size:1.2rem;font-weight:700}.avatar-preview{justify-content:center;margin-bottom:1rem;display:flex}.settings-avatar{object-fit:cover;border-radius:50%;width:80px;height:80px}.settings-avatar-placeholder{color:#4a1d8a;background-color:#ede9f7;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:2rem;font-weight:800;display:flex}.settings-picture-actions{justify-content:center;gap:1rem;display:flex}.settings-upload-btn{color:#fff;cursor:pointer;background-color:#4a1d8a;border:none;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;font-weight:600}.settings-upload-btn:hover{background-color:#3b1570}.settings-remove-btn{color:#e74c3c;cursor:pointer;background-color:#fff;border:1.5px solid #e74c3c;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;font-weight:600}.settings-remove-btn:hover{background-color:#fdf0ef}.settings-form{flex-direction:column;gap:.8rem;display:flex}.settings-save-btn{color:#fff;cursor:pointer;background-color:#4a1d8a;border:none;border-radius:8px;padding:.65rem;font-size:1rem;font-weight:700;transition:background-color .2s}.settings-save-btn:hover{background-color:#3b1570}.settings-danger{border-color:#fdd}.settings-danger h2{color:#e74c3c}.settings-danger p{color:#666;margin-bottom:1rem;font-size:.9rem}.settings-delete-btn{color:#fff;cursor:pointer;background-color:#e74c3c;border:none;border-radius:8px;padding:.6rem 1.2rem;font-size:.9rem;font-weight:600;transition:opacity .2s}.settings-delete-btn:hover{opacity:.85}.success-message{color:#2ecc71;font-size:.9rem}.delete-modal{text-align:center;max-width:420px}.delete-modal-icon{margin-bottom:.8rem;font-size:2.5rem}.delete-modal h2{color:#2d1457;margin-bottom:.8rem;font-size:1.4rem;font-weight:800}.delete-modal p{color:#666;margin-bottom:1.5rem;font-size:.95rem;line-height:1.6}.delete-modal-actions{justify-content:center;gap:.8rem;display:flex}.delete-modal-cancel{color:#555;cursor:pointer;background:#fff;border:1.5px solid #ddd;border-radius:8px;padding:.6rem 1.4rem;font-size:.95rem;font-weight:600;transition:background-color .2s}.delete-modal-cancel:hover{background-color:#f5f5f5}.delete-modal-confirm{color:#fff;cursor:pointer;background-color:indigo;border:none;border-radius:8px;padding:.6rem 1.4rem;font-size:.95rem;font-weight:600;transition:opacity .2s}.delete-modal-confirm:hover{opacity:.85}.members-section{background:#fff;border:1.5px solid #ede9f7;border-radius:16px;margin-bottom:2rem;padding:1.5rem;box-shadow:0 2px 12px #4a1d8a14}.members-section h2{color:#2d1457;margin-bottom:1rem;font-size:1.4rem;font-weight:800}.members-list{flex-direction:column;gap:.8rem;display:flex}.member-item{border:1.5px solid #ede9f7;border-radius:8px;justify-content:space-between;align-items:center;padding:.8rem;display:flex}.member-info{align-items:center;gap:.8rem;display:flex}.member-avatar{object-fit:cover;border-radius:50%;width:36px;height:36px}.member-avatar-placeholder{color:#4a1d8a;background-color:#ede9f7;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:.9rem;font-weight:800;display:flex}.role-badge{border-radius:20px;padding:.2rem .6rem;font-size:.75rem;font-weight:700}.role-admin{color:#4a1d8a;background-color:#ede9f7}.role-member{color:#666;background-color:#f0f0f0}.role-toggle-btn{color:#4a1d8a;cursor:pointer;background-color:#fff;border:1.5px solid #4a1d8a;border-radius:8px;padding:.35rem .8rem;font-size:.85rem;font-weight:600;transition:all .2s}.role-toggle-btn:hover{color:#fff;background-color:#4a1d8a}.events-list{flex-direction:column;gap:1rem;margin-bottom:2rem;display:flex}.event-card{background:#fff;border:1.5px solid #ede9f7;border-radius:16px;align-items:flex-start;gap:1.5rem;padding:1.5rem;display:flex;box-shadow:0 2px 12px #4a1d8a14}.event-date-badge{color:#fff;background-color:#4a1d8a;border-radius:10px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;min-width:55px;padding:.5rem .8rem;display:flex}.event-month{letter-spacing:.5px;font-size:.7rem;font-weight:700}.event-day{font-size:1.5rem;font-weight:800;line-height:1}.event-info{flex:1}.event-info h3{color:#2d1457;margin-bottom:.3rem;font-size:1.1rem;font-weight:700}.event-info p{color:#555;margin-bottom:.3rem;font-size:.9rem}.event-info small{color:#999;font-size:.82rem}.event-location{color:#666;font-size:.9rem}.event-rsvp-count{color:#4a1d8a;margin-top:.3rem;font-size:.85rem;font-weight:600}.event-club{color:#666;margin-top:.3rem;font-size:.85rem}.event-club-link{color:#4a1d8a;cursor:pointer;font-weight:600}.event-club-link:hover{text-decoration:underline}.event-actions{flex-direction:column;flex-shrink:0;gap:.5rem;display:flex}.rsvp-btn{color:#fff;cursor:pointer;background-color:#4a1d8a;border:none;border-radius:8px;padding:.45rem 1rem;font-size:.9rem;font-weight:600;transition:background-color .2s}.rsvp-btn:hover{background-color:#3b1570}.rsvp-btn-cancel{color:#e74c3c;background-color:#fff;border:1.5px solid #e74c3c}.rsvp-btn-cancel:hover{background-color:#fdf0ef}.event-delete-btn{color:#e74c3c;cursor:pointer;background-color:#fff;border:1.5px solid #e74c3c;border-radius:8px;padding:.35rem .8rem;font-size:.85rem;font-weight:600;transition:opacity .2s}.event-delete-btn:hover{opacity:.85}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:.3rem;display:none}.hamburger span{background-color:#fff;border-radius:2px;width:24px;height:2px;display:block}.mobile-menu{z-index:200;background-color:#4a1d8a;flex-direction:column;gap:1rem;padding:1rem 2rem;display:flex;position:absolute;top:100%;left:0;right:0;box-shadow:0 4px 12px #0003}.mobile-menu-name{color:#fff;border-bottom:1px solid #fff3;padding-bottom:.5rem;font-weight:700}.mobile-menu-link{color:#fff;font-size:1rem;font-weight:600;text-decoration:none}.mobile-menu-link:hover{text-decoration:underline}.mobile-menu-signout{color:#fff;cursor:pointer;text-align:left;background:0 0;border:1.5px solid #fff;border-radius:8px;width:fit-content;padding:.5rem 1rem;font-weight:600}.search-bar{margin-bottom:1.5rem}.search-bar input{border:1.5px solid #ddd;border-radius:8px;width:100%;padding:.65rem 1rem;font-family:inherit;font-size:1rem;transition:border-color .2s}.search-bar input:focus{border-color:#4a1d8a;outline:none}.hamburger-dark-toggle{margin-left:auto;margin-right:.5rem;display:none}.photo-menu-wrapper{display:inline-block;position:relative}.photo-menu{z-index:10;background:#fff;border:1px solid #e0d7f0;border-radius:8px;min-width:150px;position:absolute;top:calc(100% + 6px);left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 4px 12px #0000001f}.photo-menu-item{text-align:left;cursor:pointer;color:#3b0764;background:0 0;border:none;width:100%;padding:10px 16px;font-size:.9rem;font-weight:700;display:block}.photo-menu-item:hover{background-color:#f3eeff}.photo-menu-item--danger{color:#dc2626}.photo-menu-item--danger:hover{background-color:#fff1f1}.success-modal{text-align:center;max-width:360px}.success-modal h2{color:#2d1457;margin-bottom:1.5rem;font-size:1.2rem;font-weight:700}.success-modal-close{color:#fff;cursor:pointer;background-color:#4a1d8a;border:none;border-radius:8px;padding:.6rem 2rem;font-size:1rem;font-weight:700;transition:background-color .2s}.success-modal-close:hover{background-color:#3b1570}.group-tabs{gap:.5rem;margin-bottom:1.5rem;padding-bottom:0;display:flex}.group-tab{color:#888;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;padding:.6rem 1.2rem;font-size:.95rem;font-weight:600;transition:color .2s,border-color .2s}.group-tab:hover{color:#4a1d8a}.group-tab-active{color:#4a1d8a;border-bottom:2px solid #4a1d8a}.about-section{background:0 0;padding:1.5rem 0}.about-section h2{color:#2d1457;font-size:1.4rem;font-weight:800}body.dark-mode .about-section h2,body.dark-mode .group-tab-active{color:#fff}.about-edit-btn{color:#fff;cursor:pointer;background-color:#4a1d8a;border:none;border-radius:8px;padding:.4rem .9rem;font-size:.85rem;font-weight:600;transition:background-color .2s}.about-edit-btn:hover{background-color:#3b1570}body.dark-mode .group-card,body.dark-mode .post-card,body.dark-mode .event-card,body.dark-mode .create-form,body.dark-mode .members-section,body.dark-mode .settings-section,body.dark-mode .about-section,body.dark-mode .auth-container,body.dark-mode .modal,body.dark-mode .avatar-dropdown{color:#e0e0e0;border-color:#2d1457}@media (width<=768px){.hamburger-dark-toggle{display:flex}.navbar-right .dark-mode-toggle{display:none}.navbar{z-index:1000;justify-content:space-between;padding:1.2rem 1.5rem;display:flex;position:fixed;top:0;left:0;right:0}.navbar-brand{font-size:1.2rem}.navbar-center,.navbar-right{display:none}.hamburger{display:flex}.container{margin:1.5rem auto;padding:0 1rem}.home-header h1{font-size:1.4rem}.home-header button{padding:.45rem .9rem;font-size:.85rem}.groups-grid{grid-template-columns:1fr}.auth-container{margin:2rem 1rem;padding:1.5rem}.group-header h1{font-size:1.4rem}.group-actions{flex-direction:column}.group-actions button{width:100%}.posts-header h2{font-size:1.2rem}.post-image{width:100%;height:200px}.create-form{padding:1rem}.avatar-dropdown{min-width:160px;right:-10px}}@media (width<=480px){.navbar-brand{font-size:1rem}.home-header{flex-direction:column;align-items:flex-start;gap:1rem}.posts-header{flex-direction:column;align-items:flex-start;gap:.8rem}.posts-header button{width:100%}.group-card,.post-card{padding:1rem}}