.groups-page{min-height:calc(100vh - 200px);padding:40px 0}.groups-page h1{color:var(--color-primary-500);margin-bottom:30px;font-size:2rem}.groups-error{background:var(--color-error-bg,#dc26261a);color:var(--color-error,#dc2626);border:1px solid var(--color-error,#dc2626);border-radius:8px;margin-bottom:20px;padding:12px 16px}.groups-list{flex-direction:column;gap:12px;display:flex}.group-card{background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:12px;align-items:center;gap:16px;padding:14px 18px;transition:border-color .2s,box-shadow .2s;display:flex}.group-card:hover{border-color:var(--color-primary-500);box-shadow:0 4px 12px #00000026}.group-card__main{min-width:0;color:inherit;flex:1;align-items:center;gap:16px;text-decoration:none;display:flex}.group-card__icon{object-fit:cover;background:var(--color-bg-muted,var(--color-border-default));border-radius:8px;flex-shrink:0;width:40px;height:40px}.group-card__info{flex-direction:column;min-width:0;display:flex}.group-card__name{color:var(--color-text-primary);font-weight:600}.group-card__desc{color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;overflow:hidden}.group-card__count{color:var(--color-text-secondary);font-size:.85rem}.group-card__btn{background:var(--color-primary-500);color:#fff;cursor:pointer;border:none;border-radius:6px;flex-shrink:0;padding:8px 16px;font-size:.9rem;transition:transform .2s,background-color .2s}.group-card__btn:hover{transform:translateY(-2px)}.group-card__btn--leave{color:var(--color-text-primary);border:1px solid var(--color-border-default);background:0 0}.group-card__btn--leave:hover{border-color:var(--color-error,#dc2626);color:var(--color-error,#dc2626)}.groups-empty{color:var(--color-text-secondary);text-align:center;padding:24px 0}